I’ve been tinkering with websites for nearly 20 years. My friend Hunter and I were big into making terrible Angelfire sites as pre-teens. In high school, my dad paid me to make him a webpage for his doctor’s office (I used Frontpage). A year or two after that, I read Kevin Yank’s “Build Your Own Database Driven Website Using PHP & MySQL” and hacked together a PHP back-end for a Lord of the Rings fan site.
In recent years, I’ve put together this blog, shouldigetaphd.com, and a few other simple web-based side projects. However, I haven’t kept up with modern web development, and my projects have been hacked together from boilerplate or templates. I’ve programmed professionally since 2011, I’ve spent very little of that writing anything close to graphical user interfaces.
I have a number of other side projects that I’d like to do at some point, and most of them would require some sort of graphical interface. While I could work on app development, I think web-based implementations would be a great starting place.
A few months back, I decided to stop watching Netflix on the treadmill and instead use those 45 minutes each morning to learn; in particular, I’ve been trying to learn more about modern(ish) web design and development. My work has a subscription to Safari Books Online which gives me access to copious technical books and video tutorials.
The number of resources available on Safari (along with YouTube, blog posts, etc) is astounding. I started many video tutorials on Safari that I quickly realized weren’t going to be useful. Yet there many gems to be found, which I share here with you.
What follows is an overview of the technologies I’ve realized I need to learn more about and links to the resources I’ve found valuable in learning about them. If you think there are gaps I haven’t yet filled or better resources than I’ve listed below, I’d love your feedback.
What I Knew Going In
I’ve been a professional software developer and data scientist since 2012. I mostly write Python, but I’ve programmed in a number of different languages.
I have a pretty good grasp on how HTML and CSS work. I’ve used enough Javascript over the years to be dangerous; I understood how it runs in the browsers. I understand what a DOM is and how it relates to the page source.
I’ve used the Python Flask web framework for several projects. I understand how to repond to HTTP requests with server- generated content. I had some idea of how to run my own web server on AWS.
I’ve used Jekyll, Hugo, and Pelican to create statically generated sites.
I understood DNS at a high level, but never really learned what all the different DNS types were, and I didn’t understand why name server changes take so long to propagate.
I had some idea of what node.js and npm are.
I’m a committed Sublime Text user.
A Meta Tutorial on Web Development
A great place to start is Andrew Montalenti’s lengthy tutorial on using Python, Flask, Bootstrap, and Mongo to rapidly prototype a website. The tutorial is out of date, but the principles still stand.
Another great resource is Cody Lindley’s free Front-End Developer’s Handbook. This is a substantial list meta-resource that organizes links for learning all angles of front-end development. “It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools.”
Chrome Developer Tools
One of the most important tools for me in learning more about web development has been the Chrome Developer Tools. You can live edit the DOM elements and style sheets and watch how a website changes. I’ve mostly learned Developer Tools through exploring it myself, but there are lots of tutorials for it on Youtube.
HTML, CSS, and Bootstrap
Many modern websites are responsive: they automatically adapt to various size screens and devices, from phones to desktops. Writing responsive websites from scratch requires deep knowledge of HTML, CSS, Javascript, and browsers. Unless you’re doing this professionally, you probably don’t want to write a responsive site from scratch.
For several projects, I’ve used the lightweight Skeleton project to create simple, responsive pages.
Recently, I decide to dive deep into the more robust Bootstrap framework originally developed at Twitter.
I watched Brock Nunn’s Building a Responsive Website with Bootstrap (Safari), a two hour tutorial on getting started with Bootstrap. The documentation for Bootstrap is clear (if terse) and worth reading through.
Once you have a basic idea of how Bootstrap works, the best thing you can do is start playing with it. Since I was familiar with the Pelican static site generator, I decided to switch this blog to Bootstrap theme starting with pelican-bootstrap3.
I’ve worked with Bootstrap 3 until now. Bootstrap 4 is about to come out. Bootstrap 4 moves the style sheets from LESS to SASS and adds Flexbox functionality. Unless you understand what those mean (more below), you’d be fine using version 3.
I wanted to get a better grasp on CSS Selectors, so I read Eric Meyer’s brief Selectors, Specificity, and the Cascade: Applying CSS3 to Documents (Safari)
I watched Marty Hall’s JavaScript, jQuery, and jQuery UI tutorial). I was able to skip big chunks where I already understood certain parts, but it helped me fill in lots of gaps.
Advanced Stylesheets (LESS, SASS, and Flexbox)
There are several alternatives to writing raw CSS. Two popular ones are Less and SASS. These “preprocessors” allow you to write CSS-like stylesheets but with constructs such as variables, nesting, inheritance, and mathematical operators.
I found this brief tutorial on Less (Safari) helpful, and I’ve enjoyed Less a lot. I haven’t used SASS yet, but it’s very similar. I’ll probably switch to SASS when I start using Bootstrap 4.
Another modern innovation is the Flexbox layout model for CSS. Stone River Learning has a great tutorial on Flexbox (Safari). It seems that Flexbox is the future of CSS-based layouts, and it’s worth learning about.
Advanced JavaScript (Elm, React, Angular, Backbone, Ember)
The JavaScript web framework space has exploded. Many of these are implementations of the Model, View, Controller pattern, including React, Angular, and Ember. These tools allow the creation of complex web apps (as well as mobile apps).
Web Server Operations and DNS
I learned a ton form Linux Web Operations (Safari) by Ben Whaley. “The videos discuss the relationship between web and application servers, load balancers, and databases and introduce configuration management, monitoring, containers, cryptography, and DNS.”
I’ve struggled with DNS configuration over the years, so I watched Cricket Liu’s Learning DNS series (Safari). I still wouldn’t want to be responsible for a company’s complex DNS infrastructure, but I can now configure my own sites DNS with a little more understanding.
Development Automation
Package Managers
It’s likely that any modern web project will have some external Javascript dependencies. Package managers (analogous to Pypi or Anaconda.org on Python) have emerged to help support this. Node.js comes with the npm package manager, but Bower seems to make more sense for front-end development.[^yarn] Cody Lindley has a nice introduction to npm and Bower. Bower is well documented and easy to start using. There is a nice Flask extension to help you integrate Bower with your Python project. (Update: since writing this, Yarn has come to dominate this scene.)
Task Automation
Web development comes with lots of build-style tasks that have to happen repeatedly. For example, before you can render a webpage in the browser, you might need to convert the Less to CSS and start a local web server. Before deploying to production, you might want to also run tests and minify your Javascript.
There’s a GUI application called Codekit that can do a lot of these tasks. You can also do it through a Node.js program called Grunt. I haven’t used it yet, but it looks like following the documentation would be the best way to get started.
Gulp is a popular alternative to Grunt.
Design
Visual Design
Design has never been my strong point. One way to compensate for that is to rely on the work of others. There are copious Bootstrap themes available, and some are even free.
I enjoyed Software Engineering Daily’s interview with Tracy Osborn on Design for Non-designers. She has some blog posts on the topic. Tracy recommends COLOURLovers for color ideas and Font Pair for selecting fonts from Google Fonts.
User Experience Design
On the topic of UX, I finally read Steve Krug’s classic Don’t Make Me Think (Safari); it’s great. Ginny Redish’s Letting Go of Words (Safari) is similarly excellent.
Conclusion
I’ve learned a lot in the past few months. I’ve filled in some gaps about how CSS works. I’ve gotten a better grasp on the Javascript prototype model. I’ve learned that I can start with higher level tools (e.g. Bootstrap and JQuery) to rapidly build my side projects with some amount of visual appeal. I’m learning how to use available tools to reduce the boilerplate I have to write, automate tedious tasks, and reduce my personal technical debt.
I still have a lot of learning and a lot of practicing ahead of me, but I’m starting to feel confident that I could make headway on some of my projects. The modern frontend development landscape is massive, varied, and ever changing, but that shouldn’t prohibit you from diving in if you want to.