sveltekit-blog-mdx
react-18
sveltekit-blog-mdx | react-18 | |
---|---|---|
13 | 139 | |
262 | 5,173 | |
- | 0.0% | |
5.5 | 0.0 | |
3 months ago | almost 3 years ago | |
Svelte | ||
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.
sveltekit-blog-mdx
-
Which Headless CMS is cheaper and best for Sveltekit blog?
If its just a blog, and your not talking 1000s of entries, I'd recommend using https://github.com/rodneylab/sveltekit-blog-mdx
-
best way to build a personal blog post with svelte and markdown
SvelteKit plus mdsvex. There are quite a few examples out there, e.g. https://github.com/rodneylab/sveltekit-blog-mdx.
-
SvelteKit Accessibility Testing: Automated CI A11y Tests
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
In this post we see how you can modify a Svelte blog site to respond to some Vim keyboard shortcuts. We'll clone the SvelteKit Blog MDsveX Starter to get things going quicker. Then we will create a new component for responding to keyboard shortcuts and add that to the existing blog post template. If you are not yet familiar with SvelteKit, you can still follow along. If you don't like Svelte then the code can also be adapted for use on React or plain HTML/JavaScript sites. Why don't we press on?
-
SvelteKit hCaptcha Contact Form: Keeping Bots Away
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
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
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?
-
SvelteKit Blog SEO: Climb the Search Results Page
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
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.
react-18
-
Simulate global state tradeoffs in React concurrent mode
If you aren't sure why state tearing was a hot topic a few years ago, when React's concurrent mode was first discussed, this github discussion should help: https://github.com/reactwg/react-18/discussions/69.
Tanner Linsley had a great post on twitter that suggested that concurrent rendering was fundamentally at odds with fine-grained reactivity, so to better understand what he was talking about I decided to write this demo.
- A modest request: How do you fetch data in React 18+ WITHOUT a third party dependency?
-
The Sisyphean Quest for Web Performance
Image Source: https://github.com/reactwg/react-18/discussions/37
-
useAsyncState in react, no more unnecessary useEffects.
But it does since React 18.
-
Function props
See this post for more details and an example of an actual memory leak.
-
ELI5, why is ReactDOM.createRoot an improvement over ReactDOM.render?
From the React WG:
- I know my component is re-rendering because a console.log I put in the component is logging in the console. However when I use the inspector to see why it re-rendered, its saying that it didnt re-render. How is this possible?
- Timeout in event handler
-
The current state of CSS-in-JS + React
The React working group is officially advising against using runtime CSS-in-JS.
- Warning abt setting state of unmounted component
What are some alternatives?
storyblok-svelte-boilerplate - Code of the tutorial: Add a headless CMS with live preview to Svelte and Sapper in 5 minutes
Preact - ⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
svelte-materialify - A Material UI Design Component library for Svelte heavily inspired by vuetify.
htmx - </> htmx - high power tools for HTML
sveltekit-isr-cloudflare-workers - Incremental static regeneration for SvelteKit on Cloudflare Workers
petite-vue - 6kb subset of Vue optimized for progressive enhancement
lighthouse - Automated auditing, performance metrics, and best practices for the web.
react-query - 🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. [Moved to: https://github.com/TanStack/query]
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.
React - The library for web and native user interfaces.
svelte-material-ui - Svelte Material UI Components
zustand - 🐻 Bear necessities for state management in React