Useful Links for a Frontend Noob

Useful Links for a Frontend Noob

Over the past few months I have been curating a list ofwebdevelopment links. What types of links you might ask? Things that would help a noob programmer (me) learn proper frontend development with ONLY whatever is availabe on the internet. Without getting sucked into the things like “Techstack ABC is the best!” or “Jquery is so last year” paradigms.

Because frontend development is highly opinionated , always changing, and really diverse, its imperative I form my own opinion / style of what “modern web development” is. There’s many wrong and right answers here. Its important that I am able to differentiate them.

And to also keep up with the latest trends, so I don’t waste time learning fringe tech.

Also, since I have very little guidance on learning frontend development, I have to have an almost scientific method approach to validating my questions. Very few of my resource links are blogs or books. Rather, most of them are fairly unbiased search queries.

Below are the resources I use:

Devdocs.io

This is what I use when I need to search the official jquery docs, w3 DOM, or javascript MDN (Mozilla Developer Network) as it provides the most technical information available asides going through the w3 docs directly.

Also, its nice when I edit the MDN myself and my own example notes appear in devdocs.io

freecodecamp

As of July 2017, I finished roughly 281 entries here related to the frontend development certification. Its the most starred github repo for a good reason.

What I find really helpful with freecodecamp is that is provides a solid outline of things I should learn, and projects I should be able to do from scratch.

Its also a solid way of discovering golf code solutions for algorithms. For instance, here is an algorithm for roman numeral converter with 3 official solutions and many user submitted solutions.

Watch and Code

I really like Gordon’s way of teaching how to actually programmatically think like a programmer. This course has helped me understand how

Most 💗 Codepens 2016

Codepen is by far one of my favorite resources there. This is my starting point for finding new popular frontend developers to follow. I search through the top 100 pens of 2016.

Then I dig through these users, see if their definition of “modern web development” matches mine. For me, its KISS (Keep it simple, stupid) and less focus on flashy animations and effects, using as few libraries as possible.

It also clues me in on how often some libraries like bourbon are actually used (not really ever), which HTML preprocessors are most popular (PUG, followed by HAML), how often people use SCSS (a lot), and how many people still use jQuery / bootstrap still (a lot).

Codepen -> Pen Settings -> External Stylesheets / Script / Preprocessors

Will a framework live long term? This is a great way to find out. Codepen has already done all the research and made a business decision on whether to support an easy way to add a framework, stylesheet, script, or preprocessor. Why do the research when someone has done it already?

If a company like codepen added a new css framework like Bulma but not an older one like Skeleton, there’s probably a reason for that. Maybe it had to do with popular demand from users, or the repo maintainer contact codepen to have a quickly added function

Either way, it validates what works long term and is not simply “fringe-tech” or “framework flavor of a month” kind of thing.

Google Search -> “Codepen [INSERT TAG HERE]”

This is super useful when working on something like a freecodecamp project and seeing how other people implement the same solution in different ways.

You can find some terrible examples of code and some really good ones.

Here is a list of “random quote generators” as an example

Google Search -> “Stackoverflow [INSERT PROBLEM HERE]”

Whenever I have a debugging problem or want a factual answer, this is the first thing I search for. The rule of thumb is if I have a problem on my code, there’s a really good chance its not unique and something has asked a similar question.

After I find the relevant answer, I upvote it so I can later make some anki-flash cards with it. This way I can retain the information long term.

If I can’t find the answer, I’m already on stackoverflow, so I wrote a question instead. Sometimes I double or triple post problems I might have in other sister sites like superuser.com / specific subreddits / etc as well, if I need more feedback.

This is especially true for more obscure topic tags like Autohotkey or excel VBA.

Google Search -> “Youtube [INSERT PROBLEM HERE]”

You can never go wrong with a video here. I have a preference to certain youtubers for different topics. Personally I prefer Kirupa, Net Ninja, and Traversy Media as of late.

Google Search -> “Ycombinator [FRAMEWORK_NAME]”

Ycombinator users are all mostly software developers, so there’s bound to be much more deeper insightful debates than that of reddit when it comes to some specific framework or library.

Google Search -> “Reddit [SOFTWARE_NAME] VS _________”

If I’m using a popular software, there’s bound to be a reddit forum post out there discussing the merits of different software out there. Unlike ycombinator, reddit has a way more posts and forums out there related to things like UX / UI / photoshop things in general. Its also a great place to find workflow ideas

Wapplyzer and Builtwith.com

Sometimes I just want to get some actual data of sites I visit, and see what stack / framework / library they run. Its better to validate my own set of data on top of aggregated data I find elsewhere (such as github stars) so I can really see the state of the web change with my own eyes.

This, and I can also see how things like ecommerce sites (excluding amazon, thats far too complicated) organize their CSS on the frontend

CTRL+F [“SEARCH TERM”] in a Style Guide

A great way to find out what the “Good Parts” of Javascript, i.e. which methods are used the most, is to just press CTRL+F and see how many times that phrase comes up in a style guide.

A good example of this is the most popular javascript style guide, https://github.com/airbnb/javascript. I can search popular javascript array methods like .map, .filter , and .forEach that can generally accomplish the same thing

  • Pressing .map reveals 18 hits
  • Pressing .filter reveals 3 hits
  • Pressing .forEach reveals 4 hits

Another good resource for doing this is https://30secondsofcode.org/

  • Pressing .map reveals 33 hits
  • Pressing .filter reveals 37 hits
  • Pressing .forEach reveals 12 hits

This gives me a quick styleguide reference for writing in a functional programming style following ES6 syntax.

All I do afterward is search in google with “Stackoverflow map vs forEach” to get an answer from an authoritative user after and cross-reference.

Tympanus Codrops CSS Reference

I prefer tympanus / codrops over other similar resources such as w3schools or CSS-tricks for my CSS reference. The reason for this is codrops has had a redesign in the past 2 years (2015), so everything is up to date and relevant. W3schools is a good fallback reference, css tricks is great for some specific articles, but a lot of its information is seemingly outdated and not that well organized (looking at the codesnippets portion)

other good runner ups would be cssreference.io, which provides a nice shallow snapshot of most of the popular CSS features

Github Most Starred Repos

Getting a snapshot of the most popular open source repos of all time is a fairly representative sample of what the industry looks like as a whole. Its also how you can validate how strong a framework is, by how many people star it.

Digging through the repo itself, I can look through how often it is maintained by its latest commit, as well as ongoing issues / pull requests to see if its alive and active

It also gives me some idea of what things will stay long term – e.g. bootstrap is the 2nd most starred repo of all time, so its not going away anytime soon, regardless of what people say.

Github is wonderful for searching through useful repos and tools out there. Once a month I check the most starred repos of that month for a specific topic like javascript

I have it currently set with tabsnooze chrome extension to periodically open that tab every month

Ycombinator Forums

Its basically a curated reddit-like programmer feed. I use this to find relevant topics that are of interest to me. There’s lots of great topics here, I generally upvote ones that I enjoy so I can refer back on them later, under my username/upvoted

news.ycombinator.com probably gives the best insights on working in the industry

Alternativeto.net

When it comes to finding alternatives, alternativeto.net is second to none. Close runner ups are going to be slant.co (software), stackshare.io(specific frameworks), producthunt.com (lots of general tools and widgets), depending on what it is I am looking for

I have a lot of software reviews on there as well, feel free to read up more on my PROFILE

Lynda.com

If I need an authoritative video source from the start to finish of a topic, I use a paid service like lynda.com. It has the largest offering of design-based tutorials compared to other sites. Other similar sites include pluralsight, frontendmasters, etc.

Normally I’ll audit a handful of videos to get a better sense of a topic as a whole, find out about 3rd party tool and resources for webdevelopment (such as bubble.js)

In Summary

This is just a list of web links / resources that I find useful for seeing the state of frontend web development. Also, this gives me fallback resources whenever I get stuck on a problem.

Leave a Reply

Your email address will not be published. Required fields are marked *