Blog

Frontend Bookmarks

🗓 July 31, 2016⏱ 8 min readEdit this Post Opens in new tab

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 Opens in new tab, 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

The Mozilla Developer Network Opens in new tab is my number one visited website currently. It's my central station. It's not only the biggest and best up to date documentation about web technologies, it also offers awesome articles and guides to learn more about HTML, CSS, JavaScript, DOM, Web APIs and many more.

I just use it for everything. I use it to look up CSS properties, learn more about how certain JavaScript methods work and to find out what attributes belong to a specific HTML element.

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 Opens in new tab 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.

My favorite article on MDN is A re-introduction to JavaScript Opens in new tab. If you're new to JavaScript or want to re-learn or look up the core concepts, I highly recommend this article.

CanIUse

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 Opens in new tab 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 Opens in new tab wrote a small blog post Opens in new tab about it.

PageSpeed Insights

PageSpeedInsights is a great tool I already mentioned and explained in my Website Performance Optimization blog post Opens in new tab 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.

CodePen

CodePen Opens in new tab quotes itself as a "Playground for the front end web" and I think this describes it perfectly. In short, it's a code editor in the browser. You can quickly write HTML, CSS and JavaScript there and immediately see the output.

It even got a console recently so it's now also possible to debug JavaScript. I often use it to quickly try out new HTML, CSS features or prototype something really quickly because this is its biggest advantage: It's fast and you get the result immediately.

It gets new features and updates recently so you can not only play around with simple HTML, CSS and JavaScript, you can also use HTML Preprocessors like Haml or Markdown, CSS Preprocessors like Sass, integrate Normalize.css, add external CSS, add popular JS libraries like jQuery or add external JS.

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 Opens in new tab 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.

GitHub

I think I don't have to write that much about GitHub Opens in new tab 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 Opens in new tab where you can find and browse new projects.

CSS-Tricks

I guess I know about CSS-Tricks Opens in new tab 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 Opens in new tab.

One of my favorite articles on CSS-Tricks is Front End Development is Development Opens in new tab 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 Opens in new tab. 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.

Smashing Magazine

When I wanted to discover more web development resources, Smashing-Magazine Opens in new tab 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 Opens in new tab.

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 Opens in new tab. I wasn't able to attend one so far but it's definitely on my to do list.

Reddit JavaScript & Learn JavaScript

Of Course you have heard of reddit, the "front page of the internet". I use a lot of subreddits and for that reason I really like the JavaScript Opens in new tab and Learn JavaScript Opens in new tab subreddits.

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.

So the JavaScript and Learn JavaScript Reddit pages are great places to get your daily dose of JavaScript. If you're interested in more JavaScript links, especially focused on learning I'd like to point you to my JavaScript learning resources Opens in new tab GitHub repository at this point. I think it's a great collection of resources I've used and am using right now to dig deeper into JavaScript.

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:

JavaScript Weekly Opens in new tab which is obviously all about JavaScript, Frontend Focus Opens in new tab, formerly HTML5 weekly, which is more like a web platform technology roundup and last but not least the Web Development Reading List Opens in new tab. This one is also published on the Smashing Magazine website.

What I really like about this newsletter is, that's it is seperated in different sections like concept & design, tools & workflows, privacy, javascript, css/sass and many more.

Conclusion

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 Opens in new tab.

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me via Email Opens in new tab.

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