TIL: How Includes, Extends work with TS Config (with SvelteKit) I have recently been creating an app with SvelteKit and Typescript. I noticed all of a sudden Typescript and VS Code not playing nice with each other. It wouldn’t show me the types of variables that I knew it was showing me before. So I started to investigate and work out what was wrong. I was getting locals with a type any: ...
In this post, we will go over how we can auto-sort our imports in our svelte files. To do this we will be using eslint and the eslint-import-plugin plugin. If you’re anything like me you like have ordered imports, rather than random imports that can be hard to make sense of. In Python we have isort in golang we have goimports. In JavaScript we can use eslint with the above plugin. ...
A lot of people, I included, are using Gatsby to build their own blogs. One of the things I wanted to add to my blog was a table of contents (ToC) 📝. A ToC will show you all the headings of an article and when you click on a heading it’ll take you directly to that heading. It’s a nice little feature to have on your blog, which makes it easier for users to navigate and find the information they are looking for. ...
In this article, we will look at how we can add an “edit post” button, to your Gatsby blog. When this button is clicked it will take the user to your markdown file, on github/gitlab that was used to generate the blog post they are currently viewing. Setup Before we add the edit button to a Gatsby blog, let’s set up a simple Gatsby site using the Gatsby blog starter. You can skip this step and add the button to an existing site. ...
Recently I started to re-design my website, I decided to use this as an opportunity to learn some new technologies such as Gatsby, Tailwind. I also decided to try using Storybook. For this said project I used MDX to create my Storybook stories. In this article, I will show you how you can create Storybooks stories, for a Gatsby project with TailwindCSS, Typescript using MDX. You can find an example project using this here. ...
In this article, I will explain how you can use typescript aliases with Babel or TSPath. If you have been using TypeScript/JavaScript (TS/JS) and have a nested folder structure, you may well be used to seeing imports like so (using es6 style imports). This is sometimes referred to as path hell and is a very common occurrence as your project grows in size. import moduleA from "../../../moduleA"; import moduleB from ". ...
Recently I started using TypeScript (TS) with React Native. Now I won’t be going over the benefits of typescript in this article there are plenty for other articles that will explain the benefits (and drawbacks). TS is a superset of JavaScript (JS) so anything JS can do TS can do (and more). One of the main advantages of TS is it’s strict type checking. JS is weakly typed which means variable and parameters can be of any type. ...