Latest Posts (20 found)
Thomasorus 1 months ago

List of JavaScript frameworks

The way the web was initially envisioned was through separation of concerns: HTML is for structure, CSS for styles and JavaScript for interactivity. For a long time the server was sending HTML to the browser/client through templates populated with data from the server. Then the page downloaded CSS and JavaScript. Those two then "attached" themselves to the structure and acted on it through HTML attributes, and could then change its looks, call for more data, create interactivity. Each time a visitor clicked a link, this whole process would start again, downloading the new page and its dependencies and rendering it in the browser. Using the history API and Ajax requests to fetch HTML of the next page and replace the current body with it. Basically emulating the look and feel of single page applications in multi-pages applications. Event handling/reactivity/dom manipulation via HTML attributes. Development happens client side, without writing JavaScript. Static HTML gets updated via web sockets or Ajax calls on the fly with small snippets rendered on the server. Development happens server side, without writing JavaScript. Most of the time a plugin or feature of an existing server side framework. A client-side, JavaScript component-based (mixing HTML, CSS and JavaScript in a single file) framework or library gets data through API calls (REST or GraphQL) and generates HTML blocks on the fly directly in the browser. Long initial load time, then fast page transitions, but a lot of features normally managed by the browser or the server needs to be re-implemented. The framework or library is loaded alongside the SPA code: The framework or library compiles to the SPA and disappears: A single page application library gets extended to render or generate static "dry" pages as HTML on the server to avoid the initial long loading time, detrimental to SEO. Often comes with opinionated choices like routing, file structure, compilation improvements. After the initial page load, the single page application code is loaded and attaches itself to the whole page to make it interactive, effectively downloading and rendering the website twice ("hydration"): After the initial page load, the single page application code is loaded and attaches itself only on certain elements that needs interactivity, partially avoiding the double download and rendering ("partial hydration", "islands architecture"): A server-side component-based framework or library gets data through API calls (REST or GraphQL) and serves HTML that gets its interactivity without hydration, for example by loading the interactive code needed as an interaction happens. Using existing frontend and backend stacks in an opinionated way to offer a fullstack solution in full JavaScript A client-side, component based application (Vue, React, etc) gets its state from pre-rendered JSON Stimulus JS Livewire (PHP) Stimulus Reflex (Ruby) Phoenix Liveview (Elixir) Blazor (C#) Unicorn (Python) Angular with AOT Next (React) Nuxt (Vue) Sveltekit (Svelte) Astro (React, Vue, Svelte, Solid, etc.) Solid Start (Solid)

0 views
Thomasorus 1 months ago

Questioning the JS frontend paradigm

Links with the &#9888 sign are, in my opinion, the most important ones. If you lack time, focus on those. Weizenbaum’s nightmares: how the inventor of the first chatbot turned against AI New GitHub Copilot Research Finds 'Downward Pressure on Code Quality' Audacious new schemes known as 'SEO heists' are posing thorny questions for Google 'Thirsty' AI: Training ChatGPT Required Enough Water to Fill a Nuclear Reactor's Cooling Tower, Study Finds Visual Studio Code is designed to fracture Inverted computer culture https://samkriss.substack.com/p/the-internet-is-already-over Is the madness ever going to end? The Perfect Webpage - How the internet reshaped itself around Google’s search algorithms — and into a world where websites look the same The State of ES5 on the Web Liskov's Gun: The parallel evolution of React and Web Components

0 views
Thomasorus 1 months ago

Cross platform web app solutions

A discovery list of technical solutions to produce a desktop and/or mobile app using web technologies. Apparently (all this is quite new to me) most solutions embed NodeJS inside them, making executing JavaScript the easiest part of the problem. Real trouble comes when talking about the UI, since each OS has different ways of rendering UI. Several solutions exist to make the programs multiplateform. Those solutions package webkot (chromium) and nodejs inside the app and make it work as a fake app on the desktop. Works well but comes with a lot of bloat and heavy ram consumption. Overall both are in the same family but they are differences between NW.js and Electron . Since bringing chromium makes the program very big, there are solutions to bridge between web apps and existing, lighter UI frameworks. Most of the time then, the framework is used to create a bridge between HTML/CSS and the existing frameworks components, modules or UI API. Since all OSes can render webview, it's possible to ask for one at the OS level by providing a bridge. The problem with this solution might be that if the OS has an outdated webview engine, all modern HTML/CSS/JS solutions might not work? Except for neutralino, most projects of this type tends to use webview , a C/C++/Go library. Several bindings library for other languages already exist. Electron is made by Github NW.js is made by Intel NodeGui provides a bridge between HTML/CSS and QT. Deno webview Sciter is a binary that can be used to create web apps. But under the hood it's using a superset of JavaScript called TIScript Sciter JS seems to be Sciter but with common JavaScript, using the quick JS engine.

0 views
Thomasorus 2 months ago

Mandala

I had the idea while I was in a train for Paris in late November 2023. I was trying to find new ways to play with my favorite topic of the time: human, cats, skeletons. The initial concept was « a mandala of cats » to which I added a Mary pose for the character. The second sketch was made on A2 paper. On the topic of Night on Bald Mountain, check its amazing concept art by by Bill Tytla . The sketch was then left untouched for a few months, as a lot of details felt wrong and I didn't know how to approach the inking. More than ever, I felt the gigantic hair strands were going too far from the initial idea and were too distracting. I started iterating on the sketch using a tablet. I did several tests: removing hair from the body, removing most strands, and more. The A2 paper sheet was then scanned by a professional, retouched to remove imperfections and add contrast, and a black background with a white outline.

0 views
Thomasorus 2 months ago

Drool

The idea came from an inktober 2022 prompt: dream. I had this classic idea of being hunted by a beast in your sleep, which is shown in the initial sketches: I didn't thought about it at the time, but the inspiration was probably The Nightmare by Henry Fuseli: But after that, I thought it was too nightmarish, and decided to replace the "beast" with a cat (the inspiration was a Devon Rex). I also re-framed everything into the page. As for the inking, it was done with a chinese type brush and black ink. I had a lot of fun doing this piece, which encouraged me to continue with the same theme later.

0 views
Thomasorus 3 months ago

Moyo

Moyō 模様 (pattern) is a collection of patterns in CSS I use for my website. Most of them were created as the months passed and I tweaked them for my time tracker tool. Moyo comes as a single SVG file containing all the patterns. If you are not familiar with SVG, an SVG file can use a tag to store graphical objects that you will use later. Each pattern is defined inside the tag and each one has an id attribute. Those ids can then be used inside other SVGs. Copy paste the content of this file inside your template and use the desired pattern. Colors are automatically defined by two CSS rules: the color value of the text (aka ) and the background value on the div containing them (if none, the ). Two patterns ( and ) default to a white background, which can be changed by using a css custom property.

0 views
Thomasorus 3 months ago

Kaku

Kaku 書く (write) is my own markup language. It's inspired by Markdown with a few modification for quotes, links, images and lists handling. It was created to fit my needs and is currently used on this website. Kaku was created as a replacement for Markdown in my own projects. There are two main reasons for its creation: Will return: Will return: Same for titles 3 to 6... Will return: Will return: Will return: Will return: Will return: Quotes can take up to 4 arguments: Will return: Links can take up to 3 arguments: Will return: Images can take up to 3 arguments: Image with alt text : ( ) Will return: Image with caption : Will return: Will return: Will return: Will return: Will return: Videos can take up to 2 arguments: Classic video: Will return: Video as gif: Will return: Will return: Note: all audio and video elements come with the attribute to help slower connections. Will return: Will return:

0 views
Thomasorus 1 years ago

Design tokens

Each section of the website has its own icon illustrating its content. All icons are organized following these rules: All icons consume colors defined in the themes.

0 views
Thomasorus 2 years ago

Art journey

This page is a personal summary up my art journey, written to help me reconnect with my roots by listing my influences as well as some of my projects. I grew up in a 3000 souls town dedicated to copper craftsmanship. There was no museum and I was almost never exposed to something else that classical art. My family was upper middle class, my parents did minimal studies. My father didn't have a lot of interest in art, unlike my mother who in her teens wanted to go to an art school (and mocked for it) and by the end of her career became an art seller. She is the one who inspired my siblings and I to pursue our art hobbies. According to my parents I was an impatient and perfectionist kid, who could not stomach making something that did not worked on the first try, and consequently, was giving up fast. All the drawings prior to my teenage years had to be thrown away in an emergency moving, so I have no traces or memories of what I was doing before this period. But what I remember was that both my parents loved movies (we had a ton of cassette tapes) and music, and that they had a nice collection of vinyls. It's through the covers of their albums that I had some of the earliest visual shocks, mostly from covers of Pink Floyd and Supertramp. I was also a big reader, mostly children novels (one of my favorites was "Historia de una gaviota y del gato que le enseñó a volar" by Luis Sepulveda), then gravitated towards science fiction, comics and mangas. I read a lot of the kid's French/Belgian classics, but among them my favorite was Gaston Lagaffe. Growing up I also remember enjoying Hugo Pratt's Corto Maltese for its black and white pages, which wasn't common as most European comics were in color. I was also reading science fiction and fantasy, and among all of them, Tolkien's Silmarilion and Frank Herbert's Dune were easily the most influential and forged my interest for gigantic sagas, immortal beings, epic story-lines, and cycles of destruction. As an added bonus, the covers of the French edition of Dune were paintings by Wojtek Siudmak and harbored a visual language I had never seen before. In the mid nineties mangas started to get bigger editors and distributors, and like a lot of kids of my generation, I grew up with Dragon Ball, but also Gunnm and Akira. Around 2000, new and more obscure series started to appear, and among them I discovered BLAME!, which still remains the biggest artistic shock of my life. It's obvious in retrospective how BLAME! united several things I already enjoyed into a package made for me. It's a manga ; in black and white ; a science fiction story lasting thousands of years ; it tackles with immortality, a topic that fascinates me ; its landscapes are both realistic and surrealist in the painterly sense ; its creatures are fantastic and gross ; its graphic style is rough ; and most of all, it's contemplative, silent, melancholic, and Sublime. All those influences were not really conscious at the time. I wasn't able of analyzing and identify what I actually liked about them from an artistic point. I had zero education around art, nor critical thinking. All I knew was that I enjoyed all that. As a teenager, outside of uninspired doodles copying what I liked and done during math classes, there was nothing of notice to remember. I was starting to do some world building in my head, but could not get the reflex to actually dedicate time to it, too occupied to play video games. Art was always an afterthought, a dreamy escape from the annoyance of high school life in the pre-smartphone era. That changed a year later, after I graduated from high school.

0 views
Thomasorus 2 years ago

Now

What I'm working on right now. [ ] Cerca CSS [ ] An article about how to achieve 2D look in 3D [ ] The lore of a story I had in mind for a long time [ ] Learning and using VIM

0 views
Thomasorus 2 years ago

Giveaway

On this page are unused objects that I want to give away for free to members of the Merveilles community that may need them. My goal is to empower our members with tools so they can achieve a greater life, improve their artistic projects, or just have fun. I prioritize people in financial difficulty or in minority groups (POC, LGBTQA+, etc.). If one of those objects interested you, contact me on Merveilles. Shipping fees are on you, and I can send them to any part of the world (I'm in Europe). I don't remember when I got this. It's Create Audigy sound card that is at least 10 years old. It has multiple ports, needs to be plugged to a PCI port. Not tested, so no guarantee it works perfectly. An arcade stick made of a cheap but sturdy plastic case. The parts are Sanwa and a bit worn out, but still work. It's compatible with Playstation 2 through a hackpad. Can be plugged to a computer using an adapter (see below) but remains a bit complicated to configure. It's probably better to buy a cheap board on ali-express and put it in. Note: if you are not interested in the case but want the part that's OK, I have some leftovers too. A vintage XLR Telex helmet. Super sturdy, gives you the look of an helicopter pilot. Has a nice sound but may need proper rewiring or customization. A second hand Macbook Pro from 2013. It has an i5, 8gigs of ram and an SSD of 256gigabytes. The screen is still sharp, but suffers from a default of conception where air bubbles came between the glass and the LCD. It's a bit on the slow side on the last MacOS version, so I suggest using an older version, or installing linux on it. Comes with the magsafe charger and a plastic transparent protection. I can install a distribution on it if you have a sloppy internet connection or lack USB keys. Please consider people in dire need of a computer before asking for this one. This is a Raspberry Pi model B with a set of cables and a case. Cables included are DVI, jack to RCA, a charger with a button switch, a micro-usb to usb adapter and an SD card to SD mini adapter. Not SD card provided. A simple Playstation 2 to USB adapter. A small SSD from when it was super expensive.

0 views
Thomasorus 2 years ago

Aesthetics

I'm currently trying to define what my design aesthetics are. This page serves as a reference point that helps me find answers. My ultimate goal would be to create my own design system. I like minimalist interfaces that work both in light and dark mode. I like the idea of color and visual language (like icons) having meaning all over the application. For example in my future program I have these data types: For some reason I like it a lot when the capture subject is part of a grander interface. It gives context and intention, and helps to focus on what's important at the same time. I like the idea of retro computer aesthetics for displaying information instead of color (that I think should be used for visual language). It can be graphs, maps, icons, numbers, text. But I'm not really nostalgic of the aesthetic. It's just more functionnal. I like abstract animations that give visual identity to the rest of the program. They probably should not appear too much, but could be used in discreet places to make them more interesting (like a footer on a website); I like a lot of illustrations styles but the one I feel works well for the web uses flat colors and lines. But I don't like the trend of vector illustration as a way to infantilize people like. They have to be eerie, complex and capture the intention. The added bonus: it's possible to animate them when they are in SVG, making the website more alive. I like objects two ways: In both situation, I like that they are analogic. No touch screen for example, I prefer real buttons.

0 views
Thomasorus 2 years ago

Arcade Stick

I've been playing fighting game for 20 years now, but only started using an arcade stick in 2006. While I was at a tournament, I managed to play some games on an arcade cabinet (the famous Sega Astro City ) and discovered how comfortable and pleasant the experience was. I decided I wanted to play on an arcade stick. Back in 2007 most arcade sticks were not even sold in Europe and needed to be imported. They were not that cheap for their poor quality, and building one meant buying it opening it, throwing away all parts and electronics, then adding your own parts. For the electronics during the PS2 era, most people would buy cheap controllers, open them and solder wires on the connectors and connect those to the buttons and the lever. When the Xbox 360 and Playstation 3 came out in 2005 and 2006, most people would then build dual-mods . Two hackpads, both with a common ground, would be connected and powered at the same time (USB had one cable for power and one for ground). A manual switch was then added, whose role was to send the signal (green and white wires on an USB cable) to the desired controller. Around the early 2010 with the rise of DIY electronics, people started building custom PCBs that contained the code for several consoles in a single board. Today this part is way easier than it used to be, with boards being affordable for custom builds. The three main quality brands for levers and buttons from Japan are Sanwa, Seimitsu and Hori. There are regional differences, with the US sometimes using HAPP models, or Korean players using Crown and Fanta models. All brands have different models, and all models have a different feeling. For most of my arcade sticks, I used the classic Sanwa JLF-TP-8YT lever and Sanwa OBS-30 buttons. I had several models through the years.

0 views
Thomasorus 2 years ago

Keyboards

I use two keyboards: the Happy Hacking Keyboard (HHKB) by PFU and a Happy Hacking Keyboard plate replica made in China. Bought in 2016 at Akihabara in Japan, this HHKB had been my daily driver since. It took several weeks to get used to it as I learned both to write in QWERTY and the very special layout of this keyboard. It's currently customized with a japanese keyset . As for all HHKBs, the switches are Topre. Bought in 2018 to have a second keyboard with the HHKB layout to drop at work. This keyboard initially had a rough CNC cut plate with Outemu Purple switches. I unsoldered the switches and replaced them with Cherry MX Silent Red. A friend also lubed them to avoid making noise. A vinyl like sticker was then applied to the plate to hide the rough metal.

0 views
Thomasorus 2 years ago

Raspberry Pi

I've been trying to use a Raspberry Pi as small development machine for personal projects. The overall goal is to spend less time on the computer by creating a distraction free machine with limited capabilities. I use a Raspberry Pi 4 with 8 gigs or ram and an aluminium heatsink. After a lot of testing I ended using Dietpi . The install experience is poor but compensated by the large amount of tweaks and software proposed. It's probably better to create your own user experience by installing and tweaking the window manager and file manager that suits you. But what is amazing with Dietpi is how responsive it is considering it's running on a Raspberry Pi. I installed i3 window manager and thunar and almost everything launches instantly. Even an Electron app like Visual Studio Code is usable as there's no lag when typing (but startup and syntax color can be a bit slow). I use the 32bit version as the 64bit has bugs. This guide is mostly for my own use but feel free to use it. My config file is available on github .

0 views
Thomasorus 3 years ago

Ronbun

Ronbun ( paper ) is my static site generator . It's built with nodejs and uses Kaku as a markup language and imagemagick on the server to process images. It also process time tracking and presents it as graphics . Ronbun uses a single file as a source of content and a text file for time recordings. It parses files and generates HTML using a template. Ronbun and the Kaku parser try as much as possible to provide light and accessible pages by using standard HTML techniques . Ronbun was created as a self discovery project following my philosophy about personal projects. Ronbun's repo is on github . Next features: Global goals:

0 views
Thomasorus 3 years ago

Tools

A collection of tools I use or made. As software developers we are all the time required to follow the next big thing and use new frameworks or libraries . It comes with a lot of code bloat, it requires to relearn everything from scratch and does not favors building strong fundamentals. It's also exhausting and maintains people into imposter syndrome. Creating my own instead of using other people's tools is a very appreciable exercise of self-discovery. It allows to ask, ala Marie Kondo, if these tools, frameworks, libraries I use all the time as a software developer bring me happiness. And if not, why do I keep using them? Coding my tools removes the notion of efficiency and productivity associated with software development. I don't know when the tool I build will be done and it doesn't matter, that's why it's relaxing. Instead of complying with other people way of doing, I discover my own and my software evolves with me. It's a reappropriation of the means of production towards self-discovery.

0 views