Intro
This is the first email for my new newsletter! Writing some kind of publication is something I haven't done in a while (longtime followers will remember the Tech Times), and I want to give it another shot.
I was doing YouTube and livestreaming, but I found that it took a lot of work to produce a video, or start up a livestream. I wanted to just sit down and tell people about what I've been up to. Venting about awesome stuff is not something I get to do often, but I hope this will give me an outlet.
Svelte!
I tried Svelte this past week in the form of shortie v3 (more on that later) and I absolutely loved it. It was the perfect blend of simplicity, feature set, and performance. What I loved about it is it took everything I was used to (html, css, js/ts) and encapsulated it all into a reusable component. It then "supercharged" the html and javascript to allow me to easily write declarative code. Take this code sample for example:
<script>
let text = ""
</script>
<h1>you wrote {text}</h1>
<input bind:value={text}>
State
State is stored in variables, which makes it super readable for anyone not familiar with Svelte. It's something everybody already knows how to work with. There is also a store mechanism built-in for cross-component state.
Then the variable is made accessible in the html with curly brackets!
Think of the curly brackets as containing arguments, but this time being passed to a compiler instead of a function. You don't pass arbitrary code as an argument, and you wouldn't do that here - you would pass a function (arrow funcs also work) or a variable. Every time the variable changes, the element is re-rendered.
Events are the exception to this though, as you would always pass a function, and it doesn't re-render the element.
2-way data binding
The next thing to look at is the input field, which has 2-way data binding via the bind attribute prefix. You just append bind: before an attribute, pass the variable name as the attribute data and boom! You have 2-way data binding with a variable that other elements (and reactive functions) can listen to.
Reactive functions
Another cool feature of Svelte is reactive functions. Reactive functions are similar to the curly brackets in html in that they run anytime a variable mentioned in the function gets updated. This allows, for example, saving data to localStorage anytime a variable is updated. Also, look how concise these functions are:
let varOfInterest;
$: {
console.log(varOfInterest)
}
Look how simple that is! With just 4 lines of code, we got a fully-reactive function ready-to-go tied in to a variable.
SvelteKit
The last thing I'll talk about is SvelteKit, their batteries-included framework for building apps. It's a splendid tool to work with as it is very flexible because it can build server-side rendered apps, static-site apps, and client-side rendered apps. But its killer feature is called "transitional apps", basically it's where it statically renders the page until client-side JavaScript can kick in, and if it doesn't, it still presents a usable experience. The developer experience is also nice because it includes things like ESLint and Prettier out of the box, as well as using Vite for its dev server for hot reloading and such.
Overall, Svelte and SvelteKit are my new go-to tools when building any new web app, and it's been a joy to use thus far!
shortie v3! (web)
This past week, I launched version 3 of the shortie.sh web interface! It's written in Svelte and SvelteKit and brings some enjoyable new features. Nothing groundbreaking, but a solid uplift to the UX.
Here are some of the problems I fixed:
Design Inconsistencies
The first thing I fixed is the design inconsistencies. Fonts and hierarchies weren't being used everywhere, and it looked weird and off-putting. I fixed these during the rewrite by making sure the Neue Haas Grotesk was being used for most copy, and Roboto Mono for accent.
Second-stage UI
The second thing I fixed is the 2nd stage UI. The second stage activates when you submit a URL, and it replies asking for an ending.
The problem was, when it asked for an ending it looked like you couldn't change it, which was untrue. I now added an arrow button to submit, and I made the base URL less opaque. This hopefully makes it clearer to the user that they need to do something in order for the process to continue.
Lack of animations
The last thing I fixed is the lack of animations!
I added a bunch of animations using Svelte's transition: as well as their in: and out: directives. This creates a much more coherent user experience as compared to when things just jumped out at you from nowhere. I also added a fancy typewriter effect to the subtitle.
The most animations I added are as follows (in no particular order):
- Copy to clipboard
- Settings pane
- Subtitle
- In between stages
Overall, I'm excited to develop with svelte as well promoting shortie because I think this build is the last rewrite for a while. Check it out at shortie.sh
What's coming next
The main thing I have to do is rewrite the shortie backend to not rely on a server and use Netlify Functions instead. This would allow me to cut down my Linode bill, and also make things more maintainable with a prebuilt CD pipeline.
I also have to work on setting up a discord bot (whether it be through zapier or otherwise) that notifies people whenever there's a new issue of this here newsletter, as a lot of my friends don't check their email but do use discord.
See ya!
--reese