PWA

Sonner - An opinionated toast component for React
Vaul is an unstyled drawer component for React that can be used as a Dialog replacement on tablet and mobile devices
Radix - An open-source component library optimized for fast development, easy maintenance, and accessibility
chalk - Display Terminal text with color formatted
clear - Clear Terminal
clui - Draw CLI Spinner/Loader
figlet - To create ASCII art from Text
inquirer - Interactive CLI
preferences - Encrypted preferences
cli-table - Draw CLI Table
keyword-extractor - Extract keywords by removing stop words
Swiper - The Most Modern Mobile Touch Slider
Animate.css | A cross-browser library of CSS animations
A react integration of animate.css (animate.style)
React Date Range Picker
Owl Carousel for JQuery uilabs.dev - Ract, Tainwind, Framer Motion

Cloud Deployment

Amplication - Create business applications, without coding | An open-source dev tool for building fully functional server-side Node.js apps with React clients...blazing fast! | Typescript, Node.js, NestJS, Prisma, REST API, a React admin UI, logging, authentication & authorization, Docker
GraphQL With React & Apollo [4] - Simple Heroku Deploy
dev.to - Build and Deploy your Django & React App: Authentication, Docker, AWS Lightsail, GitHub Actions & PostgreSQL
Enable cross-origin resource sharing
Public APIs for Testing - Github
Genezio - Deploy on the fastest full-stack cloud

How to Host a Web Application for Free
Deno - deploy

Web Development Roadmap - 2021

Web Developer Roadmap 2021 - Github By Kamran Ahmed
Backend Developer Roadmap 2021 - Github By Kamran Ahmed
DevOps Roadmap 2021 - Github By Kamran Ahmed
Design Patterns for Humans - Github By Kamran Ahmed
2021 - Web Development Study Plan
How to Learn Web Development in 2021 - a Web Developer Roadmap - freecodecamp
Web Developer Roadmap for 2021 (with Tutorials and YouTube videos) - dev.to (G)
Ultimate Resources for Front-End Development in 2021 + Giveaway - dev.to (G)

UI

Sense of aesthetics and an eye for perfection and detail

Web Development Skills

Event loop
Design patterns
Prototypes and classes
Regular functions vs. arrow functions
Learn more about how web pages are rendered
Promises and async / await
How the internet works (generally)
Familiarity with implementing middleware, custom routing, and proxies
Node.js streams, Service Workers, generators, Observables, WebSockets
React.js
GraphQL & Setting up GraphQL servers
Unit testing with React Testing Library
End-to-end testing with Cypress
Chrome dev tools
TypeScript
Authentication with JWT (JSON Web Tokens)
API Gateways
Restful APIs (I have mostly done GraphQL at this point)
PostgreSQL with Sequelize
Server logging best practices beyond console.log
Docker and Docker Compose
Get more familiar with Postman (or Insomnia which is a free alternative)
Authentication library like PassportJS
Serverless and JAMstack
NextJS: it's a framework for React that is designed to work great for JAMstack projects. I'll probably be taking Wes Bos' Advanced React course when he updates it since I already purchased it.
A headless CMS like KeystoneJS, Strapi, or similar. Probably one of the cheaper ones since some are expensive.
AWS Lambda and other Amazon services that might come in handy.
TailwindCSS
XState: a state management library
React Hook Form
Styled System: a helper library for Styled Components, which I already use
Design systems

Concepts

Side Effects: Impure functions (vs pure functions) - a general concept about behaviors of functions. A function is said to have side effects if it tries to modify anything outside its body. For example, if it modifies a global variable, then it is a side effect. If it makes a network call, it is a side effect as well. In computer science, a function or expression is said to have a side effect if it modifies some state outside its scope or has an observable interaction with its calling functions or the outside world besides returning a value. For example, a particular function might modify a global variable or static variable, modify one of its arguments, raise an exception, write data to a display or file, read data, or call other side-effecting functions. In the presence of side effects, a program's behavior may depend on history; that is, the order of evaluation matters. Understanding and debugging a function with side effects requires knowledge about the context and its possible histories.

Virtual DOM:

An in-memory object representation of actual HTML DOM maintained by JS libraries like React or Vue to optimize performance while manipulating it.
When rendering/re-rendering, possibly due to state change, the previous Virtual DOM is compared with the current Virtual DOM.
Identifies the changes and updates actual DOM. This process is called Reconciliation.

Courses

JavaScript Hard Parts v2
JavaScript Recent Parts
JavaScript New Hard Parts
Production Grade TypeScript
Production Ready NextJS
Intro to Containers

25 JavaScript Courses at PluralSight

JavaScript Getting Started
JavaScript Syntax and Operators
JavaScript Variables and Types
JavaScript Arrays and Collections
JavaScript Proxies and Reflection
JavaScript Generators and Iterators
JavaScript Modules
JavaScript Objects, Classes, and Prototypes
JavaScript Functions
JavaScript Promises and Async Programming
JavaScript Security: Best Practices
JavaScript REST APIs: Getting Started
Building a JavaScript Development Environment
Working with JavaScript Modules
Cypress: End-to-end JavaScript Testing
RxJS in Angular: Reactive Development
Learning Angular from Scratch
Angular Patterns & Best Practices
Creating a Living Style Guide with Sass and Vanilla JavaScript
Uploading Files with a JavaScript REST API
HTML, CSS, and JavaScript: The Big Picture
Developing JavaScript Single Page Applications Protected by Azure Active Directory
Using React Hooks
React: The Big Picture
Designing React Components

Typical Node.js Tech Stack

Frontend: JavaScript, Typescript, React + Redux (Redux Tooklit, Redux Persist), React Native, Flutter
TypeScript features and patterns: Generics, Utility Types, Type Guards, Mixins, and Decorators
Backend: Node.js, GraphQL
Database: MySQL, MongoDB etc
Build Tooks: Babel, Metro, Webpack,
In-memory / Cache: Redis, Elasticsearch
Messaging systems like RabbitMQ, SQS, etc.
Deployment: Kubernetes, Docker
Blockchain: Hyperledger Fabric
Cloud providers such as AWS, Azure, Google App Engine, etc.
Authentication:
- Basic Base64(UseID:Password),
- Digest (MD5, HMAC)
- SSO Standards (CAS, SAML 2.0, OpenID Connect)
- OpenID Connect (Based on OAuth 2.0, REST, JSON, JWT)
  - Adapted to web browser and native mobile applications
  - Attributes sharing trough UserInfo endpoint
Cookie: 4KB, Session(until window closed), Persistent(Specific period), Domain, Path, HTTP(s) based
A solid understanding in core web and browser concepts (for example, how the browser parses and constructs a web page)
Introduction to Web Security

EduTech: edpuzzle, Google Classroom, Canvas, Schoology, Moodle, Blackboard, PowerSchool, blackbaud

Application Stack

Language: Ruby/Ruby on Rails, Java, JavaScript, Python/Django
Database modeling (SQL and/or NoSQL)
Web scraping (Mechanize, Phantomjs, Selenium, XPath,... )
Front-end development in React/Redux/NodeJS/ES6, SCSS
JavaScript Echo System
- TypeScript
- Express.js, Next.js
- Loopback.js - A highly extensible Node.js and TypeScript framework for building APIs and microservices.
- AVA, Chai, Enzyme, Jasmine, Jest, Karma, Mocha, tape
- Redux, Redux-Saga, Redux-Thunk
- WebRTC, WebSocket, LocalStorage, ES6 and NPM
Backend development of RESTful services in Ruby on Rails, MongoDB, and Elasticsearch
Data modeling
Understanding Relational Database Model

Role + Responsibilities:

Work with the team to design, develop and support scalable applications
Implementing elegant, intuitive user experience using the latest front-end technologies.
Integrating global state solutions using Redux / MobX or any other state management library.
Developing API's and designing the data architecture using web frameworks like Express.
Write, test, and release production-ready code.
Work with our DevOps team to ensure continuous deployments of our applications

Qualification:

Experience developing highly scalable services and APIs
Knowledge of data modelling and database performance using NoSQL/SQL
Strong experience with JS library and ecosystems of React.
Familiarity developing SaaS applications in AWS/Azure
In-depth knowledge of designing and developing software in distributed architectures for multi-tier applications

Plus:

Experience with deployment and CI/CD is a plus!
TypeScript implementation with Frontend or Backend applications
Knowledge of GraphQL and it's libraries like Apollo, Prisma
Have worked with Jest, Enzyme, Mocha, Chai like testing libraries
Knowledge of document, key/value or other non-relational database systems such as Elastic Search, Redis, HBase, BigTable, DynamoDB, MongoDB

Senior Full-Stack Developer at Storytel

Semantic HTML with WCAG best-practices
Modern CSS (CSS Grid, responsive, mobile-first)
Working with design systems
Profiling and optimizing for the best user experience, Web Vitals
General understanding of how the web works (dns, cdn, servers)
Writing readable, maintainable and performant code.
Modern web development.
NextJS, Design System and monorepo.
Working with any website layout
Languages: Typescript, Javascript
Frameworks: React, NextJS, Storybook
Containers: Docker, K8S
Deployment: Terraform
Tooling: npm, turborepo, webpack, babel, code-splitting
Monitoring: Prometheus, Grafana
Testing experience: Unit, Integration, E2E with Jest / Cypress / Playwright

Tech Stack for Full Stack Development:

Node.js with Typescript
React for frontend development
PostgreSQL for persistent data storage
Kafka for our asynchronous message queue
Kubernetes and Docker to schedule and run our services
Jenkins to run our testing and deployment pipelines
AWS for our infrastructure

Mobile Software Engineer

(iOS)MVVM
Swift
RxSwift
Moya
Cocoa Touch
ObjectMapper
Realm
Firebase
Lottie
GoogleMaps
CameraManager
Layout in the storyboard
Hibs

Files

mobile-web.md

Latest commit

History

mobile-web.md

File metadata and controls

UI/UX Design

Fonts & Icons

Human Centric AI Interaction

Design References

REST API Design

GraphQL

Boilerplates

Web Apps - Getting Started

PWA

JavaScript - Basics

JavaScript - Guides

Javascript - Best Practices

Javascript - Design Patterns

OpenSource Projects to Refer

Javascript - Documentation

TypeScript

Angular

React

React Concepts(Context, Hooks, Styled Components)

React Hooks

Redux

Redux Persist

Remix

Next.js

React Native

React Native - Best Practices

React Native - UI Components

Node.js

Vue.js

Web APIs

JavaScript Books

JavaScript Technical Problems and Solutions

Advanced JavaScript (Basic - In Depth)

Web APIs

CodeSandBox

CSS

SVG

Flutter

People to follow

Debug / Troubleshooting

Tools and Techniques

General - Messaging | SMS

Authentication & Authorization

Alert and Notifications

Cookies

Three.js

CMS

Productive Tools | Components | Templates

Test Automation Frameworks

General - Agro

Amazon AWS

Certifications

E-Books

Web Frameworks

Javascript Build Tools

JavaScript Libraries / npm packages