andreasbm / web-skills

A visual overview of useful skills to learn as a web developer

Hello

This is my personal website that can be found on https://andreasbm.github.io 😊 Feel free to look around!

web-skills's Issues

Suggestion: RegexLearn.com

You can add this project for regex learning.

https://regexlearn.com/

Wrong Icon on Servo Browser Engine

The icon for the Servo Browser engine is wrong. It is a new Engine developed by Mozilla and part of it (the CSS Engine) is being used in the current Firefox (since version 57).
Opera, which icon is being used currently, is based on chromium and therefore on the blink engine.

Add Option to Print the Skill Tree as a Poster

I would like to have this skill tree as a poster on my wall. I think it would be appreciated if there was an option to output the skill tree as PDF, so it can be printed as a poster.

Npm scripts don not support Dev Server to tot reload?

as the title

Add TestCafe to the Testing section

TestCafe runs on Windows, MacOS, and Linux. It supports multiple desktop (Chrome, Firefox, IE11, Edge, Safari), mobile, remote and cloud browsers (UI or headless). TestCafe is free to use under the MIT license.

https://devexpress.github.io/testcafe/
https://github.com/devexpress/testcafe

Typo in ARIA item (Accessibility part)

Hello, Andreas!

Just got to know your work on web skills. It is amazing! Thank you very much for such a beautiful thing you made.

I saw a typo there and want to contribute a little bit. It is in the Accessibility part, ARIA item. Screenshot attached.

Add Jest to testing

Jest is rising on popularity when we talk about unit testing and web front/server.

Maybe the addition of jest would be relevant

Additional links might warrent section pages for each of the hubs

At the moment its just a hover for links but this could be used to house section pages that goes to individual parts of the technology. Example being props for react you could use this as a crowdsourced platform.

Adding SQLite

As SQLite is pervasive (literally the most installed DB on earth), and is very similar in API to Postgres, it seems like it deserves a little love.

This is useful for people making little PWAs & SPAs or working with their browsers addon/plugin system.

Add Cloud section

Either expand the Servers section or add its own category with Cloud technologies and providers would be nice. Thanks!

Add other compile-to-js languages and frameworks

• Elm
• ReasonML
• PureScript
• Cycle.js

Add Ember to the Frameworks section

Hey there 👋

First of all, what a great site 🎉 It's always great to see people putting so much effort into making sure people know what resources there are out there to learn (especially the more complicated the web dev world gets!)

I noticed that Ember is missing from the framework section. I'll see if I can put together a quick PR to add it if that helps, I found the data folder and I think I know what is needed to add it 😂

Filter for completed state

Being able to only show (un-)completed skills would be great!

I'd be happy to look into this, haven't worked with WCs/lit before though so might take me while :)

Typescript, Sass should come under a different section than build tools

These are languages on their own which require larger quantum to learn than build tools. Maybe a section about "New Languages" can be added to include these.

Add GitLab inside VCS in Team Collaboration section

Consider other category for NodeJS

Hi,

first of all thanks for this project 🙌.
I use it to either give away if I get asked for useful resources and to find resources myself.

I noticed that NodeJS - also NPM - is categorized under Build Tools, which I think is wrong.
My suggestion would be to include NodeJS in the JavaScript sub category and put NPM under it.

Add OpenAPI / Swagger as a subskill under REST API

OpenAPI specification, previously known as Swagger is the open standard for describing RESTful APIs.
It's the most broadly used machine-readable API definition standard.

https://www.openapis.org/

See PR #17

Content Management

Hey,
I noticed that Content Management Systems are missing from this (very awesome and comprehensive!) overview. Is that on purpose?

Otherwise I'd suggest adding the various different models for Content Management – "normal", Headless, Hybrid, Flat-File CMSs etc. :)

Along that line you could also go into the different paradigms for building and serving sites/applications: server rendered, prerendered (Static Site Generators), Single Page Applications, static sites... The PWA section already touches this briefly with the "Routing" section but I believe it warrants its own – not sure what the right name for it is though. It's also very directly linked to Content Management as it basically is all about how and when the data gets into the page.

Bad link in SQL

https://medium.com/better-programming/the-last-sql-guide-for-data-analysis-youll-ever-need-17ae10fa4a6f
The content of the link has been moved or deleted

Content tree is broken when we put more than 3 nodes

We could to refactor this css behaviour. But I decided to see if is this really a bug.

Marking subjects as learrned

Hi!

When I first opened the page I thought it was a way to have steam achievements like overview of what you already know. While this is a rather big thing, even implementing a way to locally mark something as learned would provide a nice way to keep track of what someone has learned. It would also be nice to have a CV passport type link one could share to show how well versed someone is. Granted its a bit an overkill but just something to think as next step of this project.

clamp() with relative units for application in font-sizing

what do you think about this article:
https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

I think you can add this to responsive design

I am not that experienced and if you are free I appreciate if you can share your input if the article is good to use or there are better ways, because reading responsive design>relative units I think this is easier to do. Thank you in advance!

Some additional beginner-friendly resources?

Hey @andreasbm - I didn't see suggesting new resources in your contribution guidelines, so I wanted to ping you here :-)

I have written a lot of popular (and free) beginner-friendly resources on https://www.kirupa.com. The ones that I think will be particularly helpful would be my content around Web Animations (this content was turned into a popular book by O'Reilly), React (each article is paired with a free video as well in addition to also having a popular book version published by Pearson), and Canvas.

What do you think? I think visitors to your guide will find my content helpful.

Thanks,
Kirupa

Add non-git VCS options

Discuss whether resources from W3Schools should be included

huh?

Contribute translation

I want to provide a Chinese translation document, what should I do?

Add a cross-browser point to the CSS or HTML list.

I believe that it is important for a developer to be able to code for all platforms and to know that his favorite css properties may suddenly not work and why.

How to change icon?

How to change icon?

@andreasbm @web-padawan @shaswatsaxena @AkshatJen

Favicon images for the same site do not cache

Many resources reference the same domain (e.g. MDN at developer.mozilla.org), and therefore load the same favicon image.

However, because the full page URL is passed to plus.google.com/_/favicon each response is unique and the image is not cached.

This adds a lot of multi-second delays to fav icons being displayed.
I'd suggest changing the calls to load the fav icon to be the domain only, not full page URL so they share the response.

Web

Test methodologies like Property Based Testing and Mutation Testing

Hello 👋

I believe the testing section could be made richer with other test methodologies like:

• Property Based Testing: see http://github.com/dubzzz/fast-check
• Mutation Testing: see https://github.com/stryker-mutator/stryker-js

They increase the confidence devs can have in their tests. The two techniques above are pretty different but they both make tests more solid.

Please let me know if you think those techniques could make it. Thanks a lot for the project, it gives a great overview of the many subjects web devs may want to cover and know.

Url to start in compact mode

It would be nice to provide and url to start in compact mode by default (?compact=true or #compact).

Thanks for considering.

Newbe question

I've foked the project to do the same for the AGILE PEOPLE. I've started to edit on my fork. When I got to my git IO page it doesn't update. Could you help me?

Structured data is missing

Hey 👋

I don't know exactly where I would put that, but I think https://schema.org/ should be included.

Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.

Schema.org vocabulary can be used with many different encodings, including RDFa, Microdata and JSON-LD. These vocabularies cover entities, relationships between entities and actions, and can easily be extended through a well-documented extension model.

Bad Link in CSS

https://jonathan-harrell.com/whats-the-deal-with-margin-collapse/
in CSS - > Margin Collapsing

Add lawsofux.com

Under 10. Design and UX, I think you should add https://lawsofux.com/ somewhere. It's a great reference website and has a lot of good principals that may not be covered elsewhere on your website.

Adding resources related to Spring, Spring boot, Hibernate,JPA

I've found really good resources related to JS and frontend but resources related to Java as backend are not very much known so it would be great if those are added. :)

add kubernetes in Servers section

May be the addition of Kubernetes is relevant because Docker is already there. Or may be we can add "Container" entry with sub entries of Docker and Kubernetes.

Learning resources:
https://kubernetes.io/docs/

add AsyncAPI in API section

AsyncAPI is the industry standard for defining event-driven/asynchronous APIs (just like OpenAPI is a standard for defining REST APIs)

Any DSA?

hii
this is rather a request than an issue
would it be nice to add any DSA help in this collection...
I, personally feel it would be a huge help to the community...

Addition to svg material

https://css-tricks.com/lodge/svg/
This link is good for people to understand SVG before going forward with other advanced links.
Thank you.

Web Components section: proposals section

FIrst of all, thanks for the great project! Let me suggest some ideas for Web Components part:

1. Constructible Stylesheets lack consensus at the moment, and are effectively Chrome-only. So, I would recommend to either remove them until consensus is reached, or downplay.

2. Proposals section is lacking. IfMO, the following items would make sense to be listed there:

• Form Participation
• Custom :state pseudo class
• AOM
• Constructible Stylesheets

🎆

Feature suggestion: Add GTmetrix to Audits section

I think GTmetrix could be a good audit tool to include. I personally like using Lighthouse more, but it's good to have more options that provide a different opinion or perspective.

"versions web-skills"

Hi all.

I would like to know what you think about the idea of ​​having a different version of web-skills. Have you all ever thought of creating a web-skills version for the backend, something like backend-skills or

Other complementary ideas

• design-skills
• security-skills
• science-skills
• marketing-skills
• opensource-skills

?

I was thinking about having the same layout, but approaching some interesting ideas

Typos

Thanks for making Web Skills; it has been a great resource! I wanted to contribute at least something to the project by making this issue. If I have time later, I may be able to make a pull request for these changes. Also note that I am in no way a great English speaker, so my suggestions may be wrong. These are mostly just things that "sounded off" when I read them.

Fundamentals > HTML > Syntax
Change "it's" to "its".

Fundamentals > HTML > Basic Tags
Add a period for consistency.

Fundamentals > CSS > Syntax
Change "it's" to "its".

Fundamentals > Javascript > Syntax
Change "it's" to "its".

Fundamentals > Javascript > Template Literals
Change "and help" to "can help".

Fundamentals > The Browser > Debugging
Change "basics concepts" to "basic concepts".

Accessibility > ARIA
Change "descriptions an labels" to "descriptions and labels".
Change "help assistive technology understanding your website"
to "help assistive technology understand your website"
or "help assistive technology in understanding your website".

Web Components > Constructible Stylesheets
Change "shadow dom" to "Shadow DOM" for consistency.

Progressive Webapps
Change "API's" to "APIs".

Progressive Webapps > Loading Performance > Dynamic Import
Change "javascript" to "Javascript" for consistency.

I would do "JavaScript" (which would include changing it in many other spots), but since many of the linked resources capitalize the S, I assume there's a reason that it's not done here.

Progressive Webapps > Loading Performance > Codesplitting
Change "codesplitting an how" to "codesplitting and how".

Progressive Webapps > Loading Performance > Caching
Change "how it can be uses" to "how it can be used".

Progressive Webapps > Rendering Performance > Stack
Change "staack" to "stack".

Progressive Webapps > Security > Cross-Site Scripting
Change "these kind of" to "these kinds of".

Progressive Webapps > Security > Clickjacking
Change "these kind of" to "these kinds of".

Build tools > Module Bundlers
Change "module bundler and how they can help"
to "module bundlers and how they can help".

Testing > Acceptance Testing
Add a period for consistency.

Testing > Continuous integration
Change "and it" to "and how it".

Architecture & Paradigms > Paradigms > Programming Paradigms
Change "paraigmes" to "paradigms".

Architecture & Paradigms > Paradigms > Higher-Order Functions
Change "higher-order functions and how it"
to "higher-order functions and how they".

Design & UX > Hit Targets
Change "Learn about hit targets can why"
to "Learn about hit targets and why".

The Modern Web > Streams
Change "effeciently" to "efficiently".
Change "help you efficiently transporting"
to "help you in efficiently transporting"
or "help you efficiently transport".

The Modern Web > Speech Synthesis
Change "help you converting"
to "help you in converting"
or "help you convert".

The Modern Web > Observers
Change "get comfortable concepts"
to "get comfortable with concepts".

The Modern Web > Intersection Observer
Change "Learn how to use the [] can help you"
to "Learn how to use the [] and how it can help you".

The Modern Web > Share
Change "help users sharing"
to "help users in sharing"
or "help users share".

The Modern Web > Credentials Manager API
Change "how it can help authenticating"
to "how it can help in authenticating"
or "how it can help authenticate".

Algorithms and Data Structures > Analysis > Cost model
Change "how to setup" to "how to set up".

Databases & Servers > Servers > Request-Reply Protocol
Change "eachother" to "each other".

Great work but let's not scare the cows

I think this is going to be a great resource for people moving forward.

But it's also being spread on Twitter as something that beginners and newcomers should reference. And with that I think there's some responsibility to the new generation (and even folks who have only been in this game a short while) to let them know that the content here is not something they're expected to know in total, but rather that these skills are learned over the course of a career.

With that, perhaps a banner, vanishing slide-down, or some other kind of noticeable alert to that effect could be added.

Maskable icon

Add a Maskable icon to the web app manifest.

I would be willing to make a PR if you want me to.

The popup links are difficult to read

The links are written in blue with a dark background, is not a good combination due to contrast issues.

Adding Shell/bash commands and scripting

stuff like using diff e.g.