Remember the awe of wondering how someone accomplished a thing? Awe I watched movie special effects progress through the 1990s. Production teams used computer graphics to create effects. The technology was primitive at first. Still neat. Then there were moments that were incredible. "Did they really blow that up?" "Did he really do those acrobatics?" Then there were the obvious moments that were movie magic. "How did they get that T-Rex to shove that jeep off the cliff?" Awe of humans We learned over time that these feats were possible through the help of computer technology. The technology…
Here's how to unstage files before the first commit. You've created a new repo. It's clean and fresh, then you go for the first commit. You add your current directory, then look at your status... A deflated sigh. So soon, too soon, you have sullied your pristine repo by preparing to commit a bunch of generated files. Of course, you don't want these in your repo. You only want source code. Well, you try the usually trick to start the file staging over: git restore --staged . It doesn't work. You ask for help and get this alternate: git rm --cached -r . It works! Yay! Then you learn of this…
If you can't just use an HTML form, here's how you can get closer and clean up your React form with the React.useActionState hook. Handling form state in React can get hairy. There are additional libraries on top of React to try to deal with this. In React 19, we have a new hook inside of React itself to help us with form state. Hey, accreting more to the React API continues to erode the simplicity of fn (data) => ui, but in this case, it's an improvement. Instead of a bunch of React.useState and handleChange event handlers, we get something more compact to the purpose of form handling.…
That's AI -- actual intelligence. I love this bit by Steve Wozniak. He plays cute with the AI question from the eager reporter. Sure, I try it. Sure, it's ok. But you know... I pretty much avoid LLMs because I want things to be really... that I know is accurate. Like something works rather than it didn't work. And I don't like to be surprised. I want to think about everything that I read or hear and really think it out, that I understand it and can express it in my own words. That's AI -- actual intelligence. Does it really help you if it doesn't create? It just repeats things, so it's a very…
Or, when AI tries again. As coders, we try many solutions. Sometimes it's because we're stupid and haven't learned any better yet. Sometimes it's because we're not happy with the result yet. Maybe something gnaws at us. Maybe a thrill to betterment invites us. We care about certain principles related to our craft. We have taste and values. At our best, we seek the true and beautiful. How many times does AI iterate? Well, it's really fast. It can "try" lots of things at the speed of a computer. It's reply to your query isn't its "first" solution. Before you can think, it has "thought" -- many…
Here's how to save variables in sql for use later in the query. A with statement will provide the key feature. Make a selection (rows) and projection (columns), and you can bind that 2D result to a name. Only a single with statement is allowed in an sql script. You can create multiple variables by separating the values with commas. There's an example script below that creates a permission row, n user rows and then n mapping table rows to relate the two. There are two names bound: permission_id and user_ids. The insert statement returns an id column for the one inserted row. This means that…
Here's how to publish an NPM package to JFrog Artifactory. Create a JFrog Artifactory Token You use JFrog Artifactory when you want to publish a package to a private registry. The normal, public one at npmjs.com is too public. You want privacy and/or control. Get Artifactory deployed, set up the repository, and get a login to it. If you go to the Artifactory > Artifacts page for your repository, you'll see a "Set Me Up" button. Click it and under the Configure tab, you'll see a "Generate Token & Create Instructions" button. Click that, and you'll see "The token has been created successfully!"…
You have a change to make in a distributed system. How many pull requests will it take to make a change? An Easily-distributed App A distributed system has two or more independent deployables. In this most common of scenarios, we have a frontend (FE) client and a backend (BE) server. It's just so easy to start. We push this architecture all the time. The two apps are not independent, however. They are inter-dependent at runtime. The FE and BE work in coordination to do something. Let's say they want to set a date on an object. There's a contract between the two so that they can talk together.…
This is one way to convert an icon font to svg. Make it a TTF If you downloaded the icon font from the web, you may need to convert it to a format that is installable on your computer. These days, the web format is usually .woff2. You want something like .ttf. Use this converter at everythingfonts.com. Install Font Next, install your font onto your computer. For a Mac, double-click the font file, and select Install. This will put it into your Font book. Local Font in Figma Desktop Next, you need any program that can export SVG. I chose Figma Desktop. It's important you use the Desktop version…
Got a weird "digital envelope routine::unsupported" error? Who doesn't? Let's get rid of it. The Error One day I started my node app, and it failed with a nasty-gram: Error: error:0308010C:digital envelope routines::unsupported The Cause Since node 17, OpenSSL 3.0 is supported, which moves algorithmss like MD4 to a legacy status -- the kind of legacy that throws errors on newer versions of Node.js. If you see this error, it's because your on node 17+. Fix 1: Downgrade Easy, use node 16 or older. Fix 2: Use Legacy Option Or use new node with old openssl: unset NODE_OPTIONS export…
Documentation isn't enough to learn a new codebase. I just read a very thought-provoking article by Baldur Bjarnason, called Theory-building and why employee churn is lethal to software companies. It is thought-provoking at this point because I sense that the essential point is true, and it's uncomfortable if it's true. The main point seems to be that programmers are tied to the code they write -- and not easily trained in existing code. But I want to be able to write code that is easy to inherit, and I want to grok what has already written in code I inherit. Anyway, that's another post. In…
Freeze your poetry requirements into a requirements.txt file. It's poetry pip makes it easy. It's like poetry. We want poetry to be as poetic as pip, but it's not. Easy as pip pip freeze > requirements.txt Thanksgiving pie-level easy. Poetry Well what about poetry. If you're using it, you've set up your project: poetry init Added a depedency: poetry add psycopg2 And now you're able to freeze (export) those dependencies: poetry export --without-hashes --format=requirements.txt > requirements.txt Maybe more flexible. Definitely more wordy This command is a bit more quirky.
Screen reader support will get more real with a support plan. Browser Support Browsers get a support plan. There's a model for which browsers we'll support. There are support docs that state our policy. Users that come to our site know what to expect. When we file bugs, we know to report the browser in the filing. Why don't screen readers get this? Tool Variability Just like browsers, there are differences in "rendering" in screen readers. One is different from the other, and thus we have to keep a mental matrix for how certain features behave in different screen readers. Too bad we don't…
Maybe use just a CSS clip-path If you have a simple shape -- like a rectangle or circle -- you can use a simple CSS clip-path attribute. It's fast and easy. But what if you want to create something more complicated like a custom shape, with a bezier curve? clip-path by itself does not handle curves, just fixed points. Curves in SVG Clip Paths SVG to the rescue! SVG has a clipPath element that will help us out. The clipPath element will contain the shapes or paths that you write in SVG crypto codes (not explained here) that create the clipping path shape of your choice. For instance, we could…
Storybook addons need a matching @storybook/addons version. Here's how to ensure it gets it. Addons Need a Channel In Storybook, you preview the components you're writing with some nice surround UI to navigate and manipulate them. For this UI to communicate with the preview pane, there is a channel construct for pub/sub communication. Addons to Storybook utilize this channel. This channel is accessible in this way: import addons from '@storybook/addons' const channel = addons.getChannel() Non-existent Channel When you're writing a Storybook addon, things will feel just fine. It's easy. It's…
The most powerful teams come from the special combinations of members. Product of Teams A great team is one that has a great time making a great product. To have a great time, we must enjoy working with the others on the team. We have a productive relationship. We inspire and help one another. We communicate well. Our weaknesses and strengths fit together well and are complimented by one another. A great product is going to be something exceptional, something that hasn't been done before. It's noteworthy because of its special quality, timing, application, reception, subject treatment, or…
Let's test-drive some ReasonML code together. The Goal Our goal will be to recreate a simple List.map from the stdlib. Ours will be called Listy.map. To get started, download the exercise on github: git clone [email protected]:jaketrent/reason-kata-map.git And setup the project for development: cd reason-kata-map npm install The Test Suite We'll start with an existing test suite (in __tests__/listy_test.re). Here's the suite: open Jest; open Listy; let () = describe "map" ExpectJs.(fun () => { test "map []" (fun () => { let noop = fun () => {}; expect(Listy.map noop []) |> toEqual [] }); test…
CSS Modules are das bombe, but you're still stuck in a land where the traditional CSS stylesheet exists, you may have to load both. Here's a pattern that could potentially work for you. Importing CSS Webpack is a tool for loading many different kinds of assets as modules into JavaScript. This means, for instance, that you can import CSS into your JavaScript. If you import a CSS module in this way, it'll allow you to use that module on a UI component that is built using JavaScript (eg, React): import css from './my-component.css' import React from 'react' const MyComponent = _ => <div…
Exercism.io is a fantastic site and tool that provides a wealth of daily code exercises. If you want to learn to be better in a language, it's a great resource to do exercises and receive feedback. Origin Exercism.io was introduced to me by Franklin Webber of gSchool and JumpStart Labs fame. He and his colleagues use it as a part of their instruction, and it's a great, free tool available to the public. Languages There is a fun array of language-learning possibilities inside Exercism. It currently includes a varying number of exercises across these languages: clojure elixir haskell javascript…
Ember Views are used for event handling and creating reusable web components. To make them useful and interesting, model data needs to make it into and out of the view. Here is an example of how this works. Define Your View In our example, I'm making a simple dice rolling game. I want to use a view to represent the die on the screen and to handle the roll event. Your custom view must simply extend Ember.View in die-view.coffee: App.DieView = Ember.View.extend templateName: 'die' This is about the simplest view definition we could make. We'll make it a bit cooler later. For now, the view just…
Read at the source
Your visit, your choice.
Optional Google Analytics helps us understand visits. Microsoft Clarity records masked interactions to improve the site. Optional tools stay off unless you choose them. Privacy details.