Self-closing Void Tags Are So HTML4

3/26/18

I’ve technically been using HTML since I was a kid; even if it hasn’t been a consistent part of my career or hobbies I was still familiar with it. My Dad was in IT and he was always teaching me computer related things. I still remember how amazed I was when he demonstrated copying data, over a network, to another computer! That was straight up magic! But this post is about HTML, so let’s get back to that. As a young adult I took a couple of HTML classes at a local community college. They were based on XHTML. That was way back in 2011. Well, in those classes the instructor taught us to always self-close void tags. Like this: 

<hr />, <img />

and so on. I’ve literally been doing that the entire time ever since that class seven years ago. Good student, huh?

Yesterday, when I was working on a project, I got frustrated with how VS Code was formatting my img tags. It was automatically moving some of the tag to the next line. I don’t recall exactly why or what I started searching for online, but it lead me to this post about how we no longer need to close void tags in this HTML5 era we’re in. I went back to VS Code and removed all of the slashes from my img tags and tried to format again. VOILA! It formatted just the way I wanted!

Moving forward, I’ll be omitting the closing slash from now on! I wonder how much time I’ll save? haah

Resources:

  1. https://www.w3.org/TR/html/syntax.html#void-elements
  2. https://www.w3.org/TR/html/syntax.html#start-tags

 

Advertisements

My First Full Stack App!

2/26/18

Yep! I just finished my first Full Stack app tonight and made the final push! That’s why there haven’t been any updates here for a while. I’ve been working on the app every single day- yes literally seven days a week- for around 6 to 10 hours for about six weeks. It was my first time going through all the motions on my own- from wire frame to having a fully functional app deployed online.

I used the MERN stack, which is MongoDB, Express, React, and Node. If you go to the MERN website, they also include Redux and Webpack but I don’t think you can include those in the acronym without it sounding more weird. MEWRRN? MERRWN? ¯\_(ツ)_/¯ Anyways, so, the backend is deployed on Heroku and the frontend is deployed over at Netlify. It’s all up on Github too, which I’ll link to at the bottom.

I learned a ton and I had fun making it, except for the times I got stuck and wanted to throw my laptop out the window. We all have those moments, right? I  hope it’s not just me.

That’s about all for now. I’ll probably have more updates in a couple weeks. I am going to continue building projects, so I’ll try to remember to post some up here.

Da Links:

if action.type = actions.ADD_POST

1/4/18

Yep. I’m learning Redux now; just started yesterday. Before yesterday all I knew about Redux is that it somehow managed the app state- that’s it. Now, I can painfully stumble my way through setting up an action, dispatching it, configuring a reducer, and *crosses fingers* update the store. I think that is a pretty big hurdle I got over with just one day of studying! It’s not pretty or graceful, but I can get it to work. *adds Redux to my toolbox*

Well, it’s 2018, happy new year! I’m back from Jakarta and I’m hanging out in sunny Arizona while the rest of the US is frozen. So, that’s pretty cool. I go back to Seattle in a couple weeks, where I’ll start my job hunt. I’ll probably be targeting React Developer roles. I am still in school though, and I still have a daunting amount of work ahead of me. I have a lot of spare time right now though, because my wife is currently watching our son while I’m off fighting dragons studying and job hunting. I am going to use this time to cruise through as much school work as possible. Hopefully I can turn it into a coffee-frenzied coding marathon!

I have made one React app so far. It is a number guessing game. You can check it out on Netlify.

Super props! A React roadmap for beginners

12/3/17

The last two and a half weeks has been a freakin’ whirlwind!! Baby Anthony has needed our attention almost all day! I shouldn’t be shocked, but I’m a new Dad; I didn’t know what to expect. I knew I would be busy and exhausted but nothing can prepare a new parent properly. It has to be experienced to understand.

I have barely touched any code, but I did manage to learn the fundamentals of React. It took me three days, working around the baby’s schedule. I roughly estimate the total hours to learn it, was about 12. Below is my roadmap. It took me from complete beginner up to being able to code a React component from scratch with minimal reference, style it inline, add some JavaScript interactions, init and update state, and then mount it to the DOM.

  1. Start with this article. It’s not perfect. There are some typos and it’s a little bit long-winded sometimes. Try to see past the flaws though. It explains the concept well. It was simple enough to understand and get me going in the right direction. You should open an online code editor, such as CodePen for example, and code along. If you do choose CodePen, you will need to add Babel, React, and React-DOM within your pen settings.
  2. Next, work through this interactive online lab.
  3. Read through some of the official React documentation. Start with “Hello World” and end after “State and Lifecycle.” You could go through the rest, but I stopped there. I was just trying to learn the minimal amount to get me started on my React journey. Go back and finish the documentation when you’re ready. I recommend this official documentation for one important reason. That is the “law of the land.” I have found that, like everything else computer related, there are multiple ways to get things done with React and that is evident when reading multiple tutorials. Bookmark it for quick access and reference it often. Reactjs.org will keep their docs up to date and will also provide best practice advice.
  4. Some more reading material:
    1. https://edgecoders.com/learning-react-js-is-easier-than-you-think-fbd6dc4d935a
    2. https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76
    3. https://edgecoders.com/so-you-want-to-learn-react-js-a78801d3cd4d

There! That should get you feeling confident with the fundamentals and hopefully hungry for more React knowledge!

It’s a boy!

11/15/17

I havent touched any code for maybe around ten days. It’s for a good reason though. My son was born last week! Anthony arrived on November 8th at 2:50am. Prior to that, I was very busy packing all of my belongings into storage and making my way to Jakarta, where I’m residing for six weeks.

Taking care of Baby A has been challenging. We’re new parents. The first three nights were chaos and my wife and I both felt like crying right along with Anthony! Now though, on day eight, life is much easier. Still challenging at times but at least we can get him to nurse and sleep well. We’re getting into a good routine now. And we were actually able to get out of the apartment today! We went in shifts. I watched him while my wife went to the mall for a couple hours in the morning and she watched him while I went to the gym in the evening.

Hopefully I can get back to my school material soon. I feel like I am losing some skills that I worked so hard at learning! So I’m feeling a bit stressed about that. I was watching a JavaScript tutorial while walking on the treadmill today, just to get a quick refresher. How nerdy is that? I think most people watch movies or music videos, or something like that, while on the treadmill. Me? Nah. Give me a techie tutorial any day!

Anyways, not much code related news to share. Just life stuff, which is not within the scope of my blog so I will keep it to a minimum. *peace sign emoji*

The CSS Framework Rabbit Hole

10/31/17

Happy Halloween!

I went down the CSS Framework rabbit hole tonight. I went on a hunt for a Bootstrap alternative that is 1) lightweight, 2) uses “em” in its media queries, 3) has a decent color palette selection, 4)  syntax that is intuitive and easy to remember, and 5) has control over the grid gutters. I couldn’t find one. I looked at about 25 different frameworks. Did you know there are over 100 of them?

Many of the frameworks had poor documentation and some had good documentation but no examples- and some were only a GitHub page with a couple lines in the description. If I’m searching for a framework to try out, I don’t want to clone a bunch of repos and try out each one individually. I want pretty pictures and code samples!

Foundation came close. It’s a pretty solid framework. It has lots of features and it uses “em” in its media queries. It only has the basic color options though, like the same ones in Bootstrap. I’m not a big fan of the form design either.

I think I landed on a possible plan. I am still mulling it over though. At the moment, I’m leaning towards Yahoo’s Pure CSS Framework. I haven’t actually played with it yet, but their grid system looks quite nice. The framework is minimal, yet still has some good features. However, to add the grid it takes an additional CSS file. Not a big deal, but it would be nice to get it all in one file for convenience. So, I’m thinking I could go with Pure’s grid system and then just grab the modules from Bootstrap that I want. That’s one option, out of many.

Not that Bootstrap is bad. It’s great actually, and I basically went full circle during my search today. Meaning, after I looked at all of the different frameworks I went back to Bootstrap’s webpage and compared my findings. I think it’s the most popular CSS Framework for a reason. It really is one of the best most complete and easiest to learn. Best is too subjective, but I’d still say the top 3 frameworks are Bootstrap, Materialize, and Foundation. I have a tendency to rebel against the most trendy things in life, such as Bootstrap, which is the reason I went off in search of another framework I think.

I have the same issues with Materialize as I do Bootstrap. I don’t ever use all of their features, so the download ends up being unnecessarily bloated. On the other hand, having easy access to all their features is nice. Also, the media queries use px instead of em. Otherwise, they’re fantastic.

It’s a tough decision. Do I go with light weight and minimal features with a modern grid system that I like, or more features than I need and an outdated grid system? Hhmmmm.

That question actually lead me down another path tonight. I wanted to form my own opinion on the CSS file size controversy. Right now, the default Bootstrap 4 minified CSS file is 125KB. There is a lot of talk online about how that is a ‘monolithic’ file. That’s a quote actually. I actually read that somewhere in my research tonight. But it’s not though, even for a cellphone. Consider this, back in 2003 3G was running at about 200 kilobits\sec at peak. That is about 25KB\sec. It would take about five seconds for that Bootstrap file to download. Now, yeah, that feels like forever when you’re staring at your screen, but it’s not 2003. Ok, so let’s fast forward to 2012, when PCWorld ran a test. They found that 3G was ranging from 590 to 3840 kilobits\sec depending on the carrier. At 590kb it would take about two seconds for that Bootstrap file to download. Additionally, that test looked at 4G as well. In 2012, 4G speed was ranging between 2810 – 9120kb, and at the lowest 4G speed the file would download in a little under half of a second. Should I still be concerned about using a framework that fits in a 125KB file, in late 2017? That’s not even mentioning that a popular system like Bootstrap is likely already on the device. So I don’t know; I’m gonna have to analyze it a bit more and sleep on it. ¯\_(ツ)_/¯

But with all that said, in the interest of becoming a better developer and broadening my knowledge, I am going to dig into all three of them, and Pure, and learn how to work with their core functionalities. In the end I am predicting I’ll stick with what I know, Bootstrap, or go with Foundation.

I’ll end with some reading material and a cool CSS compiler I found: