The home of my static SvelteKit site.
Home Page: https://joshcollinsworth.com
I'm a front-end developer, currently at Deno (previously: Shopify).
I like building word games like, Quina and Hondo), and making things on CodePen. I also enjoy blogging on my website, where you can find more about me.
Svelte is a new style of framework for building sites and apps. Let's dive into what makes it different, why it's so enjoyable, and how it's able to ship such tiny, fast apps.
https://joshcollinsworth.com/blog/introducing-svelte-comparing-with-react-vue
Updating Quina to version 2.0 filled my head with new ideas that I just couldn't walk away from. Eventually, those ideas took the shape of a whole new word game, named Hondo.
My thoughts, experience, and advice after using the Moonlander as my main keyboard for both personal and work projects for a full month
I keep noticing those of us in the frontend field being treated much the same as nurses, paralegals, and executive assistants. Our work is seen as important, certainly, but just not the same as, or as important as, the “real” work.
If you click a ToC item it doesn't scroll to the correct position, that's because the default behavior for anchor points is to scroll to top. To fix this create a method like this:
function scrollIntoView(id: string) {
const element = document.getElementById(id);
element?.scrollIntoView({
behavior: 'smooth',
inline: 'center',
block: 'center',
});
}
Change the anchor tag to a button add an on:click to call that with heading.id, and then text-align the button to left. Reason for button is accessibility. This fixes it.
How does the Glove80 stack up against similar keyboards like the Moonlander and Ergodox? I share my impressions after the first few weeks of use.
Why I worry about the effect GitHub Copilot is having and will continue to have on the accessibility of the web at scale.
Many developers seem to believe there's no difference between px and other CSS units. Let's dispel that myth, for the sake of better accessibility.
https://joshcollinsworth.com/blog/never-use-px-for-font-size
SvelteKit introduced breaking changes to its routing and data loading in August 2022. Learn how to convert from the old way of doing things to the new.
https://joshcollinsworth.com/blog/sveltekit-breaking-changes
Learn the fundamentals of SvelteKit by building a statically generated blog from scratch, with Markdown support, Sass, an API, and an RSS feed.
https://joshcollinsworth.com/blog/build-static-sveltekit-markdown-blog
…Lately, I’ve been wondering whether I can actually continue supporting Instagram and the company behind it, however passively or at whatever seemingly insignificant scale. And while I was zeroing in on this answer anyway, the events of the last couple of weeks have clearly cemented in my mind that the answer—for me, at least—is an unequivocal “no.”
Creating high-quality, polished web animations is both a science and an art. This post covers the best things I've learned over the last decade of crafting web UIs.
The easing curve can make or break any animation on the web. Let's look at the science of CSS cubic-bezier curves, and the art of using them to make the best web animations possible.
Gutenberg brings with it the ability to set image blocks as full-width or wide-width. This article talks about how to enable support for that feature in your theme, and one way to write the CSS that makes it work.
It's popular to say we can’t agree on Tailwind, but I posit we actually already do. I think what we actually disagree on isn’t the details of this (or any) specific software; it's in what we value, and how we each define assets and liabilities.
https://joshcollinsworth.com/blog/tailwind-is-smart-steering
After a year or so of using Raycast, I'm switching back to Alfred. This is what prompted me to make that decision, and why I may or may not stick with it.
The web world is full of tradeoffs. Going from a CMS to a static site keeps things simple—but that simplicity comes with costs. Luckily, giving up comments on your blog doesn't have to be one of them.
https://joshcollinsworth.com/blog/add-blog-comments-static-site
I've been a fan of Svelte for years, but never had the opportunity to use it on a serious project before. So when I found myself looking for a new platform for this site as SvelteKit entered open beta, it seemed like perfect timing.
https://joshcollinsworth.com/blog/converting-from-gridsome-to-sveltekit
Block Lab is a WordPress plugin that simplifies the process of creating custom blocks to use in the block editor, AKA Gutenberg, the new content editor in WordPress 5.0. This post explains how to use it, even if you only know basic HTML.
https://joshcollinsworth.com/blog/creating-custom-gutenberg-blocks-with-the-block-lab-plugin
The story of building Quina, a word game Progressive Web App built with Nuxt, and launched on the Google Play Store.
https://joshcollinsworth.com/blog/announcing-quina-my-first-app
Can we have a 'back to top' button pinned to bottom right or in the footer? We have to scroll all the way to get up in long articles. There's some space in footer, I see.
How to use CSS grid to make a responsive, adaptable bar chart with no math or external library required!
Transitions, easing, and routing are all baked into SvelteKit. This makes utilizing page transition effects in SvelteKit sites and apps as easy as adding just a few lines of code.
https://joshcollinsworth.com/blog/sveltekit-page-transitions
Indeed, there's plenty to go around, thanks largely to all of you. But the fastest way to make the numbers better is to stop feeding and sheltering people and their families. Nothing personal.
If you don't often look beyond established comfortable defaults, you might be surprised to learn just how far the world of frontend has moved away from React, and how big that gap continues to grow.
I'm 42 years old today. This is a personal post about where I am now, what's going on in my head, and 42 things I've learned (or at least, think I've learned).
The only thing React is better at than other front-end frameworks is being popular. So how long will that self-perpetuating cycle continue?
https://joshcollinsworth.com/blog/self-fulfilling-prophecy-of-react
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.