DEV Community: Tyler V.

[Boost]

Tyler V. — Tue, 24 Mar 2026 20:21:42 +0000

Matt Hogg

Mar 19

Vibe Coding Is Bad News For Good Ideas

#watercooler #ai #softwaredevelopment

Comments

7 min read

Updating some metadata and found this post - still relevant! 🏆

Tyler V. — Mon, 24 Mar 2025 14:43:18 +0000

Asking better questions

Tyler V. ・ Sep 2 '21

#beginners #codenewbie

Great read about AI!

Tyler V. — Tue, 04 Feb 2025 15:26:54 +0000

Does our technology still work for us?

Bryan Robinson ・ Feb 4

#webdev #ai #ux

Awesome Collection of topics + blog posts

Tyler V. — Wed, 04 Dec 2024 16:59:04 +0000

What's Hot in Web Dev?

Florian Rappl ・ Dec 4 '24

#webdev #javascript #frontend #node

The Road to Publishing an Android App

Tyler V. — Wed, 31 Jul 2024 12:18:01 +0000

Something that's long been on my bucket list as a developer has been to publish an Android app on the Play Store. While I've never had a concrete idea for what I wanted to the app to do, I've taken some time working through the beginner tutorials for Kotlin, Flutter, NativeScript, and React Native.

But as I've found to often be the case, the solution will come to me while solving a problem for myself.

The "Problem"

If you're a frequent Instagram user, you've probably seen the seamless carousel posts where a single panorama is broken apart into multiple images in the 1:1 square aspect ratio that Instagram uses so that as you swipe through it the panorama flows from image to image.

While there are multiple apps out there that can do this, I found them to be rather polluted with ads and tended to favor more artistic approaches that involved multiple images with additional templating and styling applied.

So I did a Pro Developer Move™ - built something over the course of multiple days instead of sitting through 45 seconds of ads!

The Solution

The how isn't particularly important to this story, but the TL;DD (Too long; Didn't Develop) is: I dropped this cropper component into the page with a second invisible cropper that does some math to generate the images for the user in the background. Github

So I had my app, Swipey Panorama and deployed the website for a few friends to take a test drive with and after getting the thumbs up that it seemed to be working, started phase 2 of my master plan - adding Progressive Web App (PWA) support so I could install the site on my phone for easy use.

Finding Treasure

While refreshing myself on what exactly had to go into the manifest.json and service worker files, I stumbled upon PWA Builder - which happened to include a section about deploying a PWA to various app stores! Could it be this simple? Just a few clicks and I could have an app?

Well, yes ... but also no.

Generating the app/files would in fact be rather simple. Publishing the app/files to the app store would not be quite as simple as the single button press that was needed to generate the files.

Lost! In the Play Store Developer Console!

As someone who has used google.com before and would describe the experience as about as simple as it gets - The Play Store Developer Console is the exact opposite experience. There are quite a few pages that require your attention to get your app set up, and none of them link to each other (as far as I could tell at least).

But I was determined and despite the most user-unfriendly experience I think I've ever had, I eventually had everything set up and was left with "Deploy your first release" with a link that took me to the Releases overview page:

After searching this page up and down multiple times, eventually I somehow found my say to the App Bundle Explorer - which is where you can actually upload a new release version. It took less time to figure this part out - but you upload the App bundle (.aab file, not .apk - which can be used to install the app on a local device).

Updating your app

Just when I thought I had everything rolling, one of my testers immediately found a bug (which I was vaguely aware could happen, but I thought it was going to be limited to PC users and could just fix after the fact). I made the fixes, deployed the website, and rebuilt the package to upload to the Play store. After getting what I think was every possible error - here's a list of items that you need in order to make updates to your app:

The Version Code needs to be set to a unique number on the PWA Builder screen
The Version Name needs to be different
Your Signing Key Info needs to match - This can be found in the signing-key-info.txt file that's downloaded when you first build your app. You also need the signing.keystore file to upload to PWA Builder.

Once uploaded and reviewed, you'll be able to deploy the updates to your Testing/Production release.

Test out Swipey Panorama:

Website: https://swipeypanorama.terabytetiger.com/

Understanding Loops - A Tangible Example

Tyler V. — Tue, 18 Jun 2024 13:57:26 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

1 - Setup

Get paper, draw a cake, and set age to your age.

2 - Do Loop

age isn't 0, so draw a candle and subtract 1 from age.

3 - Checkup

Is age still greater than 0? Go to step 2
Otherwise, go to 4.

4 - 🎉

Celebration time!

Additional Context

I didn't include markdown in my count - ended up at 248 according to VS Code:

Google IDX - The Best Flutter Beginner Experience

Tyler V. — Fri, 07 Jun 2024 19:27:08 +0000

This post is not sponsored, and I am not an affiliate

What is IDX

Announced in a blog post titled Introducing Project IDX, An Experiment to Improve Full-stack, Multiplatform App Development during August 2023, the Google team presented the idea of a new VS Code web-based editor that would include AI features and in-browser app previews to help improve Developer experience and promising "seamless integration with popular Google tools and products like Flutter and Firebase" (Erin Kidwell, Start Building with Project IDX Today.

Why Flutter didn't "click" before

I've poked at the idea of using Flutter in the past, and even managed to cobble together a prototype that was able to use a Barcode reader widget (Flutter's Component equivalent for those of us used to things like Vue or React). But every time I've visited Flutter in the past there's been XXX things stopping me from ever really getting into it:

Setting up Android Studio
Configuring Android Studio

For me personally, when I work on random side projects, I like to make things harder for myself by often doing my development across 2 devices. With Android Studio seeming to never quite be happy on my main development device, I never felt inclined to do the setup on my second machine. The last time I tried Flutter, there was a day where I had my app functioning and loading on my USB connected phone when I shut down for the day. The next morning when I started up, the app was throwing all kinds of weird errors about things not being able to load, so I dropped it.

How IDX solved my issues

When IDX was announced, I was vaguely interested, but didn't really have a specific use case planned for it. I signed up for early access and forgot it existed until Google I/O where it was announced as available for everyone. This week, I finally had both the time and desire to poke around with a new language/framework and decided it'd be a good time to try IDX and Flutter. If IDX couldn't get me through the beginnings of learning Flutter, I don't think anything ever would be able to.

So, what makes IDX work so well? The fact that going from literally nothing to a "Hello, World" app that's running with 0 Android Studio configuration is a button click, a project name, and about 1 minute away!

The amount of time I had previously spent just trying to get Android Studio set up or waiting for Flutter's installation + project initialization to run, I was already through a full tutorial and working on the follow-up practice project.

While I don't love the AI additions (mostly because it seems to like to recommend functions that don't actually exist...) the ability to focus on the code and not the environment setup has been so enjoyable as someone that just wants to practice working with the language for now. I'm sure someday I'll be back setting things up on my local device and wishing Android Studio would just work, this is a great way to test out a new language without having to struggle through the configuration just to find out if I even like working with that language.

An Afternoon with SVGs | Frontend Challenge Entry

Tyler V. — Thu, 28 Mar 2024 15:12:05 +0000

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I've been looking for a small project to do that would let me play with Greensock (GSAP), specifically a bit with some SVG files I generated with Corel Vector. When I saw the frontend challenge and had an afternoon at work with downtime between a few projects, I knew it'd be a great opportunity to explore a bit!

Since my focus was on the GSAP piece (and limiting myself to less than 1 work day to complete [8 hours minus any urgent issues that cropped up]), I didn't do much in terms of functionality, but rather focus on my goal of "make it look neat with animations" (super specific, I know).

Demo

(Looks best in full screen)

Journey

After seeing that the theme was Summer Camp oriented, I immediately had the idea to create a tent with a campfire outside of it adding animation to make the fire glow and a tent flap that would rustle (which didn't make it in 😅). So I set to creating the shapes in Gravit. Since I thought the fire would look best with a dark/night setting, I also created a star shape and an oval for the ground - then exported everything as .svg files.

Next up was to start working on the Codepen file - I dropped in the HTML and started Googling for "How to import SVGs with JavaScript". Turns out that this is a non-trivial thing to do if the files aren't hosted somewhere 🙃 So I copied the SVG paths into the bottom of the HTML file since breaking them apart and importing them piecewise via JS didn't feel like a productive use of my limited time.

Once they started rendering, I began on my CSS - giving the form a white background and position the SVG elements. Then I moved my window to the side and ran into an issue - the SVG I was using for the ground I had positioned using negative values, and when the screen got smaller the ground would adjust further and further down until it was no longer showing in the window at all. My original ground looked like this:

So to make my alignment easier (aka be able to be set with bottom: 0 instead of negative units) I clipped the path down to this (which is the version that's in the demo):

Next I spruced up my form's visuals a bit by heading to Google Fonts and finding one that had camping vibes - eventually landing on Amatic SC. Then I had the wild idea of making the form look like a piece of paper, so that I could make the submit button fold the paper up into an envelope or paper airplane and fly off screen if it was submitted successfully (This was EXTREMELY high hopes and I didn't even get around to trying to start this animation in the time I allotted myself 😂). I started by trying to find a crumpled paper look on sites like Hero Patterns, but eventually found myself on this codepen:

In the interest of saving time, I decided this would give enough of the paper look without requiring too much excess work - huge thanks to enbee81 🙌🏻 While looking at how the CSS worked and updating the colors to match my background, I realized that I could use the radial gradients to give some depth to my sky, which ended up like this:

body{
    background: radial-gradient(ellipse at top center, #001333, transparent), 
    radial-gradient(ellipse at bottom center, #001333, transparent), 
    radial-gradient(ellipse at right center, #584C86, transparent), 
    radial-gradient(ellipse at left center , #584C86, #001333);
}

Now, as the user scrolled down the page the sky would "change".

It was around this time that an issue came up and I stopped work on this for the day - notably I haven't gotten to any GSAP animations yet 😅 So the next morning I had an hour between meetings and started the most fun part of the project!

The first thing I tried was using a "timeline" - which would be a span of time for my animations to run on:

const tl = gsap.timeline({paused: true, repeat: -1, yoyo: true});
// repeat set to -1 causing the timeline to repeat infinite times
// yoyo makes the animations play, then play in reverse back to the initial state

This was working, but I didn't like that all my animations were tied to a single block of time - so all the stars would start to twinkle at the same time, but then the stars on shorter times would stay static until all the animations finished, then they'd play in reverse and "hang" in a static state longer than I wanted.

Next I swapped to using to so I could specify the "Target state" for each SVG file.

gsap.to("#star-1", {scale: 1.5, duration: 17, repeat: -1, yoyo: true})

This block tells Star 1 to grow to 1.5x size, over the duration of 17 seconds, repeating infinitely, and with the "rewind" effect each time it completed the change.

The final addition I made was to give the fire a burning glow effect with a drop-shadow:

gsap.fromTo("#fire",{filter: "drop-shadow(0px -1px 5px rgba(255, 107, 30, 1))"}, { filter: "drop-shadow(0px -5px 7px rgba(255, 60, 24, 1))", duration: 2.5, repeat: -1, yoyo: true})

This time I used gsap.fromTo so I could specify additional effects to start from and go to. I start with a small orange drop shadow, then it grows and changes to a slightly more red color, before looping back to the original shadow over each 5 second loop (2.5 seconds each way).

A final issue I was running into here was I wanted to make the drop shadow much larger than the fire, but making it larger caused it to get clipped to a bounding box, which I'm guessing has something to do with the SVG setup - but this was a good stopping point and I'm happy with the results for the time I spent on it.

If I had unlimited time to work on this, I would have tried to solve the fire glow issue, added a flap to the tent, and added some kind of animation on submission of the form. I also briefly had considered making some kind of change to the scene based on the activity dropdown selection which could have been neat.

License

MIT License Tyler V. 2024

Testing Svelte on the job

Tyler V. — Thu, 14 Mar 2024 18:26:04 +0000

Background

I've been working with Vue (mostly 2 with a bit of 3 mixed in recently) at work for ~5 years now, and since we're starting to evaluate things like migrating to Vue 3 I knew when this small project came across my desk it would be the perfect opportunity to dip my toes in Svelte.

I mostly followed the interactive tutorial from SvelteKit with modifications to match what I needed.

What I built

The app I built was to function as the admin side of a URL shortener (something like bit.ly) so that one of our teams can convert long bookmarks into more shareable links so we can generate QR codes that another department on our team would use in their day-to-day tasks.

This is a very straightforward small app, and only took me about 1 day's work to squeeze it in between the other things I do during the day.

What I liked

JS/HTML split files

As someone that really likes Vue 2, it won't be a surprise that I liked the split of HTML and JS being completely disjoined into 2 files - although having to include a script to access the data seems like something that should be automatically happening.

HTML `#each`

I liked the #each approach to looping HTML elements - I think it's a bit more obvious what's happening than how Vue uses v-for.

{#each data.allUrlDocs.rows as { doc }}
    <li><a href="/url/{doc._id}">{doc._id}</a></li>
{/each}

What I didn't like

File Names

Regardless of how nice the development experience was, my biggest gripe with Svelte is the singular reason I won't be using it in the future - the file naming structure is painfully bad.

Using the folders as a way to include the routing auto-magically is great - but then having to stuff every folder with +page.server.js and +page.svelte immediately leads to confusion regarding which file is which. Having to read the subfolder names from these tabs had me pulling my hair out:

And having to collapse/open folder in order to figure out which +page.svelte I was actually trying to open was constantly breaking my concentration.

Build/Deploy Process

For our internal apps, we use IIS to deploy our apps locally on our network. Svelte seems like it'd be a delight to use if using a tool like Netlify, but for local deploys the process seems needlessly complicated.

I know us using IIS made this even more complicated than it needed to be, but compared to the tutorial docs which were clear and easy to follow, the build docs and terminal output were very confusing about what exactly yarn build was doing.

Dev.to and "The Missing Middle" Economics

Tyler V. — Mon, 18 Dec 2023 14:59:21 +0000

If you've spent any amount of time on Dev.to in the past year, you've certainly noticed the uptick of low-quality "listicle" articles (often referring to the low quality click-bait type articles in a "Top 5" style). Or if you haven't noticed it yourself, you've probably seen other users complaining about the uptick - even making the top 7 posts published last week [Dec 11th, 2023].

The Conundrum of the "Top X" Articles 🤔

Rafał Goławski ・ Dec 8 '23

#discuss

🚨 🚀 25 Reasons (You MUST Know!!) Why Some “Listicles” Are BAD for dev.to 🤯 👿 🚨

Best Codes ・ Dec 11 '23

#webdev #sad #help #javascript

While this trend may or may not have been exaggerated with the increasing availability of AI tools, this concern about listicles has been a discussion point on Dev.to for a few years. This past weekend while listening to the Cortex Podcast, Host CGP Grey mentioned an economic phenomenon called "The Missing Middle" and how it related to the landscape of YouTube this past year, and it made me think about the listicle situation on Dev.to and how it might be less of a problem and more of a natural economic occurrence for a growing platform.

Disclaimer for Economic students - I know that this isn't exactly how the missing middle is intended to be used, but I couldn't find better phrasing for it and this article was the closest thing I could find. If you know a more appropriate phrasing for what I'm explaining please let me know in the comments 🙏🏻 For readers interested in the specifics of Missing Middle Housing, check the Wikipedia page

So what is "The Missing Middle"?

Originally, this was about the housing market and the loss of options in the middle class range, but applied at a higher level this is the phenomenon where over time, a market goes from having a variety of selection in the low, middle, and high quality range - but over time the middle quality options start to disappear as the supplier trends towards either the low or high quality side of things.

This can be for a variety of reasons - in the housing market partially this was caused by changes in zoning laws/requirements making housing harder to build. For online content on platforms like YouTube or Dev.to it can be because of what the algorithm rewards. CGP Grey calls out that there's been a trend on YouTube where users are favoring either short form content (Shorts) or particularly long form content (4-hour documentary deep diving some obscure interest). I particularly like the 2-axis spectrum that he proposes, one axis for effort and one axis for length, where the points that the algorithm is rewarding most is the extremes of the axis - Short + High Effort, Short + Low Effort, Long + Low Effort, and Long + High Effort.

Note that Effort isn't necessarily the exact right word here, but is a "close enough" word to describe something along the lines of "doing the research and validating that everything is going to be accurate for the reader"

Naturally, the most content is going to be created in the Short + Low Effort extreme since that requires the least amount of time/effort to create - which I think applies fairly directly to the Listicle situation here. But the high-effort content still exists - the Top 7 posts each week often has a few articles that I find interesting and will read through - the question becomes how can interested readers find that content outside of the Top 7 posts each week?

I don't necessarily have any profound new addition to the situation, but thought it was interesting that it aligns so closely to what creators on other platforms are experiencing, as well as the physical space as well.

Creating your own Links page in Nuxt

Tyler V. — Thu, 16 Mar 2023 17:52:23 +0000

This is a quick code sample of how I created my own "Where to find me" page for my blog.

I'm using Nuxt, Font Awesome, and Tailwind (v2) but with minor adjustments you can adapt this to any stack of your liking 😊

My Social Component

I already had this component that I was using to show a list of Font Awesome Icons with links to my various social accounts around the internet and figured I would reuse it for my new links page.

After initial setup I realized I didn't have a way to link from my links page back to my actual blog, so I added it as a link and an isHome() computed property to check if the user was already on my home page or not.

<template>
  <div class="max-w-4xl mx-auto py-4 text-center">
    <h2 class="my-4 text-3xl font-display font-bold">
      Find me around the internet
    </h2>
    <ul
      class="flex flex-wrap justify-around max-w-lg mx-auto text-center list-none"
    >
      <li v-if="isHome" class="w-1/2 md:w-1/4 mt-4">
        <a href="https://terabytetiger.com/">
          <div>
            <font-awesome-icon
              :icon="['fas', 'home']"
              :style="{
                fontSize: '3rem',
              }"
              class="text-purple-0"
            />
          </div>
          Blog
        </a>
      </li>
      <li class="w-1/2 md:w-1/4 mt-4">
        <a href="https://dev.to/terabytetiger">
          <div>
            <font-awesome-icon
              :icon="['fab', 'dev']"
              :style="{
                fontSize: '3rem',
              }"
            />
          </div>
          Dev.to
        </a>
      </li>
      <li class="w-1/2 md:w-1/4 mt-4">
        <a href="https://github.com/TerabyteTiger">
          <div>
            <font-awesome-icon
              :icon="['fab', 'github']"
              :style="{
                fontSize: '3rem',
              }"
            />
          </div>
          Github
        </a>
      </li>
      <li class="w-1/2 md:w-1/4 mt-4">
        <a rel="me" href="https://dftba.club/@TerabyteTiger">
          <div>
            <font-awesome-icon
              :icon="['fab', 'mastodon']"
              :style="{
                fontSize: '3rem',
              }"
              class="text-blue-700"
            />
          </div>
          Mastodon
        </a>
      </li>
      <li class="w-1/2 md:w-1/4 mt-4">
        <a href="https://www.instagram.com/t.vanblargan/">
          <div>
            <font-awesome-icon
              :icon="['fab', 'instagram']"
              :style="{
                fontSize: '3rem',
              }"
              class="text-pink-500"
            />
          </div>
          Instagram
        </a>
      </li>
      <li class="w-1/2 md:w-1/4 mt-4">
        <a href="https://www.youtube.com/channel/UCZeMnP2XoSh724u4v8Oskwg">
          <div>
            <font-awesome-icon
              :icon="['fab', 'youtube']"
              :style="{
                fontSize: '3rem',
              }"
              class="text-red-500"
            />
          </div>
          YouTube
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Social",
  computed: {
    isHome() {
      return !(this.$route.fullPath === "/")
    },
  },
}
</script>

Over time as my usage of different social medias ebbs and flows, I tend to update my list and comment in/out the various links so that only sites I'm active on are listed.

The Links Page Layout

Once I had my Social component configured, I added a new Layout that would exclude my normal Header and Footer from the links page to keep it minimalistic.

<template>
  <div class="bg-gradient-to-br from-blue-400 to-purple-400 w-screen h-screen p-12">
    <Nuxt />
  </div>
</template>

The Links Page

Next I set up my Links page to be a simple card with the Social component and a fun shaped profile picture at the top.

<template>
  <div class="">
    <img
      src="/profileImg.png"
      alt="(your alt text goes here)"
      class="rounded-full h-48 mx-auto mb-8 py-4 filter drop-shadow-2xl"
    />
    <div
      class="bg-white mx-auto w-7/8 lg:w-1/2 rounded-lg p-4 filter drop-shadow-2xl"
    >
      <Social></Social>
    </div>
  </div>
</template>

<script>
export default {
  layout: "links",
}
</script>

And that is all it took to get a central location I could link to from various social accounts!

Adding Netlify Redirects to your Nuxt Blog

Tyler V. — Tue, 22 Feb 2022 15:48:21 +0000

During my migration from Gridsome to Nuxt I mentioned that I was having issues getting the deep:true part of the Nuxt Context module working, and took The Lazy Dev™ approach and just didn't use it, essentially flattening my directory structure. Unfortunately, this led to the shortening of my blog posts URLs, which has consequences when Google Search Console suddenly thinks the pages are gone!

Thankfully, all that was required was to add redirects from my old (and now broken) links to the correct URLs. However, I didn't want to create and maintain a growing list of post redirects since one of the reasons for migrating to Nuxt was to decrease my number of steps required to go from draft to posted.

Enter Netlify Redirects

After my poking around Google Search Console for a bit to figure out what was happening, I realized that when I removed the article subdirectory from the content directory, I had in fact updated all of the blog post URLs, removing the articles/ from my old URLs. To fix this, I needed a way to tell Google that any urls that started with TerabyteTiger.com/lessons/articles/postName needed to map to TerabyteTiger.com/lessons/postName.

Create `_redirects` in `static/`

To begin fixing this issue, we need to create a file called _redirects - Note that there is no file extension! This will need to remain intact after running our build process, so we want this to be located in our static/ directory.

Create a file called _redirects - Note that there is no file extension!

Add URLs to remap

Once we create our _redirects file, we'll add our first column - the URLs to remap. For me this looked like this:

/lessons/articles/*
/blog/*

/blog/ was an old url pattern, but I figured might as well catch those as well. Note that at the end of these, there is a * to indicate that we still want to catch anything that meets this pattern, even if it has additional characters following the last /.

Add `:splat` redirects

Now we'll add a tab or two at the end of each line and follow that with the new URL to direct to.

/lessons/articles/*     /lessons/:splat
/blog/*                 /lessons

On the first line, you'll notice we're using :splat - this will return everything that was caught by the * in our first column, so /lessons/articles/myBlogPost will become /lessons/myBlogPost and /lessons/articles/2022/postName will become /lessons/2022/postName.

A few days after publishing these updates, my Search Console was back to normal 🎉

For more information see Netlify's Redirects and Rewrites docs!