From 0b28796fe228cdb3492896f889a6f521365e7486 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 15 Apr 2019 13:58:55 -0400 Subject: [PATCH 1/9] placeholder for setting-up-your-editor blog post --- .../blog/2019-04-15-setting-up-your-editor.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 site/content/blog/2019-04-15-setting-up-your-editor.md diff --git a/site/content/blog/2019-04-15-setting-up-your-editor.md b/site/content/blog/2019-04-15-setting-up-your-editor.md new file mode 100644 index 0000000000..4012901800 --- /dev/null +++ b/site/content/blog/2019-04-15-setting-up-your-editor.md @@ -0,0 +1,13 @@ +--- +title: Setting up your editor +description: Instructions for configuring linting and syntax highlighting +pubdate: 2019-04-15 +author: Rich Harris +authorURL: https://twitter.com/Rich_Harris +--- + +TODO: + +* eslint-plugin-svelte3 +* svelte-vscode +* associating .svelte files with HTML in VSCode, Sublime, Atom, etc etc etc \ No newline at end of file From e4ed7183d27fc646ae532cb291439f50be4a19f9 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 15 Apr 2019 14:01:41 -0400 Subject: [PATCH 2/9] placeholder for svelte-for-new-developers blog post --- .../content/blog/2019-04-16-svelte-for-new-developers.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 site/content/blog/2019-04-16-svelte-for-new-developers.md diff --git a/site/content/blog/2019-04-16-svelte-for-new-developers.md b/site/content/blog/2019-04-16-svelte-for-new-developers.md new file mode 100644 index 0000000000..f7700bf4d3 --- /dev/null +++ b/site/content/blog/2019-04-16-svelte-for-new-developers.md @@ -0,0 +1,9 @@ +--- +title: Svelte for new developers +description: Never used Node.js or the command line? No problem +pubdate: 2019-04-16 +author: Rich Harris +authorURL: https://twitter.com/Rich_Harris +--- + +TODO walk through installing Node.js and git and using Terminal.app (or whatever the Windows equivalent is) to clone a project template and start developing \ No newline at end of file From c7c8e19ec1fe044f16c5ebc6633b14a04e0ad363 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 18 Apr 2019 10:28:45 -0400 Subject: [PATCH 3/9] fix theme-color --- site/src/template.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/template.html b/site/src/template.html index 012583ed58..1e63a0a502 100644 --- a/site/src/template.html +++ b/site/src/template.html @@ -3,7 +3,7 @@ - + %sapper.base% From 0b706e24cb8bbb7cf46a8d80205755322e42f6f8 Mon Sep 17 00:00:00 2001 From: Gabswim Date: Fri, 19 Apr 2019 21:20:03 -0400 Subject: [PATCH 4/9] typo in tutorial --- .../02-reactivity/04-updating-arrays-and-objects/text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md b/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md index c5978e8d7f..0a78c7ca32 100644 --- a/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md +++ b/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md @@ -17,7 +17,7 @@ But there's a more *idiomatic* solution: ```js function addNumber() { - numbers = [...numbers, numbers.length + 1;] + numbers = [...numbers, numbers.length + 1]; } ``` From 76505051a48659015b0dce2bb66d31f4c39169b1 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Sat, 20 Apr 2019 07:29:02 -0400 Subject: [PATCH 5/9] site: fix handling of non-existent blog posts (#2439) --- site/src/routes/blog/[slug].json.js | 3 +++ site/src/routes/blog/[slug].svelte | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/site/src/routes/blog/[slug].json.js b/site/src/routes/blog/[slug].json.js index db2d3fc680..ebc191f2da 100644 --- a/site/src/routes/blog/[slug].json.js +++ b/site/src/routes/blog/[slug].json.js @@ -16,5 +16,8 @@ export function get(req, res) { 'Cache-Control': `max-age=${5 * 60 * 1e3}` // 5 minutes }); res.end(lookup.get(req.params.slug)); + } else { + res.statusCode = 404; + res.end(JSON.stringify({ message: 'not found' })); } } \ No newline at end of file diff --git a/site/src/routes/blog/[slug].svelte b/site/src/routes/blog/[slug].svelte index 8b1a1d115c..5da9816f96 100644 --- a/site/src/routes/blog/[slug].svelte +++ b/site/src/routes/blog/[slug].svelte @@ -1,7 +1,7 @@ From 759db36e30dce8794a49d795fd743152039fa9c5 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sat, 20 Apr 2019 09:15:04 -0400 Subject: [PATCH 6/9] add mechanism for draft blog posts --- ...016-11-26-frameworks-without-the-framework.md | 1 - .../2017-08-07-the-easiest-way-to-get-started.md | 1 - .../2017-09-06-the-zen-of-just-writing-css.md | 1 - ...sapper-towards-the-ideal-web-app-framework.md | 1 - site/content/blog/2018-04-18-version-2.md | 1 - site/content/blog/2018-12-26-svelte-css-in-js.md | 1 - .../2018-12-27-virtual-dom-is-pure-overhead.md | 1 - .../blog/2019-01-31-svelte-on-the-changelog.md | 1 - .../blog/2019-04-16-svelte-for-new-developers.md | 2 +- site/src/routes/blog/_posts.js | 12 +++++++++--- site/src/routes/blog/index.json.js | 16 ++++++++++------ 11 files changed, 20 insertions(+), 18 deletions(-) diff --git a/site/content/blog/2016-11-26-frameworks-without-the-framework.md b/site/content/blog/2016-11-26-frameworks-without-the-framework.md index 9c663a01ba..933b0fbc48 100644 --- a/site/content/blog/2016-11-26-frameworks-without-the-framework.md +++ b/site/content/blog/2016-11-26-frameworks-without-the-framework.md @@ -1,7 +1,6 @@ --- title: Frameworks without the framework: why didn't we think of this sooner? description: You can't write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you. -pubdate: 2016-11-26 author: Rich Harris authorURL: https://twitter.com/Rich_Harris --- diff --git a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md b/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md index 4dec8e66fb..b29c3cb5c2 100644 --- a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md +++ b/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md @@ -1,7 +1,6 @@ --- title: The easiest way to get started with Svelte description: This'll only take a minute. -pubdate: 2017-08-07 author: Rich Harris authorURL: https://twitter.com/Rich_Harris --- diff --git a/site/content/blog/2017-09-06-the-zen-of-just-writing-css.md b/site/content/blog/2017-09-06-the-zen-of-just-writing-css.md index c89935c104..4ea56bc633 100644 --- a/site/content/blog/2017-09-06-the-zen-of-just-writing-css.md +++ b/site/content/blog/2017-09-06-the-zen-of-just-writing-css.md @@ -1,7 +1,6 @@ --- title: The zen of Just Writing CSS description: I would say this is the future, but we're already doing it. -pubdate: 2017-09-06 author: Rich Harris authorURL: https://twitter.com/Rich_Harris --- diff --git a/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md b/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md index 614f266136..ff986a2258 100644 --- a/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md +++ b/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md @@ -1,7 +1,6 @@ --- title: Sapper: Towards the ideal web app framework description: Taking the next-plus-one step -pubdate: 2017-12-31 author: Rich Harris authorURL: https://twitter.com/Rich_Harris --- diff --git a/site/content/blog/2018-04-18-version-2.md b/site/content/blog/2018-04-18-version-2.md index 295efbbd11..7e5441f090 100644 --- a/site/content/blog/2018-04-18-version-2.md +++ b/site/content/blog/2018-04-18-version-2.md @@ -1,7 +1,6 @@ --- title: Svelte v2 is out! description: Here's what you need to know -pubdate: 2018-04-18 author: Rich Harris authorURL: https://twitter.com/Rich_Harris --- diff --git a/site/content/blog/2018-12-26-svelte-css-in-js.md b/site/content/blog/2018-12-26-svelte-css-in-js.md index 40bbfe8bd1..dccfcb4a17 100644 --- a/site/content/blog/2018-12-26-svelte-css-in-js.md +++ b/site/content/blog/2018-12-26-svelte-css-in-js.md @@ -1,7 +1,6 @@ --- title: Using CSS-in-JS with Svelte description: You don't need to, but you can -pubdate: 2018-12-26 author: Rich Harris authorURL: https://twitter.com/Rich_Harris --- diff --git a/site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md b/site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md index f70bda43d5..d71652fe8d 100644 --- a/site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md +++ b/site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md @@ -1,7 +1,6 @@ --- title: Virtual DOM is pure overhead description: Let's retire the 'virtual DOM is fast' myth once and for all -pubdate: 2018-12-27 author: Rich Harris authorURL: https://twitter.com/Rich_Harris --- diff --git a/site/content/blog/2019-01-31-svelte-on-the-changelog.md b/site/content/blog/2019-01-31-svelte-on-the-changelog.md index 79ad985bf9..936c50240e 100644 --- a/site/content/blog/2019-01-31-svelte-on-the-changelog.md +++ b/site/content/blog/2019-01-31-svelte-on-the-changelog.md @@ -1,7 +1,6 @@ --- title: Svelte on The Changelog description: Listen to the interview here -pubdate: 2019-01-31 author: Rich Harris authorURL: https://twitter.com/Rich_Harris --- diff --git a/site/content/blog/2019-04-16-svelte-for-new-developers.md b/site/content/blog/2019-04-16-svelte-for-new-developers.md index f7700bf4d3..9018de14a2 100644 --- a/site/content/blog/2019-04-16-svelte-for-new-developers.md +++ b/site/content/blog/2019-04-16-svelte-for-new-developers.md @@ -1,9 +1,9 @@ --- title: Svelte for new developers description: Never used Node.js or the command line? No problem -pubdate: 2019-04-16 author: Rich Harris authorURL: https://twitter.com/Rich_Harris +draft: true --- TODO walk through installing Node.js and git and using Terminal.app (or whatever the Windows equivalent is) to clone a project template and start developing \ No newline at end of file diff --git a/site/src/routes/blog/_posts.js b/site/src/routes/blog/_posts.js index fc2bed469a..7a99011c95 100644 --- a/site/src/routes/blog/_posts.js +++ b/site/src/routes/blog/_posts.js @@ -5,17 +5,23 @@ import marked from 'marked'; import PrismJS from 'prismjs'; import 'prismjs/components/prism-bash'; -export default function() { +export default function get_posts() { return fs .readdirSync('content/blog') .map(file => { if (path.extname(file) !== '.md') return; + const match = /^(\d+-\d+-\d+)-(.+)\.md$/.exec(file); + if (!match) throw new Error(`Invalid filename '${file}'`); + + const [, pubdate, slug] = match; + const markdown = fs.readFileSync(`content/blog/${file}`, 'utf-8'); const { content, metadata } = extract_frontmatter(markdown); - const date = new Date(`${metadata.pubdate} EDT`); // cheeky hack + const date = new Date(`${pubdate} EDT`); // cheeky hack + metadata.pubdate = pubdate; metadata.dateString = date.toDateString(); const renderer = new marked.Renderer(); @@ -41,7 +47,7 @@ export default function() { return { html, metadata, - slug: file.replace(/^[\d-]+/, '').replace(/\.md$/, ''), + slug }; }) .sort((a, b) => a.metadata.pubdate < b.metadata.pubdate ? 1 : -1); diff --git a/site/src/routes/blog/index.json.js b/site/src/routes/blog/index.json.js index ed5076c95c..b2609505a4 100644 --- a/site/src/routes/blog/index.json.js +++ b/site/src/routes/blog/index.json.js @@ -4,12 +4,16 @@ let json; export function get(req, res) { if (!json || process.env.NODE_ENV !== 'production') { - json = JSON.stringify(get_posts().map(post => { - return { - slug: post.slug, - metadata: post.metadata - }; - })); + const posts = get_posts() + .filter(post => !post.metadata.draft) + .map(post => { + return { + slug: post.slug, + metadata: post.metadata + }; + }); + + json = JSON.stringify(posts); } res.set({ From fae3757eff42c68e60e7daa5723d028c31072bef Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sat, 20 Apr 2019 09:18:20 -0400 Subject: [PATCH 7/9] make placeholder post presentable --- site/content/blog/2019-04-16-svelte-for-new-developers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/blog/2019-04-16-svelte-for-new-developers.md b/site/content/blog/2019-04-16-svelte-for-new-developers.md index 9018de14a2..54d5a2b7ce 100644 --- a/site/content/blog/2019-04-16-svelte-for-new-developers.md +++ b/site/content/blog/2019-04-16-svelte-for-new-developers.md @@ -6,4 +6,4 @@ authorURL: https://twitter.com/Rich_Harris draft: true --- -TODO walk through installing Node.js and git and using Terminal.app (or whatever the Windows equivalent is) to clone a project template and start developing \ No newline at end of file +*Coming soon* This blog post will walk you through installing Node.js and git and using Terminal.app to clone a project template and start developing with Svelte \ No newline at end of file From bbef9918e58ae5db778dd19208c3a4af464a4690 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sat, 20 Apr 2019 09:22:49 -0400 Subject: [PATCH 8/9] mark post as draft --- site/content/blog/2019-04-15-setting-up-your-editor.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/blog/2019-04-15-setting-up-your-editor.md b/site/content/blog/2019-04-15-setting-up-your-editor.md index 4012901800..c157682e44 100644 --- a/site/content/blog/2019-04-15-setting-up-your-editor.md +++ b/site/content/blog/2019-04-15-setting-up-your-editor.md @@ -1,12 +1,12 @@ --- title: Setting up your editor description: Instructions for configuring linting and syntax highlighting -pubdate: 2019-04-15 author: Rich Harris authorURL: https://twitter.com/Rich_Harris +draft: true --- -TODO: +*Coming soon* This post will walk you through setting up your editor so that recognises Svelte files: * eslint-plugin-svelte3 * svelte-vscode From 099e3d7eed35aefc220454f276008c5d0d4436b2 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sat, 20 Apr 2019 16:14:26 -0400 Subject: [PATCH 9/9] add draft write-less-code blog post --- .../blog/2018-12-26-svelte-css-in-js.md | 12 +- .../blog/2019-04-20-write-less-code.md | 165 ++++++++++++++++++ site/src/routes/blog/[slug].svelte | 21 ++- 3 files changed, 188 insertions(+), 10 deletions(-) create mode 100644 site/content/blog/2019-04-20-write-less-code.md diff --git a/site/content/blog/2018-12-26-svelte-css-in-js.md b/site/content/blog/2018-12-26-svelte-css-in-js.md index dccfcb4a17..5e8e6ed71b 100644 --- a/site/content/blog/2018-12-26-svelte-css-in-js.md +++ b/site/content/blog/2018-12-26-svelte-css-in-js.md @@ -16,11 +16,13 @@ But Svelte's style handling does have some limitations. It's too difficult to sh Here, we're using [Emotion](https://emotion.sh) to generate scoped class names that can be used across multiple components: - +
+ +
It's important to note that most CSS-in-JS libraries have a runtime library, and many don't support statically extracting styles out into a separate .css file at build time (which is essential for the best performance). You should therefore only use CSS-in-JS if it's necessary for your application! diff --git a/site/content/blog/2019-04-20-write-less-code.md b/site/content/blog/2019-04-20-write-less-code.md new file mode 100644 index 0000000000..226909259c --- /dev/null +++ b/site/content/blog/2019-04-20-write-less-code.md @@ -0,0 +1,165 @@ +--- +title: Write less code +description: The most important metric you're not paying attention to +author: Rich Harris +authorURL: https://twitter.com/Rich_Harris +draft: true +--- + +All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be. + +Writing more code also takes more time, leaving less time for other things like optimisation, nice-to-have features, or being outdoors instead of hunched over a laptop. + +In fact it's widely acknowledged that [project development time](https://blog.codinghorror.com/diseconomies-of-scale-and-lines-of-code/) and [bug count](https://www.mayerdan.com/ruby/2012/11/11/bugs-per-line-of-code-ratio) grow *quadratically*, not linearly, with the size of a codebase. That tracks with our intuitions: a ten-line pull request will get a level of scrutiny rarely applied to a 100-line one. And once a given module becomes too big to fit on a single screen, the cognitive effort required to understand it increases significantly. We compensate by refactoring and adding comments — activities that almost always result in *more* code. It's a vicious cycle. + +Yet while we obsess — rightly! — over performance numbers, bundle size and anything else we can measure, we rarely pay attention to the amount of code we're writing. + + +## Readability is important + +I'm certainly not claiming that we should use clever tricks to scrunch our code into the most compact form possible at the expense of readability. Nor am I claiming that reducing *lines* of code is necessarily a worthwhile goal, since it encourages turning readable code like this... + +```js +for (let i = 0; i <= 100; i += 1) { + if (i % 2 === 0) { + console.log(`${i} is even`); + } +} +``` + +...into something much harder to parse: + +```js +for (let i = 0; i <= 100; i += 1) if (i % 2 === 0) console.log(`${i} is even`); +``` + +Instead, I'm claiming that we should favour languages and patterns that allow us to naturally write less code. + + +## Yes, I'm talking about Svelte + +Reducing the amount of code you have to write is an explicit goal of Svelte. To illustrate, let's look at a very simple component implemented in React, Vue and Svelte. First, the Svelte version: + +
+ +
+ +How would we build this in React? It would probably look something like this: + +```js +import React, { useState } from 'react'; + +export default () => { + const [a, setA] = useState(1); + const [b, setB] = useState(2); + + function handleInputA(event) { + setA(+event.target.value); + } + + function handleInputB(event) { + setB(+event.target.value); + } + + return ( +
+ + + +

{a} + {b} = {a + b}

+
+ ); +}; +``` + +Here's an equivalent component in Vue: + +```html + + + +``` + + + +In other words, it takes 442 characters in React, and 263 characters in Vue, to achieve something that takes 145 characters in Svelte. The React version is literally three times larger! + +It's unusual for the difference to be *quite* so obvious — in my experience, a React component is typically around 40% larger than its Svelte equivalent. Let's look at the features of Svelte's design that enable you to express ideas more concisely: + + +### Top-level elements + +In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element — in React's case, trying to return two top-level elements from a component function would result in syntactically invalid code. (You can use a fragment — `<>` — instead of a `
`, but it's the same basic idea). + +In Vue, your markup must be wrapped in a `