Show HN: An illustration of Web Developer tools in 2018 | Hacker News Reader

Show HN: An illustration of Web Developer tools in 2018

github.com

130 pointskamranahmed_se38 comments

I guess it doesn't fit the theme but for indie developers there is an equally important roadmap called the marketing roadmap or getting your product out there roadmap which consists of seo, email marketing, side project marketing, blogging, contenting marketing, etc which is even more complex than this and 1000 times more important than any web development you will ever do.

So... shall we build that roadmap too?

I would be very interested. Are there any people here who can pull this off?

Something like this? https://www.sideprojectchecklist.com/marketing-checklist/

Great work putting this together! Reminds me that being a developer these days is a lot of work with the insane number of tools and frameworks one is expected to know.

Yes, there are an almost intimidating number, but any individual developer will only know a small fraction of these technologies in any great depth.

You could also add WebGL frameworks on the front end: ThreeJS, BabylonJS, PlayCanvas, P5.js, Sketchfab, AFrame, REGL, Unity.

An aside: what would be a good one to try? My purpose: helping kids (10+) rewrite their Scratch games for the web. So something with a nice clean API for pushing sprites around.

I would check out p5.play: http://p5play.molleindustria.org/

It is a simplified API for p5.js, and very quick to get up and running with.

You might also find code.org's Game Lab a useful environment, which is p5.play based, has a sprite editor built in, and has both block based & text based editing support: https://code.org/educate/gamelab

Thanks, I've just had a look at both & they look like great suggestions. I had passed over code.org before, assuming (often an error!) it to be a Scratch clone, but actually it seems like a really useful resource.

What a cluster fuck. By year's end, I wonder how many of these will still be in use.

Most of the projects I saw listed have been in use for multiple years already

I remade this great graph using breakdown-notes so you can have all of the graph on one screen and zoom in or out, make alterations for yourself. You can find it here: https://www.breakdown-notes.com/makemap/load/kamranahmedse

This is great! Like other commenters, I disagree with some things, but you can tell a lot of thought and attention went into this. Thank you!

As an aside: it makes me wish there was an easy way to "fork" diagrams like this, and see what others might come up with.

balsamiq project files are

https://github.com/kamranahmedse/developer-roadmap/tree/mast...

Contribution info

https://github.com/kamranahmedse/developer-roadmap/blob/mast...

Awesome, thanks!

"If you think any of the roadmaps can be improved, please do open a PR ..."

While I appreciate the sentiment, truly fixing these roadmaps is an industry-wide problem. ;-)

All the tools seem to mostly concern web-apps (something interactive). I have to build a essentially static website, what are my options? I am a bit out of the loop, but the appearance of the website is a bit unusual so using just a template is not possible. Should I still use a framework or just code it in raw html? If raw html is an option, how can i reuse stuff (for example hamburger menu on mobile)?

Stuff like gatsby gives you best of both worlds. Reusable component based app paradigms + extremely fast static asset serving.

https://www.gatsbyjs.org/

Check out static website generators like Jekyll (https://jekyllrb.com). If that doesn't meet your needs, you can still use the same tools as for a bigger webapp e.g. Node + React + Bootstrap/Materialize.

A CSS framework like Bootstrap (https://getbootstrap.com) will provide you with some easy to use components.

thank you, Jekyll probably won't suffice. What is the better option for a custom look? The style of the buttoms etc. is custom and not based on material design or any other (and also the main focus of the website). I can't share it the mockups publicly, unfortunatly.

Jekyll (and other similar projects like Hugo) will let you do custom styles. You have to write your own theme, but this is just HTML+CSS with a bit of templating. Far larger projects I would recommend using a CSS framework such as inuit.css with SASS, but for smaller projects you can get away with plain CSS.

Your other option is to use something like Laravel or Rails or Express, and just do server-side rendering. A lot of people are still doing this, and it's still well supported.

The advantage of the static site generators is much better performance / lower resource usage, at the cost of flexibility.

Pretty expansive. Might be fun to see a gamified version where you could compare your own personal skill competency with your friends & coworkers.

Awesome graphs! One nitpick: egrep and fgrep are deprecated since a while ago, plus no need to mention them if bare grep is already in the list

The graphic work is good, but the hierarchies are inconsistent and need more work.

This map is vast but it has a lot of important gaps.

Some other things are just inaccurate. e.g: github required for any path. You could use gitlab, bitbucket, gerrit... plenty of good solutions out there.

Awesome work. Don't forget https://flow.org/ (is it "flow" or "flowtype" ?) on the JS depth track.

As I understand it, Flow is to Go as flowtype is to golang. The project should be referred to as Flow in prose, while flowtype is primarily a tag/keyword for searchability.

Vim/nano and NO EMACS!

Joking aside (I'm actually a vimmer ;), is there any use case for aiohttp if you are using django since django now offers channels?

PS, please don't start a flamewar, they are both good.

i would put docker swarm in grey and kubernetes in yellow..

Looks like a nice overview, although it's a shame to see very little on the .NET/C# front.

Very nice.

I disagree on a lot of things, but who cares.

Yeah, especially the backend part. Java is 1 node while PHP is 15? No mention of any functional language?

Probably reflects the ones the author has most used, I mean, I wouldn't start recommending stuff I've never touched either.

I imagine PRs could fill out more, like e.g. adding Haskell, Erlang etc etc.

This seems to be intended as a tree of achievements gained in the process of developing web, rather than a guide for what to use for any particular instance. Several of the paths I have happily skipped.

The backend could be further broken down into separate parts, each potentially using a different language, in order to give a clearer picture of the options and complexity. 1) web server (request/response), 2) search 3) database/store/access 4) data pipeline/ETL 5) payments

The intent seems to be "how to get a job in this area", not a comprehensive map of everything out there.

It's pretty messy, as it is.

This seems to be missing WebGL and WASM as branches further down the frontend tree.

found a lot of well known words. in every branch. worth the star.

Cool

Reply on news.ycombinator.com