Balint Erdi - Balint's Dev Journal

Setting up a TypeScript project

This year, I decided to learn TypeScript, or more precisely, to improve my very basic knowledge of the most popular flavor of JavaScript. I know some basic TS and I use ExecuteProgram to

Just start over

I was on the cusp of finishing a complex component. The changes looked good locally so I pushed to CI, waiting for the green check mark and the immediate dopamine kick. Bang, a

fail

[FAIL] Don't fix the same problem twice

And then it all made sense. The app uses band slugs (like "led-zeppelin") for ids, so the band_id was a string. In ruby, 'string'.to_i is 0, which is why all songs had a band_id of 0, and they didn't show up for any of the bands.

fail

[FAIL] VS Code auto-import breaking the build

I learned about the idea of being a señor engineer and publishing your fails during your work from Kenneth Larsen [https://www.kennethlarsen.org/] a few years ago. I really liked the idea

svelte

Understanding Svelte – Indicating loading state

In the last post of building the crypto card series (aka. "Understanding Svelte"), we tuned the async bits and added some animation to improve user feedback. We'll now continue down that path and

animation

Animate chess pieces with ember-animated

I've used ember-animated [https://github.com/ember-animation/ember-animated/] in the Sac Sac Mate app in several places: to animate the list being resorted [https://devjournal.balinterdi.com/using-ember-animated-to-resort-a-list/] and to move the player's

svelte

Understanding Svelte – Tuning asynchrony and animation basics

In this post, we'll improve the opening of the historical prices panel so that it's not blocked by network requests and then add a simple opening animation.

svelte

Understanding Svelte – Simple event handling and some more reactivity

The last time [https://devjournal.balinterdi.com/understanding-svelte-reactivity-part-1/] we built a small crypto card (more like a label) that showed the current price of Bitcoin. In this post, we'll expand that to show

svelte

Understanding Svelte – Reactivity (part 1)

Last time I wrote about the basics of Svelte and Svelte components [https://devjournal.balinterdi.com/understanding-svelte-the-very-basics/]. At the end we rendered a "crypto tab" on screen that displayed a static price. So

svelte

Understanding Svelte – The (very) basics

I have to admit, Svelte caught my attention. It takes a totally different approach than other JavaScript UI libraries or frameworks for keeping the UI up-to-date with changes triggered by data changes or

ember.js

Adding autoplay to games

The main feature I added this week to Sac Sac Mate is the ability to autoplay a game, so that the user doesn't have to click (or tap) the "make next move" potentially

chess

30 Weird Chess Algorithms

A guy who says is bad at chess and doesn't like playing online first makes a papier-mache robot to play against and then implements 30 (yes, 30!) different chess algorithms and makes them compete against each other.

ember.js

Setting link activeness – the modern way

I realize a blog post with "modern" in its title regarding a JavaScript framework will be laughed at a few years down the line, but it makes for a catchy title. "Setting link

netlify

How to deploy an Ember.js app to Netlify (milestone reached: site deployed)

Not long ago, I realized I'd reached the goals set to myself [extending-the-original-mvp/] for when the app should be made publicly available. It was time to deploy it. I'm going to explain the

sac-sac-mate

Implementing conditional linking

In the previous post [https://devjournal.balinterdi.com/thinking-about-conditional-linking/], I outlined what I need and a possible solution to make it work. Here, I'm going to briefly write about how I implemented it

api

Thinking about conditional linking

In certain apps, there's a need to show data from related resources that might or might not exist. One example that comes to mind is a wiki where an article can link to

emberjs

Rendering the chess board – declaratively. Part 1.

Having decided that I want to include the ability of stepping through chess games in the MVP [https://devjournal.balinterdi.com/extending-the-original-mvp/], I set to implementing that feature. My first thought was to

sac-sac-mate

Extending the original MVP (aka. moving the goal posts)

At this point, I realized I've completed the pieces needed for my original, self-inflicted MVP [https://devjournal.balinterdi.com/coming-up-with-an-mvp] . However, I reckon that MVP wasn't ambitious enough. At the risk of moving

sac-sac-mate

Adding fly-over animation from list to details

After I made list resorting animate [https://devjournal.balinterdi.com/using-ember-animated-to-resort-a-list/] I got excited about how much ember-animated can do with how little code. I was hooked and signed up to EmberMap's animation

ui

Using ember-animated to re-sort a list

Animations can spice up user interaction but their best use is to help the user understand what's going on on the page, as a result of their action. I wanted to use animations

d3

Coming closer to understanding D3's data joins

This is one of those posts where I'll describe the challenge I've faced and how I overcame it, so that you, dear reader, can hopefully learn how not to get bogged down with

What have I done so far?

As I didn't start this journal when I started the project itself, there are some things that already work. Here, I'd like to present a quick list of these features and possibly, in

emberjs

Coming up with an MVP

MVP is probably not the right word to use as I don't think Sac Sac Mate can be considered a product (though it might become one in the future) but I'd like to

emberjs

New project: Sac Sac Mate

There are always several things in the broadly interpreted world of software development I want to learn about. What usually works for me is instead of (or rather, in addition to) reading articles and books or watching videos about the topic, I build something with those tools.