Introducing Dev Patterns. A service containing a reference list of design patterns for modern and more structured web applications
https://www.patterns.dev/
#pattern #design #dev
https://www.patterns.dev/
#pattern #design #dev
www.patterns.dev
Learn JavaScript design and performance patterns for building more powerful web applications.
Practice using Puppeteer with Node JS
https://www.freecodecamp.org/news/how-to-use-puppeteer-with-nodejs/
#puppeteer #nodejs #freecodecamp
https://www.freecodecamp.org/news/how-to-use-puppeteer-with-nodejs/
#puppeteer #nodejs #freecodecamp
freeCodeCamp.org
How to Use Puppeteer With Node.js
Puppeteer is a JavaScript library that allows you to script and interact with browser windows. In this guide, we'll explore the basics of using Puppeteer with Node.js so you can start automating your tests. Prerequisites Basic understanding of Node....
Web Dev Simplified practice with introduction to JavaScript Hoisting
https://www.youtube.com/watch?v=EvfRXyKa_GI
#hoisting #webdevsimplified
https://www.youtube.com/watch?v=EvfRXyKa_GI
#hoisting #webdevsimplified
YouTube
Learn JavaScript Hoisting In 5 Minutes
JavaScript Simplified Course: https://javascriptsimplified.com
Hoisting. It is the word everyone throws around when talking about JavaScript, yet no one takes the time to actually explain what hoisting is, how it works, and why it is important. In this video…
Hoisting. It is the word everyone throws around when talking about JavaScript, yet no one takes the time to actually explain what hoisting is, how it works, and why it is important. In this video…
Long practice creating a Podcast app with Next JS and Strapi CMS
https://medium.com/strapi/how-to-build-a-podcast-app-with-next-js-and-strapi-fe7c1dbb9e8e
#podcast #strapi #cms #nextjs
https://medium.com/strapi/how-to-build-a-podcast-app-with-next-js-and-strapi-fe7c1dbb9e8e
#podcast #strapi #cms #nextjs
Medium
How to Build a Podcast App with Next.js and Strapi
This tutorial will build a simple podcast app to demonstrate how we can host a podcast API on Strapi and fetch from a Next.js app.
Practice with Kevin Powell on responsive layouts with HTML and CSS
https://www.youtube.com/watch?v=Ch_LoWKLv3A
#html #css #layout #kevinPowell
https://www.youtube.com/watch?v=Ch_LoWKLv3A
#html #css #layout #kevinPowell
YouTube
Build a responsive website with HTML & CSS | Part three: General styling
Putting together the general styling for this project, and fixing a few mistakes I made along the way.
🔗 Links
✅ Why I use em I'm my media queries: https://zellwk.com/blog/media-query-units/
✅ GitHub repo for where I start this video: https://github.com/kevin…
🔗 Links
✅ Why I use em I'm my media queries: https://zellwk.com/blog/media-query-units/
✅ GitHub repo for where I start this video: https://github.com/kevin…
How to send email with Strapi CMS using cron jobs
https://strapi.medium.com/automating-emails-with-strapi-cron-jobs-e10f5008f1e1
#cron #jobs #strapi #email
https://strapi.medium.com/automating-emails-with-strapi-cron-jobs-e10f5008f1e1
#cron #jobs #strapi #email
Medium
Automating Emails with Strapi CRON Jobs
Build a landing page that allows a company to collect leads in the form of user emails and send automated emails at pre-determined…
All right then gang, Net Ninja released a series of exercises to create a paralax landing page with a slider effect
https://www.youtube.com/watch?v=RipdRoTnvJQ&list=PL4cUxeGkcC9iAkdBGipl-sd_x9JQKXwK9&index=2
The complete playlist can be seen here
https://www.youtube.com/playlist?list=PL4cUxeGkcC9iAkdBGipl-sd_x9JQKXwK9
#netninja #playlist #slider #paralax
https://www.youtube.com/watch?v=RipdRoTnvJQ&list=PL4cUxeGkcC9iAkdBGipl-sd_x9JQKXwK9&index=2
The complete playlist can be seen here
https://www.youtube.com/playlist?list=PL4cUxeGkcC9iAkdBGipl-sd_x9JQKXwK9
#netninja #playlist #slider #paralax
YouTube
Landing Page Build (with Parallax) #1 - Introduction
Learn how to make a responsive landing page with a parallax and slider.
Subscribe to Chris’s channel - https://m.youtube.com/c/codinginpublic
⭐⭐ Get the full course now (without ads) on the Net Ninja Pro site:
https://netninja.dev/p/parallax-landing-page…
Subscribe to Chris’s channel - https://m.youtube.com/c/codinginpublic
⭐⭐ Get the full course now (without ads) on the Net Ninja Pro site:
https://netninja.dev/p/parallax-landing-page…
7 Tips for Clean React TypeScript Code you Must Know 🧹✨
https://dev.to/ruppysuppy/7-tips-for-clean-react-typescript-code-you-must-know-2da2
-----------------------------------------------------------
Architecting React Apps Like it's 2030
https://dev.to/itsrennyman/architecting-react-apps-like-its-2030-10mc
-----------------------------------------------------------
How to Make a Real Estate Website Using Html CSS JavaScript
https://dev.to/codewithsadee/how-to-make-a-real-estate-website-using-html-css-javascript-1hjc
-----------------------------------------------------------
How To Make Personal Portfolio Using HTML CSS JavaScript
https://dev.to/codewithsadee/how-to-make-personal-portfolio-using-html-css-javascript-2760
-----------------------------------------------------------
#html #css #react #javascript #typescript #webdev #tutorial
https://dev.to/ruppysuppy/7-tips-for-clean-react-typescript-code-you-must-know-2da2
-----------------------------------------------------------
Architecting React Apps Like it's 2030
https://dev.to/itsrennyman/architecting-react-apps-like-its-2030-10mc
-----------------------------------------------------------
How to Make a Real Estate Website Using Html CSS JavaScript
https://dev.to/codewithsadee/how-to-make-a-real-estate-website-using-html-css-javascript-1hjc
-----------------------------------------------------------
How To Make Personal Portfolio Using HTML CSS JavaScript
https://dev.to/codewithsadee/how-to-make-personal-portfolio-using-html-css-javascript-2760
-----------------------------------------------------------
#html #css #react #javascript #typescript #webdev #tutorial
10 Minimal Portfolio Examples for Web Developers Who Aren’t Good at Design
https://dev.to/scrimba/10-minimal-portfolio-examples-for-web-developers-who-arent-good-at-design-40gj
#webdev #css #javascript
https://dev.to/scrimba/10-minimal-portfolio-examples-for-web-developers-who-arent-good-at-design-40gj
#webdev #css #javascript
DEV Community
10 Minimal Portfolio Examples for Web Developers Who Aren’t Good at Design
Not all web developers are good at design, and that is OK! In the real world, you will often work...
Roadmap To Becoming A Full Stack Web Developer In 2022
1. Choose a Technology
Full-stack development comprises
front-end, back-end, and database management. Few technologies on which you can work and are trending:
A. MERN B. MEAN
2. Frontend Development
Front-End is the User Interface, it deals with the website's overall appearance & how interactive it is
Mastering the elements of HTML, CSS, & JavaScript is essential.
HTML - Start with creating a small webpage. Include; tables, images & links to make it more eye-catching.
CSS - Add colors, borders, build the navigation bar, play with the icons, font, and text
JavaScript - Learn about DOM and API
3. Backend Development
Ace these skills:
Coding Languages - Python, Java & Javascript
Frameworks - Express, Django, Ruby on Rails
Database Management Systems - MongoDB, MySQL, etc
API - (Application Program Interface)
Client-Server Architecture
4. Version Control
Using Git is a very good practice if you're working on applications. It is an open-source platform where the entire code exists from the initial stage
Some of them are:
GitHub, GitLab, Beanstalk, Mercurial
5. Build Projects
Post mastering the theory, the final stage is practicing and application of the knowledge acquired.
Practice, practice and practice some more!
Credits: Sandeep Jain
@JavaScript_js_learn
1. Choose a Technology
Full-stack development comprises
front-end, back-end, and database management. Few technologies on which you can work and are trending:
A. MERN B. MEAN
2. Frontend Development
Front-End is the User Interface, it deals with the website's overall appearance & how interactive it is
Mastering the elements of HTML, CSS, & JavaScript is essential.
HTML - Start with creating a small webpage. Include; tables, images & links to make it more eye-catching.
CSS - Add colors, borders, build the navigation bar, play with the icons, font, and text
JavaScript - Learn about DOM and API
3. Backend Development
Ace these skills:
Coding Languages - Python, Java & Javascript
Frameworks - Express, Django, Ruby on Rails
Database Management Systems - MongoDB, MySQL, etc
API - (Application Program Interface)
Client-Server Architecture
4. Version Control
Using Git is a very good practice if you're working on applications. It is an open-source platform where the entire code exists from the initial stage
Some of them are:
GitHub, GitLab, Beanstalk, Mercurial
5. Build Projects
Post mastering the theory, the final stage is practicing and application of the knowledge acquired.
Practice, practice and practice some more!
Credits: Sandeep Jain
@JavaScript_js_learn
Learn JavaScript™ pinned «Roadmap To Becoming A Full Stack Web Developer In 2022 1. Choose a Technology Full-stack development comprises front-end, back-end, and database management. Few technologies on which you can work and are trending: A. MERN B. MEAN 2. Frontend Development…»
All right then gang, Net Ninja released an exercise to create an authentication system with Node JS and MERN Stack
https://www.youtube.com/watch?v=WsRBmwNkv3Q&list=PL4cUxeGkcC9g8OhpOZxNdhXggFz2lOuCT&index=1
The complete playlist can be seen here
https://www.youtube.com/playlist?list=PL4cUxeGkcC9g8OhpOZxNdhXggFz2lOuCT
—-
This series of exercises is a continuation of the previous advanced playlist, which is to create a basic MERN Stack application
https://www.youtube.com/playlist?list=PL4cUxeGkcC9iJ_KkrkBZWZRHVwnzLIoUE
#netninja #mern #nodejs #auth
https://www.youtube.com/watch?v=WsRBmwNkv3Q&list=PL4cUxeGkcC9g8OhpOZxNdhXggFz2lOuCT&index=1
The complete playlist can be seen here
https://www.youtube.com/playlist?list=PL4cUxeGkcC9g8OhpOZxNdhXggFz2lOuCT
—-
This series of exercises is a continuation of the previous advanced playlist, which is to create a basic MERN Stack application
https://www.youtube.com/playlist?list=PL4cUxeGkcC9iJ_KkrkBZWZRHVwnzLIoUE
#netninja #mern #nodejs #auth
YouTube
MERN Authentication Tutorial #1 - Intro & Starter Project
Learn how to implement authentication (using JSON web tokens), within the MERN stack, in this tutorial series.
⭐⭐ Get the full course now (without ads) on the Net Ninja Pro site:
https://netninja.dev/p/mern-auth-tutorial/
⭐⭐ Get access to all free & PREMIUM…
⭐⭐ Get the full course now (without ads) on the Net Ninja Pro site:
https://netninja.dev/p/mern-auth-tutorial/
⭐⭐ Get access to all free & PREMIUM…
Create 3D visualizations with Lunchbox JS on Vue JS
https://blog.logrocket.com/build-3d-visuals-vue-lunchboxjs/
#vue #lunchbox #3d
https://blog.logrocket.com/build-3d-visuals-vue-lunchboxjs/
#vue #lunchbox #3d
LogRocket Blog
Build 3D visuals in Vue with Lunchbox.js - LogRocket Blog
In this article, we introduce the core concepts of Lunchbox.js and demonstrate how to use this tool to create 3D visuals in Vue.
Exercises using repetition on JavaScript Objects
https://www.freecodecamp.org/news/how-to-iterate-over-objects-in-javascript/
---
Introduction to what an Object is in JavaScript
https://www.freecodecamp.org/news/objects-in-javascript-for-beginners/
#object #javascript #iteration #loop
https://www.freecodecamp.org/news/how-to-iterate-over-objects-in-javascript/
---
Introduction to what an Object is in JavaScript
https://www.freecodecamp.org/news/objects-in-javascript-for-beginners/
#object #javascript #iteration #loop
freeCodeCamp.org
Loop Through an Object in JavaScript – How to Iterate Over an Object in JS
In JavaScript, when you hear the term "loop", you probably think of using the various loop methods like for loops [/news/javascript-for-loops/], forEach() [/news/javascript-foreach-js-array-for-each-example/], map() and others. But in the case of objects…
Review some code editors with the Fireship channel
https://youtu.be/8PhdfcX9tG0
#fireship #code #editor
https://youtu.be/8PhdfcX9tG0
#fireship #code #editor
YouTube
I tried 10 code editors
The top 10 code editors for programmers in 2022. We start by exploring simple text editors like vim, then show the evolution to IDEs like Visual Studio.
#programming #code #top10
🔗 Resources
VS Code course https://fireship.io/courses/vscode-tricks
Editor…
#programming #code #top10
🔗 Resources
VS Code course https://fireship.io/courses/vscode-tricks
Editor…
Practice using Material UI with Next JS
https://blog.logrocket.com/getting-started-with-mui-and-next-js/
---
Practice using Redux on Next JS
https://blog.logrocket.com/use-redux-next-js
#redux #nextjs #mui #material
https://blog.logrocket.com/getting-started-with-mui-and-next-js/
---
Practice using Redux on Next JS
https://blog.logrocket.com/use-redux-next-js
#redux #nextjs #mui #material
LogRocket Blog
Getting started with MUI and Next.js - LogRocket Blog
Configuring MUI and Next.js to work together takes a bit more effort than you may initially think. Learn how to properly start with them.
https://ammaaraslam.hashnode.dev/improve-your-web-development-skills-by-building-these-5-projects#heading-recommended-way-to-build-these-applications
#WebDevelopment #Developer #JavaScript
#WebDevelopment #Developer #JavaScript
Ammaar's Blog
Improve Your Web Development Skills By Building These 5 Projects
Here are 5 projects that I think that you should build as a web developer to improve or to learn web development as a beginner
Learn JavaScript™ pinned «Frontend Roadmap & Free Resources https://telegra.ph/Frontend-Roadmap--Free-Resources-07-22 #frontend #resources»
Forwarded from Learn JavaScript™
✨65 JavaScript resources that can help you✨
🔹 Websites
1. Java5cript
https://www.java5cript.com/
2. JavaScript Tutorial
https://www.javascripttutorial.net/
3. JavaScript 30
https://javascript30.com/
4. JavaScript Info
https://javascript.info/
5. JavaScript by Pluralsight
https://www.javascript.com/
🔹 Learn through visualizing
6. JS Visualizer
https://www.jsv9000.app/
7. UI dev visualizer
https://ui.dev/javascript-visualizer/
8. JS Tutor
http://pythontutor.com/javascript.html#mode=edit
🔹 Documents
9. MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript
10. W3 Schools
https://www.w3schools.com/js/
11. DevDocs
https://devdocs.io/javascript/
12. JavaScript Info
https://javascript.info/
13. JavaScript Garden
https://bonsaiden.github.io/JavaScript-Garden/
🔹 GitHub repo
14. Modern JavaScript tutorial
https://github.com/javascript-tutorial/en.javascript.info
15. Awesome JS Learning
https://github.com/micromata/awesome-javascript-learning
16. JS by example
https://github.com/bmkmanoj/js-by-examples
17. 33 JS concepts
https://github.com/leonardomso/33-js-concepts
18. 30 seconds of code
https://github.com/leonardomso/33-js-concepts
19. JavaScript question
https://github.com/lydiahallie/javascript-questions
20. JS Style Guide
https://github.com/airbnb/javascript
🔹 Code Snippet
21. 30 seconds of code
https://www.30secondsofcode.org/js/p/1
22. JS source
https://javascriptsource.com/
23. Get Butterfly
https://getbutterfly.com/javascript/
24. JS Fiddle
https://jsfiddle.net/
25. JavaScript (ES6) code snippets
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
🔹 Books
26. Eloquent JS
https://eloquentjavascript.net/
27. JS Design pattern
https://addyosmani.com/resources/essentialjsdesignpatterns/book/
28. The JavaScript Beginner's Handbook
https://flaviocopes.com/page/javascript-handbook/
29. Learn JavaScript with Ease
https://bit.ly/3flK1e6
30. Human JavaScript
https://read.humanjavascript.com/
🔹 Tips and Tricks
31. JS tips
https://www.jstips.co/
32. JS tips and tricks
https://github.com/catalinpit/JS-Tips-And-Tricks
33. Kirupa
https://www.kirupa.com/javascript/javascript_tips_and_tricks.htm
🔹 Projects
34. 10 JS projects in 10 hours
https://youtu.be/dtKciwk_si4
35. 15 JS projects
https://youtu.be/3PHXvlpOkf4
36. Build 7 games using JS
https://youtu.be/lhNdUVh3qCc
37. 50 projects in 50 days
https://www.udemy.com/course/50-projects-50-days/
38. JavaScript Projects for Beginners
https://jsbeginners.com/javascript-projects-for-beginners/
🔹 Algorithms
39. Algorithms in JS
https://github.com/trekhleb/javascript-algorithms
40. JS DSA
https://github.com/TheAlgorithms/Javascript
41. Algo test
https://www.testdome.com/tests/javascript-algorithms-online-test/162
42. Interview algo
https://www.thatjsdude.com/interview/js1.html
🔹 Cheat sheets
43. JS Cheat sheet
https://github.com/iLoveCodingOrg/javascript-cheatsheet/blob/master/js-cheatsheet.pdf
44. HTML, CSS, JS cheat sheet
https://htmlcheatsheet.com/js/
45.JavaScript Cheat Sheet
https://cheatography.com/davechild/cheat-sheets/javascript/
46. Over API
https://overapi.com/javascript
47. Awesome cheat sheet
https://github.com/LeCoupa/awesome-cheatsheets/blob/master/languages/javascript.js
48. Array and date cheat sheet
https://t.me/learn_JavaScript_js/327
49. DevHints
https://devhints.io/es6
🔹 COURSES
50. Code Academy
https://www.codecademy.com/learn/introduction-to-javascript
51. Udemy
https://www.udemy.com/course/the-complete-javascript-course/
52. Coursera
https://www.coursera.org/learn/javascript
53. Plural Sight
https://www.pluralsight.com/courses/quick-start-javascript-1-1870
54. Scrimba
https://scrimba.com/topic/javascript
🔹 Readings
55. Geeks For Geeks
https://www.geeksforgeeks.org/javascript-tutorial/
56. Java Point
https://www.javatpoint.com/javascript-tutorial
57. Tutorials Point
https://bit.ly/3lWUrSw
58. Learn JS
https://www.learn-js.org/
59. The Odin Project
https://theodinproject.com/paths/full-stack-javascript/courses/javascript
🔹 Websites
1. Java5cript
https://www.java5cript.com/
2. JavaScript Tutorial
https://www.javascripttutorial.net/
3. JavaScript 30
https://javascript30.com/
4. JavaScript Info
https://javascript.info/
5. JavaScript by Pluralsight
https://www.javascript.com/
🔹 Learn through visualizing
6. JS Visualizer
https://www.jsv9000.app/
7. UI dev visualizer
https://ui.dev/javascript-visualizer/
8. JS Tutor
http://pythontutor.com/javascript.html#mode=edit
🔹 Documents
9. MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript
10. W3 Schools
https://www.w3schools.com/js/
11. DevDocs
https://devdocs.io/javascript/
12. JavaScript Info
https://javascript.info/
13. JavaScript Garden
https://bonsaiden.github.io/JavaScript-Garden/
🔹 GitHub repo
14. Modern JavaScript tutorial
https://github.com/javascript-tutorial/en.javascript.info
15. Awesome JS Learning
https://github.com/micromata/awesome-javascript-learning
16. JS by example
https://github.com/bmkmanoj/js-by-examples
17. 33 JS concepts
https://github.com/leonardomso/33-js-concepts
18. 30 seconds of code
https://github.com/leonardomso/33-js-concepts
19. JavaScript question
https://github.com/lydiahallie/javascript-questions
20. JS Style Guide
https://github.com/airbnb/javascript
🔹 Code Snippet
21. 30 seconds of code
https://www.30secondsofcode.org/js/p/1
22. JS source
https://javascriptsource.com/
23. Get Butterfly
https://getbutterfly.com/javascript/
24. JS Fiddle
https://jsfiddle.net/
25. JavaScript (ES6) code snippets
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
🔹 Books
26. Eloquent JS
https://eloquentjavascript.net/
27. JS Design pattern
https://addyosmani.com/resources/essentialjsdesignpatterns/book/
28. The JavaScript Beginner's Handbook
https://flaviocopes.com/page/javascript-handbook/
29. Learn JavaScript with Ease
https://bit.ly/3flK1e6
30. Human JavaScript
https://read.humanjavascript.com/
🔹 Tips and Tricks
31. JS tips
https://www.jstips.co/
32. JS tips and tricks
https://github.com/catalinpit/JS-Tips-And-Tricks
33. Kirupa
https://www.kirupa.com/javascript/javascript_tips_and_tricks.htm
🔹 Projects
34. 10 JS projects in 10 hours
https://youtu.be/dtKciwk_si4
35. 15 JS projects
https://youtu.be/3PHXvlpOkf4
36. Build 7 games using JS
https://youtu.be/lhNdUVh3qCc
37. 50 projects in 50 days
https://www.udemy.com/course/50-projects-50-days/
38. JavaScript Projects for Beginners
https://jsbeginners.com/javascript-projects-for-beginners/
🔹 Algorithms
39. Algorithms in JS
https://github.com/trekhleb/javascript-algorithms
40. JS DSA
https://github.com/TheAlgorithms/Javascript
41. Algo test
https://www.testdome.com/tests/javascript-algorithms-online-test/162
42. Interview algo
https://www.thatjsdude.com/interview/js1.html
🔹 Cheat sheets
43. JS Cheat sheet
https://github.com/iLoveCodingOrg/javascript-cheatsheet/blob/master/js-cheatsheet.pdf
44. HTML, CSS, JS cheat sheet
https://htmlcheatsheet.com/js/
45.JavaScript Cheat Sheet
https://cheatography.com/davechild/cheat-sheets/javascript/
46. Over API
https://overapi.com/javascript
47. Awesome cheat sheet
https://github.com/LeCoupa/awesome-cheatsheets/blob/master/languages/javascript.js
48. Array and date cheat sheet
https://t.me/learn_JavaScript_js/327
49. DevHints
https://devhints.io/es6
🔹 COURSES
50. Code Academy
https://www.codecademy.com/learn/introduction-to-javascript
51. Udemy
https://www.udemy.com/course/the-complete-javascript-course/
52. Coursera
https://www.coursera.org/learn/javascript
53. Plural Sight
https://www.pluralsight.com/courses/quick-start-javascript-1-1870
54. Scrimba
https://scrimba.com/topic/javascript
🔹 Readings
55. Geeks For Geeks
https://www.geeksforgeeks.org/javascript-tutorial/
56. Java Point
https://www.javatpoint.com/javascript-tutorial
57. Tutorials Point
https://bit.ly/3lWUrSw
58. Learn JS
https://www.learn-js.org/
59. The Odin Project
https://theodinproject.com/paths/full-stack-javascript/courses/javascript