Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more →
Top 23 Web Open-Source Projects
-
system-design-primer
Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
-
Playwright
Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
-
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
-
-
-
-
-
-
httpie
🥧 HTTPie CLI — modern, user-friendly command-line HTTP client for the API era. JSON support, colors, sessions, downloads, plugins & more. (by httpie)
-
-
-
expo
An open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
✅ donnemartin/system-design-primer: https://github.com/donnemartin/system-design-primer
Project mention: Show HN: I made an app to use local AI as daily driver | news.ycombinator.com | 2024-02-27* LLaVA model: I'll add more documentation. You are right Llava could not generate images. For image generation I don't have immediate plans, but checkout these projects for local image generation.
1.Puppeteer: Puppeteer is a Node library that provides a high-level API to control headless Chrome or Chromium using the DevTools Protocol. Key Features: More control over Chrome. Enables web scraping. Allows taking screenshots and generating PDFs for UI testing. Measures load times through the Chrome Performance Analysis tool
Hi, dear Tauri! Long time no see. I published my first post, Developing a Desktop Application via Rust and NextJS. The Tauri Way almost a year ago. Since then, Tauri has become stronger. I'm happy about that! And now, I am very pleased to make a useful contribution to the Tauri community. As a full-stack developer, I frequently face situations where I need to start a DB-based UI project as fast as possible. It's stressful if I need to start the project from 100% scratch. I prefer to keep some boilerplates on hand, which will save me time and nerves and will be the subject of this article.
Project mention: AutoCodeRover resolves 22% of real-world GitHub in SWE-bench lite | news.ycombinator.com | 2024-04-09>As an example, AutoCodeRover successfully fixed issue #32347 of Django.
This bug was fixed three years ago in a one-line change.[0] Presumably the fix was already in the training data.
An API application framework (such as FastAPI)
Click "Start Test." WebPageTest generates a comprehensive report with details about the loading process, including time to first byte (TTFB), page load time, and visual progress. ### Setting Benchmarks with Lighthouse Start with Lighthouse audits to maximize the performance of your React application. Evaluate Lighthouse's scores and suggestions with careful consideration. Next, set benchmarks that are in line with industry norms or customized to meet your unique performance goals. Lastly, pay close attention to the places in your application where it needs work. You can improve your React application's effectiveness by carefully following these procedures, which will guarantee that it satisfies the required performance requirements. ### Analyzing Performance Results with WebPageTest In order to fully evaluate your webpage's performance, launch WebPageTest with a variety of systems, simulating a variety of user scenarios. Examine the waterfall chart carefully to identify loading patterns and bottlenecks, which are essential for improving the user experience. To see the page's rendering process over time and do a thorough examination, use filmstrip views. To effectively assess performance, pay special attention to measures such as time to first byte (TTFB), start render time, and fully loaded time. Also, a better understanding of performance variances is made possible by comparing findings across various test designs, which helps make well-informed recommendations for improving webpage responsiveness and efficiency. ## Impact of third-party libraries on React app performance Third-party library integration can speed up development while improving functionality in our React application. It's crucial to consider the possible effects on performance, though. Because heavy or poorly optimized libraries might negatively impact the speed and usability of our application. ### Bundle Size Look at the distribution file sizes related to the library, and use tools such as Bundlephobia or Webpack Bundle Analyzer to fully evaluate their impact on your bundle size. This thorough analysis enables you to make well-informed decisions about whether to include the library, making sure that its contribution minimizes superfluous bulk in your application's codebase and is in line with your optimization goals. ### Network Requests Analyze how the third-party library affects network requests to maximize performance. Reduce the number of requests made overall by minimizing external dependencies. This will enhance the user experience and loading speeds. Select appropriate libraries, maximize asset delivery, and leverage code splitting to load components asynchronously. You may improve the effectiveness and responsiveness of your application and provide users with a better experience by cutting down on pointless network queries. ### Execution Time Examine the library's code for any possible performance problems or bottlenecks in order to analyze the runtime performance of the library. Look for places where the code may execute slowly or inefficiently. You may ensure smoother operation inside your application by identifying and addressing any areas of the library's implementation that may be impeding ideal performance by doing a comprehensive assessment. ### Code Splitting for Third-Party Libraries Implementing code splitting is an effective strategy to load third-party libraries only when they are required, reducing the initial page load time. Use dynamic imports to load the library lazily:
In this tutorial, our main focus will be on Playwright web scraping. So what is Playwright? It’s a handy framework created by Microsoft. It's known for making web interactions more streamlined and works reliably with all the latest browsers like WebKit, Chromium, and Firefox. You can also run tests in headless or headed mode and emulate native mobile environments like Google Chrome for Android and Mobile Safari.
I was recently able to sit down with some of the core members of Ionic, who also created Stencil a toolchain for building Design Systems and Progressive Web Apps. We talked at great length how typically companies are approaching Ionic from a Design Team and need help building components. As a developer I wanted to talk about the Web Components that are used within the Design System first. There was a decent amount of surprise, so I thought I would break down what a Design System is and why it doesn't matter which end you start with, as long as you have both your Design and Development teams working together to build your Design System.
They link on the docs to the github which lists these extra options though. https://github.com/google/material-design-icons/tree/master/font So it's easy to miss.
In the Changelog Podcast episode referenced above, Dan Abramov alluded to Parcel working on RSC support as well. I couldn’t find much to back up that claim aside from a GitHub issue discussing directives and a social media post by Devon Govett (creator of Parcel), so I can’t say for sure if Parcel is currently a viable option for developing with RSCs.
Project mention: How I use Appwrite Databases with Pinia to build my own habit tracker | dev.to | 2024-04-14If you haven't tried Appwrite, make sure you give it a spin. It's a open source backend that packs authentication, databases, storage, serverless functions, and all kinds of utilities in a neat API. Appwrite can be self-hosted, or you can use Appwrite Cloud starting with a generous free plan.
GORM is a comprehensive ORM tool in Go, offering a code-first approach which allows defining database schemas using struct tags in Go. It's known for its developer-friendly nature, making it suitable for both beginners and experienced users. GORM supports a variety of SQL databases like MySQL, PostgreSQL, and SQLite. It's designed to be flexible, allowing developers to drop down to raw SQL when necessary. However, it's important to be cautious about its performance implications in large-scale applications.
tested the end points using httpie and sometime curl
Project mention: Container2wasm: Convert Containers to WASM Blobs | news.ycombinator.com | 2024-01-03
Echo - web framework for Go
Google Core Vitals now represent the most important metrics to focus on when it comes to technical SEO. Google Core Vitals are a set of standardized metrics that Google uses to evaluate the user experience offered by a web page and assign it a technical SEO grade. Several tools exist to measure and report technical SEO performance, but the most reliable is Google Lighthouse.
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
The latest post mention was on 2024-04-18.
Web related posts
- Multipath TCP for Linux
- Episode 24/15: Wiz behind the curtain, Copilot in VSCode
- How to Implement Rate Limiting in Express for Node.js
- How to use htmx with ktor
- Supabase – General Availability Week
- Threads on Mastodon and the Bright Future of the Fediverse
- Always unsubscribe. No exceptions. Debate closed.
-
A note from our sponsor - InfluxDB
www.influxdata.com | 19 Apr 2024
Index
What are some of the best open-source Web projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | system-design-primer | 252,211 |
| 2 | Flutter | 161,649 |
| 3 | stable-diffusion-webui | 128,662 |
| 4 | Angular | 94,397 |
| 5 | puppeteer | 86,704 |
| 6 | tauri | 76,929 |
| 7 | Django | 76,672 |
| 8 | fastapi | 70,541 |
| 9 | webpack | 64,145 |
| 10 | Playwright | 61,381 |
| 11 | Ionic Framework | 50,386 |
| 12 | material-design-icons | 49,750 |
| 13 | parcel | 43,097 |
| 14 | Appwrite | 40,869 |
| 15 | Dubbo | 39,994 |
| 16 | GORM | 35,341 |
| 17 | spring-boot-demo | 31,938 |
| 18 | httpie | 31,760 |
| 19 | Fiber | 31,291 |
| 20 | yew | 29,888 |
| 21 | expo | 28,914 |
| 22 | Echo | 28,466 |
| 23 | lighthouse | 27,823 |
Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com