|7 days ago||9 days ago|
|Apache License 2.0||BSD 3-clause "New" or "Revised" 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.
Performance Budgets (Budget.json)
1 project | news.ycombinator.com | 21 Jan 2022
Suggestion: You probably want to start with lighthouse or similar tools, and first identify the major bottlenecks. You seem to handwave that away, but I'm not sure, if you have actually analyzed where your problem is.
Avoid unnecessary re-renderings of React.js sites
1 project | dev.to | 16 Jan 2022
I will add one of the most famous tools to measure website performance for now. This is LightHouse: https://developers.google.com/web/tools/lighthouse .
Getting to Know Web Vitals
2 projects | dev.to | 11 Jan 2022
I can gain access to the Web Vitals in a few different places, but currently I just want the value output so I'm using the reportWebVitals function that is inherit in NextJS and logging them out for quick access, for more detail and suggestions I can run a Lighthouse report.
Web vitals automation using github actions
7 projects | dev.to | 8 Jan 2022
Google Chrome is directly shipped with lighthouse, an open-source tool used to audit your website in a controlled environment within the browser.This tool generated web vital scores including first contentful paint, speed index, time to interact and other criteria out of 100 as PWA's7 projects | dev.to | 8 Jan 2022
Light house allows to maintain a budget file that specifies requirements of each web vitals measurement such as first-contentful-pain and cumulative-layout-shift. You can also specify the maximum sizes for images , script loads and third-party requests count.More information on Budgets here.
Any alternative to piracy.moe?
2 projects | reddit.com/r/animepiracy | 5 Jan 2022
If you want to now the details (on my pc using lighthouse) I increased our performance score for our heaviest site (Anime library) by:
A/B testing with the JAMstack
6 projects | dev.to | 28 Dec 2021
In some scenarios, Lighthouse performance score can drop by around 25 points (up to you to determine if it's significant or not).
1 project | reddit.com/r/TechSEO | 25 Dec 2021
Check out "GitHub - GoogleChrome/lighthouse: Automated auditing, performance metrics, and best practices for the web." https://github.com/GoogleChrome/lighthouse
How to improve the performance of your website
1 project | dev.to | 21 Dec 2021
Use Lighthouse to check your website's performance. You will see the same exact information in the Performance report.
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
SvelteKit Blog Starter: Climate MDsveX Starter for Svelte
2 projects | dev.to | 27 Jul 2021
If you are completely new to SvelteKit, it might be worth skimming through my recent post on Getting Started with SvelteKit, which will give you a head-start. That said I have built the starter to help you get up to speed quicker if you are still discovering SvelteKit. In this post I outline some key features. If you're more of a hands on person, just crack open the Sveltekit Blog Starter repo and start playing!
What are some alternatives?
svelte-materialify - A Material UI Design Component library for Svelte heavily inspired by vuetify.
Vue Storefront - The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total coverage is just a matter of time. The API approach also allows you to merge VSF with any third-party tool like CMS, payment gateways or analytics. Newest updates: https://blog.vuestorefront.io. Always Open Source, MIT license.
storyblok-svelte-boilerplate - Code of the tutorial: Add a headless CMS with live preview to Svelte and Sapper in 5 minutes
Turbolinks - Turbolinks makes navigating your web application faster
svelte-material-ui - Svelte Material UI Components
webpack-bundle-analyzer - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
lighthouse-ci - Automate running Lighthouse for every commit, viewing the changes, and preventing regressions
budibase - Budibase is an open-source low code platform that helps you build internal tools in minutes 🚀
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
axe-core - Accessibility engine for automated Web UI testing