DEV Community: arking115

Swift Roadmap (includes explanations, examples, visual examples and resources) - iOS Development

arking115 — Fri, 10 Nov 2023 09:41:05 +0000

Hello, dev community! The past few weeks I've been hard at work on a Swift + SwiftUI Roadmap intended for those of you who want to learn about iOS Development, and in here you'll find all the knowledge for becoming a great iOS developer! Think of this as some kind of guidebook, but that actually wants to teach you something. Honestly this is something I wish I had when first starting to learn Swift.

Why bother?

Well, one of the key aspects of learning anything in this life is sharing knowledge with others. That's how the foundation of everything started, so I thought to myself that creating something like this would be amazing to pass down to the newcomers. Although this roadmap starts from a "level 0", there are a lot of more advanced concepts further down the line, so it can provide for everyone, even Swift developers that already have a lot of experience.

Here is the visual format of the roadmap. It has the complete documentation, explanations given in full, examples, visual examples, funny jokes and even intermissions. I strongly suggest you check it out!

DO KEEP IN MIND THAT THIS IS ONLY A PREVIEW, THE FULL ROADMAP WITH ALL OF THE EXPLANATIONS, RESOURCES, AND PROJECTS IS AVAILABLE IN THE VISUAL FORMAT

If you wish to contribute

I know this may not be ALL the mountain that is Swift, but I tried to cover most of the important stuff. If you think I may have missed something very important, please do let me know. I really want EVERYONE to provide feedback and contribute to this roadmap, because as I said before: sharing knowledge is key, and I wish you would share yours to help others too!
Please consider creating an issue on our GitHub if you have any kind of problem with the roadmap or you would like to see it updated with other stuff.
Join our Discord if you wish to provide relevant feedback for the roadmap and interact with our team.

PLEASE GIVE FEEDBACK TO THE FULL ROADMAP IN THE LINK, AS I SAID THIS IS JUST A PREVIEW OF CHAPTERS AND RESOURCES, NOT THE FULL ROADMAP

0.About Swift

Swift is a modern and versatile programming language developed by Apple as a means for developers to write fast, responsive code for building AppleOS applications (includes iOS, tvOS, WatchOS, and even the new VisionOS)

Easy to learn
Performant
Open Source
Rich Library
Growing Job Opportunities

1. Swift Fundamentals

Comments
- Swift Documentation for Comments
- How to better Document Swift Code
Types in Swift
- Constants and Variables
  - How to use Variables and Constants
  - The Basics - Constants and Variables
- Basic Types (bool, integer, string)
- Type Safety and Inheritance
  - Swift is a Type-safe language, meaning you must keep track of a variable's type
  - Type Safety and Type Inheritance
- Functions - very important!! And probably the core of Swift
  - How to use Functions in Swift
Non-Primitive Data Types in Swift
- ObjectOrientedProgramming is based on the premise that we design code around data and objects instead of functions and logic.
  - What is Object Oriented Programming
- Enums in Swift
  - How to use Enums
- Structs in Swift
  - [How to use Structs](https://youtu.be/gRKlprUj-I8?si=zCqPpPLISMYeMes3
- Classes in Swift
  - Classes are used to define objects, and they are very alike to Structs, but Classes are used to defined much more complex Objects
  - Classes in Swift
  - How to use Classes in Swift
- Access Control
  - Literally what the name suggests, it ensures a way to control which files are accessible from what part of your project.
  - How to use Access Control
- Arrays
  - This is a Collection Type
  - Learn all about Swift Arrays
- Sets
  - This is a Collection Type
  - Sets in 60 seconds
- Dictionaries
  - This is a Collection Type
  - How to use Dictionaries in Swift
Flow Control in Swift (Loops and Conditionals)
- If-Else Conditionals (every programming language 101)
  - Conditionals for Beginners
- For, While, Repeat - the three horseman
  - Swift for Beginners - Loops
- Guard Statements - kind of a reverse of an if statement
  - Swift for Beginners - Guard Statements
- Defer statement - used for code cleanup after exit
  - All you need to know about defer
Collection Types Operations (Sort, Filter, Map)

2. Creating and Manipulating Views

In SwiftUI you can add text, images, buttons, custom shapes, and pretty much any UI element you could ever think for, but what you have to understand is that any element has to be inside of a View protocol What are View Protocols
- Basic UI Elements
- Graphics Manipulation - Colors
  - Basic knowledge of Color usage in Swift
- Gradients
  - How to render a Gradient
- Manipulating Images
  - Mastering SwiftUI Image View
- Frames
  - How to use Frames and Alignments in SwiftUI
- Stacks - VStack, HStack, ZStack
  - How to use Stacks in SwiftUI
- Backgrounds
  - How to use System Materials and Backgrounds in SwiftUI
- Spacers
  - How to use Spacer in SwiftUI
- ScrollView - container of elements using Lazy Stacks
  - ScrollView containers
  - Using LazyStacks in SwiftUI
- ScrollViewReader
  - Implementing ScrollViewReader in SwiftUI
- Safe Areas - defining and ignoring them
  - How to use and ignore the Safe Area in SwiftUI

3.State Management

State management in Swift happens by just declaring variables instead of constants (e.g., var welcomeText: String = "Hello, user!"), but, SwiftUI doesn't like this because it doesn't know that the variable will at some point change, and since we are working with UI elements, the View protocol should update according to the value of the variable. That's where the state property wrapper comes into play.
- How to use the State property wrapper in SwiftUI

4.Sharing View States

5.Sharing State between Parent and Child - Binding

How to use @Binding in SwiftUI

6.Extracting functions and Subviews

7.Gestures and Animations; Transitions

8.Swift Sheets

Now that we know how to add and customize animations and transition to our app, another KEY element that developers use when building applications are what's known as Sheets
- How to present a new view using Sheets

9.ActionSheet and Alerts

10. Context Menu

How to show a context menu

11. NavigationStack

So, you've already learned about transition animations and adding sheets (a view on top of an existing view), but, let's say that for example you want to change the keyboard language on your iPhone. For that, you'd have to go to Settings -> General -> Keyboard -> Keyboards. And, as you can tell, the system isn't adding sheets on top of sheets on top of the main view, because that would be horrible, like? Well, here's where NavigationStacks come into play (previously known as NavigationView, but that's became deprecated in iOS 17) and NavigationLinks
- How to use NavigationStack in SwiftUI

12. Lists

Since we've learned about creating the flow of navigation of our app using NavigationStack, now's a good time to tell you about Lists. Lists and navigation go hand-in-hand because it's very easy to define links using lists.
- How to use List in SwiftUI

13. TabView and Badges in SwiftUI

TabView
- How to use TabView in SwiftUI
Badges, .badge modifier
- How to use Badges in SwiftUI

14. User Inputs - Text Inputs, Toggles, TextSelection

Other UI Elements that will most likely be present in your application are TextField and TextEditor. Text fields are text inputs that you request from users of your app. These can be anything you want, but they are mostly used for requesting user data (things like passwords, emails, usernames) and stuff like that. There are also Toggles, simple control switches that "toggle" between an on and off state

15.FocusState

How to use @FocusState in SwiftUI

16. Pickers - Color, Date & Menus

17.Other User Inputs - Steppers and Sliders

18. Complex view methods

Now, let's talk about Complex View methods starting with .onAppear() and .onDisappear functions. As their name suggests, the functions add an action to perform before the view appears, or after the view appears.
- How to use onAppear and onDisappear in SwiftUI

19. Custom Models in Swift

How to use custom models in SwiftUI

20.AppStorage

Now, in iOS applications, you want to sometimes store data inside of the application cache, using the @AppStorage property wrapper. AppStorage is useful for restoring the state of the application when a user closes it, and is generally used to reflect User Defaults values, useful for storing, for example, if a user is signed in or signed out of your app.
- How to use @AppStorage in SwiftUI

21. Transitioning to Concurrency - AsyncImage

Another KEY element in building Swift Applications is the AsyncImage view. What it basically does is it waits for the image to load before actually displaying it on the screen. You will find out more about Swift Asynchronous methods when we will talk about all aspects of Swift Concurrency, but for now, let's finish with the first part of the SwiftUI stuff.
- How to use AsyncImage in SwiftUI

22.Toolbar

How to use Toolbar in SwiftUI

23.Adapting your code to Dark Mode

The pinnacle of app design - Dark Mode. Since we are all aspiring young developers, most of us zoomers even, we just can't stand to stare at white elements on our 1000nits HDR10+ 4K OLED monitors, because they burn right through our fragile retinae. So, what you will have to do at some point is make your App dark mode compatible. How you do that, you might ask? Well, to put it simply, you define colors that dynamically change if the user has its appearance set to Light or Dark.
- How to adapt for Dark Mode in SwiftUI

24.Documenting your Swift Code

Imagine that there wouldn't exist documentation at all. It's just like IKEA sending you a floating bed with drawers but without giving you any instructions at all on how to assemble it. Even with the instructions, they are hard to do and take countless hours, but think about the horror that would await you without instructions at all!
- How to add documentation to Swift in Xcode

---Swift Concurrency ---

25.What is Concurrency?

Think of Concurrency as Swift’s fancy way of naming Asynchronous operations. Concurrency is Swift’s built-in way of writing the this type of operations. But what does Asynchronous actually means? Well, it refers to the fact that a piece of code actually runs in parallel to the main program flow. That's why it's called concurrency in Swift, because actions take place concurrently with program execution, without the app needing to wait for the results. In short, it is code that can run independently without requiring to wait for some part of it to be run. Think of videogame loading screen, and what happens when you go to a new level. The game has to load the assets required for your level, for your character, calculate the vector graphics, get your stats, your HP, etc. Well, imagine how long it would take if the game wasn't allowed to load all of this stuff in parallel, and instead it would first load the assets, then start building the environment and place each of the asset independently to where they belong, then render the graphics and so on. So what this actually does is it allows the user to go about his business in your application, while your app loads other stuff in the background that may or may not be required for future user actions. Now, let's go back to Swift and talk about Concurrency.

26.Error Handling

How to use Do, Try, Catch and Throws in Swift

27.Async and Await Functions

28. Task

Basically, just like in an employee schedule, some tasks will have a higher or a lower priority than others. For example, getting coffee for your cute co-worker Sarah should be of lower priority than fixing a bug that corrupts the entire database everytime a user likes Sarah's post (well, it depends, but you get the idea).
How to use Task and .task in Swift
TaskGroup
- How to use TaskGroup in Swift

29.Actors

30.The Sendable Protocol

How to use the Sendable protocol in Swift

31.MVVM Design Pattern

MVVM stands for Model-View-ViewModel. What it does is it describes the flow of data within our app and separates application tasks(handling of the UI, the backend such that the view is not dependent on any specific model problem).
- Model - responsible for representing the data from our backend logic
- View - responsible for handling all the layouts and displaying the data
- ViewModel - responsible for transforming data recieved in a View, recieving actions from the View, dealing with logic
MVVM Swift: Model View ViewModel Design Pattern

32.Search Features

All you need to do to add a search interface to your app is applying one of the searchable view modifiers inside of your NavigationStack or a view inside of it, by using .searchable()
- How to use Searchable, Search Suggestions, Search Scopes in SwiftUI

33.PhotosPicker

A Picker that we haven't talked about yet is the new PhotosPicker introduced in the PhotoUI framework in Swift.
- How to use PhotosPicker in SwiftUI

Alright, let's finish business: SwiftUI Part 2

34.Timer and .onReceive

Timers and just as the name says, a class object that, we say, "fires" after a certain time interval. To actually use the data sent by Timers, we use the .onReceive() modifier, which can be read about here.
- How to use Timer and .onReceive in SwiftUI

35.FileManager in Swift

This is another KEY element that you have to learn for mastering Swift
- How to save data and images to FileManager Swift

36.Haptics and Sound Effects

New in iOS 17, Apple introduced the SensoryFeedback view modifier, marked by .sensoryFeedback() which can now represent simple haptics useful for example to let the user know that a task has succeeded or if an error is present.
Simple sound effects can also be easily added inside of our application using the AVFoundation framework built by Apple. You can simply import it into your app and use something like AudioServicesPlaySystemSound(1026), where 1026 is the SystemSound id, for simple alerts and or notification sounds within your app. If you want to add custom sounds, you should instead use AVKit Framework.
- How to add haptic effects using sensory feedback
- How to add sound effects in Swift

37.Push Notifications

How to use local Push Notifications in SwiftUI

38.Core Data - CRUD Operations

This is another way to cache application data, just like UserDefault, BUT, this is used to add a LOT of data inside of it, unlike UserDefault which should be used only for very small pieces. We will also talk about CRUD operations (Create, Read, Update, Delete)
- How to use Core Data with @FetchRequest in Swift
- How to use Core Data with MVVM in Swift
One thing that you need to know is that every App that uses Core Data has a Core Data stack.
- What is the Core Data Stack

39.Multi-threading in Swift

Multi-threading with background threads and queues in Swift

40.Closures

41.Codeable, Encodable, Decodable

Codable, Decodable and Encodable in Swift

42.Using the API in Swift

In this roadmap, we'll talk about two ways which you can download data in Swift
- The first one is by using URLSession, which is a class object that coordinates a group of related, network data transfer tasks.
- The second one is by using the Combine Framework. This framework provides a Swift API that processes values over time, which can represent many kinds of asynchronous events, by using what's known as Publishers and Subscribers. Publishers provide data which can then be accesed by Subscribers

43.NSCache

Another type of caching class object in Swift is NSCache. But, the key thing with this type ofcaching is that it is not permanent, will not persist between sessions, and it's used to store key-value pairs that may be deleted in case of low resources on the user's phone.
- How to save and cache images in a SwiftUI app

44.Custom features in SwiftUI

45.Custom Protocols in Swift

I've talked before about what Protocols are and I've actually referenced them a lot throughout this roadmap, but now we'll do a deeper dive inside this concept. First of all, a Protocol defines a blueprint of methods or properties thatcan then be adapted by classes (or other types). One of the biggest benefits of using Protocols is actually the fact that multiple classes can abide by a single protocol. Let's suppose we have two objects struct Dog { var breed: Labrador} and struct Cat { var breed: British Shorthair}. Now, let's print their names. You'd have to do something like func printOut(dog: Dog){ dog.breed } and func printOut(cat: Cat){ cat.breed }. But, if you'd use a protocol, for example Protocol Printing { var name: String { get } }, and then you define the structs as protocolsof Printing: struct Dog: Printing { var name: String } and struct Cat: Printing { var name: String }, you could then use a single function to print both of their names, like so: `func printOut(object: Printing) { print(object.name) }.
- How to use Protocols in Swift

46.Unit and UI Testing

47.CloudKit

CloudKit is Apple's Framework for moving data between your app and iCloud. With this, you make sure that data stored by your app in iCloud can be accessed from multiple devices (e.g., the Notes app on iPhone and Mac use CloudKit for keeping notes synced between them). This framework provides services from transfering data to and from iCloud servers, and network connection MUST be present for it to work (that's why it's a cloud, duh)

48.TimelineView

TimelineView is a view that updates according to a provided schedule, acting as a container where it redraws the content it contains at scheduled point of time. This is useful, for example, when we don't want the body of our SwiftUI views to update whenever a data change occurs, but at a given point in time.
- How to use TimelineView in SwiftUI

49.KeyPaths in Swift

How to use KeyPaths in Swift

50.Accessibility - VoiceOver

How to use VoiceOver in Swift

51.The End

Damn, you've finally did it. You reached the end. Congratulations! Took way longer than you first hoped for, huh? Well, as you could already see, Swift is a very vast and complex programming language, but, the easy-to-find documentation and video tutorials provide you with a bunch of tools useful for learning, but, one thing to keep in mind is that with every new OS version, Apple adds a bunch of improvements to Swift and sometimes also removes or provides replacement for functions and methods in all of their Frameworks. Altough I've covered most of the stuff available currently in Swift, there's no telling when some things will get deprecated or better alternatives will be available.
What I'd do in your place is explore my horizon. There's no better alternative to learning than to practice and write Swift code yourself, and by building an app from the ground-up all by yourself. Me, personally, I tried to create a SoundCloud alternative with better UI and animations. It was a fun project that I enjoy, and I plan on releasing the repo for it on GitHub in the future after I finish it, because right now it's in a rougher shape :D

Please let me know what you think about it and make sure to join our Discord

React roadmap ( with explanations and resources, all in one place)

arking115 — Fri, 27 Oct 2023 05:01:36 +0000

Hello everyone! I made a roadmap with concepts I wish I knew earlier when I started to learn React, the resources I found were either too simple or too complicated, both leading to problems further down the line, I tried to make it so this resource is valuable for everyone. Throughout my time as a React developer, I've delved into its fascinating aspects as well as its challenges. I hope this post provides value to you!

Why?

For those who are just starting out or looking to enhance their React skills, I hope you find this resource helpful. For a long time, I've wanted to create something that brings together all the missing pieces of knowledge I needed. Here is the visual version of the React roadmap, it has the complete documentation and is nicer to navigate.

If you want to help

For those who are already well-versed in React, this resource goes beyond simple React some of these concepts may prove to be useful even to you. I'd greatly appreciate your feedback on what I should add or remove. I want all of us to contribute to this roadmap in order to make the best resource possible for others to learn. The resource I pinned above includes a discord where we can talk or you can directly create pull requests on GitHub on the resource.

This is the knowledge I built over the years, without further ado let's dive in.

1.Why react?

Mature simple-to-grasp dev workflow
Ultimate flexibility and compatibility
Component based architecture
JSX - easier DOM manipulation

2.Set up

ES modules explained
Module bundlers explained - Fireship
Create React App
- Create react app
Vite
Parcel
- Parcel Guide
Razzle
- Razzle Guide
Snowpack
- Snowpack Setup
Manual Setup (Webpack and Babel)
- Create app manually (much to learn)

3.ReactDOM

What is the DOM?
Virtual DOM
- Simple Virtual DOM explanation
- Why is it import and better

4.JSX (Important)

What is JSX?
JSX, syntax extension for JavaScript
JSX, Syntactic Sugar for JS
- JS Syntactic Sugar
- JSX is Syntactic Sugar for JS
JSX attributes (brief explanation)
- Brief explanation

5.Style (choose one after checking each one)

6.React Components (Important)

Component classes vs Functional components
- Brief state understanding
- Class Components vs Functional Components
Components explained
- Components explained video
Events
- Events
Components lifecycle
- Lifecycles explained
Components props
- Props simple explanation
Clean an reusable components with props

7.Hooks

Preview
useState
- useState explained
- More in depth
useEffect
- useEffect explained
- More in depth
Other hooks
Write custom hooks
- Simple explanation
- In depth logical example

8.Router

React router course
Are there more?
While there are several libraries for routing in React, React Router serves as the foundational library for many of them. When working with different frameworks, routing mechanisms may vary, with some offering server-side routing, client-side routing, or a combination of both. Examples of such frameworks include Next.js, Astro, Remix, and others.

9.Advanced Props and State management

Prop drilling
- Prop Drilling
Context API (advanced)
- Context Api
- Context Hack
Redux
- Redux course
Zustand
Nanostores
- Nanostores explanation
- Video explanation

10.Pure functions

11.React programming patterns

React programming patterns course

12.Api usage (choose one)

Fetch API
- Fetch API
- Fetch API article
Axios
- Axios
- Axios & React examples
Extras
- Asynchronous javascript
- Stateful vs Stateless components

13.React frameworks

While I can't delve into the details of each framework, as they each deserve a roadmap of their own, it's worth noting that frameworks represent the 'new' way of building React applications. They offer additional utilities and many out-of-the-box features that were not readily available before. I'll briefly highlight when you should consider using each framework and their notable features. When building your next React app, you can evaluate which one best suits your project and make an informed choice.
Next.js
Astro
Query
Remix
Gatsby
etc

14.React libraries (not mentioned yet)

Storybook
- Storybook why and how
Chakra UI
- Chakra UI Course
- Chakra UI compared to other libraries
Specific picks and experimental
Formik
- Why should you use Formik
- Formik course
Yup
- Yup create validation
React helmet
- React Helmet usage explained and examples

15.Performance

Use production builds
- Production build explained
- Production build vs development build
Lazy loading vs eager loading
Code splitting
- Code splitting explained & usage
- Advanced code splitting
React profiler
- React profiler tutorial
- Full concept
Tree shaking
- Bundle size problem
- Tree shaking on webpack
Virtualisation for long lists
- Virtualisation explained
- Virtualisation usage video

16.Testing

How to write clean code
What is testing?
Testing tools
- Jest
  - Presentation
  - Full course
- Cypress
  - Cypress in 100 seconds
  - Cypress course
- Mocha
  - Mocha simple course

17.Advanced React patterns

HOC
Render props
- Render Props and HOC
- Render props example
Container pattern
- What is container pattern?
- Container pattern usage
State Initializer Pattern
- Explanation & usage
React reconciliation
- React reconciliation
Debouncing and Throttling
- Debouncing and Throttling in 16 mins

Final words,

With this, I conclude my React roadmap, along with the knowledge I've built over the years about this amazing framework. Feel free to come back to it whenever you want to level up your React game. With React, HTML, CSS, JavaScript, and knowing a bunch of the libraries mentioned in this roadmap, you can build anything; there is no limit."

What's next?
- Get a job
  - We both know a good step forward would be working alongside talented people and learning from them day in and day out. You can build a portfolio of some personal projects, create a resume, and try to apply to jobs, all while continuing to expand your knowledge of React.
- Expend knowledge
  - React here, React there, all I do is talk about React, but the truth is, whether you like it or not, you will have to expand your knowledge towards new technologies. That's what programming is all about. The more you know, the better you are. Maybe try these roadmaps next.And remember"Experience is the name everyone gives to their mistakes." – Oscar Wilde

Frontend development roadmap (visual support + resources)

arking115 — Sat, 14 Oct 2023 12:08:29 +0000

Hi all. I've tried below to compile a list of all the videos/resource I used when learning frontend development ( I learned mostly through videos ), and give them a structure. I really struggled to find high-quality resources and making sense of all this mess so I hope this post will come to your aid if you fell like I did.

I've also used this list to create a roadmap with a tool I've been working on with a few friends to help structure everything in a visually appealing way. This is the Frontend roadmap fully completed. It has additional explanations and it looks more nice than plain text. The chapters are down in the post.

Let me know If I can improve it in any way !

Enjoy !!

Essential Prequisites

Basics of computer science

Recommended prequisites

Git and GitHub
- Git by Fireship
- Git by FreeCodeCamp
Problem Solving
- Problem Solving by Fireship
- Problem Solving by Tech with Tim

0. How to learn web development and not lose your mind Web development is notoriously complicated to get started with, having a very complicated ecosystem. You should master the core that being JavaScript, HTML, CSS, and a web framework, and if you continue to be curious, the rest will come along, for now, you should only know about most of the stuff that "they exist". I highly recommend going through all of the videos/resources and code along or at least be focused and understand everything and WHY it is done the way it is.

1. Internet and Web

A. How does the internet work?

B. What if the internet never existed - What if the Internet Never Existed

C. Networking - Computer Networking Course

2. HTML

A. HTML Basics

B. A Taste of SEO

SEO Basics

C. HTML Semantic Elements

HTML Semantic Elements

3. CSS

A. Basics

Bro Code CSS

B. Master Your Layouts

C. Responsive Design

D. CSS Animations

Learn CSS Animations

4. Javascript

A. Basics- Javascript for Haters- Javascript - Bro Code- Javascript - SuperSimpleDev

B. DOM manipulation with Javascript- DOM Manipulation- Event Listeners

C. What the hell is Node.js?- What the Hell is Node.js?

D. Javascript Is Weird- Javascript Is Weird

E. 100 Javascript Concepts- 100 Javascript Concepts

F. What is ECMAScript?- Javascript and ECMAScript- ES6 Modules

5. How to do graphics in JavaScript

A. Canvas- Learn Canvas API- Canvas Particle Animations

B. SVG- SVG in 100 Seconds- Awesome SVG Animation- Beautiful SVG Curves

C. JavaScript + CSS- Animating Text with JavaScript- Professional Scrolling Effect

6. JavaScript Runtimes

7. Package Managers

8. Bundling and Transpilation Tools

Project Ideas:

1. The Div Race

Create a website with two racing divs: one controlled by an evil wizard (accelerates by 10 pixels per sec) and the other by you (move by 50 pixels per sec).
Use buttons to control your div and reset the wizard's div.
Goal: Win the race.
Tip: Use recursive setTimeout for the wizard's functionality.

2. Playlist Saving App

Build a web app for managing playlists with titles and links.
Add, remove, edit entries and view them.
Entries are clickable links.

3. Sorting Algorithm Visualizer

Implement a sorting algorithm visualizer.
Choose one from a list of algorithms or implement your own.
More Details

10. Advanced CSS

A. Tailwind CSS

Video Tutorial

B. UI Libraries

Bootstrap: Official Site
Shadcn UI: Official Site
Bulma: Official Site

C. Sass

Explainer Video

11. Advanced JavaScript

A. Asynchronous JavaScript

B. Event Loop and Concurrency

Watch Here

C. Closures

Learn Here

D. Fetch API

12. Testing

Test-Driven Development

TDD explained

13. JavaScript Frameworks of Never-Ending Pain

"Anything that can be written in JavaScript will eventually be written in JavaScript."
Comparison in 10 Frameworks
History of JS Frameworks

A. Established Frameworks

1. React

2. Angular

Watch Video

3. Vue

Watch Video

B. Hot and New

1. Svelte

2. Solid.js

Watch Video

3. Alpine.js

Watch Video

14. Choosing the "Right" Framework

Watch Video

15. Typecheckers

A. TypeScript

B. JSDoc

JSDoc Course

16. State Management

A. What is State

Watch Video

B. What are Side Effects

Watch Video

C. State in React

Watch Video

D. State in Svelte

Watch Video

17. Advanced Testing

A. Unit and Integration Testing

Vitest
Jest

B. End-to-End Testing

Project Ideas

Easy: Personal Blog

Create a personal blog website with navigable multiple blogs.
Features: Add new blogs, edit existing ones, add/remove blocks of text and images.

Hard: Path Visualizer Algorithm

Visualize pathing algorithms based on Clement's video.
Features: Put walls, implement one algorithm, and create animations.
1. Clement's Video

19. Basics of APIs

20. Performance

General Performance Guide

A. Measuring Performance

Lighthouse
- Unlighthouse
- Lighthouse Video
Profiling

B. Improving Performance

Optimize Assets
Lazy Loading
- Images
- Next.js
Web Workers
- Video
Caching
- Explained
Use a CDN
- Video
Research Frameworks and Tools - Make sure to do your research on your current javascript framework and find out if it has a superset (eg React ->Nextjs, Svelte -> Sveltekit, Vue->Nuxtjs). They often come with many improvments and optimizations out of the box. There are also tools like Partytown which can vastly improve performance in some specific cases
Ultimate Tip: Understand and adapt generic optimizations for specific issues in your app. There will be no silver bullet, you will most likely have to apply a combination of all optimizations listed above, so don't take them as the end of possibilities, just use them as building blocks

21. Ways to Render a Webpage

A. Static Websites

Static vs Dynamic

B. Single Page Applications (SPA)

Single vs Multi Page

C. Server Side Rendering (SSR)

Video

D. Server Side Generation (SSG) - explained in videos above

E. Hydration - explained in videos above

22. SEO

SEO Video

23. Picking a Meta Framework

Meta frameworks can offer extra power and features over base frameworks like Svelte, React, etc.

24. Deployment and Hosting

Most platforms offer easy deployment via GitHub repositories.

28. Interesting Libraries

A. D3js

D3js

B. Threejs

Threejs

C. Animejs

Animejs

D. Chart.js

Chart.js

29. What's Next?

Build a project, prepare for job interviews, or learn new complementary skills.

Topics to Be Added

A. Application Storage

Video

B. Security

OWASP Cheat Sheet

C. Progressive Web Apps

D. ESLint and Prettier

E. CI/CD

F. Ruby on Rails

G. Meteorjs