Our great sponsors
- Appwrite - The Open Source Firebase alternative introduces iOS support
- InfluxDB - Access the most powerful time series database as a service
- CodiumAI - TestGPT | Generating meaningful tests for busy devs
- ONLYOFFICE ONLYOFFICE Docs — document collaboration in your environment
|5 days ago||28 days ago|
|Apache License 2.0||MIT License|
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
7 Proven Practices to Boost Development Speed and Project Quality
8 projects | dev.to | 27 Mar 2023
When we implemented the MVP of the fintech app, we had a quite complicated form. At that time, I was still young and inexperienced. And eventually, we realized that our project was slowing down. We had to spend additional hours figuring out the reason. We had many unnecessary re-renders because we ignored basic rules related to props in React. I wanted to do everything possible to avoid such situations in the future. So, I added to the project linters like this and an additional starting configuration to package.json to run why-did-you-render. In short, this plugin issues a warning if something is re-rendered unnecessarily and suggests how to avoid it. Also, we included running Lighthouse in headless mode. Some people say that premature optimizations are bad, but for me, it's a principle: do it right from the start.
Performance scores for Google Lighthouse/Insights seem to be very inaccurate
3 projects | reddit.com/r/webdev | 14 Feb 2023
There's a link to what they mean by mobile network there (https://github.com/GoogleChrome/lighthouse/blob/main/docs/throttling.md) and it says:
How to store your app's entire state in the url
17 projects | news.ycombinator.com | 9 Jan 2023
Here's the non-psuedo code equivalent that can leverage CompressionStream rather than using a browserified-gzip-library: https://github.com/GoogleChrome/lighthouse/blob/437eb4d757c5...
We use it in Lighthouse for the exact same purpose, a URL #hash full of state. We found that modern browsers support 10mb of data in the hash. https://github.com/GoogleChrome/lighthouse/pull/12509#discus...
Nightmare on Dev Street: Terrifying Situations to Make Your Spine Tingle
4 projects | dev.to | 27 Oct 2022
You can find out if your SaaS app is slowing down with Google Chrome Lighthouse. Lighthouse should be a staple in your monitoring because it lets you see the performance, accessibility, and SEO metrics related to your app's performance.
Why your website should be under 14kb in size
4 projects | news.ycombinator.com | 25 Aug 2022
Benchmarking Bun & Next against Deno and Fresh
4 projects | dev.to | 19 Aug 2022
Lighthouse: A tool developed by Google to measure a website’s performance using an average of six metrics.
Top 25 Tips for Building an EXTREMELY FAST Website!!!
9 projects | dev.to | 24 Jul 2022
Stop delaying. Share knowledge on a blog built with Eleventy.
7 projects | dev.to | 19 Jul 2022
Performance Using Lighthouse as a measurement tool, the blog should score 100 on all criteria.
How do you test a website?
4 projects | reddit.com/r/webdev | 5 Jul 2022
For implementation testing (e.g. WCAG 2.1 compliance, performance, best sec practices) there are checkers like webhint, lighthouse, and Pa11y.
Improving performance in a hierarchical SQL table structure with column propagation
2 projects | dev.to | 2 Jun 2022
The website should score 80+ in performance, SEO, and accessibility in Google Lighthouse tests. Plus, the load time should always be less than 2 seconds and ideally in the order of a few hundreds of milliseconds. The real challenge lies here, since the website consists of more than 2 million pages, and pre-rendering them all will take weeks. Also, the content shown in most of the pages is not static. Thus, we opted for an incremental static regeneration approach. When a visitor hits a page no one ever visited, Next.js generates it with the data retrieved from the APIs exposed by the backend. Then, Next.js caches the page for 30 or 60 seconds, depending on the importance of the page.
Web Performance Resources for Front End Developers
2 projects | dev.to | 4 Jan 2023
Webpack Bundle Analyzer
🚀 Angular 14 + ESLint, Material + Transloco + Jest, TestCafe + Docker + Prettier 🚀
2 projects | dev.to | 25 Sep 2022
npm run analyse - analyse bundle with webpack-bundle-analyzer
I shaved 80 MB from my TypeScript build by removing googleapis
5 projects | news.ycombinator.com | 1 Aug 2022
This was my question as well. The article does answer the question, but off the bat I'd assumed the author was talking about output/dist. The web treemap cli is a great tip. If you are using webpack, webpack-bundle-analyzer is a helpful tool for quickly finding bloated packages. It's definitely helped me cut down my build times: https://github.com/webpack-contrib/webpack-bundle-analyzer
Zero experience with Angular. I'm in charge of our CI and we're getting extremely slow prod build times (~1 hour 34 mins). Where should I start researching solutions for this?
3 projects | reddit.com/r/angular | 1 Feb 2022
Here are a few tipps where you could save some time: 1)check angular.json (configurations -> "your ci config") - look for buildOptimizer / optimization 2)If you run npm ci during your pipeline it might make sense to create the node modules folder beforehand, it seems to save time (https://github.com/npm/cli/issues/2011) 3)Use ng build --stats-json to analyze your build 4)Use https://github.com/webpack-contrib/webpack-bundle-analyzer (also works together with 3. ) 5)Check your package.json for unused dependencies 6)Check your imports, import only what is needed Hope this helps
The best Angular 13 Starter Project
12 projects | dev.to | 22 Jan 2022
- `npm run start` - Start the app - `npm run lint` - Lint the project - `npm run test` - Run unit tests - `npm run build` - Build the project - `npm run build:prod` - Build the project in production mode - `npm run build:prod:stats` - Build the project in product mode with stats - `npm run analyse` - Analyse bundle with [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) - `npm run compodoc` - Generate [compodoc](https://github.com/compodoc/compodoc) documentation - `npm run version` - Generate changelog - `npm run prettier` - Format the whole project - `npm run audit` - Audit this application using Sonatype OSS Index
10 Must-Have React Developer Tools to Write Clean Code💻🔥
6 projects | dev.to | 2 Dec 2021
4. Bundle Analyzer
Angular 12 + ESLint + Material + Transloco + Jest + Compodoc + Docker
3 projects | dev.to | 7 Aug 2021
npm run analyse - analyse bundle with webpack-bundle-analyzer
How to get started with improving site performance
4 projects | dev.to | 17 Jun 2021
Minimizing Webpack bundle size
5 projects | dev.to | 28 May 2021
Let’s start by getting an understanding of all the code & dependencies that need to be sent to the browser, along with the memory size of each. Adding webpack-bundle-analyzer to your webpack configuration is the perfect starting point.
Using Vite with React
18 projects | dev.to | 3 Apr 2021
In our "old" build system - I configured webpack-bundle-analyze to inspect bundle chunks and understand what it made of. I added rollup-bundle-visualyzer instead (although there is an issue that the reported size is not correct).
What are some alternatives?
awesome-vite - ⚡️ A curated list of awesome things related to Vite.js
vite-plugin-svgr - Vite plugin to transform SVGs into React components
axe-core - Accessibility engine for automated Web UI testing
rollup-plugin-visualizer - 📈⚖️ Visuallize your bundle
esbuild - An extremely fast bundler for the web
Vue Storefront - The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total coverage is just a matter of time. The API approach also allows you to merge VSF with any third-party tool like CMS, payment gateways or analytics. Newest updates: https://blog.vuestorefront.io. Always Open Source, MIT license.
Turbolinks - Turbolinks makes navigating your web application faster
lighthouse-ci - Automate running Lighthouse for every commit, viewing the changes, and preventing regressions
sveltekit-blog-mdx - SvelteKit MDX starter blog with MDsveX (Svelte in markdown)
unlighthouse - Unlighthouse scans your entire site using Google Lighthouse, with a modern UI, minimal config and smart sampling.
budibase - Budibase is an open-source low code platform that helps you build internal tools in minutes 🚀
Gantt chart for React.JS - dhtmlxGantt with ReactJS