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 HTML Open-Source Projects
-
Bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
-
-
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.
-
-
storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
-
-
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.
-
html5-boilerplate
A professional front-end template for building fast, robust, and adaptable web apps or sites.
-
-
-
-
-
30-Days-Of-JavaScript
30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace. These videos may help too: https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw
-
-
-
SheetJS js-xlsx
📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs
-
novu
GitOps based Notification Infrastructure as Code. Embeddable Notification Center, E-mail, Push and Slack Integrations.
-
-
-
30-Days-Of-React
30 Days of React challenge is a step by step guide to learn React in 30 days. These videos may help too: https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
As an example, let’s take the Bootstrap framework and try to go with ITCSS structure in it.
Project mention: 30-seconds-of-code: Short code snippets for all your development needs | news.ycombinator.com | 2023-12-25
The team at Electron have been faithfully shipping new releases almost every single month. I think they had Christmas off 🤔. This popular framework has developers writing cross-platform desktop applications using JavaScript, HTML and CSS. The latest update depreciates some process events, and added new modules, APIs, methods, and more. Read into all the changes in the Electron release notes. This month, Electron also introduced a new formal RFC process.
But here’s some good news: there’s already a solution in the JavaScript world called Storybook!
Project mention: 18 Must-Bookmark GitHub Repositories Every Developer Should Know | dev.to | 2024-02-12
Project mention: Is there some form of checklist when creating an optimal website? | /r/webdev | 2023-06-28Checklist
You may notice in the new_framework_defaults_7_0.rb file mentioning the impact of this change, which is cache invalidation. In order to gather some more information I looked at the ActiveSupport::Digest which basically has just 3 class methods, a setter & getter for hash_digest_class and the hexdigest method. Furthermore, I searched across the rails/rails repo to find the usage of ActiveSupport#hex_digest_class (if interested this link leads to the search results) to find most of its usage only around code that deals with caching. This included caching of views, active_record queries, http ETAGs and also cache keys for the cache store you have set e.g. redis, filestore etc.
Tailwind is great, but creating everything from scratch is annoying. A nice base of components which can be extended with tailwind would be great. There are a few tailwind frameworks like Flowbite, Daisy Ui, but I like Bulma, PicoCSS and Bootstrap.
Project mention: How to prevent Prettier putting a full stop on a new line after a link | dev.to | 2024-05-13Do you use Prettier? Have your configuration settings caused weird HTML rendering issues by adding extra whitespace where you didn't want it? Perhaps after an anchor link at the end of a paragraph? Me, too. Here's what's happening and how you might be able to fix it.
Parcel is a fast and zero-configuration web application bundler designed to simplify the build process for modern web projects. It's not limited to web applications, and it can be used to build packages targeting the browser or Node.js.
I am using iTerm2 on my macOS. Other available options are Hyper and VS Code’s inbuilt terminal, which I sometimes use for quick tests. You can open a terminal in VS Code by using the keyboard shortcut CMD + J or CTRL + J on Windows, or View → Terminal.
Project mention: Struggling to Learn React Or Any JavaScript Framework? Here are 7 Mistakes Holding Back (And What To Do Instead) 💪🎉 | dev.to | 2024-02-0430 Days of JS
Project mention: Stream to Chromecast with resolved, vlc and bash | news.ycombinator.com | 2024-01-07For people who like to watch with subtitles, VLC currently doesn't support streaming to chromecast with SRT subtitles.. there are several issues for it and I believe support is slated for the next major version of Chromecast, but not sure when that will be.
The typical "workaround" is to reencode the video file to include the subtitles directly, but that sounded like too much work, so I hacked together a static page using https://videojs.com/ to embed a player and load the video and subtitles in a browser window.
Here it is in gist form if anyone has a similar issue: https://gist.github.com/HartS/9bb2721fa73b6798efcdbf5c463e87...
This was hacked together as quickly as possible for my own needs, so definitely not intended to be an example of clean code. You need to run the python server separately to serve the SRT because video-js can't load it from a file URL IIRC
This is a bug, PR welcome !
https://github.com/tabler/tabler/issues/1648
ExcelJS and XLSX (SheetJS) are great libraries to work with XLSX files. The former I've found a bit easier to work with but less efficient in general.
import { Body, Column, Container, Head, Heading, Hr, Html, Link, Preview, Section, Text, Row, } from "@react-email/components"; import * as React from "react"; const EmailTemplate = () => ( Hello WorldPreview> Hello WorldHeading> Column> Row> Section> Hey Emil,Text> CoolText> Section> Container> You're receiving this email because your subscribed to Newsletter App Text>
Newsletter Appstrong>, ©{" "} NovuLink> Text> Section> Body> Html> ); export default EmailTemplate; const main = { backgroundColor: "#f3f3f5", fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", }; const headerContent = { padding: "20px 30px 15px" }; const headerContentTitle = { color: "#fff", fontSize: "27px", fontWeight: "bold", lineHeight: "27px", }; const paragraph = { fontSize: "15px", lineHeight: "21px", color: "#3c3f44", }; const divider = { margin: "30px 0", }; const container = { width: "680px", maxWidth: "100%", margin: "0 auto", backgroundColor: "#ffffff", }; const footer = { width: "680px", maxWidth: "100%", margin: "32px auto 0 auto", padding: "0 30px", }; const content = { padding: "30px 30px 40px 30px", }; const header = { borderRadius: "5px 5px 0 0", display: "flex", flexDireciont: "column", backgroundColor: "#2b2d6e", }; const footerDivider = { ...divider, borderColor: "#d6d8db", }; const footerText = { fontSize: "12px", lineHeight: "15px", color: "#9199a1", margin: "0", }; const footerLink = { display: "inline-block", color: "#9199a1", textDecoration: "underline", fontSize: "12px", marginRight: "10px", marginBottom: "0", marginTop: "8px", }; const footerAddress = { margin: "4px 0", fontSize: "12px", lineHeight: "15px", color: "#9199a1", };
Hi there! I want to show off a little feature I made using hanami, htmx and a little bit of redis + sidekiq.
Cheerio is your ticket to the world of server-side magic, allowing you to manipulate HTML and XML documents with jQuery-like syntax. It’s perfect for web scraping, data extraction, or just making sense of the mess that is web content. With Cheerio, you get to play around with the DOM, use CSS selectors, and basically do all the cool things you'd do in the browser, but server-side.
Project mention: Ultimate Guide & Resources to Enhancing Your ReactJS Skills || 16 GitHub repositories | dev.to | 2023-08-14Challenge yourself with the 30 Days of React series, perfect for honing your skills day by day.
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).
HTML related posts
-
Firefox Enables Screen Wake Lock API by Default – Again
-
🇫🇷 Utiliser RiotJS avec BeerCSS Material Design 3
-
Enabling Rails 7.0's New Framework Defaults
-
Thinking out loud about 2nd-gen email
-
Popover API
-
Htb.js – a 50-line HTML template engine that uses JavaScript syntax
-
How to have a clean CSS structure with RSCSS/ITCSS
-
A note from our sponsor - InfluxDB
www.influxdata.com | 20 May 2024
Index
What are some of the best open-source HTML projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Bootstrap | 167,643 |
| 2 | 30-seconds-of-code | 119,530 |
| 3 | Electron | 112,176 |
| 4 | storybook | 82,997 |
| 5 | Web-Dev-For-Beginners | 81,621 |
| 6 | app-ideas | 75,259 |
| 7 | Front-End-Checklist | 67,589 |
| 8 | html5-boilerplate | 56,063 |
| 9 | Ruby on Rails | 54,976 |
| 10 | Bulma | 48,664 |
| 11 | prettier | 48,433 |
| 12 | parcel | 43,156 |
| 13 | hyperterm | 42,733 |
| 14 | 30-Days-Of-JavaScript | 41,077 |
| 15 | front-end-interview-handbook | 40,432 |
| 16 | video.js | 37,257 |
| 17 | tabler | 37,062 |
| 18 | SheetJS js-xlsx | 34,554 |
| 19 | novu | 33,044 |
| 20 | htmx | 33,194 |
| 21 | HEAD | 29,919 |
| 22 | cheerio | 27,845 |
| 23 | 30-Days-Of-React | 24,385 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com