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:

 

Advertisements

School Update

10/23/17

I’ve been extremely busy. Not just with school but life outside of school as well. My wife and I are preparing for our first baby. He’s due on November 20th, so I’ve been getting ready for that. He’s not even here yet and he’s already keeping me up at night! haa!

I should’ve been done with school by now, to be honest, but working full time and balancing school life and the rest of my life is very difficult. It’s ok though, it’s getting done! Progress is made every week.

For example, I finished my server-side final project. It is a fully functional job website. You can check it out here: https://infinite-garden-26914.herokuapp.com/. The instructors at Thinkful.com really liked it and gave me some great feedback. It should make for a solid portfolio project.

Moving on to React now!

git checkout -b blog-post

10/01/17

I just added a new “Find Me” page to the blog and added some profile links in there. I also added a “Tags” widget. I’m nearing the end of my Full-Stack class at Thinkful.com, so I’ll be looking for work soon. I’m trying to get all of the various networking platform stuff sorted out. Cross-linking between various profiles and updating contact info and things like that. I don’t have an official portfolio setup yet but I’ll get to that soon. It’s on my long list of things to do.

I’m still working on the final project for the server-side curriculum. I should be done with it this weekend. I’ll get a link posted here when I push it up to Heroku.

This past week I started learning about Handlebars.js. It’s more complex than I thought. I mean, in general, the idea is fairly simple, but the amount of control goes pretty deep. For example, I think it’s pretty cool that I can choose which links to appear whether a user is logged in or not. It’s a pretty handy tool to have in a developer toolbox.

I’ve also been practicing a lot with Bootstrap 4. That’s almost becoming second nature to me now. I’m interested in checking out a couple more CSS frameworks, like Foundation and Materialize, but I haven’t had time yet.

On a personal note, I’ll be on paternity leave November 7th to December 22nd. I probably won’t have a lot of blog posts between now and the end of December.

Study Habits

9/20/17

Last night, I couldn’t sleep. When 3:30am rolled around I made the decision to send an email to work to let them know I wouldn’t be coming in today. So there I was sitting in front of a bright computer screen, feeling very tired, but I knew if I went back to bed I would be staring at the ceiling again.

What’s on my mind? I thought you would never ask.

I’m working on a big school project. This thing is a beast! It’s the final project for the server-side curriculum. I need to build a full CRUD API with JWT authentication and securely store user credentials in MongoDB. It’s consuming all of my time and thoughts. When I go to bed, I’m thinking about code. When I wake up, the first thing I think about is code. Don’t get the wrong idea though. I’m not complaining. It’s just a ton of work and it’s very difficult to prioritize a project that size while also working full time and trying to get daily life stuff done. My apartment is a mess and I have dishes piling up and there are things I’ve been putting off that should get done. I’m assuming if you talk to any other coding bootcamp students they would tell a similar story. I just need to vent sometimes. Really though, I’m enjoying this journey immensely!

Real quick, before moving on, back to 3:30am. What would any developer- of any skillset- do in that position? I opened VS Code and got back to work! I decided to tackle the JWT auth part of my app. Well actually, I have been trying to figure that out for several days but I was close to a breakthrough. I could feel it! As it turns out, I was right. I managed to get my login page to work! I was ssoo excited! That work took me to 7am… and my room was filled with daylight.

Fast forward to 2:22pm. My eyes pop open and my first waking thought is- “whats the next step?” I got out of bed and made some coffee and a snack and here I am back at my computer. I’ll be tackling my user registration page and session today.

But the real motivation for posting today: I want to talk about study habits. My study habits, and things I’ve learned about myself during this journey.

Not comprehensive, and in no particular order because in my opinion they are all equally important; these are four ideas that I try to keep in the forefront:

  • Don’t get ahead of myself.
  • Stay focused.
  • Keep going.
  • Just try it.

Don’t get ahead of myself. I’m a daydreamer. I can stare out of my window into the backyard for hours. Just observing nature and thinking about random things. Often times those random thoughts turn into ideas. Those ideas turn into notepad scrawlings and in-depth research- if I’m not careful. Hours later I realize I have not been productive. That leads me to the next bullet.

Stay focused. Through this coding journey I have become quite good at catching myself right as I start to zone out. Just before I hit the rabbit hole. My focus has improved a lot over the past six to seven months!

Keep going. I run into roadblocks regularly. It’s expected when learning something new. But I think it takes me longer to recover from a roadblock than the average student. I have learned that when I don’t know how to do something, and we’re talking about coding here, I will procrastinate ffooorrreevvvveer. I’ve actually been able to zero in on this study habit and take effort into correcting it. Usually, the procrastination starts the day after, or a couple days after, a major roadblock. Let’s use JWT authentication as an example. For close to a week I have been trying to get it to work. There was a day where I realized that I hadn’t touched a line of code and it was almost 6pm. What had I been doing all day? Nothing! I watched random youtube videos about abandoned ghost towns and Vice videos. It’s weird because I don’t explicitly acknowledge the reason for procrastinating. It turns into an elephant in the room and it takes me facing the reality head on to get back on task. Hence the “keep going” idea. I need to make myself get back to work and try again. I have learned that if I keep going, and I keep researching, and I keep trying, I will eventually figure it out! Which again leads me to the next bullet.

Just try it. I have learned that I can read about a topic and grasp the concepts fairly easily, but then I get stuck when it comes time to actually write some code. “Just try it” has become a mantra. When I get stuck I often say it out loud to myself. I need to remind myself that I’m not going to break anything. Of course, in a live production environment that’s a different story, but I’m just in my local dev environment. I can write some code and refresh the page to see what happens. If nothing happens, or if I get an error, it’s not a big deal. In fact, if I get an error that is probably a learning opportunity. So, just try it has got me through a lot of roadblocks.

As I’ve often done, I’ll leave you with a video. This is a link to a YouTube series about JWT Authentication.

Brevity in Code.

9/10/17

I recently watched a video that I think is very insightful and as a new developer it was quite helpful. It’s titled Brevity and Visualization in Code. It was centered around writing clean and concise code. Things like, why write long functions when it can be concise with half the lines. Also, the speaker went into reasons for keeping code within the 80 characters limit. He said that over time a lot of developers have thrown that rule out because of the large monitors we have now. A developer might think: “well I can easily read a line of my code up to 120 characters because I have this awesome 32 inch display.” Ok that’s true, but what about your team members? What about your boss while they are traveling with a small laptop? The speaker made an interesting suggestion. He said, try reviewing your code on a different device, such as a tablet, just to see what it looks like for other developers. That was just a couple of the topics covered.

Sounds like an informative video, huh? I would love to link you to it, however it has since been removed from the user’s YT page. I don’t know why. I forget who the speaker was too. I will be on the hunt for it though, and when I find it I will try to archive it and link to it from a future post. I would like to be able to re-visit it along my coding journey.

That video actually made an impact on me. It opened my eyes and made me think. When I finished watching it I opened VS Code and looked for any option to somehow highlight character 80. I found a user setting for a vertical ruler. Here’s how:

  1. Open the Command Palette
  2. Enter in user settings and press enter
  3. Enter in ruler
  4. Edit the setting for “editor.rulers”
    1. I set mine to 75. In my own opinion, it isn’t a hard rule. It’s just a warning, and I have already noticed a difference in my code. As I’m approaching the ruler, I start looking for a graceful breakpoint to drop my code down to the next line. If there isn’t one, and I go a few characters past 80 I’m not going to lose sleep over it.
      1. When you encounter a webpage with a wall of text, spanning from left margin to right margin, how likely are you to read it? What if that text was placed into three columns? A little more likely in the latter scenario, I bet. It would be the same mindset for code review.

We want less code like this:
{company: "Ninja Coders", title: "Engineer", technologies: ["HTML", "CSS", "JavaScript", "React"]}

…and more of this:
{
company: "Ninja Coders",
title: "Engineer",
technologies: [
"HTML",
"CSS",
"JavaScript",
"React"
]
}

…right? WordPress doesn’t do a good job at indenting pseudo code, so that might not look good on your screen but you get what I’m trying to say.

Speaking of indenting, the presenter covered that as well. He was saying that we have become obsessed with lining everything up, to a point where we end up with really crazy indentations sometimes. It can actually back-fire and make it look more chaotic sometimes. He showed a few examples that he has seen over the years and discussed ideas about cleaning it up, so the code would be easier to interpret. This also lead to a discussion about comments and he showed some examples of code comments that had a bunch of asterisks around them. He said we usually dive into the code first, so why waste so much space on comments. It’s true, when I review someone’s code I usually try to figure out what is going on before I read the comments. It’s like when you get a new gadget- most people tinker with it before they read the instructions. Maybe we should focus on better naming conventions. Let the function or class name explain its purpose.

It was a really great video and I hope I can track it down!

Cheers to clean code

Home Stretch! …almost

8/24/17

I made it to the final project of the server-side course! After this, only one more unit to go- which is React.

Also, I just made my first comment on Stackoverflow tonight! That’s an exciting moment for a new developer! Look for username: bprdev.

Not much else to share tonight. Just getting started on my final project. I dont have anything to show yet. It’s all prep stuff so far. I’m planning on making a job posting site using Node, Express, MongoDB, and API CRUD methods. I’ll post a link when I get it finished.

db.bprdev.insertOne(blogPost)

8/14/17

About two weeks ago I got my first intro to MongoDB. I picked up on it really fast. My past SQL experienced helped. Even though it is different commands, and I’m dealing with an object instead of tables, it’s still the same concept. So I cruised through my MongoDB school lessons with out any issues. I like working with MongoDB a lot. I’ve always liked working with databases actually. Many years ago I took a class that was supposed to prepare me for the MCDBA cert, but I never ended up taking the test. But anyways, back to school stuff.

Then I learned how to deploy to Heroku with a DbaaS via mLab. It’s fun to think about how far I’ve come in these past five months. If I read that first sentence five months ago I wouldn’t have any idea what it all meant. But now it’s no big deal. Heroku and mLab are cloud based services for developers to deploy their apps and data to. And DbaaS stands for Database As A Service, AKA a cloud based database.

So after that, I moved on to Mongoose and learning how to create schemas, and data models.

While trying to juggle school and work, I also managed to go to a few JavaScript meetups. It’s been a fun and rewarding experience! I met a few devs in the area and another dev who works remotely. He was just passing through Seattle and heard about a JS meet so he stopped by. I’ve learned way more than I expected, just by chatting with fellow devs in the community. I am generally a shy person, but when it comes to something I enjoy and something that I am very interested in, I can get pretty talkative. I had a good time, but I don’t expect to go to a lot more meetups in the near future. I have a lot of school work to catch up on. When it comes time to start looking for work I will definitely get out to more meetups.

Today, I finished my last Mongoose lesson. I’m moving on to authentication and access control using JWT now. It’s about 9:30pm right now. I’m gonna hit the books for another couple hours and then crash, and then wake up and hit it again. Honestly, I dont even know what JWT stands for or what it’s about. I know nothing about it. I’m just glancing over at my lesson itinerary as I type this. So hopefully in my next post I’ll be able to explain what it is.