# Tania Rascia Software engineer and open source creator. This is my digital garden. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Enabling Apache ECharts in React for Data Visualization DevFeed: [Enabling Apache ECharts in React for Data Visualization]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2025-03-31T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [Data visualization](), [React](), [Front end](), [JavaScript](), [dashboards]() Tags: [charts](), [dashboards](), [data-visualization](), [front-end](), [javascript](), [react](), [visualization]() ### AI overview A tutorial on creating a small React wrapper for Apache ECharts to build interactive data visualizations, including line, bar, and pie charts. It covers chart initialization, configuration updates, event handling, and resizing. ### Source excerpt Making dashboards with charts and graphs is a pretty common part of the front-end developer experience, as well as deciding which JavaScript... ## Year in Review: 2024 DevFeed: [Year in Review: 2024]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2025-03-27T00:00:00Z Content type: article Language: en Sources: [Tania Rascia]() Topics: [coding](), [CSS](), [React](), [Web Development](), [Web platform]() Tags: [bluesky](), [burnout](), [career](), [coding](), [css](), [hooks](), [keyboard](), [meta](), [pagination](), [projects](), [react](), [redesign](), [review](), [side-projects](), [sorting](), [table](), [variables](), [year-in-review]() ### AI overview A 2024 year-in-review from a principal engineer who continues to work primarily with React and CSS. The author reflects on balancing a full-time engineering role with coding, writing, side projects, and maintaining a personal website, while highlighting several articles and a blog redesign completed during the year. ### Source excerpt I'm trying to win the award for "Latest Year in Review". 🏆 I don't know if anyone can challenge me at this point, as it's almost thirdway... ## Redesign: Version 7.0 DevFeed: [Redesign: Version 7.0]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2024-12-01T00:00:00Z Content type: opinion Language: en Sources: [Tania Rascia]() Topics: [Website](), [CSS](), [gatsby](), [Bluesky](), [Visual Studio Code]() Tags: [bluesky](), [css](), [meta](), [react](), [redesign](), [version](), [website]() ### AI overview The author describes redesigning their personal website for version 7.0, separating personal Notes from programming Articles, highlighting projects and art, and adding navigation sidebars. The redesign was inspired by Docusaurus and uses plain CSS written in one file. ### Source excerpt One of my favorite hobbies is tweaking my website. I've updated the design countless times thoughout the decade (!) of this site's existence... ## Creating a Keyboard Shortcut Hook in React (Deep Dive) DevFeed: [Creating a Keyboard Shortcut Hook in React (Deep Dive)]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2024-10-19T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [React](), [keyboard](), [Code](), [App](), [Front end]() Tags: [caching](), [code](), [debugging](), [front-end](), [function](), [javascript](), [keyboard-shortcuts](), [react](), [shortcuts]() ### AI overview A tutorial on creating a custom React hook for keyboard shortcuts. It covers single keys, modifier combinations, key sequences, event-handler caching, stale state, and preventing shortcuts while typing. ### Source excerpt Recently I needed to add some keyboard shortcuts to an app I was working on. I wrote up some example code and decided to write this article... ## HTML Tables with Horizontal Scroll and Sticky Headers DevFeed: [HTML Tables with Horizontal Scroll and Sticky Headers]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2024-10-09T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [HTML](), [Web Development](), [modern web development]() Tags: [container](), [css](), [design](), [dockerignore-usage](), [example](), [headers](), [helps](), [html](), [javascript](), [table](), [tables]() ### AI overview A tutorial on building HTML tables that support horizontal scrolling and sticky headers. It explains why sticky positioning can fail inside an overflow container and presents a table-wrapper height as the solution, producing a vertically and horizontally scrollable datagrid-style view. ### Source excerpt Turns out, creating an HTML table that has both horizontal scroll and fixed headers can be a tricky problem. As another developer said about... ## Year in Review: 2023 DevFeed: [Year in Review: 2023]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2024-01-20T00:00:00Z Content type: opinion Language: en Sources: [Tania Rascia]() Topics: [coding](), [Web](), [React](), [Redux](), [GraphQL]() Tags: [burnout](), [career](), [coding](), [graphql](), [life](), [review](), [websockets](), [year-in-review]() ### AI overview A personal review of 2023 and the author's ten years as a developer, covering career history, burnout from writing for DigitalOcean, recent software-related posts, and plans to write more about personal interests. ### Source excerpt It's 2024, y'all. We're 20 days into the year, so I'm running out of time to write that end of year post I always do. I haven't quite known... ## How to Use WebSockets in a Redux Application DevFeed: [How to Use WebSockets in a Redux Application]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2023-02-15T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [WebSocket](), [Redux](), [middleware](), [React](), [browser](), [API]() Tags: [api](), [chat](), [dashboard](), [how-to](), [javascript](), [react](), [redux](), [websockets]() ### AI overview A tutorial on integrating WebSockets into a React/Redux application by using Redux middleware to manage connection events, state access, and dispatched actions. It demonstrates a browser WebSocket client and discusses initializing and closing connections for use cases such as chat and live dashboards. ### Source excerpt At some point, you might work on a React/Redux application that requires the use of WebSockets, such as for chat or live updates on a... ## Understanding the GraphQL Type System DevFeed: [Understanding the GraphQL Type System]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2023-01-27T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [GraphQL](), [Tutorial](), [API](), [Front end]() Tags: [api](), [enum](), [enums](), [graphql](), [type-system](), [union-types]() ### AI overview This tutorial explains the GraphQL type system and how its types are used to build a GraphQL schema. It covers scalar types, Enums, List and Non-Null wrapping types, Object types, Interfaces, and Unions, with examples. ### Source excerpt GraphQL is a modern solution for facilitating the communication between a front end and a data source. All of the details and capabilities... ## Year in Review: 2022 DevFeed: [Year in Review: 2022]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2023-01-02T00:00:00Z Content type: opinion Language: en Sources: [Tania Rascia]() Topics: [Development](), [Obsidian](), [App]() Tags: [gaming](), [iphone](), [life](), [mac](), [obsidian](), [review](), [twitch](), [windows](), [year-in-review]() ### AI overview A personal year-in-review covering the author's hopes and experiences around the start of 2023, along with recommendations for television, film, books, apps, and gaming. The author also discusses switching from Bear and Todoist to Obsidian for Markdown-based notes and todos with synchronization across Mac, Windows, and iPhone. ### Source excerpt Happy New Year, friends! Time to write another year in review. This will be the seventh time I've done this. Here are all the previous ones... ## Testing API Calls With React Testing Library and Jest DevFeed: [Testing API Calls With React Testing Library and Jest]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2022-12-09T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [testing-library](), [Testing](), [React](), [API](), [Jest](), [Webpack]() Tags: [api](), [asynchronous](), [jest](), [react](), [testing](), [testing-library](), [webpack]() ### AI overview A tutorial showing how to test React useEffect API calls with Jest and React Testing Library, including tests for successful and failed requests. ### Source excerpt Ever since Hooks were released in React, we've been using the hook to fetch data, whether directly or abstracted away behind Redux Thunks... ## Using Path Matching in React Router DevFeed: [Using Path Matching in React Router]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2022-12-05T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [React Router](), [React]() Tags: [code](), [react](), [react-router](), [router](), [writing]() ### AI overview This article explores using path matching in React Router to map route patterns to page titles, while noting that passing titles directly through a route wrapper can be a simpler solution. The examples use React Router v5. ### Source excerpt Recently on a project I was working on I noticed every page was importing in order to display the unique page title, like this: For an app... ## Tending to My Digital Garden DevFeed: [Tending to My Digital Garden]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2022-12-01T00:00:00Z Content type: opinion Language: en Sources: [Tania Rascia]() Topics: [digital](), [email](), [Website]() Tags: [blog](), [digital](), [email](), [life](), [personal-website](), [writing]() ### AI overview A personal reflection on treating a website's writing section as a digital garden. The author gives herself permission to publish informal, personal, and varied posts without requiring every article to be substantial or important enough to share with newsletter subscribers. ### Source excerpt Hi there. It's December 2022. How are you doing? This has been a slow year for me. I'm going to write a little post to let you know what I... ## Simplifying Drag and Drop (Lists and Nested Lists) DevFeed: [Simplifying Drag and Drop (Lists and Nested Lists)]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2022-09-05T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [JavaScript](), [draggable](), [Web Development]() Tags: [components](), [debug](), [drag-and-drop](), [draggable](), [how-to](), [javascript](), [react]() ### AI overview This tutorial shows how to simplify drag-and-drop lists and nested lists in JavaScript by extracting reusable components around a drag-and-drop library. It includes demos for basic lists and moving categories or items between nested categories. ### Source excerpt I always forget how to use any drag and drop library until I have to use it again. Currently, the one I've been working with is , the... ## Redesign: Version 6.0 DevFeed: [Redesign: Version 6.0]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2022-07-03T00:00:00Z Content type: opinion Language: en Sources: [Tania Rascia]() Topics: [Website](), [version]() Tags: [design](), [layout](), [meta](), [personal](), [redesign](), [version]() ### AI overview The author describes redesigning their personal website as version 6.0, including changes to its layout, themes, fonts, colors, category and tag lists, and sidebar. They also discuss earlier design experiments and plans for future posts. ### Source excerpt Once again, I've redesigned my website. Every now and then I get bored of the way it looks, or I notice a lot of people cloning it and feel... ## How To Set Up a GraphQL API Server in Node.js DevFeed: [How To Set Up a GraphQL API Server in Node.js]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2022-06-13T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [GraphQL](), [Node.js](), [Express](), [API](), [middleware](), [Code]() Tags: [api](), [api-server](), [cors](), [express](), [graphql](), [how-to](), [node](), [node-js](), [resolver](), [rest]() ### AI overview This tutorial explains how to build a GraphQL API server with Express and Node.js. It covers defining a GraphQL schema with queries, mutations, and resolver functions, then exploring and debugging the API with GraphiQL. ### Source excerpt In An Introduction to GraphQL, you learned that GraphQL is an open-source query language and runtime for APIs created to solve issues that... ## Building a JavaScript Keyboard Accordion (the Musical Kind) DevFeed: [Building a JavaScript Keyboard Accordion (the Musical Kind)]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2022-05-01T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [JavaScript](), [Svelte](), [Web Development](), [browser](), [Web app]() Tags: [api](), [app](), [browser](), [building](), [coding](), [dependency](), [javascript](), [keyboard](), [open-source](), [projects](), [sound](), [svelte](), [volume](), [web-app]() ### AI overview A developer builds KeyboardAccordion.com, an open-source web app that maps a computer keyboard to a diatonic button accordion. The article describes using Svelte, plain JavaScript, and the browser Web Audio API to generate notes, control volume, and work around a browser limit on audio nodes. ### Source excerpt It's been a while since I've written anything due to some personal concerns that I might write about later, but don't worry, I'm still... ## Creating a Schema-Based Form System DevFeed: [Creating a Schema-Based Form System]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2022-01-31T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [Forms](), [Front end](), [React](), [Structured-data](), [Library]() Tags: [architecture](), [error-handling](), [form](), [forms](), [front-end](), [react](), [schema]() ### AI overview This tutorial presents an example schema-based form system for React. It describes defining a form schema and passing it to a component that handles common values, errors, validation, dirty state, and field components. The example uses Formik for form values and submission and suggests Yup for validation. ### Source excerpt View the Source or Demo for the schema-based form system described in this article. Working with forms on the front end is tedious and... ## Year in Review: 2021 DevFeed: [Year in Review: 2021]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2022-01-01T00:00:00Z Content type: opinion Language: en Sources: [Tania Rascia]() Topics: [coding](), [Code](), [Job](), [Jackson](), [Netflix](), [sessions]() Tags: [burnout](), [coding](), [developer](), [jackson](), [life](), [netflix](), [year-in-review]() ### AI overview A personal review of 2021 reflecting on time spent away from home, maintaining balance among development work, side projects, and creative pursuits, and recovering from past burnout. The author also discusses cultural discoveries including Bo Burnham's Inside and The Beatles: Get Back documentary. ### Source excerpt Wow, here we are, the sixth installment in the New Year series of posts. This year feels almost like a lost weekend. Aside from a few small... ## An Introduction to GraphQL DevFeed: [An Introduction to GraphQL]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2021-11-17T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [GraphQL](), [API](), [api server](), [client](), [Web](), [Mobile]() Tags: [api](), [api-server](), [architecture](), [client](), [declarative](), [graphql](), [introduction](), [json](), [rest](), [schema]() ### AI overview An introductory tutorial to GraphQL, covering its purpose, terminology, core concepts, query behavior, schema characteristics, and relationship to REST. It explains GraphQL as an open-source query language and runtime for APIs, including how clients request specific fields and receive responses in JSON. ### Source excerpt As web and mobile applications become more mature and complex, software engineers invent clever new ways of improving the interaction... ## Why the Author Created Separate Notes and Articles Sections DevFeed: [Why the Author Created Separate Notes and Articles Sections]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2021-10-23T00:00:00Z Content type: opinion Language: en Sources: [Tania Rascia]() Topics: [Learning](), [digital](), [Redux]() Tags: [life](), [personal](), [technical-writing](), [thoughts](), [writing]() ### AI overview The author explains the decision to separate personal, casual, and random writing into a Notes section while keeping technical work in Articles. They discuss privacy, public self-expression, and preserving personal reflections alongside technical writing. ### Source excerpt Despite the fact that I've been consistently writing on here for six years now, I've said very little about myself. The writing has been... ## How to Sort, Filter, and Paginate a Table with JavaScript DevFeed: [How to Sort, Filter, and Paginate a Table with JavaScript]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2021-10-22T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [React](), [JavaScript](), [Front end](), [Sorting]() Tags: [api](), [filter](), [front-end](), [how-to](), [javascript](), [react](), [rest](), [sorting](), [table]() ### AI overview A tutorial on building a React table with front-end pagination, sorting, and filtering for strings, booleans, numbers, and dates, without relying on styling or framework libraries. ### Source excerpt One thing I've had to do at every job I've had is implement a table on the front end of an application that has sorting, filtering, and... ## Redesign: Version 5.0 DevFeed: [Redesign: Version 5.0]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2021-09-02T00:00:00Z Content type: article Language: en Sources: [Tania Rascia]() Topics: [Website](), [vs-code](), [Web Development](), [CSS](), [GUI]() Tags: [css](), [icons](), [interactive](), [keyboard](), [meta](), [redesign](), [version](), [vs-code](), [website]() ### AI overview The author describes redesigning a personal website from scratch with a VS Code-inspired interface, categorized posts, pixel-art icons, a light/dark theme switcher, customizable colors, and improved keyboard accessibility. The site uses plain CSS and has evolved through multiple iterations. ### Source excerpt Over the last week or two I've had a lot of fun building out a new site from scratch. I thought it would be fun to make my site look like a... ## Writing a Sokoban Puzzle Game in JavaScript DevFeed: [Writing a Sokoban Puzzle Game in JavaScript]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2021-07-26T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [JavaScript](), [Code](), [Canvas](), [HTML5](), [Demo](), [Web Development]() Tags: [canvas](), [code](), [demo](), [game](), [games](), [graphics](), [html5](), [javascript](), [puzzle]() ### AI overview A tutorial describing the implementation of a Sokoban puzzle game in JavaScript. It explains the map representation, entity movement and pushing rules, recursive handling of multiple blocks, and rendering the game on an HTML5 canvas. ### Source excerpt So the other day, I made an implementation of a Sokoban puzzle game in JavaScript. Here's the source code and here's the demo. The game... ## How to Structure and Organize a React Application DevFeed: [How to Structure and Organize a React Application]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2021-06-23T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [React](), [structure](), [React Hooks](), [Redux](), [React Router](), [styled-components](), [Jest](), [testing-library](), [Authentication]() Tags: [authentication](), [css](), [how-to](), [javascript](), [jest](), [react](), [react-hooks](), [react-router](), [redux](), [state-management](), [structure]() ### AI overview This tutorial presents an opinionated, feature-focused directory structure for organizing large-scale production React applications. It explains how to separate global shared components from feature-specific code and discusses accompanying choices for Redux, React Router, styling, testing, and authentication. ### Source excerpt There is no consensus on the right way to organize a React application. React gives you a lot of freedom, but with that freedom comes the... [Next page]()