Articles and tutorials
Blog
- Front end memoir | Front end notebook - Experience and summary recorded by a front-end blogger
- Hasnode - Hashnode Is in your personal domain free The easiest way to create a developer blog for free and connect with readers through our global developer community ！
- Dev.to - DEV Is a community of software developers , They get together to help each other .
- Hackernoon - An independent technical media website
Must possess Chrome add-in
- DailyDev - stay Chrome Get information about... In the default tag Dev The latest news from the community .
- WhatFont - Find out what font the website uses .
- ColorPick Eyedropper - Just put down your pen , You can know what color the website uses .
- Wappalyzer - Know the technology stack of any website
- Web Developer - The extension has a number of tools .
- React Developer Tools - React The developer tool is Chrome DevTools Expand , For open source React JavaScript library . It allows you to check Chrome In developer tools React Component hierarchy .
- PageSpeed Insights - PageSpeed Insights Be able to generate actual performance reports of web pages for mobile devices and desktop devices , And can provide suggestions on how to improve the corresponding web pages .
- Lighthouse - Lighthouse It's an open source automation tool , To improve the quality of network applications . You can think of it as a Chrome The extension program runs , Or run... From the command line . You are Lighthouse Provide a URL you want to review , It will run a series of tests on this page , Then generate a report on page performance .
- Pingdom - Online website speed detection tool is a web page speed detection tool launched by a website monitoring service company , Help users find out the reasons that affect the speed of the website , It also gives a feasible scheme to improve the performance of web pages , It is very practical for users with a website .
- Sitespeed.io - Sitespeed.io It's an open source Web Performance testing tools , To measure Web The overall performance of the website , Help developers and testers analyze the loading speed and rendering performance of web pages .
- Calibre - Caliber Is a multi-functional Performance Monitoring Suite , Can help you monitor and audit the performance of the website . It also allows you to specify the location of the test server by , Manage simulated advertising preferences and even simulate mobile devices to simulate real-world conditions . It also allows you to set a budget , And help you keep your budget within your budget by providing you with performance degradation .
- SpeedTracker - SpeedTracker Is a run in WebPageTest Tools above , Regular performance testing can be done on your website , And visually display the way of various performance indicators changing with time . This allows you to continuously evaluate the website , And see how the new features affect the performance of your site . You can also define the budget and send it by email and Slack Get alert .
VS Code must have an extension
- Compile Hero - Compile Hero Is a simple and easy to use for one click compilation Less, Sass, Scss, Styl, TS, TSX, Jade, Pug or JS And other file editor tools .
- NPM - This extension helps you manage Package.json And provide warnings when dependencies are not installed , It will also help with version control .
- Prettier - Prettier Is a self righteous code formatter . It works by parsing the code and using its own rules （ Consider the maximum ） Reprint the code , To achieve a consistent style , And package code if necessary .
- Rainbow brackets - By color coding each bracket set in the environment , You can easily find the missing tag .
- VS Code big icon - Visually identify files by type by applying the appropriate set of icons , So as to organize the environment .
- Placeholder image - Such as unsplash.it and placehold.it Such services are very useful . Now? , You can do this directly in VS Code Add placeholder images to save time
- Vetur - official VueJS Expand
- ESLint - The extension uses the... Installed in the open workspace folder ESLint library .
- Real time server - Start the development local server with real-time reload function , For static and dynamic pages .
- Visual Studio IntelliCode - This extension moves the most relevant completion recommendations to the top .
- Chrome The debugger - This extension allows you to from VS Code Internal debugging is at Chrome Running in the browser JavaScript Code .
- Microsoft Edge The debugger - stay Microsoft Edge Debug in browser JavaScript Code
- Firefox The debugger - stay Firefox In the debugging Web Application or browser extensions
- Bracket Pair Colorizer 2 - Customizable extensions , Used to color matching brackets
VS Code subject
- One Dark Pro - Atom The hallmark of Visual Studio Code Of “ One Dark” The theme
- Material theme - Visual Studio Code Now the most epic theme
- Horizon theme - A beautiful Of Visual Studio Code dual theme
DOCS And a memo
- MDN Web Docs - MDN Web Docs The website provides information about Open Web Technical information , Including websites and progressive Web Application's HTML,CSS and API.
- DevDocs - Quick for developers , Offline and free document browser . In a Web Search in applications 100 Multiple documents .
- DEVHINTS - A few memo sheets .
- FLEX-Malven - CSS Flex Visual memo for layout .
- GRID-Malven - CSS Visual cheat sheet with grid layout .
How to operate ？
about HTML and CSS
- Layout Demo - Study CSS Page structure layout
- freeCodeCamp - Study Web Free courses developed .
- Flexbox Froggy - One that helps you learn CSS Flex The game of .
- CSS skill -Flexbox - Flexbox Complete Guide .
- Grid Garden - One study CSS Grid The game of .
- CSS skill - A complete guide to the grid - CSS A comprehensive guide to the grid , Focus on all settings of the grid, parent container and grid elements .
- Learn CSS Grid - Jonathan Suh Write a comprehensive guide , Can help you understand and learn CSS Grid Layout.
- I can use - The latest browser support table , For desktop and mobile support Web The front end of the browser Web technology .
- HTML Dog - Simple and clear .
- Marksheet - Unlimited number of tutorials
- ODIN project - Amazing way to learn .
- CSS effect - CSS Animation .
- Keyframes - Use the visual timeline editor to create basic or complex CSS @keyframe Animation .
- Animista - Play ready to use CSS A collection of animations .
- It's hard to surf the Internet - Friendly for complete beginners Web Development tutorial .
- BEM - BEM Name memo .
- Autoprefixer - Autoprefixer It's a PostCSS plug-in unit , Can parse your CSS And add the supplier prefix .
- CSS formatter - On-line CSS formatter ,CSS Beautifier.
- Place holder - How to use our placeholders . Just in our URL Specify the image size after , You will get a placeholder image .
On-line IDE, Editor
Image resources
- Unsplash - Free pictures and photos .
- Pexels - Free pictures . - Delete photo data - Before sharing photos on the Internet , First delete personal data from the photo .
- LottieFiles - LottieFiles It's for -Lottie Designed Animation Collection - Gone are the days of annoying developers .
- removebg - Delete image background .
- Pixabay - Free pictures or videos .
accessibility
- Accessibility blog - in - Seven easy to implement guidelines - Guidelines for designing more accessible websites .
- Accessibility memo - A practical method of general design , Make your website accessible to everyone / webapp.
Windows Terminal
YOUTUBE channel
Font and printing
- Google typeface - The first resource for free and easy-to-use web Fonts .
- FontPair - Font pairs can help designers make Google Fonts are paired together . Beautiful Google Font combination and pairing .
- Fontjoy - Fontjoy Help designers choose the best font combination . Mix and match different fonts to achieve perfect matching .
- Fonts Arena - Free fonts , A free alternative to advanced Fonts , For your research results .
illustrations
- unDraw - Browse to find illustrations that fit your needs , Then click download .
- freepik - Free graphics resources .
- DrawKit - Hand drawn vector illustrations and icon resources , Perfect for your next project .
Icon
- Font Awesome - Vector icons and social logos .
- Ionicons - Open source and by MIT Licensed icon package .
- icons8 - With PNG and SVG Download free icons .
- flaticon - SVG,PSD,PNG,EPS Format or Icon Font Free Vector icon .
- Simple icons - 1463 Free from popular brands SVG Icon .
Front end framework learning resources
JAVASCRIPT
React
Why React？
ES2015 +
route
State management
Bundles
Build something
API
- Quotes REST API - They say So There are more than one million quotes in the database , This is the largest such database in the world . Quotes API Provides a simple way to access data .
- OpenWeather - come from OpenWeatherMap Simple , Fast , Free weather API, You can access the current weather data , Every hour ,5 Days and 16 The weather forecast for days .
- public API - For developers 1000 A variety of free public and open REST API A summary list of .
- SWAPI - 《 Star Wars: 》 API.
- JSONPlaceholder - Free use of forged online REST API Testing and prototyping .
NODEJS
- Node.js course - Net Ninja Of Node.js Crash course tutorial .
- You don't know Node.js
- Node Art - An introductory tutorial covering the basics .
- NodeSchool - You can also have your own interactive self-help workshops .
- Node Pattern - About Node.js A short book on code and network patterns .
- Study Node - An advanced training course , Used to learn how to use Node.js,Express and MongoDB Building applications .
- Node Way - There are for writing maintainable modules , Scalable applications and easy to read code Node.js A complete philosophy of best practices and guiding principles .
- Express.js Safety tips - How to save and protect applications .
- Awesome Nodejs - Pleasant Node.js Software packages and resources .
- nodebestpractices - A lot of build Node Best practices for applications . Important for large projects .
Study GIT
- Git manual - Git,GitHub,DVCS, Oh my god ！ understand Git All terms and basics of .
- Memo sheet - Keep these convenient ！ The reference table covers Git command , function ,SVN Migration and bash. Provide multiple languages .
- Study Git Branch - Directly from Web The browser tries Git command . Have some features you're about to become a favorite ： Branch , add to , Submit , Merge , Restore , choose , To reset ！
- visualization Git - Look under the hood ！ Use the free browsing mode and some built scenarios , Explore Git How commands affect Web The structure of the repository in the browser .
- Git-It - You have downloaded Git, Now? ？ take Git-It Download to your computer , You will get a hands-on tutorial , This tutorial will teach you to use commands from a real repository directly in your local environment Git.
Practical cases
Preparing for an interview （ problem ）
copyright notice
author[enoy],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210824165428364o.html
