There are a lot of great blogs, newsletters, tools, websites out there about Fronted Development. In this blog post I'd like to present you my favorite frontend links and bookmarks which I'm using daily or at least weekly.
I won't categorize them, so this will not be a list of my favorite blogs only, for example, or my favorite github projects. It will be more like the best link-list (for me personally) of every category. Also the list itself will not be in any ranking, I'll just present them to you in a random order.
You'll also be able to find my Frontend Bookmarks on GitHub ↗, so please feel free to make suggestions to this list with your own favorite bookmarks and links. One goal of this blog post will be to get my own list growing as I'm always looking forward to find new blogs or newsletters about Frontend Development. Enough with the introduction, let's take a look at my Frontend Bookmarks.
- Mozilla Developer Network
- Smashing Magazine
Mozilla Developer Network
If I google a specific frontend problem I usually start with "mdn ..." because I've always found a solution there. Mozilla recently started the Learning web development ↗ section which "aims to provide complete beginners to web development with all they need to start coding simple websites".
So if you get stuck anywhere, MDN always explains a solution, if you want to learn more about CSS Layout, HTML audio and video or anything similar, MDN is the place to go.
Do your ask yourself daily "Oh I want to use this new CSS property or this HTML element, but does it work already in Internet Explorer, Opera or in any Android Browser?" If you've answered yes, I have a solution for you. The website caniuse.com ↗ does this job for you.
You just have to browse there, type in a property or element and CanIUse provides you up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
It's also separated by the different versions of every browser, shows the current published version, browser usage and specific notes, known issues and resources. So it's not only showing you, which browser supports what, it is also telling you, why one browser doesn't support this specific CSS property yet.
Great tool I don't want to miss! There is also a CanIUse Node.js module which let's you look up browser support from the command line. David Walsh ↗ wrote a small blog post ↗ about it.
PageSpeedInsights is a great tool I already mentioned and explained in my Website Performance Optimization blog post ↗ so I won't talk that much about it here and just give a brief summary.
You just enter the URL of the website you'd like to test and PageSpeedInsights loads the page on a small screen and on a big screen, analyzes what's good and what's bad on the website and additionally gives very useful advice on how to do better.
As I said I've explained this in depth in my blog post so I'd suggest you head over there if you're interested in learning more about PageSpeedInsights.
Another great thing I love about CodePen is its collaborative thinking. You can share or work together on a "Pen" very easy, you can integrate a "Pen" into your website like I did on this blog post ↗ and you can browse Pens of others to get inspired or learn something new. I love to browse on CodePen daily and see everyday the impressive and amazing work of other developers.
I think I don't have to write that much about GitHub ↗ here, it's a very well known service and I guess every developer used it once or at least heard of it. I think one of the best ways to learn to code is to look at and inspect other peoples code and that's what I love about GitHub.
You get the possibility to browse the code of your favorite libraries, technologies and tools and get an insight of how these people build their software. The other great opportunity GitHub features is, of course, OSS.
Everybody is encouraged to contribute to famous projects. I have to admit that I did not dare to contribute a PR so far, but it's definitely a big thing on my to do list. I also really like the GitHub explore section ↗ where you can find and browse new projects.
I guess I know about CSS-Tricks ↗ since I made my first real steps in web development back when I did my bachelors degree. Originally its articles contained real CSS tricks but this changed so now it covers tricks for almost every section in web development! I really like CSS-Tricks for their great articles and tutorials. They are also the creators of CodePen ↗.
One of my favorite articles on CSS-Tricks is Front End Development is Development ↗ by Geoff Graham where he explains why some people argue that Front End Development should not be considered "real development" and why this is just wrong. It's a great summary of all the aspects a Frontend Developer has to deal with and it clearly shows that we are "real" developers.
Another article, which I think is really one of the best on CSS-Tricks, was recently published by Chris Coyier and is called A Front End Developer is Aware ↗. It just starts off, where the other article stopped and explains the position of a Frontend Developer and why we have to be aware of everything.
"In a general sense, the front end developer is positioned in the middle of lots of other jobs. Everybody involved in a web team ends up talking with the front end developers. That makes sense. The front end developers create the actual thing people interact with. Everything comes together with the front end developer.
Perhaps that's why it's such a fun job! Because the front end developer is this central hub position and dealing with lots of different people doing lots of different jobs, the job can be done better if they are aware. Aware of everything else that makes a website tick."
I really recommend reading this article and again that's exactly what I like so much about CSS-Tricks.
When I wanted to discover more web development resources, Smashing-Magazine ↗ wasn't really hard to find. It's one of the biggest and most important blogs about frontend development and in my opinion it's a place where the best and most researched articles are published.
Compared to other blogs its articles are not short posts or tutorials - they usually dig a lot deeper and explain further contexts. Next to their well researched articles Smashing Mag also publishes the Smashing Book ↗.
The latest published book, Smashing Book 5, is about "Real-Life Responsive Web Design" and I highly recommend it. It covers various topics concerning Responsive Web Design like Responsive Workflow, Design Patterns and Components, SVG, Flexbox, Testing and Debugging and many more.
On top of that, Smashing Mag organizes a great series of conferences: the Smashing Conference ↗. I wasn't able to attend one so far but it's definitely on my to do list.
I try to check them out daily because you'll always find interesting links, projects or tools there or learn something new. Additionally a lot of people present their projects there attached to some problems they would like to overcome and it's really fun to read these stories and help them trying to figure out a solution.
Besides online documentation, blogs or tools for frontend development I'm a big fan of newsletters. I really like the idea that someone sends me an awesome list weekly, where he or she carefully collected the best and most informative links of the week about any frontend development topic.
Sometimes I already got across the most links but this doesn't matter, mostly there is always something new to learn and discover. So far I'm regularly reading the following three newsletters:
So this is it - these are my favorite frontend bookmarks, as I explained at the beginning: in a complete random order and without categorization. It's not a big list and I definitely want it to grow!
So if you've got any link to a blog, tool, newsletter, project etc. concerning frontend development, I'd love to check it out and add it to my collection. Feel free to drop me an email or directly contribute on GitHub ↗.
I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter ↗ or via Email ↗.
If you want to support me, you can buy me a coffee. I would be very happy about it!☕️ Buy me a coffee ☕️
I wish you a wonderful day! Marco