I thought I’d share what I recently watched that inspires me.>
Jennifer De Walt shares her experiences (at JS Conference 2014) of how she learned to code by creating 180 websites in 180 days. It’s inspirational to see how she shares her successes and failures with the audience. Jennifer also mentions that with every site she creates, it is accompanied by a blog post (for each day) and the code is in a GitHub repository. In the past, I’ve tried to demonstrate what I’ve learned using CodePen in addition with GitHub.
As much as I love to copy and paste jQuery scripts, I would like to gain a better understanding of the fundamental reasons of why I should be coding in a certain way and to know the background of what I’m doing instead of merely copying and pasting scripts (Thank you Stack Overflow!)
I’m attempting to compile a comprehensive list of how developers and front-end engineers structure their CSS using the SMACSS (Scalable and Modular Architecture for CSS) approach.
What is SMACSS?
“SMACSS stands for Scalable and Modular Architecture for CSS, and is more a style guide than a CSS framework. On a high level SMACSS aims at changing the way we are turning designs into code. Instead of working in a page mentality where you try to turn a single page design into code, SMACSS aims to identify repeating visual patterns. Those patterns are then supposed to be coded into flexible/re-usable modules, wich should be independent as possible from the individual page context. This is not a revolutionary point-of-view for a programmer, but in the web design world this is indeed a newer way of thinking.”
While creating a prototype for a project (using Bootstrap), I added the Jumbotron component which is described as: “a lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site” and found that my background image wasn’t responsive at all.
According to Bootstrap, “you can modify the variables to your own custom values, or just use the mixins with their default values.”
An example of writing semantic code using Bootstrap is using @extend:
As written by Brad Borrow in the article Using Sass To Semantically @extend Bootstrap, he says that Bootstrap “makes it incredibly easy to write cluttered, non-semantic and non-reusable markup that will render correctly across all browsers.”
He goes on to explain what writing semantically means, “HTML documents are intended to be descriptive of their contents from an information hierarchy perspective. One should be able to read them and know what they are about, not how they will look.”
While working on a project, I used the Yeoman webapp generator and selected; Bootstrap Sass, jQuery and Modernizr. Everything has worked well, the ‘grunt serve’ and ‘grunt test’ commands, however when I want to run the ‘grunt build’ command to upload the contents of my ‘dist’ folder to a web server, I get prompted with the following error:
Looking for Modernizr references in dist/styles/main.css >> svg
Downloading source files
A server error occurred attempting to download a file:
Fatal error: connect ETIMEDOUT
I’m not sure if it’s something to do with my bower components or the proxy that I’m sitting behind?
At the moment, the workaround I’m using is to manually add the scripts (jQuery, Modernizr and Bootstrap) to the scripts folder then to link it to my html files. But surely there is a better way to do this?!