Resources that go beyond the official documentation. To learn Svelte or to find things to use in your own projects. If you have nice resources to add, please comment below.
Assuming you don't want to statically export a Sapper app, most of the parts to build a simple SSG for Svelte already exist. The only thing that is missing is the tooling ('only').
However, you don't need a lot to get things going: just a couple of rollup builds and a config file will get you most of the way there. Just some glue.
What follows is a bunch of rambling, half thought out thoughts on how I would probably go about this. Most of the stuff discussed here is stuff I've actually done or half done or am in the process of doing with varying degrees of success. It is something I'll be spending more time on in the future. There are other things I have done, want to do, or think would be a good idea that are not listed here as they don't fall into the scope of a simple SSG.
*Dislaimer: This is how I would build an SSG, this isn't the only way, but I like this approach as there are a bunch of compile-time optimisations you can per
Rubric: Software Engineering : Factual Claims : Defect Cost Increase : Pressman Ratios
See previous note on the IBM Systems Sciences Institute
Rubric: Software Engineering : Factual Claims : Defect Cost Increase : Pressman Ratios
Background: I have been researching quantity and quality of empirical evidence underlying claims in software engineering. What do we know, and how well-established is that? See in particular https://leanpub.com/leprechauns which concludes that the answer is in (too) many cases "not much, and poor".
This applies in particular to the "Defect Cost Increase" claim, which is poorly supported by evidence. The claim states that the longer a defect stays undiscovered after being introduced in a software system's artefacts, the more expensive it is to correct.
| // create context with no upfront defaultValue | |
| // without having to do undefined check all the time | |
| function createCtx<A>() { | |
| const ctx = React.createContext<A | undefined>(undefined) | |
| function useCtx() { | |
| const c = React.useContext(ctx) | |
| if (!c) throw new Error("useCtx must be inside a Provider with a value") | |
| return c | |
| } | |
| return [useCtx, ctx.Provider] as const |
now published as https://www.swyx.io/writing/svelte-amplify-datastore
Some thoughts on the challenges of the first 2 and possibly solving them with the latter 2.
In a world where API latency is unpredictable, the way to make user interactions seem instant is essentially by lying to the user. Most implementations of optimistic updates work like this:
I've been deceiving you all. I had you believe that Svelte was a UI framework — unlike React and Vue etc, because it shifts work out of the client and into the compiler, but a framework nonetheless.
But that's not exactly accurate. In my defense, I didn't realise it myself until very recently. But with Svelte 3 around the corner, it's time to come clean about what Svelte really is.
Svelte is a language.
Specifically, Svelte is an attempt to answer a question that many people have asked, and a few have answered: what would it look like if we had a language for describing reactive user interfaces?
A few projects that have answered this question:
2019 update: this essay has been updated on my personal site, together with a followup on how to get started
2020 update: I'm now writing a book with updated versions of all these essays and 35 other chapters!!!!
If there's a golden rule, it's this one, so I put it first. All the other rules are more or less elaborations of this rule #1.
You already know that you will never be done learning. But most people "learn in private", and lurk. They consume content without creating any themselves. Again, that's fine, but we're here to talk about being in the top quintile. What you do here is to have a habit of creating learning exhaust. Write blogs and tutorials and cheatsheets. Speak at meetups and conferences. Ask and answer things on Stackoverflow or Reddit. (Avoid the walled gardens like Slack and Discourse, they're not public). Make Youtube videos
| .DS_Store | |
| ._.DS_Store | |
| **/.DS_Store | |
| **/._.DS_Store | |
| .vscode | |
| .idea | |
| Thumbs.db | |
| # used to need to run git config --global core.excludesfile ~/.gitignore_global to set this but apparently no longer needed https://x.com/bate5a55/status/1840594630972191118 |
| // note - this was my rough working prototype, but still left some artifacts in the query params. | |
| // todo: also need to debounce the history pushes | |
| // see comments for production Gatsby and Svelte versions which delete nondefault keys in the query params | |
| import React from 'react' | |
| import queryString from "query-string" | |
| export const connectRouterState = defaultURLState => Component => props => { | |
| const { history, location } = props | |
| // note: do not nest objects in URL state |
