 Hey, everybody, everybody see all right cool. There's a lot of little things on here and if you miss those you miss the whole talk I'm kidding So I'm doing real quick. I make things. I like crochet. I like well got a knitter up here. That's awesome Talk to you later about that. I love karaoke. So if anybody knows a karaoke bar that's open tonight in Asheville, let me know And we'll do go do that for the party But the slides for this and everything else I do we're out on my website mcdwayne.com Which is 2016 theme and modified beautiful beautiful theme on Twitter. I love Twitter mc. Dwayne out there as well You're sensing a theme there, but I'm also here from behalf of pantheon, but I don't have the time to talk about them We're out there in the hallway come talk to us. We love you Real quick. I just want to know who's in the room just in a sense of like who saw this on the schedule I'm like I'm coming in the room for that talk Wow, that's a good number. That's more than I expected for a lightning talk session Who here is a full-time developer? What you do is develop awesome. You're gonna get a lot out of this talk Who here is a designer? Awesome, you're gonna get a lot out of the stock. Who's a content editor or writer? Okay, that's actually what we're with this talk for so everybody else bear with me But this is a true story this is this is I was doing a project management thing inside of pantheon and having a bad time connected to YouTube apparently and I would have these Spreadsheets but had the document that laid out exactly the way I like to lay out a document and Then I pasted it into Gutenberg and it looked like this I was like what the okay, that's not what I wrote because what I originally wrote was This which you know, it's it's indented. It's you know laid out with numbers there and you know Ordered lists. I like numbered ordered lists and then just it didn't know what to do with any of that and That's just tragic because there's this is a solved problem Because in my research for this someone said that it's much more eloquently than I ever could What I need is a universal format that just allows my content to be transported I want to write once and transport everywhere and Turns out I'm the only person that wanted this because we've had marked down for quite a few years now And that's what this talk is all about So if you go to Wikipedia, it says this and nothing wrong there. It's just that's a bunch of words What does that really even mean? Well, hopefully by the end we'll we'll suss that out Maybe these guys I think it's important to stop and remember that all of the stuff We talk about wasn't made by like Them or another it's made by us. We're the open-source community everyone's in here You never touch code in your life welcome You were part of the movement that is open source and these guys said to each other Hey, there's got to be a better way to do this thing. We're doing that's that's invent a structure that will let us Transform this notation into beautiful exceed xhtml or just html began the right Aaron went on to Be credited as founder of reddit The guy on the left John Gruber is still doing well, but there's no other stuff with his life And this is it. This is pretty much the rest of this talk We're gonna explain what the heck you're looking at here on the right hand of my screen right side of the screen up here That's markdown. That is the notation. So if you already got this and you know what I'm talking about You can go get coffee earlier or whatever you want Otherwise, we're gonna like pretty much walk through this and explain how it got to be the thing on the right and then talk a little about Gutenberg which is Definitely associated with this so markdown is already everywhere. It's on sites like as far as you know like github Who here goes ever seen a reading me page on github. They're like wow that is not styled at all Yeah, there's a lot of github reading me pages like that whoever sees of get me a github reading me page is like that is gorgeous I Honestly like the WPC li one speaking of WPC li and if you go look at the code on this thing What you see Well, if I look at the raw Make it a little bit bigger Well, we got this mix of these weird terminologies and html because For a lot of intents and purposes. Oh No worries. I guess I'm off a little bit there. Okay. Good to know I think I didn't justify all the stuff to the right all right Or to the left But yeah to the browser it doesn't really care Depending on what system you're using but if you look at like a system that will interpret markdown It's the same thing as interpreting html stack exchange They have that little thing over there on the right that says How to use the how to use markdown for their site? Because this is a little bit different than what we saw here They'll be a little different than what we see here and read it and it'll be a little bit different than what we see in Gutenberg Welcome back to those That's because markdown is not a language. It's not like PHP. It's not like JavaScript There's no official body that says this is markdown Use it this way or don't It's an idea that a couple guys generated and said what did be cool if we had the shorthand notation And yes, you can go to daring fireball that net which is where all of the original code is that Gruber and Aaron came up with that said how do you extend it and what this you could do with this formulation? But important thing to realize if you get into this and like hey, this doesn't work here the same way it does over here It might not how they interpreted that might be a little bit different So know where you're writing to know how they're interpreting all of this But it's everywhere on the internet once you start once you see markdown you can't unsee it and it's just how to How to write HTML really really fast including if you're using this thing called Gutenberg because Matt Mullamig was asked what's your favorite part of the upcoming Gutenberg release? This is back at word camp Europe last year and he said the fact you can copy paste markdown Like you didn't think about it. That was like the first thing he said because that's how powerful this is But why is this really powerful? Well, we'll get to that But that's actually get to what I told you we're gonna do and that's more than markdown So if you have a computer in front of you prepare to take some notes because that will be your cheat sheet You'll never have to look up another cheat sheet ever again if you're writing things down actually you have a beautiful setup there Is that transfer? To elect anything electronically or you got to manually? Okay, just a paper notebook paper. No book is actually brilliant You can write you you can write you can write markdown in up on paper This is one of the beautiful things about it But if you want to like a fancy text editor that will like do what I did in that previous slide where I wrote my Markdown on one side, and then I got the output on the other side All these work and there's no one winner here And if you're like, I don't want to download nothing go to Dillinger.io and see if it works today But stack edit.io is the same thing Is there just online versions of this or you can just go type in one half of the screen the other half screen produces This beautiful HTML you can actually copy paste anywhere Or you can just write wherever you got like I write a lot in texture angler. Yes outdated takes texture angler I love it because the way it works. In fact, this is the blog I'm take I'm writing right now for this camp including all my notes And I'm just throwing markdown as I go and it's already going to transform for me when I'm done Before we go any farther before I lose anyone else Does everyone know what these things are because this is this unfamiliar and there is no shame What so ever in the world to say I'm not sure what that is what this HTML thing is anybody You know that's cool, man, because you got to start somewhere the internet's written in this thing called HTML hypertext market language and These are the common elements. So if you see something with like it's bigger at the top that's probably because they used a header and like italics and bold and These are little symbols that if you look at the code and spec'd element It'll show you like how the page was built and what those things actually mean if you don't know HTML go learn it Code Academy has a brilliant free class a lot of things have free classes and it will make you a much better No matter what you're doing. It'll make you much better web Professional to know HTML deeply because at the end of the day, that's all it is the JavaScript and PHP are just rendering HTML elements at the end of the day That's all it really is headers So this is how we actually do it now that you've gotten your editor up and running or a piece of paper in front of you So headers starting out with my favorite piece um one Astrix or not asterisk one hashtag equals an h1 two hashtags equals an h2 three hashtags equals a Four yeah for exactly or it with h1s and h2s There's this weird underline thing that works in some markdown editors and not others But it's the same idea Why? Why are headers important anybody hierarchy, but why is that important? Accessibility that's the answer. I love the best Which what SEO sure that I would rush rather is focus on accessibility and if we get SEO as a byproduct That's amazing. I've been the other way around But yeah, your pages should be laid out semantically h1 should be followed by h2s We should be followed by h3s and so on and so forth Make it easy for a screen reader to pick up and see what your page is if you ever want to be horrified Go to pet like something you wrote two years ago and then turn on a screen reader Horrifying But I'll make it better developer if you do that. Do you want to put italics on something throw an underscore on either side? Oh, I forgot to mention the one earlier that I don't have a slide for Who here uses slack? Yeah, you that accepts markdown. So all of this stuff. I'm showing you here is how you can stylize slack messages Their version of it again learn what they how they actually implemented it like they all of their underscore in their Not our score. I love their a strike through as well, but I don't have a slide for that Bold won't make something bold throw two asterisks on both sides. That's it. That's the entire how you make something bold so if you like opening brackets and typing B, you know do that but You could also like bold italic things just combine them and in all my testing I've never been able to tell the difference between putting the Asterisks on the outside of the underscore or the inside as long as they're both there and it like it properly closes itself. You're fine This is actually the most practical one I have that I use a lot is ordered lists and unordered lists I like lists. It's easy to organize information Who has ever tried to in Gutenberg create a nested list three items deep? Did you succeed? No, I don't know there's a way to succeed with that Tab messes everything up shift tab causes other problems with my machine. I Don't know if it's just my machine. It's just that's how I test on How you do this and and markdown is if you want an unordered list asterisks the thing asterisks the next thing asterisks the next thing if you want to do a nest in there tab over one and keep doing the same thing you want to Nest one more in there another tab over you want to nest in further another tab over if you want to nest again another tab over You can nest infinitely deep with ordered lists. Not that that's a great idea, but you can Ordered list is just numbers one dot two dot three dot whoever many you got same exact principle works now this one You can't like change up the styling. You're just making an ordered list You're not trying to say okay if it's three nested in and we're using Roman numerals But you'll have an ordered list that you can throw styling on later Depending on what your actual presentation layers is gonna do but creating the ordered lists very quick one two three Links who likes opening their angular brackets and saying a href and then filling in the rest It's kind of fun, but no it's it's not Open close square open close parentheses and that is how links work back here is The link for where we went last night with speaker dinner archetype brewing That's the link and that is the words that is a link that will transform into a magical link when I don't have to touch a href ever again You can also do this other really cool thing that works kind of like footnoting So you can say link or text and another square bracket beside it to put a link to where that link will actually end up going You can do this with numbers. It doesn't matter what text you put in there I just had link for a word But any text like the number one then down at the bottom in a square bracket You have a one colon and then the address and So you can create documents that have hundreds of links But you're managing all those links at the bottom of the document not actually going through the document itself Like in reading within parallel paragraphs comes in handy in certain situations Images this is actually one of my favorite pieces because it forces alt text It doesn't force you to fill in the blank, but it's screen like it's obvious you missed it You just do the exact same formula that you do for a link it's just throw a bang in front the exclamation mark and Gives you a link to an image that an image unfurls and that first square bracket That's your alt text That's it So has anyone like completely lost is this like anybody? No, this is HTML if you don't know HTML. Yep. If you don't know HTML sure I get it that says you have to learn that basic because this is a shorthand for that But otherwise like block quotes anybody actually use block quotes in their day-to-day Like a handful of people I find it useful occasionally, but just it's a Greater than or that's less than it's a closed closed angle bracket Code oh, this is the best in slack Throw back ticks back ticks is right above your tilde are on the same keys the tilde underneath the tilde So don't hit shift when you hit tilde and you get a back tick wrap a single tip back tick on either side of your Text and that becomes code Put three back ticks in a row on a line and then starting to line anything you put between that and the next three Number row back ticks become a code block Very very easy to do and in slack this will save you a lot of headache say alright This variable so start throwing back ticks around variable names or snippets of code or file names And it'll pop out on the screen and it'll be a little easier to communicate There's a lot more But it depends on what you are using and what you're trying to do and what that particular Implementation wanted you to do if you go to daring fireball and look like the extensions. They've built There is full like graphing a text-based graphing tools They've built in with like very simple lines and like drawing underscores under underscores in the right order you can make these beautiful diagrams They just like magically make themselves by just putting a couple lines together Logically that very easily and human readable at underline all this it should be human readable There's where we get to Gutenberg So Gutenberg accepts copy paste markdown and it just transforms it on right. That's how I make my blog And also Gutenberg has this wonderful feature that I have loved ever since I first touched it that if you feed it Naked URL that it knows what to do with it just does the thing it's supposed to do and form a block around it So I don't go in and I never have ever actually hit Make a new Gutenberg block for YouTube or Twitter and then through in the URL I just feed it a naked URL and it's like I know what to do with this. Okay, and it's good Which means I can take this Very simple just a bunch of text on a screen and turn it into this Which is a demo post-ab I think this is all on my site if you go look at any of my site Post on my site. This is how they were almost all created. I want to speed through this very last part, but I Keep saying it's copy paste and it is and if you like copy-pasting things go for it. It's awesome. I Don't like copy paste because it's manual When I first gave this talk they advertised it this way because I had told them in a conversation like I do it Because I have to log in my WordPress site anymore and they advertise that so I'd like write the rest of the slides to justify that But it's true. I don't log in my WP admin ever again because I love the WP CLI it lets me do everything I need to do almost everything I need to do like 99% of it because it can do this This is mind-blowingly Amazing and I'm not sure why everyone not doesn't use this to push content around WP CLI lets you move content around from point A to point B. It doesn't matter what point A and point B are Which means if you want to like update content on a server that they're actually taking orders You can build new content off of a staging server without ever touching the database directly do it the proper WordPress way That's very safe, and you'll never blow up your database So I started doing this and I built a proof of concept around this And this is actually how I make my posts is this is I could this is the actual WP CLI command how to make this This post happen pretty complicated. So I built a tool to help me do that It leverages the WP markdown plugin So it will actually transform on right when you push things in instead of copy pasting it will just say all right I accept this file in and I will just transform it in a markdown for you And I love that and I test along the way So this is stupid really complicated enough time to like get into it here But I actually write everything locally like here Store it on github throw it against the dev server Be hat tested on the dev server to make sure everything worked the way I thought it would if that all passes I ship it to my test server then I have visual regression tests to make sure nothing broke upon transport from server to test And if that all works, I push it to production and that sounds overly complicated to publish a blog. You're probably right But this saves me hours a month I'm not kidding like this saves me about an hour every time I post a blog because I make a lot of mistakes And be hat catching my mistakes is way easier to fix let me fix in them by hand But that's all based on this idea of markdown if I didn't have this hyper transportable way to do a thing None of this would be possible And once you start seeing it, it's like regex you will see it everywhere You'll it's just everywhere in the code It's everywhere in mark and in github and you can go to my github and get the code for the thing I just talked about if you really want to post it now This is an example proof of concept, but feel free to use it if you want. I'm not supporting you The truth and there's the rest of those things and there's a lot There's a ton of cheat sheets and tutorials out there find what works for you But seriously it'll take you 20 minutes if you just sit down and like I'm gonna learn this and then you'll never go back It's so much faster great this way. So thanks everybody