create-react-app-zero
Electron
Our great sponsors
create-react-app-zero | Electron | |
---|---|---|
7 | 236 | |
26 | 111,526 | |
- | 1.0% | |
0.0 | 9.9 | |
over 1 year ago | 7 days ago | |
JavaScript | C++ | |
MIT License | 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.
create-react-app-zero
- Writing JavaScript without a build system
-
Why is the JavaScript ecosystem like this
No build frontend dev is a thing, although obscure.
Preact has a no build path in their documentation: https://preactjs.com/guide/v10/getting-started/#no-build-too...
And here’s my no build react setup: https://github.com/jsebrech/create-react-app-zero
-
Ask HN: Programming Without a Build System?
Not really the thing you’re looking for, but for those looking for a toolless approach static web apps are a possibility. Host a folder on github pages, put an index.html file in there, start coding.
Plugging my own repo: https://github.com/jsebrech/create-react-app-zero
It is a version of create react app that works in that way, no build tools needed, only a static web server for local development.
-
What unpopular webdev opinions do you have?
For example, I made a version of create react app that requires zero build tools and IMHO doesn't concede too much in developer experience. To be fair, I am not using this myself professionally, but as a proof of concept I think it's pretty interesting to see what's possible. https://github.com/jsebrech/create-react-app-zero
- JS is USELESS without ... [fill in the blank]
-
Is the madness ever going to end?
I have been in professional web development since 2004 and I mostly agree with the author that there are massive amounts of groupthink going on. "Modern" web development has standardized in tool stacks which are insanely complicated, far beyond anything that is warranted in most cases. We have forgotten how to make simple things in simple ways.
At a minimum you need node, npm, webpack, babel, an spa framework, a frontend router, a css transpiler, a css framework, a test runner, a testing functions library, and a bunch of smaller things, and that's just what is "needed" to build a static website with a bit of interaction. We're not even talking about the dockerized insanity that happens as soon as you want to slide an API under that beast.
I understand why every piece is there, I was there when they arrived on the scene, I understand what problem they solve. What I don't understand is why as a group web developers have decided this is the only way to solve the problem of web development. What we don't have are simpler web stacks. Why do we need npm or babel at all to make a simple web frontend? Modern browsers are good enough that with the right tooling we don't need build pipelines or package managers. Similar arguments can be made for the server-side parts.
Anyway, here's my own two cents to a simpler web dev stack: a version of create react app that is entirely self-contained and has no build steps. https://github.com/jsebrech/create-react-app-zero
Electron
-
Release Radar • February 2024 Edition
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.
-
The IDEs we had 30 years ago and we lost
VS Code has been crashing at launch in Wayland since more than eight months ago:
-
Design Systems with Web Components
So we talked a lot about the Atomic Design Principle, but you could just use that in any system and start creating. You could have Angular components, React Components, and Vue Components. But if you notice these don't easily work Everwhere. So the solution is to use Web Components because the modern browser can already understand these, and any Front-End framework can then utilize these components. You can use Electron for desktop (Slack, VSCode), PWA for both Android and iOS, and across all browsers Can I Use.
-
How I got Wayland, Vulkan, and hardware acceleration working with Figma on Fedora 39.
I'm noticing a significant boost in performance, crisper text, and better power savings. The only shortcoming is that the window which Figma will run on will lose its shadow. This is due to a technical limitation with frameless windows on Linux.
-
Building Apps with Tauri and Elixir
For the longest time, building desktop apps was a daunting task to web developers. That is, until technologies like Electron made creating these apps more approachable to a wider audience. Today, we’ve got a wide array of native applications built with solutions like Electron, Tauri, Capacitor, and many more. While these are great solutions, sometimes configuration can be tricky and the applications we create can become somewhat bloated in terms of memory usage.
-
CVE-2023-4863: Heap buffer overflow in WebP (Chrome)
It does, see [0]. Fun fact: Signal desktop, which uses Electron under the hood, is running without sandbox on Linux [1][2].
[0] https://github.com/electron/electron/pull/39824
-
$Home, Not So Sweet $Home
Open since 2016! https://github.com/electron/electron/issues/8124
-
Electron, Angular & Firebase "INTERNAL ASSERTION FAILED: Expected a class definition"
import {app, BrowserWindow, screen} from 'electron'; import * as path from 'path'; import * as fs from 'fs'; let win: BrowserWindow | null = null; const args = process.argv.slice(1), serve = args.some(val => val === '--serve'); function createWindow(): BrowserWindow { const size = screen.getPrimaryDisplay().workAreaSize; // Create the browser window. win = new BrowserWindow({ x: 0, y: 0, width: size.width, height: size.height, webPreferences: { nodeIntegration: true, allowRunningInsecureContent: (serve), contextIsolation: false, }, }); win.maximize(); win.show(); if (serve) { const debug = require('electron-debug'); debug(); require('electron-reloader')(module); win.loadURL('http://localhost:4200'); } else { // Path when running electron executable let pathIndex = './index.html'; if (fs.existsSync(path.join(__dirname, '../dist/index.html'))) { // Path when running electron in local folder pathIndex = '../dist/index.html'; } const url = new URL(path.join('file:', __dirname, pathIndex)); win.loadURL(url.href); } // Emitted when the window is closed. win.on('closed', () => { // Dereference the window object, usually you would store window // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. win = null; }); return win; } try { // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. // Added 400 ms to fix the black background issue while using transparent window. More detais at https://github.com/electron/electron/issues/15947 app.on('ready', () => setTimeout(createWindow, 400)); // Quit when all windows are closed. app.on('window-all-closed', () => { // On OS X it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { // On OS X it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (win === null) { createWindow(); } }); } catch (e) { // Catch Error // throw e; }
-
Wayland Is Pretty Good
Wayland as a concept is pretty good.
But I would strongly urge anyone from switching to it unless you have nostalgia about the bug-ridden nature of the 2010-era Linux Desktop.
I’m still using it, by the way, with Hyprland, but I think I’ll be switching back to X11/i3 soon. Here’s a taste of my experience thus far.
Electron apps are a mess. This isn’t (all) wayland’s fault but for issue lists like https://github.com/electron/electron/issues?q=is%3Aissue+is%... to exist, proponents of wayland would find it in their best interest to tackle the problems given the large number of applications that use electron.
Screen sharing doesn’t work. All the old fixes are to be ignored - it has regressed. Again. Font sizes are screwy. VSCode simply doesn’t work. The handy slack shortcuts like ctrl+shift+space for mute that work anywhere only work when slack is focused on Wayland.
If you have multiple monitors of different scaling factors, moving a window from one to the other results in it becoming unbearably blurry.
wl-clipboard and vim with clipboard=unnamedplus (the only reasonable clipboard) simply don’t work well together, and have a history of bugs going back for FOUR YEARS. At the moment, holding down x or d for repeated deletes is INSANELY slow. As in, I’m used to it working at my repeat rate of ~60 deletes per second and it barely does 3.
Every now and then, my cursor becomes huge. Every now and then, it becomes tiny. No idea why, and I’m afraid to ask.
Basically, it’s not a comfortable experience.
What are some alternatives?
tauri - Build smaller, faster, and more secure desktop applications with a web frontend.
dotenv - Loads environment variables from .env for nodejs projects.
Eel - A little Python library for making simple Electron-like HTML/JS GUI apps
puppeteer - Node.js API for Chrome
react-native - A framework for building native applications using React
cheerio - The fast, flexible, and elegant library for parsing and manipulating HTML and XML.
jsdom - A JavaScript implementation of various web standards, for use with Node.js
opencv - OpenCV Bindings for node.js
Screenshare-with-audio-on-Discord-with-Linux - A repo trying to gather all info regarding proper screensharing on Discord with Desktop Audio for linux users
webworker-threads - Lightweight Web Worker API implementation with native threads
Apache Cordova - Apache Cordova Android
Faker.js - What really happened with Aaron Swartz?