andreasbm / web-skills Goto Github PK
View Code? Open in Web Editor NEWA visual overview of useful skills to learn as a web developer
Home Page: https://andreasbm.github.io/web-skills/
License: Other
A visual overview of useful skills to learn as a web developer
Home Page: https://andreasbm.github.io/web-skills/
License: Other
It would be nice to provide and url to start in compact mode by default (?compact=true or #compact).
Thanks for considering.
The links are written in blue with a dark background, is not a good combination due to contrast issues.
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.
AsyncAPI is the industry standard for defining event-driven/asynchronous APIs (just like OpenAPI is a standard for defining REST APIs)
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...
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.
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.
as the title
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".
Add a Maskable icon to the web app manifest.
I would be willing to make a PR if you want me to.
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.
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.
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.
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!
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.
I want to provide a Chinese translation document, what should I do?
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.
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
?
I was thinking about having the same layout, but approaching some interesting ideas
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?
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 :)
You can add this project for regex learning.
https://jonathan-harrell.com/whats-the-deal-with-margin-collapse/
in CSS - > Margin Collapsing
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.
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/
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.
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.
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
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.
Jest is rising on popularity when we talk about unit testing and web front/server.
Maybe the addition of jest would be relevant
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 π
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.
See PR #17
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.
Either expand the Servers section or add its own category with Cloud technologies and providers would be nice. Thanks!
https://css-tricks.com/lodge/svg/
This link is good for people to understand SVG before going forward with other advanced links.
Thank you.
huh?
FIrst of all, thanks for the great project! Let me suggest some ideas for Web Components part:
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.
Proposals section is lacking. IfMO, the following items would make sense to be listed there:
:state
pseudo classHey @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
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.
Hello π
I believe the testing section could be made richer with other test methodologies like:
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.
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
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. :)
How to change icon?
@andreasbm @web-padawan @shaswatsaxena @AkshatJen
We could to refactor this css behaviour. But I decided to see if is this really a bug.
stuff like using diff e.g.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.