|26 days ago||8 days ago|
|BSD 3-clause "New" or "Revised" License||MIT License|
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
SvelteKit Accessibility Testing: Automated CI A11y Tests
2 projects | dev.to | 28 Mar 2022
We will run through using the SvelteKit MDsveX starter but if you already have a SvelteKit site, it might make more since for you to follow along but working on a test branch of your own site. If you are using the starter, let’s get going by cloning it locally:
Use Vim Keyboard Shortcuts on your Blog
2 projects | dev.to | 18 Oct 2021
SvelteKit hCaptcha Contact Form: Keeping Bots Away
1 project | dev.to | 13 Oct 2021
git clone https://github.com/rodneylab/sveltekit-blog-mdx.git sveltekit-hcaptcha-form cd sveltekit-hcaptcha-form pnpm install cp .env.EXAMPLE .env pnpm run dev
SvelteKit Dynamic Image Import: Add Images to Templates
1 project | dev.to | 20 Sep 2021
Using a script, if we decide we want to use AVIF images instead of WebP or change our image widths, it is pretty easy to regenerate the data files. Likewise if we decide to go for a plain, dominant colour placeholder instead of the low resolution one. You can see a full working example in the SvelteKit Blog MDsveX starter on the Rodney Lab GitHub page.
SvelteKit Image Plugin: Next-Gen Images in Svelte
3 projects | dev.to | 8 Sep 2021
We'll start with the SvelteKit MDsveX starter and add a responsive image to the home page. We will see how you can generate a low resolution placeholder as well as an alternative dominant colour placeholder. We will generate a WebP Next-Gen format image together with the original JPEG in different sizes so the image looks good on large retina displays without having to download a huge image for small mobile displays. Using the placeholders, we will eliminate image layout shift.
Anyone tried building JAM stack website using Svelte Kit?
6 projects | reddit.com/r/sveltejs | 4 Sep 2021
SvelteKit Blog SEO: Climb the Search Results Page
1 project | dev.to | 10 Aug 2021
In this post we took a look at how to customise the SEO meta generated by the MDsveX starter. It might seem a little abstract until you customise it for your own projects, so I would definitely say try using it as a next step. As always I am keen to get feedback and to hear how you have used it. You can clone the entire repo from the Rodney Lab Git Page.
SvelteKit PWA: Installable App with Offline Access
2 projects | dev.to | 5 Aug 2021
I have just added PWA functionality to the MDsveX starter. All you need to do is customise the website configuration file with with site's name and theme colours, then run a script to generate all the different icon sizes automatically. Here is exactly what you need to do in five simple steps. If you are looking for a more general SvelteKit Tutorial or how to get started with SvelteKit I have a couple of posts you will appreciate.
SvelteKit SEO: Search Engine Optimisation Metadata
2 projects | dev.to | 29 Jul 2021
We will return to SchemaOrg in more detail. To start though, let's take a look at more general SEO metadata and then Twitter metadata. If you are starting a new site clone the SvelteKit MDsveX starter and follow along. Alternatively you can follow along and paste the code snippets into your own project.
SvelteKit Tutorial: Build a Svelte MDsveX Blog Site
1 project | dev.to | 28 Jul 2021
git clone https://github.com/rodneylab/sveltekit-blog-mdx.git sveltekit-tutorial cd sveltekit-tutorial pnpm install cp .env.EXAMPLE .env pnpm run dev
What frustrates you in using Svelte?
9 projects | reddit.com/r/sveltejs | 18 Apr 2022
Learning tailwind, isn't writing css styling alongside your html bad practice? Shouldn't it stay separate?
1 project | reddit.com/r/webdev | 13 Jan 2022
For example, have a look at this button. It's a button for a Material design Svelte library. The styling is in a Sass (SCSS) file. The structure and any logic/script is in the .svelte file.
Best UI Libraries For Svelte
5 projects | reddit.com/r/Frontend | 4 Jan 2022
Build your own component library with Svelte
10 projects | dev.to | 9 Nov 2021
Due to this popularity, devs have introduced several awesome UI component frameworks/libraries like Svelte Material UI, Smelt, Svelte Materialify and Sveltestrap.
Alternatives to Svelte Material UI that will work with TypeScript?
1 project | reddit.com/r/sveltejs | 1 Jul 2021
I dont know why the https://github.com/TheComputerM/svelte-materialify decided to go on their own way instead of working with SMUI people. May be they are ahead in Typescript support?
What are some alternatives?
svelte-material-ui - Svelte Material UI Components
storyblok-svelte-boilerplate - Code of the tutorial: Add a headless CMS with live preview to Svelte and Sapper in 5 minutes
lighthouse - Automated auditing, performance metrics, and best practices for the web.
sveltekit-isr-cloudflare-workers - Incremental static regeneration for SvelteKit on Cloudflare Workers
carbon-components-svelte - Svelte implementation of the Carbon Design System
sveltekit-image-plugin - SvelteKit demo code for using vite-imagetools to add cached, responsive, Next-Gen images to a SvelteKit site with no cumulative layout shift.
sveltekit-seo - Demo site for SvelteKit SEO showing how to set up meta tags in a SvelteKit blog site.
svelte-steps - 🐾 A step component for svelte
svelte-file-dropzone - Svelte component for fileupload
sveltekit-starter - Sveltekit starter project created with sveltekit, typescript, tailwindcss, postcss, husky, and storybook. The project has the structure set up for the scaleable web application.
svelte-commerce - Svelte ecommerce - Headless, Authentication, Cart & Checkout, TailwindCSS, Server Rendered, Proxy + API Integrated, Animations, Stores, Lazy Loading, Loading Indicators, Carousel, Instant Search, Faceted Filters, Typescript, Open Source, MIT license. 1 command deploy to your own server, 1 click deploy to netlify.