DevGuide

Chrome Extensions For Frontend Developers Responsive Web Design Tester - Responsive Web Design Tester is a quick and easy way to test your responsive website. Dimensions - A tool for designers to measure screen dimensions. ColorZilla - Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies. WhatFont - The easiest way to identify fonts on web pages. PerfectPixel by WellDoneCode - This extension helps develop your websites with pixel perfect accuracy! Lightshot - Simple and convenient screenshot tool. Select an area, edit your screenshot and upload it to the server. UX Check - Run a heuristic evaluation on your website. Code Cola - Code Cola is a chrome extension for editing online pages' CSS style visually. Corporate Ipsum - Generate random corporate double-speak for use as filler text. GoFullPage - Full Page Screen Capture - Capture a screenshot of your current page in entirety and reliably—without requesting any extra permissions! ——— @phoenixcoding

GitHub Repos To Master React JS ——— Awesome React - A collection of awesome things regarding the React ecosystem. React in patterns - A free book that talks about design patterns/techniques used while developing with React. 30-Days-Of-React - A 30DaysOfReact challenge is a guide for both beginners and advanced JavaScript and React developers. Real-world React apps - Learn from React apps written by experienced developers. React Bits - A compilation of React Patterns, techniques, tips and tricks. React & Redux in TypeScript - Complete Guide - This guide is a living compendium documenting the most important patterns and recipes on how to use React (and its Ecosystem) in a functional style using TypeScript. Awesome React Components - This is a list of AWESOME components. Ahooks - A high-quality & reliable React Hooks library. Beautiful React Hooks - A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development. React Use - The essential collection of custom React Hooks, complete with documentation. useHooks - This is the repository for usehooks.com, a Gatsby powered blog that publishes easy to understand React Hook code recipes. React TypeScript Cheatsheets - Cheatsheets for experienced React developers getting started with TypeScript. React JS coding challenges - A series of React JS coding challenges with a variety of difficulties. React Interview Questions & Answers - List of top 500 React JS Interview Questions & Answers. React Hooks Cheatsheet - A Cheatsheet with live editable examples. React - Redux Links - Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem. React Developer Roadmap - In this repo you can find a chart demonstrating the paths that you can take and the libraries that you would want to learn to become a React developer. Awesome React Hooks - Awesome React Hooks Resources. Awesome Next.js - Curated list of resources: books, videos, articles about using Next.js. ——— @phoenixcoding

Tailwind CSS UI Kits ——— daisyUI - The most popular, free and open-source Tailwind CSS component library. Mamba UI - Mamba UI is a free, open-source collection of UI components and templates based on Tailwind CSS. Headless UI - Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. Tailwind Starter Kit - Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from Tailwind CSS. @phoenixcoding Material Tailwind - Material Tailwind is an easy to use components library for Tailwind CSS and Material Design. Gust UI - A Free Tailwind UI kit for visionary applications. TUK - Build captivating experiences with accessible, fully responsive, drop-in-ready Tailwind CSS components and fast-track your workflow. Get started FREE with 250 COMPONENTS. Kometa UI Kit - We are giving away our first UI kit for free. It includes over 130 sections, built with Tailwind CSS, for your awesome projects. Meraki UI - Tailwind CSS Components That Support RTL Languages & Fully Responsive Based On Flexbox & CSS Grid With Elegant Dark Mode.

React JS Tools For Developers - React Bootstrap React Bootstrap is a framework that has been rebuilt to be able to use Bootstrap for React projects. - Redux Redux is an application that helps you easily manage the states in your react project in particular and general JavaScript application. - Create React App Create React App helps you to create projects quickly and easily with just one sentence command without having to perform complicated settings as usual. - React Developer Tools React Developer Tools is a tool created by Facebook that makes it easy for developers to control Check and develop the react project. - Storybook Storybook is an open source tool for building user interface components and pages in an intuitive way individual. It streamlines development, testing, and user interface documentation. - React.js CheatSheet React.js CheatSheet is a collection of common properties in react. - Evergreen Evergreen is a React UI framework for website development. - Reactide Reactide is an IDE dedicated to developing React web applications. - React Hot Loader React Hot Loader helps you refine React components in real time. - React Styleguidist React Styleguidist is an environment to help you develop components with a living style guide. - React Testing Library React Testing Library helps you to test components in your project. - React Cosmos React Cosmos helps you develop projects efficiently, build UI components easily, share quickly component libraries, automated testing. - React Proto React Proto is a React app prototyping tool for developers and designers. - React Hook Form React Hook Form is a tool that helps you to easily validate, test speed, provide useful APIs… for form. - React Bits React Bits is a collection of react patterns, techniques, and tips for react developers. - Styled Components Styled Components make it easy to incorporate CSS into JavaScript. - React Starter Projects React Starter Projects is a collection of useful libraries for programmers when developing projects react. ——— @phoenixcoding

Best GitHub Repos for Self-Taught - Project-Based Learnings A list of programming tutorials in which aspiring software developers learn how to build an application from scratch. - Free Programming Books List of Free Learning Resources In Many Languages. - Developer Roadmap Developer Roadmap is a community effort to create roadmaps, guides and other educational content to help guide the developers in picking up the path and guide their learnings. - Public API’s A collective list of free APIs for use in software and web development. - Coding University This repo is a short to-do list of study topics for becoming a software engineer. - Awesome Python A curated list of awesome Python frameworks, libraries, software and resources. - Tensor-Flow TensorFlow is an end-to-end open source platform for machine learning. - FreeCodeCamp freeCodeCamp.org is a friendly community where you can learn to code for free. - Awesome Awesome lists about all kinds of interesting topics. ——— @phoenixcoding

Markdown Guide - The Markdown Guide is a free and open-source reference guide that explains how to use Markdown, the simple and easy-to-use markup language you can use to format virtually any document. ——— https://www.markdownguide.org/basic-syntax/ ——— If the website doesn’t work, This is the PDF version 👇🏻 ——— @phoenixcoding

CSS Libraries To Make Awesome Websites - Hamburgers CSS Tasty CSS-animated hamburgers - CSS Layout Popular layouts and patterns made with CSS - Hover CSS A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. - SpinKit Simple loading spinners animated with CSS. - Charts CSS CSS data visualization framework. - Pretty Checkbox A pure CSS library to beautify checkbox and radio buttons. - Izmir Izmir is a mini CSS library allowing you to quickly create beautiful image hover elements. - 30SecondsOfCode The CSS snippet collection contains utilities and interactive examples for CSS3. ——— @phoenixcoding

JavaScript Interview Questions shorturl.at/tDENR ——— @phoenixcoding

Best JavaScript Animation Libraries - Three.js Three.js is a WebGL-based 3D animation library. It allows you to create a scene with a camera and animate objects within it. - GSAP Professional-grade JavaScript animation for the modern web. - Anime.js Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. - Mo.js Mo.js is a JavaScript library devoted to motion for the web. It offers a declarative syntax motion and the creation of elements for animation. - Typed.js Typed.js is a JavaScript library which is used to type a set of strings at the speed that you set, backspace what it's typed and begin the typing with another string you have set. - Vivus Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. - Proton Proton is a lightweight and powerful JavaScript particle animation library. - ScrollReveal ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up. ——— @phoenixcoding

6- public - The public folder contains static files such as index.html, the icon of the app, images, etc. ————————————————————— ——— Files inside public folder ——— ————————————————————— - index.html (This is the main file that opens in your browser and holds the HTML template of your app) - favicon.ico (It’s the Favicon of the app) - manifest.json (It provides the information about the app such as name, author, icon, and description in a JSON text file. The purpose from the file is to install web applications to the home screen of the user’s device) 7- src - This is the most important part of the app. This is where you do coding of your app. - In this folder, you place all your files related to development like pages, components, CSS files, images, etc. ————————————————————— ——— Files inside src folder ——— ————————————————————— - App.js (It’s the parent component of a react app and by default, it contains a basic component code and we can erase it and write our own) - App.css (It’s a CSS file that contains CSS related to App.js but you can use it globally as well) - index.js (It’s actually an entry point of our react app. It is where you render the main react component onto the root element) - index.css (A CSS file contains CSS related to index.js but can be used globally) - App.test.js (It’s a test file contains a basic test for App.js Component) - logo.svg (Logo of react rotating on the screen when you first runs the app) - reportWebVitals.js (create-react-app includes a built-in tool for measuring the real-life performance of your app. It is called reportWebVitals.js)