So before I get into everything – I’ve had an interesting week and unfortunately it’s coming to an end with bad news … RIP Prince :-(.
I started off the week strong-ish, hoping to through everything I outlined in my previous weekly update, but I didn’t make a dint in that list. Not to say I was not productive, my plans sort of changed. All of that was prompted by completing my first FreeCodeCamp project.
The first assignment was to create a tribute page, which I documented here. The assignment called for Bootstrap, which I’m new to. I could’ve easily created a page without Bootstrap in less time but I wanted to follow the rules. As it turns out, learning Bootstrap is a lot of work that I had a hunch I wasn’t all that interested in getting into. So I started reading up on frameworks, how they came into vogue, and comparing the difference between all of them (and there are many, I compiled a list that is not exhaustive within my learning & resources spreadsheet). I found some interesting articles on why Jane Doe doesn’t use frameworks and uses something else called Flexbox. Or they create their own grid systems and style, opting out of a bloated framework. I read so many articles this week, so many I wasn’t able to properly document but I will link a few below. It was like a marathon learning session. My takeaway from all of that research was:
- Frameworks are robust libraries of HTML, CSS, JavaScript & jQuery resources to speed up development of certain styling and functional aspect of a web application from a grid system to icons to plugins activating enhanced page functionality like scrolling feature pictures.
- Frameworks were popularized by developers who were looking for ways to decrease development time and were probably not so fond of the designing aspect. (It’s only very recently that I’ve met people who are not hot for HTML & CSS which to me is funny because I always thought it was so easy everyone and anyone could learn & enjoy it).
- Frameworks are good for quick prototyping and are easily adaptable with tools like Sass and Less. Because it comes with preset styles & function, using it as-is leads to a lot of websites looking alike. Also overriding the framework’s existing styles for customization can become a hassle.
- Frameworks are what you make them but they should not be the go-to for every project.
It didn’t take me long to realize that I probably wouldn’t be using Bootstrap for any of the custom project I’ll work on and dedicating the time to learning it now, just in case I need to throw together a quick prototype might not be the best use of my time. What I did learn is that there are aspect of the frameworks that might be useful as I develop and fine tune my workflow, like the grid system. So I shifted my attention to that and happened upon quite a few resources and kept seeing Susy. What the hell is Susy?
That led me down another rabbit hole. According to “A Complete Tutorial to Susy 2” Susy is “a helper tool that lets you create any kind of grids easily without the need do a ton of math. The beauty about Susy is that it separates presentational CSS from the HTML.” Susy is all about creating and modifying your own grid layouts on the fly. Most frameworks like Boostrap and Foundation include grid systems, but they fixed widths for columns, so you’re locked the existing grid layouts. Now I’m not at the point where I have this incredible need for a special grid system but grids are the backbone of most web pages so having flexibility is a priority.
In order to start using Susy, you need to have Sass installed. I read up on preprocessors last week and somehow I ended back on the subject again, this time I have more clarity, so I’m glad it all came full circle. It definitely has it’s pros & cons but I started to wonder if and how Sass was efficient if you needed to first compile the Sass language into CSS before refreshing to view changes in the browser. That feels like too many steps: save sass file, translate sass to CSS using a compiler (like Koala, Scout or Compass) and then refresh, versus editing vanilla CSS and refreshing. Not so efficient sounding to me… hmmph!
So I started googling solutions to see real-time changes in the browser or in a text editor like Notepad++ or even my Netbeans IDE because how could this process be efficient if it involved all those manual steps (ha! – silly me). Luckily I found all three. Netbeans allows you to write in Sass language and it will compile it into CSS for you when you save. There is a Notepad++ plugin that highlights Sass syntax. I also found a browser plugin called LiveStyle that allows bi-directional editing, including Sass. This just means that you can edit the changes in a text editor and changes will reflect in the browser without refreshing and if you make changes in the browser development environment, those changes are reflected in the original CSS file – pretty cool. For more information on installing Sass on a Windows computer and with Netbeans, check out these tutorials.
So then I set out to figure out how to install Sass and find some beginners tutorials which was the easiest part of the entire learning experience so far. I recently signed up for a Washington D.C. library card which gives me access to Lynda.com courses. There is a Sass Essential Training course and I spent a good portion of Thursday afternoon watching and following along with the videos and it was everything that I needed just to get started. During my research I also learned that Sass is used by the WordPress developers and seeing how that is such a popular CMS, it likely contributes to it’s reputation as the preprocessor of choice. I’ll be using WordPress a lot and so aligning my own standards with other WP developers makes sense.
Once I’m up and running with Sass I’ll have to revisit Susy and other tools that might help with development. The next Lynda.com course I plan to complete is CSS to Sass: Converting an Existing Site as I’m curious about converting existing starter themes like _s to Sass, knowing that it was developed in Sass.
As you can see I’ve sort of veered off my original learning path and I guess that’s typical. This is not traditional and there is not one path to take, I just don’t want to start having too many wild goose chases and learning things that won’t be beneficial to my long-term and short-term goals. I still plan on completing the FreeCodeCamp assignments but likely modifying to fit my own goals. I’ll return eventually, this detour was actually sparked by the need to start the second project which is a portfolio. I did create my subdomain but it’s not active yet.
Self-paced coding activities:
- Completed FreeCodeCamp.com jQuery curriculum. It was a very high-level overview of how jQuery works to enhance the functionality of your web page.
- Completed FreeCodeCamp.com Tribute Page Project
- Completed: Sass Essential Training
- UPDATE: Adding post on Trying Out Sass
Reading Materials:
- What is the Definition of a “CSS Hack”?
- An introduction to PostCSS **I’m still trying to wrap my head around this
- Sass doesn’t create bad code. Bad coders do
- Centering in CSS: A Complete Guide
- How I Built 180 Websites in 180 days and became a YC Fellowship Founder
- Why I don’t use CSS preprocessors
- Lots of reading on prototyping tools – I’ll be using Fireworks although it’s no longer in development. I did learn that Adobe is releasing a product called XD, so once that’s available for Windows I’ll check it out.
Coding Meetups/Events:
- Attended WordPress DC Meetup. Two speakers talked about setting up membership sites in WordPress and also organizing your first website usability test. I’ll return for upcoming meetings, really enjoyed it.
Plans for next week:
- Lynda course: CSS: Frameworks and Grids
- Lynda course: Fireworks CS5: Rapid Prototyping
- Lynda course: Foundations of Programming: Fundamentals
- Resume Freecodecamp curriculum
- Actually read Eloquent JavaScript