​​Gravity is not a force.

Under general relativity, gravity is not a force. Instead it is a distortion of spacetime. Objects in free-fall move along geodesics (straight lines) in spacetime, as seen in the inertial frame of reference on the right. When standing on Earth we experience a frame of reference that is accelerating upwards, causing objects in free-fall to move along parabolas, as seen on the left.

In this system there is only one space dimension, shown on the vertical axis and labeled in meters. The time dimension is the horizontal axis and labeled in seconds. The gravitational field is constant within the area of interest.

Use this demo to see and feel this!

https://timhutton.github.io/GravityIsNotAForce/

#js

A case study on viable techniques for vanilla web development.

A TeuxDeux clone in plain HTML, CSS and JavaScript (no build steps). It's fully animated and runs smoothly at 60 FPS with a total transfer size of 44KB (unminified).

More importantly, it's a case study showing that vanilla web development is viable in terms of maintainability, and worthwhile in terms of user experience (100% faster loads and 90% less bandwidth in this case).

There's no custom framework invented here. Instead, the case study was designed to discover minimum viable patterns that are truly vanilla. The result is maintainable, albeit verbose and with considerable duplication (most of which may be mitigated by ES6).

To produce valid vanilla solutions, and because constraints spark creativity, I came up with a set of rules to follow throughout the process:

- Only use standard web technologies.
- Only use widely supported JS features unless they can be polyfilled (1).
- No runtime JS dependencies (except polyfills).
- No build steps.
- No general-purpose utility functions related to the DOM/UI (2).

If anything, the case study validates the value of build steps and frameworks, but also demonstrates that standard web technologies can be used effectively and there are only a few critical areas where a vanilla approach is clearly inferior (especially in browser testing).

https://github.com/morris/vanilla-todo

TLDR: this is totally possible: the result app is very small, fast, and portable.

#js #css

​​Fast and simple Node #js version manager, built in #rust

Features:
- Cross-platform support (Mac, Windows, Linux)
- Single file, easy installation, instant startup
- Built with speed in mind
- Works with .node-version and .nvmrc files

https://github.com/Schniz/fnm

​​The tiny all-in-one development tool for modern web apps.

All the features you'd expect and more, from development to production:
- No "entry points" or "pages" to configure - just <script type=module src=anything.js>
- import "packages" from npm without installation
- Smart bundling and caching for npm dependencies
- Hot reloading for modules, Preact components and CSS
- Lightning-fast JSX support that you can debug in the browser
- Import CSS files and CSS Modules (*.module.css)
- Static file serving with hot reloading of CSS and images
- Highly optimized Rollup-based production output (wmr build)
- Crawls and pre-renders your app's pages to static HTML at build time
- Built-in HTTP2 support in both development and production (wmr serve --http2)
- Supports Rollup plugins, even in development where Rollup isn't used

https://github.com/preactjs/wmr

#js

​​Watch coding videos while you code!

Get a YouTube popout with npx pipcorn [youtube-link]

#js

I've spent lots of hours fixing npm audit to make our #js CI happy. Most of the times - it was garbage.

I've even disabled it in our projects. It was not adding any value, just wasting our time.
But, we still need to check some dependencies to be secure!

Dan Abramov shares his vision about npm audit problems and potential solutions.

​​The Open Source Airtable alternative.
Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet.

Features:
- Search, sort, filter, hide columns with uber ease
- Create Views: Grid, Gallery, Kanban, Gantt, Form
- Share Views: public & password protected
- Upload images to cells (Works with S3, Minio, GCP, Azure, DigitalOcean, Linode, OVH, BackBlaze)
- Roles: Owner, Creator, Editor, Commenter, Viewer, Commenter, Custom Roles
- Access Control: Fine-grained access control even at database, table & column level
- Programmatic APIs via REST and GraphQL

Personal opinion: I love #nocode instruments like this. I had very pleasant experience with Airtable for several quite different tasks. This is something you really need to consider before writing your own automatizations.

https://github.com/nocodb/nocodb

#js #vue

​​Kind: A modern proof language.

A minimal, efficient and practical proof and programming language. Under the hoods, it is basically Haskell, except purer and with dependent types. That means it can handle mathematical theorems just like Coq, Idris, Lean and Agda. On the surface, it aims to be more practical and looks more like TypeScript.

Compared to other proof assistants, Kind has:
- The smallest core. Check FormCore.js or Core.kind. Both are < 1000-LOC complete implementations!
- Novel type-level features. Check out article on super-inductive datatypes.
- An accessible syntax that makes it less scary
- A complete bootstrap: the language is implemented in itself. Check it here.
- Efficient real-world compilers. Check http://uwu.tech/ for a list of apps. (WIP)

Things you can do with it:
- Compile programs and modules to several targets, right now js and scm are supported
- Create live applications. Kind has an interconnected back-end that allows you to create rich, interactive applications without ever touching databases, TCP packets or messing with apis
- Prove theorems: for programmers, they're more like unit tests, except they can involve symbols, allowing you to cover infinitely many test cases. If you like unit tests, you'll love theorems.

Personal opinion: I am a big fan of ML-family languages, but not a big fan of their syntaxes. I love that new products solve their biggest issue for me. I really hope that some of these new functional languages will get eventually popular.

https://github.com/uwu-tech/kind

#js #haskell

The open-source #js Calendly alternative.

Let's face it: Calendly and other scheduling tools are awesome. It made our lives massively easier. We're using it for business meetings, seminars, yoga classes and even calls with our families. However, most tools are very limited in terms of control and customisations. That's where Calendso comes in. Self-hosted or hosted by us. White-label by design. API-driven and ready to be deployed on your own domain. Full control of your events and data. Calendso is to Calendly what GitLab is to GitHub.

Personal opinion: why paying for Calendly, when you can deploy everything to K8S pay for your own infrastructure and manage it yourself?!

https://github.com/calendso/calendso

​​Vieb is the Vim Inspired Electron Browser

Features:
- Free, open source, fast and secure
- Local first adblocking, auto-complete, AMP protection, custom redirects and more, all without web requests
- Privacy with strict permission system, navigator overrides, firefox mode, custom WebRTC policy and more
- Accessible with custom themes, full interface & fontsize scaling, page zooming, spellcheck and mouse support
- Security settings with permissions, cache usage, cookie management, (auto-)download settings and more
- Window splitting with buffer, split, Vexplore and Ctrl-w bindings, for multi-window browsing
- Map commands for completely custom keyboard sequences, keystrokes, commands and actions
- Viebrc config file for all custom/Vim/Vieb commands to configure settings permanently
- Set command for runtime setting configuration exactly like Vim
- Vim-compatible options: showcmd, timeout, colorscheme, maxmapdepth, spelllang, splitright, smartcase etc.
- Container tabs with colored grouping, auto-clearing, individual cookies and tab restore from containers
- Ad-blocker with cosmetic filtering, optional updater, custom lists and uses easylist/easyprivacy by default
- Tabs including audio indicator, a toggle for multi-line tabs, pinned tabs, muted tabs and suspended tabs

https://vieb.dev/

#js

​​Bubbleprof is a new, completely unique, approach to profiling your Node.js code

Bubbleprof is a completely new way to visualize the operation of your Node.js processes. It observes the async operations of your application, groups them, measures their delays, and draws a map of the delays in your application's async flow.

The size of each bubble represents time within a group of operations. These are grouped where the flow stayed within either your own code, a module, or node core. Tiny adjacent groups are also grouped to reduce clutter. The length of arrows connecting bubbles shows the delays while the flow moves from one group to another. Inner coloured lines indicate the mix of types of async operation responsible for this delay. Click to explore. Line lengths between and around the bubbles and numeric labels reflect the aggregated delay in miliseconds (ms).

https://clinicjs.org/bubbleprof/

#js

​​Deno + React: No build, no bundle, all streaming

Ultra is a web framework that leans hard into your browser's native features. Embrace the future of ES Modules, Import Maps, and Web Streams. All while supporting some of the non-standards that many normal people love for some reason (JSX and TypeScript).

It's driven by the following hot-takes:
- ESM is non-negotiable in {currentYear}
- SSR is non-negotiable in {currentYear}
- Bundling is an anti-pattern in {currentYear}
- Data can be requested anywhere, and is accessible on the server, always
- Lazy routing with dynamic imports trumps FS routing
- Less magic in tooling and frameworks is a good thing
- Simplify your workflow and tech stack at all costs - life is too short
- Streams are neat

https://github.com/exhibitionist-digital/ultra

Personal opinion: this looks exciting! I am in deno's hypetrain for almost a year now and I love to see new cool use-cases.

#deno #react #js #ts

​​Automatically replaces jQuery for you in legacy codebases.

This CLI automatically finds jQuery methods from existing projects and generate vanilla #js alternatives.

> I've been working on removing jQuery dependency from multiple projects including lightGallery lately. Most of the projects use only 15% to 20% or less than 30% of the jquery methods And in most of the cases, I didn't want to support all the edge cases or legacy browsers. The hardest part was finding the jQuery methods in the existing project and writing the alternative vanilla js methods without making much changes in the codebase. So I wrote this library which automatically finds jquery methods in any particular JavaScript file and generates readable, chainable vanilla js alternatives. This can also be useful if you want to generate your own utility methods similar to jQuery.

https://github.com/sachinchoolur/replace-jquery

​​Pyret is a programming language designed to serve as an outstanding choice for programming education while exploring the confluence of scripting and functional programming. It's under active design and development, and free to use or modify.

Features:
- Pyret has Python-inspired syntax for functions, lists, and operators
- Pyret makes testing a natural part of the programming process. Functions can end in a where: clause that holds unit tests for the function
- Pyret allows for concise, expressive, recursive data declarations. Type annotations are optional and can be added incrementally, to serve a variety of pedagogic styles and curricular needs
- In addition to where: blocks, which are attached to individual definitions (and hence usually contain unit tests), you can also write check: blocks at the top level, for general program testing

https://www.pyret.org/index.html

#js

​​KDL is a document language with xml-like semantics that looks like you're invoking a bunch of CLI commands! It's meant to be used both as a serialization format and a configuration language, much like JSON, YAML, or XML.

Features:
- Node-based, you won't have to mess with identation to make it work
- Type annotations
- Implementations in different languages: #python, #elixir, #rust, #java, #js, #ruby, #php, etc

https://kdl.dev/

​​Astro is a fresh but familiar approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. Use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default.

Most of the JS based JAMStack solutions you know do let you produce optimized, pre-generated HTML files, but as they're usually based on a UI framework, there's a core JS Framework runtime - React for Gatsby, Vue for Gridsome, Angular for Scully, that always ships! It's part of the core experience and is expected to be always needed. Even if you have pages that might not need any interactivity or behavioral code, the runtime gets downloaded and interpreted. It's a precious time wasted, on a non-essential job, from a static page perspective.

So, why do we prefer a #js based SSG solution in the first place?

- Mostly probably because of one of the following reasons -
- Hand-crafting is hard
- Interactivity is almost always required (or we think it is)
- Familiarity with a UI Framework is a top priority
- A familiar tooling, DX, quick/instant feedback loop go a long way, in making tech X a better choice than tech Y
- A rich ecosystem, CMS integrations(like Gatsby) greatly simplify the content authoring pipeline
- The JS/Non-JS tools you knew are wickedly fast, but only produce static HTML (Eleventy, Hugo, etc.) by default. You manage browser-side behaviour the conventional way.

Wouldn't it be good if you can still build SSG sites, without giving up on many of the above benefits(except the ecosystem probably for now) - interactivity, tooling, familiar UI framework, DX, while being more mindful towards the site, and every page served?. No/Less JS by default, and all the client-side JS, loaded precisely when necessary - with the framework itself exposing constructs to orchestrate the JS load and initialization behavior in a fine-tuned way.

If you like how this sounds, Astro is for you!

https://github.com/snowpackjs/astro

​​kbar is a simple plug-n-play React component to add a fast, portable, and extensible command+k interface to your site.

Command+k interfaces are used to create a web experience where any type of action users would be able to do via clicking can be done through a command menu.

With macOS's Spotlight and Linear's command+k experience in mind, kbar aims to be a simple abstraction to add a fast and extensible command+k menu to your site.

Features:
- Built in animations and fully customizable components
- Keyboard navigation support; e.g. ctrl n / ctrl p for the navigation wizards
- Keyboard shortcuts support for registering keystrokes to specific actions; e.g. hit t for Twitter
- Nested actions enable creation of rich navigation experiences; e.g. hit backspace to navigate to the previous action
- A simple data structure which enables anyone to easily build their own custom components

https://github.com/timc1/kbar

#react #js #ts

​​The backlash to modern front end development is gaining steam, with good reason: single-page apps have ruined the web. Can we rescue it without going backwards? In this talk, Rich Harris presents a way to do just that. Rich Harris is a graphics editor at the New York Times, where he builds JavaScript apps to help explain the news. He is also the creator of Rollup, the JavaScript module bundler, and Svelte, the front end framework.

What’s wrong with Single-Page apps? There are a lot of critiques. A non-exhaustive list of terrible things about single-page apps include:
You’ll need a bloated JavaScript framework and performance will suffer
It comes with complex tooling and is less resilient, since it won’t work without JavaScript
It will be buggy and accessibility issues

JavaScript failing is a fact of life. So what’s a developer to do? SPAs solve problems to the traditional approach, but are still problematic. Rich presents a new framework for thinking about how we can get the best of both the MPA and SPA worlds: transitional apps.

What’s a transitional app? Transitional apps samples elements from both traditional and modern architecture. The term is borrowed from interior design’s framing of “transitional design.” Transitional apps are, like multi-page apps, server-side rendered for fast initial loads, resilient since they work without JS by default, and provide a consistent experience with accessibility features built in. But like a single-page application, they also have a single codebase, fast navigation, persistent elements, and client-side state management.

Learn more about transitional apps, and how to get the best of both worlds in Rich’s talk.

#js #svelte

⚡️Breaking news!

Nuxt@3 was just open-sourced.

https://github.com/nuxt/framework

#ts #vue #js

LaranaJS – Рендерим фронтенд в картинку! 🌚

LaranaJS – это большой эксперимент по поиску альтернативных способов рисовать графические интерфейсы. Если большинство других фреймворков полагаются на такие устаревшие технологии как HTML и CSS и вендорлочат себя на браузеры, то Larana делает всё иначе.

Вот как устроены сетевые взаимодействия в LaranaJS.

Браузер запрашивает страницу

На этом этапе происходят создание сессии, резолв роута и инициализация страницы. В то же время разные подсистемы (рендерер, менеджер сессий, роутер и т. д.) генерируют клиентский код — он минимальный – просто canvas и немного работы с сетью по вебсокетам:

<html>
 <!--Minimal head-->
 <body>
  <canvas id="canvas"></canvas>
  <script>
   // Network code
  </script>
 </body>
</html>

Клиент открывает соединение

При полной загрузке страницы создаётся подключение по веб-сокетам и начинается обмен сообщениями:

- Сервер отрисовывает UI в виде изображения (png) и отправляет его на клиент.
- Клиент принимает изображение и вставляет его в canvas.

Все дальнейшие взаимодействия происходят в виде обмена событиями – действия пользователя отправляются клиентом, команды и изображения отправляются сервером.

// event
{
 "event": "mousemove",
 "x": 0,
 "y": 0,
}
// response
{
 "image": "", // изображение в base64
 "x": 0, // координаты для вставки изображения
 "y": 0,
 "w": 0,
 "h": 0,
}

Такая архитектура позволяет сократить размер клиента до 6KB #js и запускаться в любом браузере c 2009 года. При этом есть возможность написать собственное клиентское приложение и запускать его хоть на esp32 с подключённым дисплеем.

Несмотря на новизну подхода, сама разработка интерфейсов остаётся привычной. Например, вот код страницы с типичным каунтером:

class HomePage extends Page {
 title() {
  return 'Hello, World!'
 }

 init() {
  const { initState } = this.useState()
  initState({ counter: 0 })
 }

 root() {
  return layout({
   style: 'row',
   children: [
    button({ text: '+', onClick: () => this.increment() }),
    text({ model: 'counter' }),
    button({ text: '-', onClick: () => this.decrement() }),
   ],
  })
 }
}

Большинство задач можно решить с помощью готовых компонентов. Но если есть необходимость сделать что-то необычное, то есть прямой доступ к созданию команд для рендеринга в компоненте figure. Например, рисовать сложные фигуры вроде снежинок:

root() {
 return figure({
  template: (fig, queue) => {
   line({
    borderColor: '#aaaaff',
    borderWidth: 2,
    points: [
     point({ x: x - halfRadius, y: y - halfRadius }),
     point({ x: x + halfRadius, y: y + halfRadius }),
     point({ x: x + halfRadius, y: y - halfRadius, moveTo: true }),
     point({ x: x - halfRadius, y: y + halfRadius }),
     point({ x: x + halfRadius, y, moveTo: true }),
     point({ x: x - halfRadius, y }),
     point({ x, y: y - halfRadius, moveTo: true }),
     point({ x, y: y + halfRadius }),
    ],
   }).to(queue)
  },
 })
}

Специально для этого поста я подготовил новогоднее демо:

- Репозиторий: https://github.com/laranatech/snowflakes-demo
- Потыкать: https://snowflakes.larana.tech

Подсистемы

Выше я упоминал подсистемы вроде рендерера и менеджера сессий. Они уже вшиты в фреймворк и можно использовать готовые. Можно написать и собстенные, а потом просто добавить их в приложение:

const app = new LaranaApp({
 config,
 renderer: new ClientRenderer({}),
 sessionManager: new MemorySessionManager({}),
 router: new DefaultRouter({ routes }),
})

app.run()

В ближайших релизах планируется именно развитие подсистем, чтобы сделать фреймворк максимально гибким. Например, сейчас ограничен список событий, которые отслеживаются на клиенте.

Больше подобного авангарда в канале @laranatech!
Автор: @e_kucheriavyi