Web

2022/07/27 (增加連結)

架構

• How to Design a Web Application: Software Architecture 101

  • What is software architecture?

  • Why is software architecture important?

  • The difference between software architecture and software design.

  • Software architecture patterns.

  • How to decide on the number of tiers your app should have.

  • Horizontal or vertical scaling — which is right for your app?

  • Monolith or microservice?

  • When should you use NoSQL or SQL?

  • Picking the right technology for the job.

  • How to become a software architect.

  • Where to go from here.

• Modern Technology Guide for Startup Leaders

  • Frontend (Web)

  • Mobile app

  • Backend (REST API)

  • Databases

  • (Cloud) Hosting

  • DevOps

  • Microservices

• An Illustrated Guide to Server-Side and Client-Side Code: The journey from web server to browser

• Front-end, Back-end, Full-stack. What Exactly Are We Talking About?

• How to Learn Fullstack Development: A Roadmap in Charts

• MVC vs MVP vs MVVM

• How To Effectively Scale Your Web Application

工具

• Ultimate Guide to Web Development in 2021 & Beyond! | Roadmap 2021+

• Ultimate Web Developer Roadmap for 2021 : From Basics To Deploying Scalable Web Applications

• As a tech guy, you will thank me for these websites **

• The 2018 Roadmap To FullStack Web Development

  • Foundation

    • HTML & CSS

  • Programming Languages

    • JavaScript

    • TypeScript

    • Python

  • Frontend Frameworks

    • Angular

    • React

    • Vue.js

  • Backend Frameworks

    • Node.js / Javascript

    • Django / Python

  • Tools

    • Git

    • Webpack

• 8 Essential Web Apps for Developers

  • Online GDB

  • JSON Schema Validator

  • Regex 101

  • Font Awesome

  • Stack Exchange

  • GitHub

  • Unicode Table

  • Music for Programming

• The Zero-Dollar Infrastructure Stack

  • Website Hosting

    • Zeit and Netlify

  • Back End

    • The solution will be to go for serverless functions.

  • Database

    • FaunaDB

    • MongoDB Atlas

    • Firebase

  • CMS

    • Sanity.io

• My Perfect 2020 Stack: A New Stack for a New Generation

  • The Winners

    • JavaScript modules. Modules in server-side Node.js are proven winners. And I’m delighted that I can finally begin using them on the client-side as well.

    • Object-oriented JavaScript. This can be summarized in five golden rules: 1) replace anonymous objects with named classes, 2) declare and initialize all properties in the constructor, 3) immediately seal all objects, 4) define methods with invariant signatures, 5) bind this to every callback.

    • Blue Phrase. For templating, authoring, and declarative programming. I rely on this to produce HTML that’s easy on the eyes and a pleasure to write.

• 6 Free Platforms To Host Your Apps

• Interesting Web Technologies to follow in 2019

• Top Web Development trends to look out for in 2019

  • Progressive Web Apps

  • Chatbots

  • JS Frameworks

  • Acceleration in Page Load Speeds

  • Single Page Applications

  • Low Code Development

    • 11 Best No-Code and Low-Code Back-Ends for 2021

  • Cyber Security

    • 13 Security Tips for Front-End Apps

    • 10 security tips for frontend developers

    • Web Application Security Practices Every Developer Must Know

    • How To Build Secure HTML Forms

    • 21 Best Practices for Handling Passwords in Web Applications

      • 3. Use HTTPS for Authentication Related Pages

      • 7. Don’t Store the Plain Password in the Database

      • 8. Use Hash Functions not Encryption Functions

    • Passwordless Authentication for Better Security : Implement Secure Remote Password Protocol (SRP) in your web app

  • Voice Search Optimization

• Beginner’s Web Development Guide Part 3: Platforms and Tools

• Front-end: Useful Online Tools for Front-end Developers

• 80+ Free Resources for Web Designers and Web Developers in 2021

• Zero Server: Build Modern Web Apps with Multiple Languages and Frameworks — and Zero Config

• 14 Useful Tools That I Use for Faster and Easier Web Development

• 4 Reliable Websites To Save You Hours of Development Time

  • Hidden Tools

  • Can I use

  • Dev Hints

  • Bundle Phobia

Web Components

• Web Components in a Nutshell

• Introduction to Creating Web Components

  • Parts of a Web Component

    • custom element

    • shadow DOM

    • HTML templates

• What is Component-Oriented Programming (COP)?

  • Web Components API

• About Web Components

• Introduction to Web Components — Deep Dive

• Why does One Want to learn Web Components with React, Angular, VueJs, and Svelte Around?

• Doing something with Web Components

• Web Components will replace your frontend framework

• Five reasons why Web Components could complement JavaScript frameworks

• 9 Web Components UI Libraries You Should Know in 2019

  • Material components web

    • Google’s Material-components-web library is the web-component version of the Material-UI library.

  • Polymer elements

  • Vaadin web components

  • Wired elements

  • Elix

  • Time elements

  • UI5-webcomponents

  • Patternfly

  • Web components org

    • Google’s web component discovery portal built around Polymer elements and friends

• Web Components API in a Nutshell

• The State of Web Components

• How to Build Light and Dark Themes With Web Components

• hybrids.js — Declarative and Functional Web Components

• Web Components: LWC, Stencil, and Lit by Numbers

語言

• ASP.net MVC (with c#)

• Java (Web Programming課程採用Spring Framework)

  • REST

• PHP

後端

• The Back End Development Journey

• A Guide on Good Backend Coding Practices

  • #1: Validate inputs and handle errors

  • #2: Separation of concerns

  • #3: Implement health check endpoints and logging

  • #4: Implement versioning for your services

  • #5: Write test cases and documentation

• Beginner’s Web Development Guide Part 2: Backend

  • Languages

    • Scripting languages/interpreted languages

      • Node.js

      • Python

      • PHP

    • Compiled languages

      • Java

      • C#

      • Go

      • Kotlin

    • Databases

      • Relational

        • Oracle Database

        • MySQL

        • SQL Server

      • Non-relational

        • Mongo DB

        • Redis

• What Will Be the Best Back-End Framework for 2021? : Node.js/Express vs. Django vs. Spring Boot

• Six Factors for Better URL Path Design in Web Apps

前端

• My Top 6 Frontend Trends and Predictions for 2021

• The Front-End Web Developer Roadmap for 2021

• The tools for the job — How I code frontend apps in 2020

  • I use TypeScript for frontend projects, and I strongly believe you should, too.

  • I use React, with the latest features.

  • when possible, choose graphQLwith the Apollo client, and if not, I would complain a little.

  • I would love to use Hook Router, but still am turning to React Router for professional projects. To be continued.

  • Emotion or Styled-Component is the way.

  • use whatever makes you happy, but I will keep starting up my projects with Chakra Ui, and you should check it out if you haven’t yet.

  • I use Apollo cache for server-sent data, and Easy-Peasy for the rest — or almost all the rest, see the next section.

  • React Hook Form

  • For SEO and bots only, I’d say go with prerendering. SSR for end-user means gaining a bit of a better experience only on the first render of the site. It is some work for not so much gain.

    • A Beginner’s Guide to SEO for JavaScript Web Applications

      • Part I: What is SEO and how does it work?

      • Part II: SEO in websites that use JavaScript

    • SEO Tips To Boost Your Website Ranking

  • for a blog or a simple presentational site — where data is no changing much — static rendering makes good sense. You can have a look at React Static for the most natural DX I could find.

• Web Designer Tools to Solve Regular Problems

  • RIOT, Image compressor

  • Browser extensions

    • Open Graph Previewer

    • ColorPicker Eyedropper

    • JSONView

  • Figma

  • VisBug

• 6 Must-Use Tools for Front-End Development

  • EnjoyCSS

  • Prettier Playground

  • Postman

  • StackBlitz

  • Bit.dev

  • CanIUse

• Front-End Dev Tools For increased Productivity

  • CSS Grid-Generator

  • Box-Shadows

  • Grabient

  • Mybrowser.fyi

  • Easings

  • iHateRegex

  • browserhacks

  • animista

  • coolors

  • Optimizilla

  • Neumorphism

• 11 Useful Online Tools for Frontend Developers

  • CanIUse

  • Minify

  • Bit.dev

  • Unminify

  • Stackblitz

  • JWT.io

  • BundlePhobia

  • Babel REPL

  • Prettier Playground

  • Postman

  • JSLint

• 6 Productivity Tools for Front-end Developers

  • Sizzy

  • Get css scan

  • Bit and Bit.dev

  • CanIUse

  • BundlePhobia

  • Front end checklist

• How to Code Like a Pro: 20+ Must-have cheat sheets and tools for every front-end developer

• The Most Frequent Mistakes New Front-End Developers Make

  • Not Using Responsive Web Design

  • Lack of Input Validation

  • Cross-Browser Compatibility Issues

  • Using Outdated HTML

  • Use of Website Builder Tools

  • Not Considering Details

  • Fancy and Tiny Fonts

  • Broken Links

  • Auto-playing Audio and Video

  • Relying on jQuery

• The Front-End Features You Might Have Missed

• The Front End Development Journey

• 5 Front-End Predictions and Trends for 2020

  • Micro Front Ends — An Extension of Microservices

  • Front-End Frameworks — React.js the Most Loved

  • Web Components

  • ES Modules and Dynamic Imports

  • JavaScript Will Be Unstoppable

• 10 Things Front-End Developers Should Learn in 2020

  • Frameworks

    • React

    • Vue.js

  • Static Site Generators

    • Next (React-based)

    • Nuxt (Vue-based)

    • Gatsby (React-based)

    • Gridsome (Vue-based)

    • Top 14 Static Site Generators for Building Fastest Web Applications

  • JAMstack

  • PWA

  • GraphQL

  • Code Editors/IDEs

  • Testing

  • Clean Code

  • Git

  • Soft Skills

• A Recap of Frontend Development in 2019

  • NPM Downloads for Popular Frontend Frameworks and Libraries in 2019

    • React once again claims the top library and is still growing

  • WebAssembly becomes the 4th language of the web joining HTML, CSS, and JavaScript

  • TypeScript usage surges — many developers fall in love

  • React continues to lead while devs are consumed by hooks

  • The React core team shifts to focusing on developer experience and tools to make us more productive

  • Vue prepares for version 3 release, continues to grow in usage

  • Angular releases version 8 and 9 along with the new Ivy compilation/rendering pipeline

  • Accessibility (a11y) and internationalization (i18n) are becoming more of a priority

  • ES2019 Features

  • Flutter explodes and challenges React Native as another excellent option to build cross-platform mobile apps

  • Node.js Foundation and JS Foundation merge to form OpenJS Foundation; Node version 12 launches to continue the path of yearly LTS releases

  • Svelte gains attention but lags in adoption as it launches version 3

  • Static sites continue to be utilized, devs adopt the JAMStack

  • PWAs see more growth and adoption

  • Frontend tooling is getting really good

  • GraphQL continues to be loved by developers, gains further adoption in tech companies

  • CSS-in-JS gains momentum

  • VS Code dominates the text editor market

  • Webpack 5 enters beta and nears release

  • Jest moves from Flow to TypeScript

  • Chrome releases stable versions 72–78 in 2019

  • Microsoft Edge browser moves to Chromium, creates a new logo

  • Facebook releases Hermes, a JavaScript parser for Android to improve React Native

• Beginner’s Web Development Guide Part 1: Frontend

  • HTML

  • CSS

  • JavaScript

    • Framework

      • React

      • Angular

      • Vue.js

  • TypeScript

  • Component Libraries

    • Bootstrap

    • Semantic UI

    • Material UI

• The best front-end hacking cheatsheets — all in one place.

• What You Should Inspect in a Front-End Code Review

  • The quality of the code

  • Efficiency and robustness of the code

  • Are JS framework principles respected?

  • GitFlow principles

  • Accessibility (a11y) and internationalization (i18n)

• 10 things people don’t tell you about Front End development

• Practical Advice for Front-End Web Development

• 7 Repos I Didn’t Know I Needed For Front-End

• How Does the Browser Render a Webpage?

  • Look up your resources.

  • Create a connection between server and client.

  • Incrementally download the resources.

  • Parse the HTML.

  • Parse CSS.

  • Create DOM.

  • Create CSSOM.

  • Creating a render tree from DOM and CSSOM.

  • Start the layout of the page and then paint.

• 7 Styling Frameworks for Frontend Developers

• 5 Frontend Problems You Shouldn’t Ignore

  • Frontend development is hardcore

  • JavaScript isn’t frontend

  • Frontend thrives from conventions

  • Frontend developers are more flexible

  • Stable backend, unstable frontend

• Introducing Native Web : A tiny library for simple web components.

• 9 Best Practices for Optimizing Frontend Performance **

  • Minify Resources

  • Reduce the Number of Server Calls **

  • Remove Unnecessary Custom Fonts

  • Compress Files

  • Optimize the Images

  • Apply Lazy Loading **

  • Caching

  • Enable Prefetching

  • Use a Content Delivery Network

• What are Front End Service layers?

• The Evolution of Frontend DX

  • Everyone Moved to SPA

  • Birth of Design Systems for SPAs

  • Components Based Development (CBD)

• 12 Front End Performance Patterns You Need to Know

跨平台

• Comprehensive Guide to Creating Simple Apps using React Native Web and React Native Elements

  • 跨web/android/iOS

• Flutter

參考資料

• 9 Popular GitHub Repos For Every Web Developer

  • Realworld

  • You Don’t Know JS Yet

  • Airbnb JavaScript Style Guide

  • Storybook

  • HTML5 Boilerplate

  • Node.js Best Practices

  • Front-End Checklist

  • NW.js

  • fullPage.js

• Learning to code in 2019 — the first 3 months

• 20 Things That Are Good to Know When You Start Web Developing

  • You don’t need a degree to program

  • Googling is a skill

  • You can’t learn everything

  • Writing easy code is the hardest thing to do

    • Keep your code as simple as possible.

  • There’s no time for proper testing

    • Most developers will agree that testing is not the most fun part of their job.

    • Once there’s the slightest idea of missing the deadline, one of the first things that get sacrificed is testing.

    • This really happens, even though everybody agrees that it’s not good for the end result.

  • Time estimations are never even close

  • You’ll feel ashamed when you look back at your old code

    • clean up the mess that you made earlier.

  • You’ll spend way too much time looking at bugs

  • Internet Explorer is the worst browser that was ever created

  • Work stops when servers are down

  • You’ll pretend that you understood everything your colleague said

  • You don’t need to memorize everything

  • You need to be a good problem solver

  • You will be reading a lot

  • Responsive can be a pain

  • Knowing how to debug saves lots of time

  • You’ll be looking at suggested solutions that won’t work for your problem

    • Most of the time, you’ll find suggested solutions on forums, like StackOverflow, that will give you a good push in the right direction.

    • But also most of the time, the suggested solution can’t be simply copied and pasted to solve your problem.

  • A good IDE will make your life much easier

  • Working with the terminal can make you more efficient

  • Don’t reinvent the wheel

• 10 Mistakes You Should Avoid as a Web Developer

  • Not tracking errors in production

  • Making Changes directly on the Server

  • Downtime while deploying

  • Not Worrying about security in the code

  • Not Notifying Team Members

  • Using The Same Environment for Development and Production

  • Having No Backup Plan

  • Not using Caching on the client side

    • Caching

    • Lazy Loading

  • Performing Manual Deployments

  • Poorly Communicating When a Deployment Occurs

• A Timeboxed, Day-by-Day #100DaysOfCode Front-End Development Curriculum

• How I Started in Web Development

• Patterns For JavaScript Frontend Applications

  • Before React, Angular…

  • Architectural Patterns

    • MVVM Pattern, 2-way binding

    • CQRS (Command Query Responsibility Segregation)

      • Your Stunning Guide For CQRS as Web API

      • Deep Dive into CQRS — A Great Microservices Pattern

    • Event bus, 1-way binding

    • Flux pattern, Redux

• 7 Web Development Guidelines To Speed up Page Loading

  • Minimize the Number of Requests

  • Prefer Web-Safe Fonts

  • Use SVG Icon Instead of an Icon Font

  • Use Lazy Loading for Images

  • Minimize CSS and JavaScript Files

  • Load What You Need

  • Format Images

    • JPG: Use this for photos

    • PNG: Use this for high-quality photos for download purposes and transparent images. Be careful. This comes with costly data.

    • GIF: Use this for images or icons with a meager amount of colors

    • WebP: This is a newer image type. It can hold very high-quality photos without the downside of png files.

• How to Improve Your Website’s Page Load Speed

• 5 Common Mistakes Developers Do that Affect Page Load Time

  • A large number of HTTP requests

  • Absence of CDN

  • Large file sizes and page size

  • Loading all resources at the same time

  • A large number of redirects

• 5 Ways to Improve Your Site’s Performance

  • Compress your images

  • Use the right image dimensions

  • Use vectors if possible

  • Lazy loading

  • Set the right cache time

    • Fundamentals of Caching Web Applications

    • Web Caching Best Practices : Web Caching: How to avoid common pitfalls.

• The ultimate guide to modern web application performance

  • Compression algorithms

  • Code splitting and lazy loading

  • Lazy or partial hydration

  • Tree shaking — dead code elimination

  • Javascript minification and optimization tools

  • Library swaps

  • Images

  • Fonts

  • Layout recalculation

  • External scripts

  • Pre — strategies

  • Protocols

  • Caching

  • Useful tools

• Understanding Web Performance Monitoring

• 10 Critical Performance Optimization Steps You Should Take

  • Server-Side Optimizations

    • Configure compressions

    • Minimize HTTP requests

    • Use a CDN

    • Use a Cache-Control header

    • Avoid redirects

  • Client-Side Optimizations

    • Optimize HTML

    • Optimize CSS

    • Optimize JavaScript

    • Optimize images

    • Optimize fonts

  • Recommendations

    • Lighthouse

      • 5 Tips to Take your Website Lighthouse Score from Meh to WOW!

    • webhint

    • GTmetrix

    • Performance tab

    • Performance API

• 3 Fundamental Techniques You Must Master to Build Faster Web Applications

  • Three Basic Reasons Your App Is Not As Fast As It Should Be

    • Bundle size

    • Unoptimized images

    • High number of network requests

  • How to Improve Your Web Application’s Performance

    • Code splitting

    • Tree shaking

    • Optimize images

  • How to Optimize Images

    • Lower the image resolution

    • Compress images

  • Some Bonus Hacks and Resources

• 8 Performance Analysis Tools for Front-End Development

  • PageSpeed Insights

  • Lighthouse

  • WebPageTest

  • Pingdom

  • SiteSpeed

  • Calibre

  • SpeedCurve

  • SpeedTracker

• Don’t Forget About Web Performance!

  • Metric: Page Load

  • Metric: Time to Interactive (TTI)

  • Metric: Time to First Paint (TTFP)

  • Metric: Time to First Byte (TTFB)

  • Metric: DNS Lookup Time

  • Metric: Network Payload Size

  • Metric: Time to Critical Feature (TTCF)

• Top Metrics You Need to Understand When Measuring Front-end Performance

  • Time To Interactive (TTI)

  • First Input Delay (FID)

  • Total Blocking Time (TBT)

  • Cumulative Layout Shift (CLS)

  • First Contentful Paint (FCP)

• Performance Optimization of a Frontend App

• How to Automatically Monitor API Performance With Dynamic Testing

• Reports of the Virtual DOM’s Death are Greatly Exaggerated: … and debunking other Modern Web Development Myths

  • Myth #1: Web Components replace Frameworks/Libraries

  • Myth #2: Disappearing Frameworks

  • Myth #3: Virtual DOM is Pure Overhead

  • Myth #4: Web Assembly is Faster for Web UI

  • Myth #5: Scheduling means Better Performance

• Image Loading: Best Practices

• 4 Web Performance Essentials for Software Engineering Teams

API

• What is an API? In English, please.

• Let’s understand what an API is

• API Design 101

• How NOT to design APIs

  • Sin 1: Request body format

  • Sin 2: Response body format

  • Sin 3: Error handling

  • Sin 4: “Guidelines”

  • Sin 5: Documentation

  • Sin 6: Security

  • Sin 7: Performance

• Comparing API Architectural Styles: SOAP vs REST vs GraphQL vs RPC

  • Remote Procedure Call (RPC): invoking a function on another system

  • Simple Objects Access Protocol (SOAP): making data available as services

  • Representational state transfer (REST): making data available as resources

  • GraphQL: querying just the needed data

• How to manage and grow your REST API without blowing it up

• What is cURL and why is it all over API docs?

• Top 5 REST API Security Guidelines

  • Authorization

    • Protect HTTP methods

    • Whitelist allowable methods

    • Protect privileged actions and sensitive resource collections

    • Protect against cross-site request forgery

  • Input Validation

    • URL validations

    • Validate incoming content-types

    • The server should never assume the Content-Type

    • Validate response types

    • XML input validation

  • Output Encoding

    • Security headers

    • JSON encoding

    • XML encoding

  • Cryptography

    • Data in transit

    • Data in storage

    • Message Integrity

  • HTTP Status Codes

    • 5 Status Codes Every Web Developer Should Know

      • 100 Information

      • 200 Successful

      • 300 Redirection

      • 400 Client Errors

      • 500 Server Errors

• Design patterns for modern web APIs

  • Service layer: A protocol independent interface to our application logic

  • REST: An architectural design principle for creating web APIs

  • RESTful services: A service layer that follows the REST architecture and HTTP protocol methods

  • Middleware: Reusable functions that can control the flow of data and trigger additional functionality when interacting with REST services

  • Real-time: A set of events that can be sent automatically when following the REST architecture

• gRPC

  • Google Cloud Run Service With gRPC Using Spring Boot

    • gRPC offers several benefits over HTTP APIs with JSON, some of them are,

      • Strong Contract-based communication

      • uses improved HTTP/2 protocol

      • Protobuf (efficient binary message format)

      • Great support for code generation on several languages

    • So gRPC is a great fit for communication between microservices.

  • Building Microapps with gRPC-Web

• What Is the Native Payment Request API?: Did you know that many modern browsers have a built-in Payment Request API

• API-First Development: Build Consistent, Meaningful APIs With Postman

• 22 Best Practices to Take Your API Design Skills to the Next Level

  • 整理了一些不錯的建議，可以參考，但是，都沒有說明背後的原因，也有一些問題，請參考文章的留言區

• 8 Best Practices for REST API Design

• 10 Best Practices for Naming REST API Endpoints

• What does it really mean to design a ‘consistent’ API?

  • Consistent API Vocabulary

  • Consistent Documentation

  • Predictable Data Types

  • Predictable Data Structures

  • Consistent URL Pattern

  • Consistent Query Controls

  • Consistent API Methods

  • Consistent Error Codes and Messages

• What are REST APIs? HTTP API vs REST API

• API client patterns every front-end developer need to know

• Event-driven APIs — Understanding the Principles

  • Technology choice #1 — Webhooks

  • Technology choice #2 — WebSockets

  • Technology choice #3 — Server-Sent Events(SSE)

Authentication

• Please Stop Writing Your Own User Authentication Code

• Web Authentication: Cookies vs. Tokens

Chrome

• Prepare your webpage for Chrome’s upcoming “Fast page” label

  • The Core Web Vitals

    • Largest contentful paint

    • First input delay

    • Cumulative layout shift

• 10 Awesome Chrome Flags You Should Enable Right Now : Enhance your browsing experience with these experimental features **有些功能還沒公開

• Chrome’s Web Locks API: Cross-Tab Resource Synchronization

• Chrome Canary: Nightly Build for Web Developers

• Power under the hood: Playing with JavaScript in the browser console

• Google Chrome Hidden Features Every Developer Should Know

Chrome DevTools

• 10 Must-Know Chrome Developer Tools and Tricks

  • Slow Network and Slow Device Simulator

  • The Color Selector

  • Audits

    • UPDATE: since Chrome 83, the “audits” panel is now named “Lighthouse”

      • How to Make Sure Your Website Doesn’t Suck After Google’s Core Vitals Update : Stop what you’re doing, open Chrome, and navigate to the Lighthouse tool — you’re going to need it

  • Pretty Print

  • Quick File Switcher

  • Responsive Mode

  • Screenshots

  • Extensions

  • Coverage

    • How to Detect Unused CSS or JavaScript in Your Code : Show Coverage

  • Keeping Up With New Features

• 5 Must-Know Features in Chrome DevTools

  • debugger;

    • Use the debugger statement to stop the execution of your code. Try it where you would normally use console.log().

  • Blackbox Script

    • To avoid stepping into vendor code while debugging, Blackbox those vendor scripts.

  • Event Listener Breakpoints

    • Use the Event Listener Breakpoint panel to set and trigger breakpoints on any event on the page with ease.

  • DOM Breakpoints

    • Use DOM breakpoints to halt execution when a DOM element is modified.

  • The Command Menu

    • Learn to love and use the Command menu. It will save you time and make you a more efficient developer.

• Use Chrome DevTools Like a Senior Frontend Developer

  • Powerful screenshots

  • Reference the result of the last operation in the console

  • Resend the XHR request

  • Monitor page load status

  • Copy Variables

  • Copy the image as the data URI

  • Table object array

  • Drag and Drop in the Elements panel

  • Reference the currently selected element in the Console

• 5 Chrome DevTools Utilities You Need to Know

  • $ and $$

  • The inspect() function

  • monitor / unmonitor

  • keys/values

  • table

• Debug Like a Lion With Chrome’s DevTools

  • $_

  • monitor(function)

  • copy(Object)

  • clear() — Clears Console

  • $0 — $4 — Selected Element History

  • $(selector, [startNode])

  • $$(selector, [startNode])

  • debug(function) — Automatic Debug Mode

  • inspect(function/DOM)

  • keys(object)

  • values(object)

  • monitorEvents(element, [eventNames])

  • getEventListeners(element)

  • table(data) — Print As Table

• 10 Chrome Console Utility APIs You Probably Never Used

  • monitor

    • unmonitor

  • monitorEvents

    • unmonitorEvents

  • $_

  • copy

  • clear

  • keys(object)

  • values(object)

  • getEventListeners(object)

  • $(elementName, [,node])

  • $$(element, [,node]) Double dollar

• What’s New In DevTools (Chrome 79)

  • New features for cookies

    • Debug why a cookie was blocked

    • View cookie values

  • Simulate different prefers-color-scheme and prefers-reduced-motion preferences

  • Code coverage updates

  • Debug why a network resource was requested

  • Console and Sources panels respect indentation preferences again

  • New shortcuts for cursor navigation

  • Consider Canary

• 5 Lesser-known Features of Chrome DevTools

• 7 Tips to use Google Chrome DevTool [Network] tab like an experienced developer

• 10 Tips to Improve Productivity using Chrome Dev Tools

• Exploring the Network Tab in Chrome Dev Tools

• Using the Performance Web API with Chrome DevTools

• 5 Browser Dev Tools Tips To Ace Your Web Development Skills

• 9 Hidden Features of Chrome DevTools

• Did you know Chrom DevTools can do this?

• 9 ‘Elements Tab’ Features in Chrome DevTools for Effective Debugging

• Grid Editing Made Simple with Chrome DevTools

• 11 Chrome DevTools Tricks to Help Make You a Senior Front-End Developer

Chrome Extensions

• 6 Chrome Extensions to Boost your UX Design

• 13 Must-Have Browser Extensions for Web Developers

• Benefit From This List of Chrome Extensions

  • ColorZilla

  • Edit This Cookie

  • JSONView

  • Postman

  • Timely

  • Site Spider

  • Page Ruler

  • Session Manager

  • Clear cache

• 5 Useful Chrome Extensions for Designers

  • Gathering design reference material

    • Full Page Screen Capture

  • Checking responsive designs across screens

    • Screen Resizer

  • What’s that beautiful font this site is using?

    • WhatFont

  • Copy HTML + CSS

    • SnappySnippet

  • Stay updated on new product launches

    • ProductHunt

• These 5 Chrome Extensions Make Work Better

  • Full Page Screen Capture

  • Momentum

  • Bubbles

  • MailTracker

  • Grammarly

• Chrome Extensions to Boost Your Productivity

  • WhatRuns

  • Page Ruler

  • I love adaptive

  • VisBug

  • Web Maker

  • Full-Stack Assistant

  • Cookie Editor

  • JSON Viewer Awesome

  • API Tester

  • LocalStorage Manager

  • Goto Jira (Bonus)

• Chrome Extensions Every Web Developer Must Have in 2020

  • Windows Resizer

  • Wappalyzer

  • Web Developer

  • WhatFont

  • ColorZilla

  • Pesticide

• 7 Chrome Extensions Every Developer Must Have

  • OneTab

  • Wappalyzer

  • CSS Viewer

  • Toggl Track: Productivity & Time Tracker

  • Lighthouse

  • Clear Cache

  • Fonts Ninja

• 10 Must Have Chrome Extensions for Front-End Developers

• 7 Useful Chrome Extensions for Web Developers

• 7 Chrome Extensions I Use Daily to Be Efficient and Productive

• 38 Chrome Extensions for Web Developers and Designers

CORS

• 6 Must-Know Things About Cross-Origin Resource Sharing (CORS)

  • What is Cross-origin resource sharing (CORS)?

  • What is same-origin policy?

  • What is Cross-domain vulnerability?

  • What is the definition of ‘origin’?

  • How CORS works

  • How to implement CORS using Node.js

• 4 Ways to Reduce CORS Preflight Time in Web Apps

  • Preflight Caching Using Browser

  • Server-Side Caching using Proxies, Gateways, or Load balancers

  • Avoid it using Proxies, Gateways, or Load balancers

  • Simple Requests

CSS

Docker

• Intro to Docker for Web Developers

GraphQL

• GraphQl: The Big Picture

  • History of GraphQl

  • What is GraphQl ?

  • Difference between Rest & GraphQl

  • Benefits of GraphQl

  • Datatypes of GraphQl

  • Queries of GraphQl

  • Architecture of GraphQl

  • Why GraphQl ?

• Why GraphQL? : Introduction to GraphQL and reasons to consider using it

  • GraphQL is not a replacement for REST, rather it complements well with REST and can be used for specific use cases.

• Why GraphQL is the future of APIs

  • REST does have a lot of problems. Let’s see what they are:

    • A lot of endpoints

    • Over-fetching and under-fetching of information

    • Versioning

  • Why GraphQL is the future

    • Single endpoint

    • With GraphQL you fetch only the data you need

    • GraphQL makes it easy to start building APIs and be consistent

• How to make your website clean and maintainable with GraphQL

• Stop Using REST For APIs : GraphQL Is Way Better

• GraphQL Could be Your BFF (Backend for Frontend)

• 2 Years of GraphQL in Production : Common pitfalls that you should avoid

• Some Arbitrary Number of Lesser-Known GraphQL Features

  • Field Aliases

  • Fragments

  • Default Variables

  • Bonus: Variables Within Fragments

• Getting Started with GraphQL and Spring Boot

• GraphQL Modules — Feature based GraphQL Modules at scale

• GraphQL Mutation Arguments Validation with Yup using graphql-middleware

• GraphQL Pagination best practices: Using Edges vs Nodes in Connections

• GraphQL Resolvers: Best Practices

• Do not resolve your GraphQL fields like a REST endpoint

• Solve N+1 query problem in GraphQL with Dataloader

• Improve your GraphQL schema with Relay Specification

  • Currently, there are 2 major GraphQL clients: Apollo and Relay. Apollo is a very flexible and un opinioned framework that works with any kind of GraphQL schema. Relay is a very opinioned framework by Facebook that requires your server to follow the Relay Specification.

• GraphQL Fragments are amazing!

• Exploring GraphQL integration With BIGKit

• How to use GitHub’s GraphQL API with Express.js

• Mock GraphQL APIs using json-graphql-server

• Explore GraphQL by Building a Blog With Slash GraphQL

• Lessons learned from running GraphQL at scale

• GraphQL Best Practices

  • GraphQL Best Practices (official site)

• Scaleable GraphQL Architecture

• Apollo

  • How to Use GraphQL with Apollo on Your Website

  • Managing micro GraphQL services with Apollo Client

HTML

HTTP

• Simple Note on HTTP Protocol

• Understand the Flow of a HTTP Request

• Why should a web developer care about HTTP?

• Statefulness in a Stateless Web

• Improve Your Web App Using the Right HTTP Headers

  • HTTP Headers for Secure communications between your application and the server

    • HTTP Strict Transport Security (HSTS)

    • Upgrade-Insecure-Requests

    • Content Security Policy (CSP)

    • X-XSS-Protection

    • X-Content-Type-Options

  • HTTP Headers for Enhancing Performance

    • Cache-Control

    • Content-Encoding

• The 5 Most Important HTTP Headers

• 5 Awesome HTTP Headers Web Developers Should Master

• Introduction to HTTP 2

• How to Configure Apache Reverse Proxy With HTTP/2

• HTTP 3 is Out and About!

• What is HTTP/3, and Why Does it Matter? : HTTP/3, or HTTP over QUIC, brings many new performance features to HTTP

• What’s New in HTTP/3? : A walkthrough of HTTP/0.9, HTTP/1.0, HTTP/1.1, HTTP/2, and HTTP/3

• HTTP/3: What was, what is, what will be

• HTTP/3 is Fast

HTVL (Hypertext Variables Language)

• Automating Front-End Development: Breaking down HTML into String Variables

  • Introducing Hypertext Variables Language

  • Create Your First HTML based on HTVL

Hugo

• Build and deploy a static business website in 15 minutes: Hugo, a static website builder written in Go.

JSON

• JSON — Applied

Media

• Website Optimization with New Media Formats

  • WebP — Image

    • Why you should really be using WebP

  • WebM— Video

Microbrowser

• Do you know what a Microbrowser is?

  • The are big differences with a regular browser:

    • the parsing of the HTML is limited and filtered.

    • they ignore cookies.

    • they don’t execute javascript.

    • they are not good with follow redirects.

    • they fake the user-agent string when visiting the site.

  • And the most important thing: the rendered link (the little card) is no longer part of the microbrowser, so when the user clicks in it, it’s going to be direct traffic. No trace left.

Microfrontend / Micro Frontend

• The History of Microfrontends

• 5 Microfrontend Practices

  • Single-SPA

  • Multi Page Application (MPA)

  • Module Federation

  • Architecture of Repository Monorepo

  • Nx Workspace Tool + Monorepo (perfect union)

• Micro frontends — a path to cleaner code and faster development

• Micro-FEs Simplified

• 10 Reasons To Consider Micro-Frontends

• Micro-Frontend Composition Patterns

  • Embedding

  • Templating

  • Libraries

  • Headers

• Creating Micro-frontends using Web Components (with support for Angular and React)

• Micro-Frontends

• Micro-Frontends From Beginner to Expert

• Micro-frontends resources

  • Micro-frontends, the future of Frontend architectures

  • Adopting a Micro-frontends architecture

  • Orchestrating micro-frontends

  • Identifying micro-frontends in our applications

  • I don’t understand micro-frontends.

• Why would I want to replace my web app with a Micro-Frontend in 2021?

• Microfrontends: the good, the bad, and the ugly

• Micro Frontend Architecture: Replacing a Monolith from the Inside Out

• Micro Frontend Architecture: The Best Way To Build Scalable Frontend

• Micro Frontends Made Easy

• Microfrontends — bringing JavaScript frameworks together (React, Angular, Vue etc)

• Which is better for your next app — Angular or React? Why not both? : It’s time we talked about scalable micro frontend architecture

• Micro FrontEnd Application using Angular & React

• Build Your Own Micro-Frontend Ecosystem

• The Many Flavours of Micro Front Ends

  • Using NPM Packages

  • Using a Remote CDN

  • Hosted Separately

• Using Micro-Frontends to Permanently Solve the Legacy JavaScript Problem

• Two years of micro-frontends: A retrospective

  • Divergence

  • Dependency hell

• 10 Decision Points for a Micro-Frontend Approach

  • Do You Make a Decision Based on Popularity?

  • Does Your Use Case Fit a Micro-Frontend?

    • The micro-frontend approach targets large scale software

    • The micro-frontend approach is very popular with legacy code

    • The micro-frontend approach meets the need of organization independence

    • The micro-frontend approach could be selected with less control over the software

    • The micro-frontend approach might be personal preference

  • Do You Need the Benefits of Micro-Frontends?

  • Can You Live With the Drawbacks That Are Inherited From Micro-Frontends?

  • What Type of Micro-Frontend Approach Will You Choose?

    • Server-side template composition

    • Build-time integration

    • Runtime integration via iframes

    • Runtime integration via JavaScript

    • Run-time integration via Web Components

  • Will You Pick Up an Existing Micro-Frontend Approach?

  • How Many Micro-Frontends Will You Have?

  • How Do You Structure Micro-Frontend Repositories?

  • How Many Frameworks Do You Want to Use?

  • How Much Experimental Work Can You Afford?

• Micro-frontends decisions framework

  • Defining Micro-Frontends

  • Micro-Frontends Composition

    • client-side composition

    • edge-side composition

    • server-side composition

  • Micro-Frontends Routing

  • Communicating between Micro-Frontends

• Demystify Micro-Frontends using component libraries.: How to create µFrontend using web components and component libraries to develop independent applications in portal style applications.

• Thoughts About Micro-Frontends in 2020

  • Techniques

    • Meta framework: Single-SPA

    • Multiple SPA on different URLs

    • IFrames

    • Web components

      • Creating Micro-frontends using Web Components (with support for Angular and React)

• Micro Frontend Curry

  • What is a micro-frontend?

  • Why we are calling it a ‘curry’?

  • Why we need Micro-frontend?

  • How we can implement Micro-frontend?

    • Using an iframe

    • Using Web Components

    • Readymade framework

      • Single SPA

      • ARA framework

      • Tailor.js

  • Resources

    • awesome-microfrontends

• How We Build Micro Frontends : Building micro-frontends to speed up and scale our web development process.

• Sharing Dependencies in Micro Frontends

• Microfrontends — part 1: extending service-oriented architecture to frontend development

• What Are Micro Frontends? Is It Even Necessary to Use Them?

• Building Micro Frontends Using Single-SPA Framework

  • Single Bounded Task

  • Loosely Coupled

  • Autonomous

  • Independently Deployable

• Communication Between Micro-front ends

  • Framework agnostic communication

  • Communication through the Store (Single type framework)

• Micro Frontends: 5 Common Mistakes to Avoid

  • Splitting the Application Incorrectly

  • No Design System In Place

  • Poor Code Sharing Methods

  • Incorrectly Identifying the Foundation and Integration Methods

  • Trying to Mirror Microservices

• Fronts — A progressive micro frontends framework

• How We Build Micro Frontends With Lattice

• Atriom — an intuitive visualization tool for federated micro frontends

• Taking micro-frontends to the next level : Micro-frontends at Wix

• The Micro-Frontend Chaos (and how to solve it)

• Scale

  • How we scale our frontend applications using micro-frontends

  • Micro-Frontends at scale (part 1)

  • Micro-Frontends at Scale (part 2)

• Rules of Micro-Frontends

• Introduction: Our Journey Implementing a Micro Frontend

• The Micro-Frontend Chaos (and how to solve it)

• Microfrontends Architecture, Tooling, and Recommended Practices

• React

  • A Micro Frontend Solution for React

  • Micro-Frontend Architecture With React

  • Implementing Micro Frontends with single-spa and React

  • 5 Steps to Turn a Random React Application Into a Micro Front-End

  • Micro Frontends Step by Step Using React, Webpack 5, and Module Federation With Deployment to AWS

  • Understanding Micro Frontends With a Hands-On Example Using React, Webpack 5, and Module Federation

  • Micro Frontends with React and Module Federation Plugin

  • Micro-Frontends with React&Vue

  • Building ⚛️ React Micro Frontends Monorepo with NX in 5 min

  • Cross Micro Frontend Communication Techniques

• Module Federation

  • Sharing Logic Components Between Frontend and Backend Repositories with Bit

  • Microfrontends Hands-On Project with Module Federation — Events Microfrontend

  • Microfrontends with Module Federation: What, Why, and How

  • Microfrontends Module Federation: Exposing Remote from Legacy React Webpack4 created by create-react-app

  • Creating Module Federation Microfrontends with create-mf-app

  • Shared Modules in Module Federation Microfrontends

  • Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit

  • Micro-FE Architecture: Webpack 5, Module Federation, and custom startup code.

  • Micro-Frontends with Webpack 5 Module Federation

  • An investigation into micro frontends using module federation

  • Module Federation, Hot Prod Reloading, SSR & Next.js, for real this time.

• MicroUI

  • High level Micro-ui Architecture

Microservices / Micro Services

• Web application to Microservices (Do we use it or not?)

• Best Practices for Microservices

• Microservices Best Practices Every Developer Should Follow

• Implementing Eureka and Zuul for Service Discovery and Dynamic Routing in JavaScript Microservices Running on Node.js

• Implementing Service Discovery for Microservices

• Running a Microservice in Quarkus on GraalVM

• Kafka for Engineers

  • Kafka can be a vital part of your organization’s microservices architecture. Just keep in mind the important concepts, such as:

    • Making use of topics, and enforcing schemas, to safely publish events for the rest of the organization to consume

    • Making use of partitions to scale your systems

    • Maintaining ordering, by designing around Aggregates assigning the correct partition keys for your messages (and not trying to invent your own concurrency mechanisms)

    • Remembering the difference between responding to events — as we typically will with Kafka — and processing commands — as we would with a typical message queue

• How we misunderstood microservices

• Common mistakes in microservices

• Original Sin of Microservices, Part 1

• Original Sin of Microservices, Part 2

• Strangler Pattern Done Wrong

  • The correct strangler pattern requires us to extract a common interface from the monolithic system and slowly move the source of truth to the new interface

• Fullstack JavaScript Microservice Web App in Minutes

• How Should We Determine the Ordering of Our Microservices?

• The Crux of Entity-Based Microservices

• The Netflix Cosmos Platform : Orchestrated Functions as a Microservice

• HTTP/2 and GRPC: The De Facto for Microservices Communication

• Architectures

  • Monolithic vs. Microservice: Which Architecture Should You Choose?

  • Monolithic to Microservices Architecture with Patterns & Best Practices

  • The Roles of Service Mesh and API Gateways in Microservice Architecture

  • Microservice Architecture

  • Microservice Architecture at Medium

    • Three microservice design principles:

      • Single purpose — each service should focus on one single purpose and do it well.

      • Loose coupling — services know little about each other. A change to one service should not require changing the others. Communication between services should happen only through public service interfaces.

      • High cohesion — each service encapsulates all related behaviors and data together. If we need to build a new feature, all the changes should be localized to just one single service.

  • How Microservices Architecture Impacted the Culture of Software Development

    • Code ownership and feature teams had the biggest impact on how software is developed within organizations that adopted microservices.

  • Microservice Architecture: A brief overview and why you should use it in your next project

  • Why Your Microservices Architecture Needs Aggregates

  • A Design Analysis of Cloud-based Microservices Architecture at Netflix

  • Microservice Architecture — Communication & Design Patterns

  • Frontend Architectural Patterns: Backends-For-Frontends : Client-Tailored Microservices

  • 5 Reasons Why You Should Use Microsoft Dapr to Build Event-driven Microservices

  • Applying Event-Driven Architecture in Digital Transformation Projects

  • Microservice Orchestration vs. Choreography : How event-driven architecture helps decouple your app

  • Design for Services; Not Microservices : Starting a new project and thinking of microservice architecture? Have an existing monolith? Read on for an architecture strategy

  • Microservices Deployment Design Patterns

  • Architect your microservices in Serverless with right design pattern

• Database

  • Microservices Databases

  • Microservices Databases — Part 2

• Patterns

  • Design Patterns for Microservices

    • Aggregator pattern

      • Chain Pattern

      • Parallel Pattern (Scatter gather pattern)

      • Branch Pattern

    • Circuit breaker pattern

      • Circuit Breaker Pattern (Design Patterns for Microservices)

      • Circuit Breakers in Microservices

      • Circuit Breaker Pattern

    • Proxy pattern

  • Service Aggregator Pattern

  • Microservices Design - API Gateway Pattern

  • BFF Pattern — Dos and Don’ts

  • Sharing Types Between Backend and Frontend with the BFF Pattern

    • Shared types are a specialization of the BFF pattern specifically for TypeScript

  • My Favorite Interservice Communication Patterns for Microservices

  • How to Use Saga Pattern in Microservices : Using the Saga pattern in Microservice transactions

• Scale

  • Scalable microservices in Node using Nest.JS

  • How to Share Data Between Microservices on High Scale

• Test

  • Testing Microservices Made Easy

• Why Microservices Should use Event Sourcing

• Solving Concurrency in Event-Driven Microservices

• Creating a Spring boot microservice template

• Airbnb’s Microservices Architecture Journey To Quality Engineering

• Develop a Simple URL Shortener Using Microservices Architecture : Node.js + MySQL + RabbitMQ + Redis + Docker

• Building a Websocket Server in a Microservice Architecture

• Developing High-Performance Applications & Microservices

Scalable Vector Graphics (SVG)

• The Curious Case of the SVG : Scalable Vector Graphics are a unique feature of the web.

• Scalable Vector Graphics(SVG)

Single Page Application

• Single Page Application

• How Single Page Applications Broke Web Design

  • Single page applications are web applications that interact with the user by rewriting the content of a web page with the help of JavaScript.

Svelte

• Is It Time We Forget React and Jump on the Svelte Bandwagon?

• A Comparison of React and Svelte

  • Svelte is the clear king, but the truth is that React is just more reliable. For now. Svelte is great for prototyping or working on small personal projects, but it might be worth waiting for a while before throwing all your eggs into that basket.

• Looking into Svelte 3

• Adding Lifecycle Hooks to Elements with Svelte Actions

• 5 Reasons Why You Should Use Svelte for Front End Development

• Why you should consider using Svelte

• Creating an app with Svelte

• Svelte Storm: Svelte’s First IDE

• Tauri with Standard Svelte or SvelteKit

WebAssembly

• 3 Big Projects That Are Already Embracing WebAssembly

  • Figma

  • Lichess

  • uBlockOrigin

WebGL

• Understanding WebGL