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:
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.
I really like Gordon’s way of teaching how to actually programmatically think like a programmer. This course has helped me understand how
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
.filter , and
.forEach that can generally accomplish the same thing
.mapreveals 18 hits
.filterreveals 3 hits
.forEachreveals 4 hits
Another good resource for doing this is https://30secondsofcode.org/
.mapreveals 33 hits
.filterreveals 37 hits
.forEachreveals 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.
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
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.
I have it currently set with tabsnooze chrome extension to periodically open that tab every month
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
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
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)
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.