Front-End Resources
Tags: webdev, javascript, react, css
Published: 2021-10-10 07:05:58

# Introduction

This is a collection of (awe)some resources, mostly focused on front-end web development.

- [Introduction](#introduction)
- [API](#api)
- [Data-Structures-and-Algorithms](#data-structures-and-algorithms)
    - [Algorithm-Challenges](#algorithm-challenges)
    - [Algorithm-Books](#algorithm-books)
    - [Algorithm-Websites](#algorithm-websites)
- [Design](#design)
    - [Design-Articles](#design-articles)
    - [Design-Books](#design-books)
    - [Colors](#colors)
    - [Design-Systems](#design-systems)
    - [Fonts](#fonts)
    - [Icons](#icons)
    - [Optimization Tools](#optimization-tools)
    - [Stock Photos-Illustrations-Mockups](#stock-photos-illustrations-mockups)
    - [Tools-for-Responsive-Design](#tools-for-responsive-design)
    - [Tools](#tools)
    - [Typography](#typography)
    - [Design-Websites](#design-websites)
- [HTML](#html)
    - [Accessibility](#accessibility)
    - [HTML-Articles](#html-articles)
    - [Checklist](#checklist)
    - [Performance](#performance)
    - [Validation](#validation)
    - [HTML-Websites](#html-websites)
- [CSS](#css)
    - [CSS-Articles](#css-articles)
    - [Architectures-Methodologies](#architectures-methodologies)
    - [CSS-in-JS](#css-in-js)
    - [CSS-Design-Systems](#css-design-systems)
    - [CSS-Generators](#css-generators)
    - [CSS-Videos](#css-videos)
    - [CSS-Websites](#css-websites)
- [Front-End-Resources](#front-end-resources)
    - [Front-End-Articles](#front-end-articles)
    - [Front-End-Challenges](#front-end-challenges)
    - [Front-end-Surveys](#front-end-surveys)
    - [Front-End-Websites](#front-end-websites)
- [Git\&Github](#gitgithub)
    - [Git-Courses](#git-courses)
    - [Git-Videos](#git-videos)
    - [Git-Websites](#git-websites)
    - [Git-Tools](#git-tools)
- [JavaScript](#javascript)
    - [JavaScript-Articles](#javascript-articles)
    - [JavaScript-Books](#javascript-books)
    - [JavaScript-Conference-Talks](#javascript-conference-talks)
    - [JavaScript-Courses-Practices](#javascript-courses-practices)
    - [JavaScript-Tools](#javascript-tools)
    - [JavaScript-Websites](#javascript-websites)
- [React](#react)
    - [React-Articles](#react-articles)
    - [React-Frameworks](#react-frameworks)
    - [React-Hooks](#react-hooks)
    - [React-State-Management](#react-state-management)
    - [React-Tools](#react-tools)
- [TypeScript](#typescript)
    - [TypeScript-Articles](#typescript-articles)
    - [TypeScript-Courses](#typescript-courses)
    - [TypeScript-Challenges](#typescript-challenges)
    - [TypeScript-Tools](#typescript-tools)
- [Other-Content](#other-content)
    - [Blogs](#blogs)
    - [Other-Books](#other-books)
    - [Code-Formatters](#code-formatters)
    - [Developer\&Productivity-Tools](#developerproductivity-tools)
    - [Discord Communities](#discord-communities)
    - [Documentations](#documentations)
    - [Interactive-Games](#interactive-games)
    - [Interview Practices](#interview-practices)
      - [System Design](#system-design)
    - [Newsletters](#newsletters)
    - [Podcasts](#podcasts)
    - [Reddit-Subreddits](#reddit-subreddits)
    - [Roadmaps](#roadmaps)
    - [Online-Curriculums](#online-curriculums)
    - [Youtube-Channels](#youtube-channels)
    - [Mixed-Content](#mixed-content)

<hr />

# API

- [RapidAPI](https://rapidapi.com/collection/list-of-free-apis) - Free Public APIs for Developers
- [any-api](https://any-api.com/) - Documentation and Test Consoles for Over 1400 Public APIs
- [public-apis](https://github.com/public-apis/public-apis) - A collective list of free APIs for use in software and web development
- [API list](https://apilist.fun/) - A collective list of APIs
- [free-open apis](https://blog.hubspot.com/website/free-open-apis) - 30 Free & Open APIs for Marketers & Content Developers
- [json placeholder](https://jsonplaceholder.typicode.com/) - Free fake API for testing and prototyping

# Data-Structures-and-Algorithms

### Algorithm-Challenges

- [CodeWars](https://www.codewars.com)
- [HackerRank](https://www.hackerrank.com)
- [coderbyte](https://coderbyte.com/)
- [exercism.io](https://exercism.io)
- [AlgoExpert](https://www.algoexpert.io)
- [HackerEarth Codemonk](https://www.hackerearth.com/practice/codemonk/)
- [LeetCode](https://leetcode.com/)
- [edabit](https://edabit.com/)
- [NeetCode.io](https://neetcode.io/)

### Algorithm-Books

- [grokking algorithms](https://edu.anarcho-copy.org/Algorithm/grokking-algorithms-illustrated-programmers-curious.pdf)
- [Think Like A Programmer](http://www.r-5.org/files/books/computers/overviews/patterns/V_Anton_Spraul-Think_Like_a_Programmer-EN.pdf)

### Algorithm-Websites

- [Algorithm Visualiser](https://algorithm-visualizer.org/)

# Design

### Design-Articles

- [Pixel Perfect Web Development: 5 Essential Steps by Daniel Corin Stig](https://thewhitelabelagency.com/pixel-perfect-web-development-5-essential-steps/)
- [Learn Responsive Design! by web.dev](https://web.dev/learn/design/)
- [Everything I Know About Style Guides, Design Systems, and Component Libraries](https://leerob.io/blog/style-guides-component-libraries-design-systems)
- [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)

### Design-Books

- [Atomic Design](https://www.softouch.on.ca/kb/data/Atomic%20Design.pdf)

### Colors

- [coloors](https://coolors.co) - color schemes generator
- [Hex Colors](https://hexcolor.co/) - color palette generator
- [Canva Colors](https://www.canva.com/colors/) - multiple color tools
- [contrast ratio](https://contrast-ratio.com/) - contrast checker
- [Adobe Color](https://color.adobe.com/create/color-wheel) - color wheel and other tools
- [Name that Color](https://chir.ag/projects/name-that-color/#9AB4D0) - color namer
- [Accessible Brand Colors](https://abc.useallfive.com/) - accessibilty checker for colors
- [Flat UI Colors](https://flatuicolors.com/) - color palettes
- [Coolors Palette Creator](https://coolors.co/006e90-f18f01-adcad6-99c24d-41bbd9) - random color palette generator
- [mycolor Palette Creator](https://mycolor.space/) - random color palette generator

### Design-Systems

- [Polaris by shopify](https://polaris.shopify.com/)
- [Evergreen Segment](https://evergreen.segment.com/)
- [Eva Design Assets](https://eva.design/)
- [Vercel](https://vercel.com/design)
- [Ant Design](https://ant.design/)
- [Carbon](https://carbondesignsystem.com/)
- [Storybook](https://github.com/storybookjs/design-system)
- [Radix](https://www.radix-ui.com/)
- [Primer](https://primer.style/)
- [Blueprint](https://blueprintjs.com/)
- [Atlassian](https://atlassian.design/)
- [chakra](https://chakra-ui.com/)

### Fonts

- [Google Fonts](https://fonts.google.com/) - huge font library
- [Font Flipper](https://fontflipper.com/upload) - random font generator
- [Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator) - webfont generator
- [Online Font Converter](https://onlinefontconverter.com/) - create @font-face rules and convert fonts online
- [fonts in the wild](https://www.fontsinthewild.com/) - font library
- [webfontloader](https://github.com/typekit/webfontloader) - tool for controling @font-face rules
- [BEfonts](https://befonts.com/) - free fonts for designers

### Icons

- [flaticon](https://www.flaticon.com/) - vector icons & stickers
- [Material Icons](https://fonts.google.com/icons) - huge icons library
- [icones](https://icones.netlify.app/) - icon sets
- [Tabler Icons](https://tablericons.com/) - fully customizable free svg icons
- [iconmonstr](https://iconmonstr.com/) - icon library
- [IcoMoon](https://icomoon.io/) - pixel perfect icon solutions
- [heroicons](https://heroicons.dev/) - free icon library
- [heroicons](https://heroicons.com/) - by the makers of tailwindcss
- [Bootstrap Icons](https://icons.getbootstrap.com/) - free icon library
- [Font Awesome](https://fontawesome.com/) - icon library
- [Simlpe Icons](https://simpleicons.org/) - icon library
- [Icon Finder](https://www.iconfinder.com/) - icon library and illustrations
- [700+ CSS Icons](https://css.gg/) - open-source svg and figma ui icons
- [Streamline](https://streamlinehq.com/) - icons and emojis

### Optimization Tools

- [Squoosh](https://squoosh.app/) - image optimization
- [tiny png](https://tinypng.com/)
- [ImageOptim](https://imageoptim.com/mac)

### Stock Photos-Illustrations-Mockups

- [Unsplash](https://unsplash.com/) - royalty free stock photos
- [Pexels](https://www.pexels.com/) - free stock photos & videos
- [Pixabay](https://pixabay.com/) - free images & royalty free stock
- [Doodle Ipsum](https://doodleipsum.com/) - free illustrations and doodles
- [ls.graphics, Mockups and UI toolsl](https://www.ls.graphics/) - mockups, illustration and ui tools
- [PurePNG](https://purepng.com/) - Pure PNG Image Library
- [FavPNG](https://favpng.com/) - Free Transparent PNG Images
- [CleanPNG](https://www.cleanpng.com/) - Free PNG Images
- [StickPNG](http://www.stickpng.com/) - Free PNG Stickers

### Tools-for-Responsive-Design

- [MY DEVICE.io](https://www.mydevice.io/) a tool for responsive design, browser features

### Tools

- [10015](https://10015.io/) - All Online Tools in “One Box”
- [Contrast](https://usecontrast.com/) - a tool for contrast checker

### Typography

- [Typography 101 - Web Design For Beginners by Dev Ed](https://www.youtube.com/watch?v=HnpsOtIcfbo&feature=emb_title) - typography 101 introduction video
- [The Fastest Google Fonts by CSS Wizardry](https://csswizardry.com/2020/05/the-fastest-google-fonts/) - an article about how to enhance performance with google fonts

### Design-Websites

- [Laws of UX](https://lawsofux.com/) - best practices for design and user interfaces
- [uxcel](https://uxcel.com/) - ui/ux design courses and skill tests
- [Ux Tools](https://uxtools.co/) - tutorials and methods, skills about design
- [Design Resources](https://www.designresourc.es/) - huge source for all kind of design tools
- [UI Design Daily](https://www.uidesigndaily.com/) - daily design and ui pieces
- [Daily Handpicked Free UI Kits for Your Projects](https://uifreebies.net/) daily design and ui pieces

<hr>

# HTML

### Accessibility

- [A Complete Guide To Accessible Front-End Components by Vitaly Friedman](https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components)
- [The Importance Of Manual Accessibility Testing](https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/)

### HTML-Articles

- [How Web Works by Vasa](https://github.com/vasanthk/how-web-works)
- [7 useful HTML attributes you may not know ](https://dev.to/simonpaix/7-useful-html-attributes-you-may-not-know-7mn)
- [Building an adaptive favicon](https://web.dev/building-an-adaptive-favicon/)

### Checklist

- [Front-End Checklist by David Dias](https://github.com/thedaviddias/Front-End-Checklist)
- [Checklist by The A11y Project](https://www.a11yproject.com/checklist/)
- [The Front-End Checklist](https://frontendchecklist.io/)
- [HTML Best Practices](https://github.com/hail2u/html-best-practices)

### Performance

- [My Challenge to the Web Performance Community](https://philipwalton.com/articles/my-challenge-to-the-web-performance-community/?utm_source=stefanjudis&utm_medium=email)

### Validation

- [Can I use?](https://caniuse.com/)
- [Can Include](https://caninclude.glitch.me/)
- [Browser Default Styles](https://browserdefaultstyles.com/)
- [W3C Markup Validation Service](https://validator.w3.org/)
- [What the tag ?!](https://whatthetag.com/#/)

### HTML-Websites

- [HTML CheatSheet](https://htmlcheatsheet.com/)
- [How HTTPS works](https://howhttps.works/)
- [How DNS works](https://howdns.works/)

<hr>

# CSS

### CSS-Articles

- [An Interactive Guide to Flexbox by Josh W Comeau](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/)
- [Understanding Clip Path in CSS by Ahmad Shadeed](https://ishadeed.com/article/clip-path)
- [Defensive CSS by Ahmad Shadeed](https://ishadeed.com/article/defensive-css/)
- [Efficient font stack with Sass by Fabrice Lejeune](https://gist.github.com/fabricelejeune/bcdd3d4725d4e4cea672)
- [Responsive Typography With Sass Maps by Jonathan Suh](https://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps)
- [What Does a Well-Documented CSS Codebase Look Like? by Kaloyan Kosev](https://css-tricks.com/well-documented-css-codebase-look-like/)
- [The Options for Programmatically Documenting CSS by Kaloyan Kosev](https://css-tricks.com/options-programmatically-documenting-css)
- [Structuring your SASS projects](https://itnext.io/structuring-your-sass-projects-c8d41fa55ed4)
- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [14 CSS Topics You Must Know ](https://dev.to/ageekdev/14-css-topics-you-must-know-2e0g)
- [Simplifying Form Styles With `accent-color`](https://www.smashingmagazine.com/2021/09/simplifying-form-styles-accent-color/)
- [The Large, Small, and Dynamic Viewports](https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/?utm_source=stefanjudis&utm_medium=email)
- [Understanding Layout Algorithms](https://www.joshwcomeau.com/css/understanding-layout-algorithms/)

### Architectures-Methodologies

- [Sass Guidelines by Kiltty Giraudel](https://sass-guidelin.es/)
- [Scalable and Modular Architecture for CSS by Jonathan Snook](http://smacss.com/)
- [CSS Guidelines by Harry Roberts](https://cssguidelin.es/)
- [An Introduction To Object Oriented CSS (OOCSS)](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)
- [A Simple SCSS Architecture by Matthew Elsom](https://matthewelsom.com/blog/simple-scss-playbook.html)
- [BEM Cheat Sheet](https://9elements.com/bem-cheat-sheet)
- [Organizing Your CSS / SCSS Code](https://portalzine.de/dev/css/sass/organizing-your-css-scss-code/)

### CSS-in-JS

- [Styled Components](https://styled-components.com)
- [Stitches](https://stitches.dev/)
- [JSS](https://cssinjs.org/)
- [Emotion](https://emotion.sh/docs/introduction)

### CSS-Design-Systems

- [Css Layout](https://csslayout.io/)
- [SmolCSS](https://smolcss.dev/)

### CSS-Generators

- [CSS-GEN box-shadow Generator](https://generate-css.com/box-shadow-generator/)
- [CSS-GEN border-radius Generator](https://generate-css.com/border-radius-generator/)
- [CSS-GEN transform Generator](https://generate-css.com/transform-generator/)
- [CSS-GEN image-filter Generator](https://generate-css.com/image-filter/)
- [CSS Grid Generator](https://cssgrid-generator.netlify.app/) - grid generator
- [CSS Buttons Generator](https://markodenic.com/tools/buttons-generator/) - Button generator
- [CSS box-shadow generator](https://box-shadow.dev/) - box-shadow generator
- [Neumorphism.io](https://neumorphism.io/#e0e0e0) - Generate Sof-UI CSS code
- [Make some waves!](https://getwaves.io/) - Wave generator
- [CSS Separator Generator](https://wweb.dev/resources/css-separator-generator/) - make awkward separators html and css
- [uiGradients](https://uigradients.com/#Dull) - gradient generator
- [Easing Gradients](https://larsenwork.com/easing-gradients/) - gradient generator
- [CSS Gradient](https://cssgradient.io/) - gradient generator
- [gradient-designer](https://gradient-designer.csspost.com/) - gradient generator
- [Mesh Gradient](https://meshgradient.com/) - gradient generator
- [Fancy Border Radius](https://9elements.github.io/fancy-border-radius/) - border-radius generator
- [Smooth shadow gradient](https://shadows.brumm.af/) - box-shadow gradient
- [CSS Scroll Shadows!](https://bit.ly/3JxejGt)

### CSS-Videos

- [Sass Tutorial for Beginners - CSS With Superpowers by codeSTACKr](https://www.youtube.com/watch?v=_a5j7KoflTs)

### CSS-Websites

- [css-tricks](https://css-tricks.com/)
- [cssreference.io](https://cssreference.io/)
- [cssauthor](https://cssauthor.com/)
- [Modern Css Solutions by Stephanie Eckles](https://moderncss.dev/)
- [Style Stage by Stephanie Eckles](https://stylestage.dev/)
- [Every Layout by Heydon Pickering & Andy Bell](https://every-layout.dev/)
- [CSS { In Real Life } by Michelle Barker](https://css-irl.info/)
- [Css CheatSheet](https://htmlcheatsheet.com/css/)
- [State of CSS](https://2020.stateofcss.com/en-US/)
- [Sass cheatsheet](https://devhints.io/sass)
- [Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources.](https://github.com/Famolus/awesome-sass)
- [What does 100% mean in CSS?](https://wattenberger.com/blog/css-percents)

<hr>

# Front-End-Resources

### Front-End-Articles

- [Smashing Magazine - Guides to Web Design and Development ](https://www.smashingmagazine.com/guides/)
- [Why learning to code is so damn hard?](https://www.thinkful.com/blog/why-learning-to-code-is-so-damn-hard/)
- [The Front-End Developer's Guide to the Terminal](https://www.joshwcomeau.com/javascript/terminal-for-js-devs/)
- [How To Learn Stuff Quickly](https://www.joshwcomeau.com/blog/how-to-learn-stuff-quickly/)
- [Front-end may soon need new sub-disciplines](https://medium.com/@muratcorlu/front-end-may-soon-need-new-sub-disciplines-60a4cde20562)
- [Learning to Code: How to Think Like a Programmer - Zapier](https://zapier.com/blog/think-like-a-programmer/)
- [How to write maintainable JavaScript code in 2023 — Web or Node.js](https://blog.devgenius.io/how-to-write-maintainable-javascript-code-in-2023-web-or-node-js-d66d8baead67)

### Front-End-Challenges

- [Frontend Mentor.io](https://www.frontendmentor.io)
- [DevProjects by codementor.io](https://www.codementor.io/projects)
- [Ace FrontEnd](https://www.acefrontend.com/)
- [codewell](https://www.codewell.cc)
- [devChallenges](https://devchallenges.io/)

### Front-end-Surveys

- [State of Frontend 2022](https://tsh.io/State-of-Frontend-2022.pdf)
- [State of JavaScript](https://stateofjs.com/en-us/)
- [State of CSS](https://stateofcss.com/en-us/)

### Front-End-Websites

- [Patterns](https://web.dev/patterns/) - A collection of code snippets to help you optimize your web projects.
- [The Valley of Code](https://thevalleyofcode.com/)
- [This vs That](https://thisthat.dev/)
- [101 DevTools Tips](https://devtoolstips.org/)
- [Front End Web Development Resources by Ritik Patni](https://github.com/RitikPatni/Front-End-Web-Development-Resources)
- [Front-End Dev Bookmarks by Tim Navrotskyy](https://github.com/dypsilon/frontend-dev-bookmarks)
- [200+ Ultimate Resources for Front-End Development in 2021 by Rahul](https://rahulism.hashnode.dev/200-ultimate-resources-for-front-end-development-in-2021)
- [ZTM Free Developer Resources](https://zerotomastery.io/resources/?utm_source=mailerlite&utm_medium=email&utm_campaign=the_1_question_i_get_asked_by_students&utm_term=2022-06-05)

# Git&Github

### Git-Courses

- [Learn Git Branching](https://learngitbranching.js.org/)
- [Introduction to GitHub](https://lab.github.com/githubtraining/introduction-to-github)

### Git-Videos

- [Git & GitHub Crash Course For Beginners by Traversy Media](https://www.youtube.com/watch?v=SWYqp7iY_Tc)
- [Git Explained in 100 Seconds by Fireship](https://www.youtube.com/watch?v=hwP7WQkmECE)
- [Getting Started with GitKraken for GitHub Users](https://www.youtube.com/watch?v=AMFoJoNh3V4)

### Git-Websites

- [Git Explorer](https://gitexplorer.com/)
- [Dangit, Git!?!](https://dangitgit.com/)
- [Git from Beginner to Advanced by MadeByMike](https://www.madebymike.com.au/writing/how-to-git/)
- [Advanced Git Tutorials by Bitbucket](https://www.atlassian.com/git/tutorials/advanced-overview)
- [Little Things I Like to Do with Git](https://csswizardry.com/2017/05/little-things-i-like-to-do-with-git/)
- [Oh Shit, Git!?!](https://ohshitgit.com/)

### Git-Tools

- [lazygit](https://github.com/jesseduffield/lazygit) simple terminal UI for git commands

<hr>

# JavaScript

### JavaScript-Articles

- [Top 6 JavaScript ES12 Features You Should Use](https://www.syncfusion.com/blogs/post/top-6-javascript-es12-features-you-should-use.aspx)
- [Javascript in Plain English - New JavaScript content every day](https://javascript.plainenglish.io/)
- [Building the DOM faster: speculative parsing, async, defer and preload by Milica Mihajlija](https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/)
- [The Ultimate Tutorial on JavaScript DOM - JS DOM with Examples ](https://dev.to/ubahthebuilder/the-ultimate-tutorial-on-javascript-dom-js-dom-with-examples-1b47)
- [Learn map(), filter(), reduce(), and sort() in JavaScript ](https://dev.to/ashutoshmishra4/some-advanced-and-important-array-methods-in-javascript-day-4-of-javascript30-2ao3)
- [How to create a dark theme system in 5 minutes or less with vanilla JS. ](https://dev.to/codedgar/how-to-create-a-dark-theme-system-in-5-minutes-or-less-with-vanilla-js-2922)
- [ES6 Handbook](https://devdojo.com/shreya/es6-handbook)
- [Introduction to Promises and Async and Await Promises in Javascript! ✨](https://saharanitaa.hashnode.dev/introduction-to-promises-and-async-and-await-promises-in-javascript)
- [How I built a modern website in 2021](https://kentcdodds.com/blog/how-i-built-a-modern-website-in-2021)
- [17 Life-Saving JavaScript One-Liners 🔥](https://javascript.plainenglish.io/17-life-saving-javascript-one-liners-part1-b0b0b32c9f61)
- [2ality – JavaScript and more](https://2ality.com/index.html)
- [How to Use JavaScript Arrays Like a Pro](https://javascript.plainenglish.io/how-to-use-javascript-arrays-like-a-pro-3137b3218fef)
- [How much JavaScript should I learn? 🤔](https://medium.com/@shadmansaalim321/how-much-javascript-should-you-learn-8c9178ef6f5)
- [Statements Vs. Expressions](https://www.joshwcomeau.com/javascript/statements-vs-expressions/)
- [165+ JavaScript terms you need to know](https://opensource.com/article/22/9/javascript-glossary)

### JavaScript-Books

- [You Don't Know Javascript by Kyle Simpson](https://github.com/getify/You-Dont-Know-JS)
- [Functional Light JavaScript by Kyle Simpson](https://github.com/getify/Functional-Light-JS)
- [Eloquent Javascript by Marijn Haverbeke](https://eloquentjavascript.net/)
- [JSbooks - The best free JavaScript resources](https://jsbooks.revolunet.com/)
- [Exploring JS: JavaScript books for programmers](https://exploringjs.com/)
- [Learning Patterns by Lydia Hallie and Addy Osmani](https://www.patterns.dev/)
- [JavaScript Allongé: A strong cup of functions, objects, combinators, and decorators](https://leanpub.com/javascriptallongesix/read#leanpub-auto-about-javascript-allong)

### JavaScript-Conference-Talks

- [Becoming a better developer by using the SOLID design principles by Katerina Trajchevska](https://www.youtube.com/watch?v=rtmFCcjEgEw)
- [The myth of the “Real JavaScript Developer” by Brenna O'Brien](https://www.youtube.com/watch?v=Xt5qpbiqw2g)
- [How to fix the web by Brendan Eich](https://www.youtube.com/watch?v=zlcnOr81lPc&list=PLTektvstDHecgS_5pW3JKSepAq8IGWgLE&index=1)
- [Get better at JavaScript with just JavaScript - Wes Bos](https://www.youtube.com/watch?v=pws4qzGn5ak&list=PLTektvstDHecgS_5pW3JKSepAq8IGWgLE&index=2&t=360s)
- [Learning Functional Programming with JavaScript - Anjana Vakil](https://www.youtube.com/watch?v=e-5obm1G_FY&t=1s)

### JavaScript-Courses-Practices

- [30 Days of JavaScript](https://javascript30.com/)
- [Introduction to How to Write an Open Source JavaScript Library - egghead](https://egghead.io/lessons/javascript-introduction-to-how-to-write-an-open-source-javascript-library)
- [Learn Modern Javascript - scrimba](https://scrimba.com/learn/es6)
- [Learn JavaScript for free - scrimba](https://scrimba.com/learn/learnjavascript)
- [clean-code-javascript](https://github.com/ryanmcdermott/clean-code-javascript)
- [node.js-best-practices](https://github.com/goldbergyoni/nodebestpractices)
- [JavaScript Algorithms and Data Structures](https://github.com/trekhleb/javascript-algorithms)
- [JavaScript Cheat Sheet: The Advanced Concepts](https://zerotomastery.io/cheatsheets/javascript-cheatsheet-the-advanced-concepts/#JavaScriptEngine)

### JavaScript-Tools

- [vite.js](https://vitejs.dev/)
- [Parcel](https://parceljs.org/)
- [gulp](https://gulpjs.com/)
- [webpack](https://webpack.js.org/)
- [esbuild](https://esbuild.github.io/)
- [Grunt](https://gruntjs.com/)
- [Babel](https://babeljs.io/)
-

### JavaScript-Websites

- [Just Javascript](https://justjavascript.com/) - text based javascript course
- [whatthefuck.is - ](https://whatthefuck.is/) - dan's javascript glossary
- [JavaScript Patterns Workshop](https://javascriptpatterns.vercel.app/patterns)
- [Free Javascript Resources](https://www.java5cript.com/)
- [Javascript CheatSheet](https://htmlcheatsheet.com/js/)
- [SheCodes Javascript Cheatsheet](https://www.frontendcheatsheets.com/javascript)
- [JavaScript For Cats](http://jsforcats.com/)
- [Javascript.info](https://javascript.info/)
- [Learn Javascript Online](https://learnjavascript.online/)
- [LEARN JS](https://www.learn-js.org/)
- [egghead.io - Javascript](https://egghead.io/q/javascript)
- [codecademy - Learn Javascript](https://www.codecademy.com/learn/introduction-to-javascript)
- [public-apis](https://github.com/public-apis/public-apis)
- [JSON Crack](https://jsoncrack.com/) - seamlessly visualize your JSON data instantly into graphs
- [Manage HTML DOM with vanilla JavaScript](https://htmldom.dev/)

<hr>

# React

### React-Articles

- [How to learn React - The Effective way ](https://dev.to/shaan_alam/how-to-learn-react-the-effective-way-2km7)
- [5 Packages Every React Developer Must Know](https://javascript.plainenglish.io/5-packages-every-react-developer-must-know-e06bf1b96514)
- [Ultimate ReactJS Resources 🛠For Web Developers 2021👨‍💻 ](https://dev.to/theme_selection/ultimate-reactjs-resources-for-web-developers-2021-424c)
- [React — 5 Things That Might Surprise You](https://medium.com/geekculture/react-5-things-that-might-surprise-you-ddefd9fbac0f)
- [Implementing Atomic Design in Modern React Development](https://charuka95.medium.com/implementing-atomic-design-in-modern-react-development-d58d743a0f0b)
- [Some Features Every React Developer Should Know](https://medium.com/nerd-for-tech/some-features-every-react-developer-should-know-f960117464e8)
- [A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/#each-render-has-its-own-effects)
- [Persistent login in React using refresh token rotation](https://blog.logrocket.com/persistent-login-in-react-using-refresh-token-rotation/)
- [React Authentication & Access Control](https://css-tricks.com/react-authentication-access-control/#:~:text=Your%20React%20app%20requests%20a,needs%20to%20make%20a%20request.)
- [13 Libraries You Should Know as a React Developer](https://cult.honeypot.io/reads/react-libraries-2022/)
- [19 GitHub Repositories to Become a React Master ⚛️🧙](https://devdojo.com/madzadev/19-github-repositories-to-become-a-react-master)
- [Atomic Design and ReactJS](https://danilowoz.com/blog/atomic-design-with-react)

### React-Frameworks

- [Next.js](https://nextjs.org/)
- [REMIX](https://remix.run/)
- [Gatsby](https://www.gatsbyjs.com/)

### React-Hooks

- [react-use](https://github.com/streamich/react-use)
- [React Hooks Cheatsheet](https://react-hooks-cheatsheet.com/)
- [React Hooks Simplified](https://courses.webdevsimplified.com/react-hooks-simplified)

### React-State-Management

- [Zustand](https://zustand-demo.pmnd.rs/)
- [Jotai](https://jotai.org/)
- [Redux](https://redux.js.org/)
- [Recoil](https://recoiljs.org/)
- [Easy Peasy](https://easy-peasy.vercel.app/)

### React-Tools

- [Mantine](https://mantine.dev/)
- [Create React App](https://create-react-app.dev/)
- [React Starter Projects](https://www.javascriptstuff.com/react-starter-projects/)
- [React Dev-Tools](https://reactjs.org/blog/2015/09/02/new-react-developer-tools.html)
- [React Redux](https://redux.js.org/)
- [Storybook](https://storybook.js.org/)
- [React.js cheatsheet](https://devhints.io/react)
- [evergreen](https://evergreen.segment.com/)
- [React Styleguidist](https://react-styleguidist.js.org/)
- [React Testing Library](https://testing-library.com/docs/react-testing-library/example-intro/)
- [REACTIDE](https://reactide.io/)
- [React Cosmos](https://reactcosmos.org/)
- [React Proto](https://react-proto.github.io/react-proto/)
- [React Hot Loader](https://gaearon.github.io/react-hot-loader/)
- [React Hook Form](https://react-hook-form.com/)
- [React Bits](https://vasanthk.gitbooks.io/react-bits/content/)
- [React Bootstrap](https://react-bootstrap.github.io/)
- [kbar - command + k interface](https://github.com/timc1/kbar)

<hr>

# TypeScript

### TypeScript-Articles

- [TypeScript for React Developers – Why TypeScript is Useful and How it Works](https://www.freecodecamp.org/news/typescript-for-react-developers/#whyuseeslintprettierandhusky)
- [An Introduction to TypeScript](https://devdojo.com/suniljoshi19/an-introduction-to-typescript)
- [The Relevance of TypeScript in 2022](https://css-tricks.com/the-relevance-of-typescript-in-2022/)
- [Creating a TypeScript React Application with Vite](https://developer.okta.com/blog/2022/03/14/react-vite-number-converter)
- [Creating Custom Types in Typescript](https://fjolt.com/article/typescript-creating-custom-types)
- [React Event Handlers with TypeScript](https://www.carlrippon.com/React-event-handlers-with-typescript/)
- [With 30+ Articles, You Will Not Be Confused When Learning TypeScript](https://medium.com/frontend-canteen/with-these-articles-you-will-not-be-confused-when-learning-typescript-d96a5c99e229)

### TypeScript-Courses

- [React+TypeScript Cheatsheets](https://github.com/typescript-cheatsheets/react)
- [Beginners TypeScript Tutorial](https://github.com/total-typescript/beginners-typescript-tutorial)

### TypeScript-Challenges

- [Type Challenges](https://github.com/type-challenges/type-challenges)
- [TypeScript exercises](https://typescript-exercises.github.io/)

### TypeScript-Tools

- [TypeScript Error Translator](https://ts-error-translator.vercel.app/)

# Other-Content

### Blogs

- [Dav Abramov Medium](https://medium.com/@dan_abramov)
- [Overreacted - Dav Abramov Blog](https://overreacted.io/)
- [Kent C. Dodds Blog](https://kentcdodds.com/blog)
- [DEV Community](dev.to)
- [alligator.io](https://alligator.io/)
- [Flavio Copes](https://flaviocopes.com/)
- [Una Kravets](https://una.im/)
- [Silvestar Bistrović](https://www.silvestar.codes/articles/)
- [Zell Liew](https://zellwk.com/blog/)
- [Kyle Cook (Web Dev Simplified)](https://blog.webdevsimplified.com/)
- [Lydia Hallie](https://www.lydiahallie.io/)
- [Lee Rob](https://leerob.io/blog)

### Other-Books

- [Frontend Masters Books](https://frontendmasters.com/books/)

### Code-Formatters

- [Prettier](https://prettier.io/)
- [dirtyMarkup](https://www.10bestdesign.com/dirtymarkup/)
- [awesome-code-formatters](https://github.com/rishirdua/awesome-code-formatters)

### Developer&Productivity-Tools

- [Raycast](https://www.raycast.com/) - Spotlight with super powers with lots of [awesome extensions](https://www.raycast.com/store).
- [Snipetty](https://wojciechkulik.pl/snippety) - Tool for developers to create code snippets.
- [Polypane](https://polypane.app/) - Development focused browser for building apps and refactoring.
- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) - Chrome extension for React Development.
- [Thor](https://github.com/gbammc/Thor) - Easy switch between apps by custom shortcuts.
- [AltTab](https://alt-tab-macos.netlify.app/) - Customize your alt-tab settings deeply.
- [xScope](https://xscopeapp.com/) - Great tool for both design and development.
- [Sip](https://sipapp.io/) - Color picker for Mac OS.
- [RainDrop](https://raindrop.io/) - Bookmark manager.
- [Github Copilot](https://copilot.github.com/) - Your AI pair programmer.
- [WakaTime](https://wakatime.com/) - Track your time in both browser and IDE.
- [GitKarken](https://www.gitkraken.com/) - Git GUI & Git CLI with a lot of features.
- [DevBook](https://usedevbook.com/) - Search through the DevDocs and StackOverflow without switching to your browser.
- [daily.dev](https://daily.dev/) - Great tool for finding hottest trends and popular articles.

### Discord Communities

- [Frontend Developers](https://discord.com/invite/aBx8dcu)
- [Kevin Powell - Community](https://discord.com/invite/9Rc6WNhNGJ)
- [KCD - Kent C. Dodds Community](https://discord.com/invite/euBTshKEnm)
- [Reactiflux](https://discord.com/invite/reactiflux)
- [Bruno Simon Community (Three.js)](https://discord.gg/F4WxPafp)
- [Next.js Community](https://discord.gg/nextjs)

### Documentations

- [Mozilla Developer Network](https://developer.mozilla.org/en-US/)
- [React Docs (beta)](https://beta.reactjs.org/)
- [DevDocs](https://devdocs.io/)
- [sass-lang](https://sass-lang.com)
- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
-

### Interactive-Games

- [Flex Box Adventure](https://codingfantasy.com/games/flexboxadventure)
- [Knights of the Flexbox Table](https://knightsoftheflexboxtable.com/)
- [Flexbox Zombies](https://geddski.teachable.com/p/flexbox-zombies)
- [Flexbox Froggy](https://flexboxfroggy.com/)
- [Flexbox Defense](http://www.flexboxdefense.com/)
- [Flexy Boxes](https://the-echoplex.net/flexyboxes/)
- [CSS Grid Garden](https://cssgridgarden.com/)
- [CSS Grid Cheat Sheet](https://alialaa.github.io/css-grid-cheat-sheet/)
- [CSS Grid Attack](https://codingfantasy.com/games/css-grid-attack)
- [CSS Grid Critters ](https://gridcritters.com/)
- [CSS Selectors Cheatsheet](https://frontend30.com/css-selectors-cheatsheet/)
- [CSS Animations](https://css-animations.io/)
- [CSS Rules](https://katydecorah.com/css-ruler/)
- [CSS Filter Blend](https://ilyashubin.github.io/FilterBlend/)
- [CSS Battle](https://cssbattle.dev/)
- [CSS Diner](https://flukeout.github.io/)
- [TypeScript Exercises](https://typescript-exercises.github.io/)
- [React Tutorial](https://react-tutorial.app/)
- [Elevator Saga - JavaScript](https://play.elevatorsaga.com/)
- [Screeps - JavaScript](https://screeps.com/)
- [Untrusted - JavaScript](https://alexnisnevich.github.io/untrusted/)
- [PromiSEES - Javascript](https://bevacqua.github.io/promisees/)
- [JSchallenger](https://www.jschallenger.com/)
- [JSRobot](https://lab.reaal.me/jsrobot/)
- [Service Workies (PWAs)](https://serviceworkies.com/)
- [Learn Git Branching](https://learngitbranching.js.org/)
- [Select Star SQL](https://selectstarsql.com/)
- [SQL Police Department](https://sqlpd.com/)
- [SQLBolt](https://sqlbolt.com/)
- [Regex Crossword](https://regexcrossword.com/)
- [Regex101](https://regex101.com/)
- [RegexOne](https://regexone.com/)
- [CodinGame](https://www.codingame.com/start)
- [OpenVim](https://www.openvim.com/)
- [Jamstack Attack](https://jamstack-attack.herokuapp.com/)
- [JavaScript Quiz](https://javascriptquiz.com/)

### Interview Practices

- [Coding Interview University](https://github.com/jwasham/coding-interview-university)
- [mission-peace interview](https://github.com/mission-peace/interview)
- [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions)
- [React Interview Questions](https://github.com/sudheerj/reactjs-interview-questions)
- [123 Essential JavaScript Interview Questions](https://github.com/ganqqwerty/123-Essential-JavaScript-Interview-Questions)
- [JavaScript Interview Questions & Answers](https://github.com/sudheerj/javascript-interview-questions)
- [JavaScript Questions](https://github.com/lydiahallie/javascript-questions/blob/master/README.md)
- [Tech Interview Handbook](https://techinterviewhandbook.org/)
- [Front End Interview Handbook by Yangshun Tay](https://frontendinterviewhandbook.com/)
- [JavaScript Code Challenges](https://github.com/sadanandpai/javascript-code-challenges)
- [10 Interview Questions Every JavaScript Developer Should Know](https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95)

#### System Design

- [Front End Engineer](https://www.youtube.com/c/FrontEndEngineer)

### Newsletters

- [STACKR News](https://newsletter.codestackr.com/)
- [newsletter by Kevin Powell](https://www.kevinpowell.co/newsletter/)
- [flaviocopes newsletter](https://flaviocopes.com/page/newsletter/)
- [CSS-Tricks Newsletter](https://css-tricks.com/newsletters/)
- [Smashing Magazine Newsletter](https://www.smashingmagazine.com/the-smashing-newsletter/)
- [ModernCSS by Stephanie Eckles](https://moderncss.dev/newsletter/)
- [Stefan's Web Weekly](https://www.stefanjudis.com/newsletter/)
- [JavaScript Weekly](https://javascriptweekly.com/)
- [Web Tools Weekly](https://webtoolsweekly.com/)
- [Web Dev Simplified newsletter](https://courses.webdevsimplified.com/)
- [Frontend Focus](https://frontendfoc.us/)
- [CSS Animation Weekly](http://weekly.cssanimation.rocks/)
- [Dev Tips](https://umaar.com/dev-tips/)
- [cssweekly](https://css-weekly.com/)

### Podcasts

- [Syntax.](https://syntax.fm/)
- [Front End Happy Hour](https://www.frontendhappyhour.com/)
- [The CSS Podcast](https://thecsspodcast.libsyn.com/)
- [The freeCodeCamp Podcast](https://freecodecamp.libsyn.com/)
- [Shop Talk Show](https://shoptalkshow.com/)
- [CodePen Radio](https://blog.codepen.io/radio/)
- [JavaScript Jabber](https://devchat.tv/show/javascript-jabber)
- [JS Party](https://changelog.com/jsparty)
- [Ladybug Podcast](https://www.ladybug.dev/)
- [Orbit FM - Web of Tomorrow](https://www.orbit.fm/weboftomorrow)
- [Full Stack Radio](https://fullstackradio.com/)
- [Frontside Podcast](https://frontside.com/podcast/)
- [developer tea](https://developertea.com/)
- [egghead.io podcast](https://egghead.io/q?type=podcast)
- [The Front End Podcast](https://thefrontendpodcast.site/)
- [Frontend News 2021](https://podcasts.apple.com/us/podcast/frontend-news-2021-frontendhouse-com/id1549875490)

### Reddit-Subreddits

- [freeCodeCamp.org: Learn to Code for Free From Home](https://www.reddit.com/r/FreeCodeCamp/)
- [programming](https://www.reddit.com/r/programming/)
- [AskComputerScience](https://www.reddit.com/r/AskComputerScience/)
- [iOS Programming](https://www.reddit.com/r/iOSProgramming/)
- [Learn Javascript](https://www.reddit.com/r/learnjavascript/)
- [Computer Science](https://www.reddit.com/r/computerscience/)
- [web_design](https://www.reddit.com/r/web_design/)
- [coding](https://www.reddit.com/r/coding/)
- [learn programming](https://www.reddit.com/r/learnprogramming/)
- [javascript](https://www.reddit.com/r/javascript/)
- [AskProgramming](https://www.reddit.com/r/AskProgramming/)
- [webdev: reddit for web developers](https://www.reddit.com/r/webdev/)
- [HyperText Markup Language](https://www.reddit.com/r/HTML/)
- [HTML5 & Friends](https://www.reddit.com/r/html5/)
- [Bringing the web out of 2007 since 2013.](https://www.reddit.com/r/Frontend/)
- [Cascading Style Sheets](https://www.reddit.com/r/css/)
- [Official announcements pertaining to reddit custom CSS](https://www.reddit.com/r/cssnews/)
- [ProCSS](https://www.reddit.com/r/ProCSS/)
- [css_irl](https://www.reddit.com/r/css_irl/)
- [Help for reddit's CSS](https://www.reddit.com/r/csshelp/)
- [Sass - a language for building awesome CSS](https://www.reddit.com/r/Sass/)

### Roadmaps

- [React Roadmap](https://roadmap.sh/react)
- [2022 Web Dev Roadmap by codeSTACKr](https://courses.codestackr.com/courses/2022-web-dev-roadmap/)
- [Web Skills Roadmap](https://andreasbm.github.io/web-skills/)
- [Step by step guide to becoming a modern frontend developer by roadmap.sh](https://roadmap.sh/frontend)
- [The Front-End Developer Learning Roadmap by FrontendMasters](https://frontendmasters.com/guides/learning-roadmap/)
- [How to Learn Javsascript 2021](https://cult.honeypot.io/reads/how-to-learn-javascript-2021/)
- [React advanced education](https://www.mindmeister.com/1982032240?t=INxEXrxj1w)

### Online-Curriculums

- [freeCodeCamp](https://www.freecodecamp.org/)
- [The Odin Project](https://www.theodinproject.com)
- [Web Dev for Beginners - Microsoft](https://github.com/microsoft/Web-Dev-For-Beginners)
- [Coding Interview University](https://github.com/jwasham/coding-interview-university)

### Youtube-Channels

- [Fireship](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA)
- [Kevin Powell](https://www.youtube.com/user/KepowOb)
- [codeSTACKr](https://www.youtube.com/channel/UCDCHcqyeQgJ-jVSd6VJkbCw)
- [Traversy Media](https://www.youtube.com/user/TechGuyWeb)
- [DesignCourse](https://www.youtube.com/user/DesignCourse)
- [Web Dev Simplified](https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw)
- [Wes Bos](https://www.youtube.com/channel/UCoebwHSTvwalADTJhps0emA)
- [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)
- [Dev Ed](https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q)
- [Adam Argyle](https://www.youtube.com/c/AdamArgyleInk)
- [Coder Coder](https://www.youtube.com/c/TheCoderCoder)
- [Clever Programmer](https://www.youtube.com/channel/UCqrILQNl5Ed9Dz6CGMyvMTQ)
- [Coding Tech](https://www.youtube.com/channel/UCtxCXg-UvSnTKPOzLH4wJaQ)
- [Dorian Develops](https://www.youtube.com/channel/UCUOMtzQmEmhIAF8G_cha_Xw)
- [Adrian Twarog](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ)
- [Ben Awad](https://www.youtube.com/channel/UC-8QAzbLcRglXeN_MY9blyw)
- [Kenny Gunderman](https://www.youtube.com/channel/UCkCJ0zLrSg7VudR97g-FNVQ)
- [Tech With Tim](https://www.youtube.com/channel/UC4JX40jDee_tINbkjycV4Sg)
- [Florin Pop](https://www.youtube.com/channel/UCeU-1X402kT-JlLdAitxSMA)
- [Program With Erik](https://www.youtube.com/channel/UCshZ3rdoCLjDYuTR_RBubzw)
- [Codevolution](https://www.youtube.com/c/Codevolution/featured)
- [Devslopes](https://www.youtube.com/channel/UClLXKYEEM8OBBx85DOa6-cg)
- [freeCodeCamp.org](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ)
- [CS50](https://www.youtube.com/channel/UCcabW7890RKJzL968QWEykA)
- [JSConf](https://www.youtube.com/c/JSConfEU)
- [uidotdev](https://www.youtube.com/c/uidotdev)

### Mixed-Content

- [web.dev](https://web.dev/)
- [Coder Survival Guide](https://raindrop.io/laurent-devernay/coder-survival-guide-7258291)
- [tutorialzine](https://tutorialzine.com/)
- [30 Seconds of Code](https://www.30secondsofcode.org/)
- [Awesome Free Developer Resources by codeSTACKr](https://github.com/codeSTACKr/free-developer-resources)
- [Design Resources by Brad Traversy & Csaba Kissi](https://designresources.dev/)
- [The Ultimate List of Web Development Podcasts](https://www.tuckertriggs.com/blog/ultimate-list-of-web-development-podcasts?__s=mw1vsbos5p3kz1ayksv5&utm_source=pocket_mylist)
- [Best Design Resources for Developers by Suhail Kakar](https://blog.suhailkakar.com/best-design-resources-for-developers)
- [Rico's cheatsheet](https://devhints.io/)
- [cult. by Honeypot](https://cult.honeypot.io/)
- [codecademy Web Development Cheatsheet](https://www.codecademy.com/resources/cheatsheets/subject/web-development)
- [OverAPI - Collecting All Cheat Sheets](https://overapi.com/)
- [codrops](https://tympanus.net/codrops/)
- [free-programming-books](https://ebookfoundation.github.io/free-programming-books/)
- [free-for.dev](https://free-for.dev/#/)
- [awesome-resources](https://github.com/sindresorhus/awesome)
- [Today I Learned by jbranchaud](https://github.com/jbranchaud/til)
- [Every Programmer Should Know 🤔](https://github.com/mtdvio/every-programmer-should-know)
- [Visual Studio Code Cheat Sheet](https://www.vscheatsheet.com/)


- [Solidity](https://docs.soliditylang.org/en/v0.8.10/#)

### Videos

- [Is Web3 all Hype? Top 10 Web 3.0 Questions & Answers by Fireship](https://www.youtube.com/watch?v=wHTcrmhskto&t=2s)

### Youtube Channels

- [Dapp University](https://www.youtube.com/channel/UCY0xL8V6NzzFcwzHCgB8orQ)
- [Web3 Foundation](https://www.youtube.com/channel/UClnw_bcNg4CAzF772qEtq4g)
- [Moralis Web3](https://www.youtube.com/channel/UCgWS9Q3P5AxCWyQLT2kQhBw)
- [EatTheBlocks](https://www.youtube.com/c/EatTheBlocks/videos)