
Show HN: An illustration of Web Developer tools in 2018 - kamranahmed_se
https://github.com/kamranahmedse/developer-roadmap/blob/master/README.md
======
superasn
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.

~~~
iovrthoughtthis
So... shall we build that roadmap too?

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

~~~
karlhughes
Something like this? [https://www.sideprojectchecklist.com/marketing-
checklist/](https://www.sideprojectchecklist.com/marketing-checklist/)

------
Karupan
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.

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

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

~~~
crispinb
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.

~~~
bcjordan
I would check out p5.play:
[http://p5play.molleindustria.org/](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](https://code.org/educate/gamelab)

~~~
crispinb
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.

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

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

------
cher14
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](https://www.breakdown-
notes.com/makemap/load/kamranahmedse)

------
wiremine
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.

~~~
smcnally
balsamiq project files are

[https://github.com/kamranahmedse/developer-
roadmap/tree/mast...](https://github.com/kamranahmedse/developer-
roadmap/tree/master/project-files)

Contribution info

[https://github.com/kamranahmedse/developer-
roadmap/blob/mast...](https://github.com/kamranahmedse/developer-
roadmap/blob/master/README.md#-contribution)

~~~
wiremine
Awesome, thanks!

------
delinka
"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. ;-)

------
LeanderK
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)?

~~~
bartedinburgh
Check out static website generators like Jekyll
([https://jekyllrb.com](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](https://getbootstrap.com)) will provide you with
some easy to use components.

~~~
LeanderK
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.

~~~
nicoburns
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.

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

------
j1elo
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

------
partycoder
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.

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

~~~
rwbcxrz
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.

------
mrep
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.

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

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

------
fiatjaf
Very nice.

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

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

~~~
Tehnix
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.

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

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

------
tebura
Cool

