Skip to content

List of the useful resources for frontend development. Performance meteres, security, image compressors etc.

Notifications You must be signed in to change notification settings

Frontend-Layers/frontend-toolchain

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 

Repository files navigation

Frontend Toolchain

Some useful links for daily development

Resources

Frontend Resources

  • Front-End Checklist – A comprehensive list of best practices and resources for front-end web development.
  • HTML5 Boilerplate – A professional front-end template for building fast, robust, and adaptable web apps or sites.

Performance

  • Pingdom – A performance monitoring tool to analyze website speed and availability from different locations around the world.
  • PageSpeed Insights – Google's tool for analyzing and optimizing web page performance for both mobile and desktop versions.
  • Performance Test – Web.dev’s tool for measuring and improving site performance based on various factors, including Core Web Vitals.
  • WebPageTest – A detailed website performance testing service that allows you to test from different locations and browsers.
  • BrowserStack Speed Lab – A tool that analyzes the speed of your website on various mobile devices and browsers, offering insights for improvement.

Generators

  • Favicon Generator – A tool to generate favicons and their corresponding HTML code for websites, compatible with all devices and platforms.
  • Web Font Generator – A service that converts fonts into web-friendly formats, including TTF, OTF, WOFF, and WOFF2.
  • Video Smaller – A tool for compressing video files online, helping reduce file sizes without significant quality loss.

Tools

  • W3C Developer Tools – A collection of developer tools from the World Wide Web Consortium (W3C), offering useful utilities for web development and testing.

HTML Tools

SEO Tools

Commercial

  • Stripe Dummy Cards – Documentation by Stripe for testing payment flows with dummy credit card details.
  • PayPal Sandbox – Use PayPal’s sandbox environment to simulate transactions for testing and development.

Tests

  • CSS Stats – Analyzes and visualizes your website's CSS, providing insights into its structure and efficiency.
  • Is your website hosted green? – A tool to check if your website is hosted using renewable energy.
  • Screen Test – Test how your website looks on different screen sizes and devices.
  • Toptal Utilities Tools – A collection of useful tools for web developers and designers.

Semantic Tests

  • Rich Results Test – Tool from Google to test your site's structured data and ensure it generates rich results in search.

Security Test

  • Security Headers – Tool for testing the HTTP response headers and security best practices of your website.
  • Mozilla Observatory – A platform that evaluates and grades the security of your website, including headers, encryption, and more.
  • SSL Test – Service for analyzing the SSL/TLS configuration of your website and assessing its security level.

Accessability

Images Compression

  • Compressor.io – Online tool to compress JPEG, PNG, GIF, and SVG images, optimizing them for faster web loading.
  • ShrinkMe – A tool to compress and reduce the size of your images without losing quality, helping improve web performance.
  • Squoosh – An image compression tool that allows you to optimize images for the web, with support for various formats and quality settings.
  • TinyPNG – A simple tool to compress PNG and JPEG images without losing quality, ideal for web usage.
  • ImageOptim – A Mac application for compressing images, reducing file sizes while maintaining high quality.
  • Optimizilla – An online image compressor for JPEG and PNG files, offering a balance of file size reduction and visual quality.

Animation

  • Cubic Bezier – A tool for creating and visualizing custom cubic-bezier easing functions, helping you fine-tune animations.
  • Easings.net – A comprehensive collection of easing functions for CSS transitions and animations, with live demos and code snippets.

Typography

  • Typewolf Cheatsheet – A handy reference for web typography, featuring popular font pairings and examples.
  • HTML Character Entity References – A guide for HTML character references and special symbols to enhance web content.
  • Toptal HTML Arrows – A collection of arrow symbols and characters for web design, with HTML and CSS code examples.

Programming Fonts

  • Fira Code – A monospaced font with programming ligatures, designed for coding with better readability and aesthetics.
  • Victor Mono – A monospaced font with ligatures for developers, offering a clean, readable, and modern design.

Other Tools

  • Shadow Generator – A tool to easily create and customize CSS box-shadow effects for your web elements.
  • Gradient Generator – A user-friendly tool for generating gradients in CSS, with a visual interface to tweak colors and styles.

Icons

  • Tabler Icons – A collection of over 500 fully customizable, free, and open-source icons designed for web applications.
  • Bootstrap Icons – A library of high-quality, easy-to-use icons built to work seamlessly with Bootstrap projects.
  • IconBeast Free Icons – A free collection of high-quality icons available in various formats, perfect for your web and mobile projects.
  • Simple Icons – A library of over 200 simple and consistent SVG icons for popular brands, with an easy-to-use interface for selection.
  • Google Fonts Material Symbols – A comprehensive set of Material Design icons, available for use in web projects and optimized for high-quality performance.

3D Tools

  • GLTF Viewer – A web-based viewer for GLTF (GL Transmission Format) models, allowing you to visualize 3D models and scenes directly in the browser with high-performance rendering.
  • https://lygia.xyz/ – LYGIA is the biggest shader library. Battle proof, cross-platform and multi-language. Is made of reusable functions that will let you prototype, port and ship projects in just few minutes. It's very granular, flexible and efficient, supports multiple shading languages and can easily be added to virtually any project. There are already integrations for almost all major environments, engines and frameworks.

API

Dev. API

  • Open Trivia Database – A free API for trivia questions and answers, allowing you to integrate fun and engaging quizzes into your applications.
  • Random User Generator – A tool for generating random user data, perfect for testing or populating sample user profiles.

Docs

  • List of Free Learning Resources In Many Languages – A comprehensive list of free programming books and resources available in multiple languages, perfect for developers at any level.
  • Google Style Guides – Google's official style guides for coding and documentation, helping ensure consistency and best practices in code.
  • Awesome Lists – A collection of curated lists covering various topics, from programming languages to tools and frameworks, designed to help developers find the best resources.

JS

  • The Algorithms - JavaScript – A collection of algorithms and data structures implemented in JavaScript. This resource provides both beginner and advanced examples, making it a great way to improve your understanding of algorithms and coding practices in JavaScript.

Assets

  • CleanPNG - HD png images and illustrations – Discover transparent background images and illustrations. Best quality, free unlimited download.
  • Unsplash – A platform offering free high-quality photos for use in projects, with a robust API for easy integration.

UI Components

  • Tweakpane - A compact pane for fine-tuning parameters and monitoring value changes

About

List of the useful resources for frontend development. Performance meteres, security, image compressors etc.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published