├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── TODO.md
├── bin
    └── blog.js
├── client-js
    └── index.js
├── components
    ├── article-image.js
    ├── article-wrap.js
    ├── back-to-base.js
    ├── card.js
    ├── code.js
    ├── cv.js
    ├── flex.js
    ├── inline-code.js
    ├── link.js
    ├── list-item.js
    ├── list.js
    ├── mdx.js
    ├── paragraph.js
    ├── quote.js
    ├── social-icons.js
    ├── spacer.js
    ├── title.js
    ├── toggle-theme.js
    └── wrap.js
├── fela.config.js
├── next.config.js
├── now.json
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── _document.js
    ├── _error.js
    ├── blog
    │   ├── 2009-02-01-removing-from-node-list.md
    │   ├── 2013-02-06-stubbing-window-location-javascript.md
    │   ├── 2013-02-22-best-practice-testing-javascript-event-handlers.md
    │   ├── 2014-04-03-sortable-list-component-react-js.md
    │   ├── 2014-04-24-truly-reactive-sortable-component.md
    │   ├── 2020-01-26-mx-518.md
    │   ├── 2020-02-02-personal-website-2020-tech-stack.md
    │   ├── 2020-02-16-github-actions-preview-deploys.md
    │   ├── 2020-03-12-nextjs-without-client-side-react.md
    │   ├── 2020-04-06-flash-of-unstyled-dark-theme.md
    │   ├── 2021-11-23-minimal-git-config-mac-m1-zsh.md
    │   ├── 2024-04-23-mapped-indexed-access-types-typescript.md
    │   └── 2024-06-11-improved-control-flow-analysis-typescript-5.5.md
    ├── cv.js
    └── index.js
├── public
    ├── client-side-bundle.jpg
    ├── favicon.ico
    ├── ga-10-years.jpg
    ├── gatsby-dark-theme-lighthouse.jpg
    ├── github-deploy-action.png
    ├── hello-world-react.jpg
    ├── instant.js
    ├── mx518.jpg
    ├── netflix-react-ssr.jpg
    ├── photo.jpg
    ├── serverless-ssr.jpg
    └── vintage-webcloud-2010.jpg
├── test
    └── snapshots.js
└── theme.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | # Based on https://github.com/facebook/react/blob/master/.editorconfig
 3 | root = true
 4 | 
 5 | [*]
 6 | charset = utf-8
 7 | end_of_line = lf
 8 | indent_size = 2
 9 | indent_style = space
10 | insert_final_newline = true
11 | max_line_length = 80
12 | trim_trailing_whitespace = true
13 | 
14 | [*.md]
15 | max_line_length = 0
16 | trim_trailing_whitespace = false
17 | indent_size = 2
18 | indent_style = space
19 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "node": true,
 5 |     "es6": true
 6 |   },
 7 |   "extends": [
 8 |     "eslint:recommended",
 9 |     "plugin:react/recommended"
10 |   ],
11 |   "parserOptions": {
12 |     "ecmaVersion": 2018,
13 |     "sourceType": "module"
14 |   },
15 |   rules: {
16 |     "react/prop-types": 0
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | .env*
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # don't use yarn
28 | yarn.lock
29 | 
30 | # autogenerated blog manifest
31 | blog-manifest.json
32 | 
33 | # Lighthouse CI
34 | .lighthouseci
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # webcloud
 2 | 
 3 | This is the source code for my personal website, blog & playground.
 4 | You can read about what/why/how/where the site was built in [this blog post](https://webcloud.se/blog/2020-02-02-personal-website-2020-tech-stack/)
 5 | 
 6 | ## TLDR
 7 | 
 8 | Here's a shortlist of tools, libraries and services used to build this website.
 9 | 
10 | ### Development
11 | 
12 | - [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/)
13 | - [React](https://reactjs.org/) - Server side only (SSR)
14 | - [Next.js](https://nextjs.org/) - Static site generation (SSG)
15 | - [MDX](https://mdxjs.com/) - Markdown + JSX
16 | - [date-fns](https://date-fns.org/) - JavaScript date utility library
17 | - [Fela](http://fela.js.org/) - State-driven atomic CSS styling in JavaScript
18 | - [UglifyJS](http://lisperator.net/uglifyjs/) - Minifier for client-side ES5 vanilla JavaScript code
19 | - [Prism](https://prismjs.com/) & [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) - Syntax highlighting for code examples
20 | - [instant.page](https://instant.page/) - Uses just-in-time preloading — it preloads a page right before a user clicks on it.
21 | 
22 | ### Deployment
23 | 
24 | - [Zeit Now](https://zeit.co/home) - Zero config static site deployments, reverse proxy & CDN
25 | 
26 | ### Misc
27 | 
28 | - [Simple Analytics](https://simpleanalytics.com/) - Like Google Analytics, but simple
29 | 


--------------------------------------------------------------------------------
/TODO.md:
--------------------------------------------------------------------------------
 1 | ## Backlog
 2 | 
 3 | - Create a "tweet" component to replace screenshots from twitter.
 4 | - Check 404 hits in analytics and create approriate redirects.
 5 | - Send PR/Branch information to Percy and Lighthouse via Github Actions
 6 |   - Currently not sent in deployment_status event(?)
 7 |   - If I figure out how, update the GH actions preview deploy blog post
 8 | - Add "estimated article read time" feature
 9 | - Style Guide Page + Add Visual Regression Test /ui
10 | - Curated Link List
11 | - RSS Feed for articles and link list
12 | - Add "Projects" section
13 |   - web audio ir mixer
14 |   - Lizard
15 |   - Jquery Collapse
16 | - Add "Experiments" section
17 |   - Assortment
18 | 


--------------------------------------------------------------------------------
/bin/blog.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | const glob = require("glob");
 3 | 
 4 | const getDateFromFileName = name => {
 5 |   const [year, month, day] = name.split("-");
 6 |   return `${year}-${month}-${day}`;
 7 | };
 8 | 
 9 | // Searches the file for the first occurance of a markdown header
10 | const getTitleFromPost = filePath => {
11 |   const file = fs.readFileSync(filePath, "utf-8");
12 |   return file
13 |     .split("\n")
14 |     .find(str => str.match(/^#/g))
15 |     .split("# ")[1];
16 | };
17 | 
18 | const listPosts = () => {
19 |   return glob
20 |     .sync("./pages/blog/*.md", {})
21 |     .map(path => ({
22 |       path,
23 |       title: path
24 |         .split("/")
25 |         .slice(-1)[0]
26 |         .slice(0, -3)
27 |     }))
28 |     .map(({ path, title }) => ({
29 |       title: getTitleFromPost(path),
30 |       date: getDateFromFileName(title),
31 |       path: `/blog/${title}`
32 |     }))
33 |     .sort((a, b) => {
34 |       return parseInt(a.date.replace(/\-/g,"")) - parseInt(b.date.replace(/\-/g,""))
35 |     });
36 | };
37 | 
38 | const output = listPosts().reverse();
39 | fs.writeFileSync("./blog-manifest.json", JSON.stringify(output, null, 2));
40 | 


--------------------------------------------------------------------------------
/client-js/index.js:
--------------------------------------------------------------------------------
 1 | (function(window, document) {
 2 |   // Note: Use ES5 compatible JS here
 3 |   var root = document.documentElement.style;
 4 |   var matcher = window.matchMedia("(prefers-color-scheme: dark)");
 5 |   var light = "light";
 6 |   var dark = "dark";
 7 |   var userPreference = matcher.matches ? dark : light;
 8 |   var button;
 9 |   var currentTheme;
10 | 
11 |   try {
12 |     currentTheme =
13 |       window.localStorage.getItem("current-theme") || userPreference;
14 |   } catch (e) {
15 |     console.warn("could not read theme from local storage");
16 |   }
17 | 
18 |   if (currentTheme) {
19 |     setTheme(currentTheme);
20 |   }
21 | 
22 |   /* Open all <details> elements for print/PDF export */
23 |   window.addEventListener("beforeprint", function() {
24 |     var details = document.querySelectorAll("details");
25 |     details.forEach(function(detail) { detail.open = true })
26 |   });
27 | 
28 |   document.addEventListener("DOMContentLoaded", function() {
29 |     button = document.querySelector("#toggle-theme");
30 |     setButtonLabel();
31 |     button.style.display = "block";
32 |     button.addEventListener("click", buttonClick);
33 |   });
34 | 
35 |   matcher.addListener(function() {
36 |     setTheme(matcher.matches ? dark : light);
37 |     setButtonLabel();
38 |   });
39 | 
40 |   function setTheme(themeName) {
41 |     // eslint-disable-next-line
42 |     var theme = THEMES[themeName];
43 |     try {
44 |       window.localStorage.setItem("current-theme", themeName);
45 |     } catch (e) {
46 |       console.warn("could not persist theme choice");
47 |     }
48 |     currentTheme = themeName;
49 |     Object.keys(theme).forEach(function(key) {
50 |       root.setProperty("--" + key, theme[key]);
51 |     });
52 |   }
53 | 
54 |   function setButtonLabel() {
55 |     button.innerHTML = currentTheme === dark ? light : dark;
56 |   }
57 | 
58 |   function buttonClick() {
59 |     var theme = currentTheme === light ? dark : light;
60 |     setTheme(theme);
61 |     setButtonLabel(theme);
62 |   }
63 | })(window, document);
64 | 


--------------------------------------------------------------------------------
/components/article-image.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { createComponentWithProxy } from "react-fela";
 3 | 
 4 | export const Span = createComponentWithProxy({}, "span");
 5 | 
 6 | export const Image = createComponentWithProxy(
 7 |   {
 8 |     display: "block",
 9 |     width: "calc(100% + 32px)",
10 |     position: "relative",
11 |     left: "-16px",
12 |     boxShadow: "var(--shadow)"
13 |   },
14 |   "img"
15 | );
16 | 
17 | export const ArticleImage = ({ ...props }) => (
18 |   // Span required here because wrapping a <div> in <a> causes issues with
19 |   // Chrome/Lightouse acessibility audits
20 |   <Span
21 |     extend={{
22 |       margin: "24px 0",
23 |       display: "block",
24 |       ":after": {
25 |         top: "12px",
26 |         position: "relative",
27 |         content: "attr(data-title)",
28 |         fontSize: "12px",
29 |         display: "block",
30 |         lineHeight: "18px",
31 |         color: "var(--color-fg-alt)",
32 |         fontStyle: "italic"
33 |       }
34 |     }}
35 |     data-title={props.title}
36 |   >
37 |     <Image loading="lazy" {...props} />
38 |   </Span>
39 | );
40 | 


--------------------------------------------------------------------------------
/components/article-wrap.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import Head from "next/head";
  3 | import { useRouter } from "next/router";
  4 | import { Wrap } from "./wrap";
  5 | import { Link } from "./link";
  6 | import { Flex } from "./flex";
  7 | import { Card } from "./card";
  8 | import { Spacer } from "./spacer";
  9 | import { Paragraph } from "./paragraph";
 10 | import { Twitter, Bluesky } from "../components/social-icons";
 11 | import { Title } from "./title";
 12 | import { BackToBase } from "./back-to-base";
 13 | import { createComponentWithProxy } from "react-fela";
 14 | import { SocialLink } from "../components/cv";
 15 | 
 16 | const Avatar = createComponentWithProxy(
 17 |   {
 18 |     width: "72px",
 19 |     height: "72px",
 20 |     "@media (min-width: 480px)": {
 21 |       width: "96px",
 22 |       height: "96px"
 23 |     },
 24 |     borderRadius: "50%",
 25 |     boxShadow: "var(--shadow)"
 26 |   },
 27 |   "img"
 28 | );
 29 | 
 30 | const TWEET = "https://twitter.com/intent/tweet?text=";
 31 | const BLUESKY = "https://bsky.app/intent/compose?text=";
 32 | 
 33 | export const ArticleWrap = ({ title, children, nextPost, prevPost }) => {
 34 |   const router = useRouter();
 35 |   return (
 36 |     <Wrap>
 37 |       <Head>
 38 |         <title>{title} - webcloud</title>
 39 |       </Head>
 40 |       <BackToBase />
 41 |       <Flex as="main">{children}</Flex>
 42 |       <Spacer size={6} />
 43 | 
 44 |       <Flex
 45 |         extend={{
 46 |           flexDirection: "row",
 47 |           gap: "32px"
 48 |         }}
 49 |       >
 50 |         <SocialLink
 51 |           target="_blank"
 52 |           rel="noopener"
 53 |           href={`${TWEET}${title} - https://webcloud.se${router.pathname}/`}
 54 |         >
 55 |           <div>
 56 |             <Twitter />
 57 |           </div>
 58 |           <Spacer size={1} />
 59 |           <span>Share on Twitter</span>
 60 |         </SocialLink>
 61 |         <SocialLink
 62 |           target="_blank"
 63 |           rel="noopener"
 64 |           href={`${BLUESKY}${title} - https://webcloud.se${router.pathname}/`}
 65 |         >
 66 |           <div>
 67 |             <Bluesky />
 68 |           </div>
 69 |           <Spacer size={1} />
 70 |           <span>Share on Bluesky</span>
 71 |         </SocialLink>
 72 |       </Flex>
 73 |       <Spacer size={10} />
 74 |       <Card
 75 |         extend={{ width: "100%", flexDirection: "row", marginLeft: "-16px" }}
 76 |       >
 77 |         <div>
 78 |           <Avatar alt="Photo of me" src="/photo.jpg" />
 79 |         </div>
 80 |         <Spacer size={3} />
 81 |         <Flex>
 82 |           <Title variant="kiwi">Hi, thanks for reading!</Title>
 83 |           <Spacer size={2} />
 84 |           <Paragraph extend={{ color: "var(--color-fg-alt)" }}>
 85 |             I&rsquo;m Daniel, Software Engineer from Sweden. If you have any
 86 |             questions regarding this article please reach out to me on{" "}
 87 |             <Link href="https://bsky.app/profile/webcloud.se">Bluesky</Link>.
 88 |             You can also find me on{" "}
 89 |             <Link href="https://github.com/danielstocks">GitHub</Link>.
 90 |           </Paragraph>
 91 |         </Flex>
 92 |       </Card>
 93 |       <Spacer size={8} />
 94 |       <Title variant="apple">Read more articles written by me:</Title>
 95 |       <Spacer size={2} />
 96 |       <Flex
 97 |         extend={{
 98 |           flexDirection: "row",
 99 |           flexWrap: "wrap",
100 |           justifyContent: "space-between"
101 |         }}
102 |       >
103 |         {prevPost && (
104 |           <>
105 |             <Flex>
106 |               <Spacer size={3} />
107 |               <Link href={prevPost.path}>← {prevPost.title}</Link>
108 |             </Flex>
109 |             <Spacer size={2} />
110 |           </>
111 |         )}
112 |         {nextPost && (
113 |           <Flex>
114 |             <Spacer size={3} />
115 |             <Link href={nextPost.path}>{nextPost.title} →</Link>
116 |           </Flex>
117 |         )}
118 |       </Flex>
119 | 
120 |       <Spacer size={14} />
121 |     </Wrap>
122 |   );
123 | };
124 | 


--------------------------------------------------------------------------------
/components/back-to-base.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "./link";
 3 | import { Spacer } from "./spacer";
 4 | import { createComponentWithProxy } from "react-fela";
 5 | 
 6 | const HideOnPrint = createComponentWithProxy(
 7 |   {
 8 |     display: "flex",
 9 |     fontWeight: "var(--font-weight-normal)",
10 |     flexDirection: "column",
11 |     "@media print": {
12 |       display: "none"
13 |     }
14 |   },
15 |   "div"
16 | );
17 | 
18 | export const BackToBase = () => (
19 |   <HideOnPrint>
20 |     <Spacer size={4} />
21 |     <div>
22 |       <Link href="/">↖ Back to base</Link>
23 |     </div>
24 |     <Spacer size={8} />
25 |   </HideOnPrint>
26 | );
27 | 


--------------------------------------------------------------------------------
/components/card.js:
--------------------------------------------------------------------------------
 1 | import { createComponent } from "react-fela";
 2 | 
 3 | export const Card = createComponent(
 4 |   {
 5 |     padding: "32px 16px",
 6 |     flexDirection: "column",
 7 |     display: "flex",
 8 |     background: "var(--color-bg-alt)",
 9 |     boxShadow: "var(--shadow)"
10 |   },
11 |   "div"
12 | );
13 | 


--------------------------------------------------------------------------------
/components/code.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { createComponentWithProxy } from "react-fela";
 3 | import Highlight, { defaultProps } from "prism-react-renderer";
 4 | 
 5 | const codeBlock = {
 6 |   padding: "16px",
 7 |   background: "var(--color-bg-alt)",
 8 |   color: "var(--color-fg-alt)",
 9 |   boxShadow: "var(--shadow)",
10 |   fontSize: "14px",
11 |   lineHeight: "16px",
12 |   width: "100%",
13 |   overflowX: "auto",
14 |   position: "relative",
15 |   marginLeft: "-16px",
16 |   marginBottom: "32px"
17 | };
18 | const CodeBlock = createComponentWithProxy(codeBlock, "div");
19 | 
20 | const Token = createComponentWithProxy({}, "span");
21 | 
22 | const tokenColor = tokens => {
23 |   if (tokens.includes("punctuation")) return "var(--color-code-punctuation)";
24 |   if (tokens.includes("comment")) return "var(--color-code-comment)";
25 |   if (tokens.includes("keyword")) return "var(--color-primary)";
26 |   if (tokens.includes("method")) return "var(--color-code-method)";
27 |   if (tokens.includes("string")) return "var(--color-code-string)";
28 |   if (tokens.includes("function")) return "var(--color-code-function)";
29 |   if (tokens.includes("dom")) return "var(--color-code-dom)";
30 |   if (tokens.includes("property-access"))
31 |     return "var(--color-code-property-access)";
32 |   if (tokens.includes("class-name")) return "var(--color-code-class-name)";
33 |   if (tokens.includes("operator")) return "var(--color-code-operator)";
34 |   if (tokens.includes("selector")) return "var(--color-primary)";
35 |   if (tokens.includes("property")) return "var(--color-code-method)";
36 | };
37 | 
38 | export const Code = ({ children, className }) => {
39 |   const language = className.replace(/language-/, "");
40 |   // Remove newline from end of code
41 |   const code = children.replace(/\n$/g, "");
42 | 
43 |   return (
44 |     <Highlight
45 |       {...defaultProps}
46 |       theme={undefined}
47 |       code={code}
48 |       language={language}
49 |     >
50 |       {({ tokens, getTokenProps }) => (
51 |         <CodeBlock>
52 |           {tokens.map((line, i) => (
53 |             <div key={i}>
54 |               {line.map((token, key) => {
55 |                 const props = getTokenProps({ token, key });
56 |                 return (
57 |                   <Token
58 |                     key={key}
59 |                     extend={{
60 |                       color: tokenColor(props.className.split(" ").slice(1))
61 |                     }}
62 |                   >
63 |                     {props.children}
64 |                   </Token>
65 |                 );
66 |               })}
67 |             </div>
68 |           ))}
69 |         </CodeBlock>
70 |       )}
71 |     </Highlight>
72 |   );
73 | };
74 | 


--------------------------------------------------------------------------------
/components/cv.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { createComponent, createComponentWithProxy } from "react-fela";
  3 | import { Paragraph } from "../components/paragraph";
  4 | import { Flex } from "../components/flex";
  5 | import { Spacer } from "../components/spacer";
  6 | 
  7 | export const Job = createComponentWithProxy(
  8 |   {
  9 |     display: "flex",
 10 |     pageBreakInside: "avoid",
 11 |     flexDirection: "column",
 12 |     paddingTop: "24px",
 13 |     "@media not print": {
 14 |       "[open] summary:before": {
 15 |         content: "'-'"
 16 |       }
 17 |     }
 18 |   },
 19 |   "details"
 20 | );
 21 | 
 22 | export const JobSummary = createComponent(
 23 |   {
 24 |     display: "flex",
 25 |     flexDirection: "column",
 26 |     paddingBottom: "16px",
 27 |     paddingLeft: 0,
 28 |     marginBottom: "16px",
 29 |     borderBottom: "1px solid var(--color-border)",
 30 |     position: "relative",
 31 |     listStyle: "none",
 32 |     "::-webkit-details-marker": {
 33 |       display: "none"
 34 |     },
 35 |     "@media not print": {
 36 |       ":before": {
 37 |         top: "50%",
 38 |         transform: "translateY(-50%)",
 39 |         fontSize: "24px",
 40 |         fontWeight: "200",
 41 |         position: "absolute",
 42 |         right: "16px",
 43 |         color: "var(--color-primary)",
 44 |         content: "'+'"
 45 |       },
 46 |       ":hover": {
 47 |         cursor: "pointer",
 48 |         borderBottom: "1px solid var(--color-fg)",
 49 |         ":before": {
 50 |           color: "var(--color-fg)"
 51 |         }
 52 |       }
 53 |     },
 54 |   },
 55 |   "summary"
 56 | );
 57 | 
 58 | export const JobTitle = createComponent(
 59 |   { fontSize: "24px", fontWeight: 200, marginBottom: "16px" },
 60 |   "div"
 61 | );
 62 | export const JobCompany = createComponent(
 63 |   {
 64 |     marginBottom: "16px",
 65 |     fontSize: "16px",
 66 |     fontWeight: 500
 67 |   },
 68 |   "span"
 69 | );
 70 | export const JobDuration = createComponent({}, "span");
 71 | 
 72 | export const JobLocation = createComponent({}, "span");
 73 | 
 74 | export const JobMeta = ({ children }) => (
 75 |   <Flex
 76 |     extend={{
 77 |       fontSize: "12px",
 78 |       display: "block",
 79 |       fontWeight: 500,
 80 |       flexDirection: "row",
 81 |       color: "var(--color-fg-alt)"
 82 |     }}
 83 |   >
 84 |     {React.Children.toArray(children).map((item, i) => (
 85 |       <React.Fragment key={i}>
 86 |         {i !== 0 && <>&nbsp;{"|"}&nbsp;</>}
 87 |         {item}
 88 |       </React.Fragment>
 89 |     ))}
 90 |   </Flex>
 91 | );
 92 | 
 93 | export const JobDescription = ({ children }) => (
 94 |   <Flex extend={{ marginBottom: "16px" }}>
 95 |     {React.Children.toArray(children).map((item, i) => (
 96 |       <React.Fragment key={i}>
 97 |         {item}
 98 |         <Spacer size={2} />
 99 |       </React.Fragment>
100 |     ))}
101 |   </Flex>
102 | );
103 | 
104 | export const SocialLink = ({ children, ...props }) => (
105 |   <Paragraph
106 |     as="a"
107 |     extend={{
108 |       flexShrink: 0,
109 |       textDecoration: "none",
110 |       display: "inline-flex",
111 |       "& svg": {
112 |         verticalAlign: "bottom",
113 |         opacity: 0.8
114 |       },
115 |       "&:hover svg": {
116 |         opacity: 1,
117 |         transition: "all 0.2s ease-in-out"
118 |       },
119 |       "&:hover span": {
120 |         color: "var(--color-fg)"
121 |       },
122 |       "&:hover span:after": {
123 |         width: "100%",
124 |         left: "0"
125 |       },
126 |       "& span": {
127 |         color: "var(--color-primary)",
128 |         lineHeight: "24px",
129 |         flexShrink: 0,
130 |         borderBottom: "1px solid var(--color-border)",
131 |         transition: "all 0.2s ease-in-out",
132 |         ":hover": {
133 |           color: "var(--color-fg)",
134 |           borderBottom: "1px solid var(--color-primary)"
135 |         }
136 |       }
137 |     }}
138 |     {...props}
139 |   >
140 |     {children}
141 |   </Paragraph>
142 | );
143 | 


--------------------------------------------------------------------------------
/components/flex.js:
--------------------------------------------------------------------------------
 1 | import { createComponentWithProxy } from "react-fela";
 2 | 
 3 | export const Flex = createComponentWithProxy(
 4 |   {
 5 |     flexDirection: "column",
 6 |     display: "flex",
 7 |     "@media print": {
 8 |       display: "block"
 9 |     }
10 |   },
11 |   "div"
12 | );
13 | 


--------------------------------------------------------------------------------
/components/inline-code.js:
--------------------------------------------------------------------------------
 1 | import { createComponentWithProxy } from "react-fela";
 2 | 
 3 | const inlineCode = {
 4 |   margin: "0 4px",
 5 |   fontSize: "14px",
 6 |   background: "var(--color-bg-alt)",
 7 |   color: "var(--color-fg)",
 8 |   boxShadow: "var(--shadow)",
 9 |   verticalAlign: "bottom"
10 | };
11 | 
12 | export const InlineCode = createComponentWithProxy(inlineCode, "code");
13 | 


--------------------------------------------------------------------------------
/components/link.js:
--------------------------------------------------------------------------------
 1 | import { createComponentWithProxy } from "react-fela";
 2 | 
 3 | const link = {
 4 |   textDecoration: "none",
 5 |   color: "var(--color-primary)",
 6 |   lineHeight: "24px",
 7 |   borderBottom: "1px solid var(--color-border)",
 8 |   transition: "all 0.2s ease-in-out",
 9 |   "&:hover": {
10 |     color: "var(--color-fg)",
11 |     borderBottom: "1px solid var(--color-primary)"
12 |   }
13 | };
14 | 
15 | const iconLink = {
16 |   opacity: 0.8,
17 |   transition: "opacity 0.2s ease-in-out",
18 |   "&:hover": {
19 |     opacity: 1
20 |   }
21 | };
22 | 
23 | export const Link = createComponentWithProxy(link, "a");
24 | export const IconLink = createComponentWithProxy(iconLink, "a");
25 | 


--------------------------------------------------------------------------------
/components/list-item.js:
--------------------------------------------------------------------------------
 1 | import { createComponentWithProxy } from "react-fela";
 2 | 
 3 | const listItem = () => ({
 4 |   lineHeight: "24px",
 5 |   margin: "0 0 8px",
 6 |   "& > ul": {
 7 |     margin: "8px 0 0",
 8 |   }
 9 | });
10 | 
11 | export const ListItem = createComponentWithProxy(listItem, "li");
12 | 


--------------------------------------------------------------------------------
/components/list.js:
--------------------------------------------------------------------------------
 1 | import { createComponentWithProxy } from "react-fela";
 2 | 
 3 | const list = () => ({
 4 |   margin: 0,
 5 |   paddingLeft: "24px",
 6 |   color: "var(--color-fg-alt)",
 7 |   fontWeight: "var(--font-weight-normal)",
 8 | });
 9 | 
10 | export const List  = createComponentWithProxy(list, "ul");
11 | 


--------------------------------------------------------------------------------
/components/mdx.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { createComponentWithProxy } from "react-fela";
  3 | import { ArticleImage } from "../components/article-image";
  4 | import { Title } from "../components/title";
  5 | import { Paragraph } from "../components/paragraph";
  6 | import { Link } from "../components/link";
  7 | import { Spacer } from "../components/spacer";
  8 | import { Code } from "../components/code";
  9 | import { InlineCode } from "../components/inline-code";
 10 | import { List } from "../components/list";
 11 | import { ListItem } from "../components/list-item";
 12 | import { Quote } from "../components/quote";
 13 | 
 14 | const Span = createComponentWithProxy({}, "span");
 15 | const Strong = createComponentWithProxy(
 16 |   {
 17 |     fontWeight: "var(--font-weight-bold)",
 18 |     color: "var(--color-fg)"
 19 |   },
 20 |   "strong"
 21 | );
 22 | const Intro = ({ ...props }) => (
 23 |   <>
 24 |     <Title variant="kiwi" {...props} />
 25 |     <Spacer size={6} />
 26 |   </>
 27 | );
 28 | const p = ({ ...props }) => (
 29 |   <>
 30 |     <Paragraph extend={{ color: "var(--color-fg-alt)" }} {...props} />
 31 |     <Spacer size={4} />
 32 |   </>
 33 | );
 34 | 
 35 | export const components = {
 36 |   h2: function H2({ ...props }) {
 37 |     return (
 38 |       <>
 39 |         <Spacer size={5} />
 40 |         <Title as="h2" variant="orange" {...props} />
 41 |         <Spacer size={3} />
 42 |       </>
 43 |     );
 44 |   },
 45 |   h3: function H3({ ...props }) {
 46 |     return (
 47 |       <>
 48 |         <Spacer size={4} />
 49 |         <Title as="h3" variant="apple" {...props} />
 50 |         <Spacer size={3} />
 51 |       </>
 52 |     );
 53 |   },
 54 |   Intro,
 55 |   p,
 56 |   a: Link,
 57 |   img: ArticleImage,
 58 |   Link,
 59 |   li: ListItem,
 60 |   ul: function ul({ ...props }) {
 61 |     return (
 62 |       <>
 63 |         <List {...props} />
 64 |         <Spacer size={4} />
 65 |       </>
 66 |     );
 67 |   },
 68 |   ol: function ol({ ...props }) {
 69 |     return (
 70 |       <>
 71 |         <List as="ol" {...props} />
 72 |         <Spacer size={4} />
 73 |       </>
 74 |     );
 75 |   },
 76 |   hr: function thematicBreak() {
 77 |     return <Spacer size={8} />;
 78 |   },
 79 |   code: Code,
 80 |   strong: Strong,
 81 |   blockquote: Quote,
 82 |   inlineCode: InlineCode,
 83 |   Spacer,
 84 |   SponsoredParagraph: function SponsoredParagraph({ ...props }) {
 85 |     return (
 86 |       <>
 87 |         <Paragraph extend={{ color: "var(--color-fg-alt)" }} {...props} />
 88 |         <Spacer size={2} />
 89 |       </>
 90 |     );
 91 |   },
 92 |   Disclaimer: function Disclaimer({ ...props }) {
 93 |     return (
 94 |       <>
 95 |         <Spacer size={2} />
 96 |         <Paragraph
 97 |           extend={{
 98 |             fontSize: "12px",
 99 |             lineHeight: 1.6,
100 |             fontStyle: "italic",
101 |             opacity: 0.5,
102 |             color: "var(--color-fg-alt)"
103 |           }}
104 |           {...props}
105 |         />
106 |         <Spacer size={4} />
107 |       </>
108 |     );
109 |   },
110 |   SponsoredLink: function SponsoredLink({ children, ...props }) {
111 |     return (
112 |       <>
113 |         <Link {...props}>{children}</Link>
114 |         <Span
115 |           title="Disclaimer: I get paid if you click on this link and buy something."
116 |           extend={{
117 |             cursor: "help",
118 |             fontSize: "10px",
119 |             letterSpacing: "0.03em",
120 |             padding: "2px 4px",
121 |             position: "relative",
122 |             top: "-2px",
123 |             background: "var(--color-primary-alt)",
124 |             marginLeft: "8px",
125 |             color: "var(--color-fg)"
126 |           }}
127 |         >
128 |           sponsored link
129 |         </Span>
130 |       </>
131 |     );
132 |   }
133 | };
134 | 


--------------------------------------------------------------------------------
/components/paragraph.js:
--------------------------------------------------------------------------------
 1 | import { createComponentWithProxy } from "react-fela";
 2 | 
 3 | const p = () => ({
 4 |   lineHeight: "24px",
 5 |   color: "var(--color-fg)",
 6 |   fontWeight: "var(--font-weight-normal)"
 7 | });
 8 | 
 9 | export const Paragraph = createComponentWithProxy(p, "p");
10 | 


--------------------------------------------------------------------------------
/components/quote.js:
--------------------------------------------------------------------------------
 1 | import { createComponentWithProxy } from "react-fela";
 2 | 
 3 | const quote = () => ({
 4 |   margin: "0",
 5 |   fontFamily: "serif",
 6 |   fontSize: "24px",
 7 |   fontWeight: "200",
 8 |   position: "relative",
 9 |   textRendering: "optimizeLegibility",
10 |   fontSmoothing: "antialiased",
11 |   "& p": {
12 |     lineHeight: "28px"
13 |   },
14 |   "-webkit-font-smoothing": "antialiased",
15 |   "-moz-osx-fon-smoothing": "grayscale",
16 |   "& p:first-of-type:before": {
17 |     content: "'“'",
18 |     position: "absolute",
19 |     left: "-.5em"
20 |   },
21 |   "& p:first-of-type:after": {
22 |     content: "'”'"
23 |   }
24 | });
25 | 
26 | export const Quote = createComponentWithProxy(quote, "blockquote");
27 | 


--------------------------------------------------------------------------------
/components/social-icons.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { createComponentWithProxy } from "react-fela";
 3 | 
 4 | const Svg = createComponentWithProxy(
 5 |   {
 6 |     fill: "var(--color-fg)",
 7 |     transition: "fill 0.2s ease-in"
 8 |   },
 9 |   "svg"
10 | );
11 | 
12 | export const Github = () => (
13 |   <Svg width="24" height="24">
14 |     <title>GitHub</title>
15 |     <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
16 |   </Svg>
17 | );
18 | 
19 | export const Bluesky = () => (
20 |   <Svg width="24" height="24">
21 |     <title>Bluesky</title>
22 |     <path d="M5.20232 2.48087C7.95386 4.63146 10.9135 8.99195 12.0001 11.332C13.0868 8.99212 16.0462 4.63141 18.7978 2.48087C20.7832 0.929094 24 -0.271581 24 3.54903C24 4.31206 23.5798 9.95887 23.3333 10.8756C22.4767 14.0628 19.355 14.8757 16.5782 14.3837C21.432 15.2438 22.6667 18.0925 20.0001 20.9413C14.9357 26.3517 12.7211 19.5838 12.1534 17.8497C12.0494 17.5317 12.0007 17.383 12 17.5095C11.9993 17.383 11.9506 17.5317 11.8466 17.8497C11.2791 19.5838 9.06454 26.3519 3.99987 20.9413C1.33323 18.0925 2.56794 15.2436 7.42179 14.3837C4.64492 14.8757 1.5232 14.0628 0.666658 10.8756C0.420196 9.95878 0 4.31198 0 3.54903C0 -0.271581 3.21689 0.929094 5.20218 2.48087H5.20232Z" />
23 |   </Svg>
24 | );
25 | 
26 | export const Twitter = () => (
27 |   <Svg width="24" height="24">
28 |     <title>Twitter</title>
29 |     <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z" />
30 |   </Svg>
31 | );
32 | 
33 | export const Linkedin = () => (
34 |   <Svg width="24" height="24">
35 |     <title>LinkedIn</title>
36 |     <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
37 |   </Svg>
38 | );
39 | 
40 | export const Email = () => (
41 |   <Svg width="24" height="24">
42 |     <title>Email</title>
43 |     <path d="M12 12.713l-11.985-9.713h23.971l-11.986 9.713zm-5.425-1.822l-6.575-5.329v12.501l6.575-7.172zm10.85 0l6.575 7.172v-12.501l-6.575 5.329zm-1.557 1.261l-3.868 3.135-3.868-3.135-8.11 8.848h23.956l-8.11-8.848z" />
44 |   </Svg>
45 | );
46 | 


--------------------------------------------------------------------------------
/components/spacer.js:
--------------------------------------------------------------------------------
 1 | import { createComponentWithProxy } from "react-fela";
 2 | 
 3 | const spacer = ({ size = 1 }) => ({
 4 |   flexBasis: size * 8 + "px",
 5 |   flexShrink: 0,
 6 |   "@media print": {
 7 |     height: size * 8 + "px"
 8 |   }
 9 | });
10 | 
11 | export const Spacer = createComponentWithProxy(spacer, "div");
12 | 


--------------------------------------------------------------------------------
/components/title.js:
--------------------------------------------------------------------------------
 1 | import { createComponentWithProxy } from "react-fela";
 2 | 
 3 | const title = ({ variant = "banana" }) => ({
 4 |   ...(variant === "banana" && {
 5 |     fontWeight: "var(--font-weight-bold)",
 6 |     fontSize: "40px",
 7 |     lineHeight: "44px",
 8 |     "@media (min-width: 480px)": {
 9 |       fontSize: "56px",
10 |       lineHeight: "60px"
11 |     },
12 |   }),
13 |   ...(variant === "pear" && {
14 |     fontSize: "32px",
15 |     fontWeight: "var(--font-weight-bold)",
16 |     lineHeight: "32px"
17 |   }),
18 |   ...(variant === "orange" && {
19 |     fontSize: "24px",
20 |     fontWeight: "var(--font-weight-bold)",
21 |     lineHeight: "24px"
22 |   }),
23 |   ...(variant === "apple" && {
24 |     fontSize: "18px",
25 |     fontWeight: "var(--font-weight-bold)",
26 |     lineHeight: "24px"
27 |   }),
28 |   ...(variant === "kiwi" && {
29 |     fontSize: "24px",
30 |     lineHeight: "32px",
31 |     fontWeight: "var(--font-weight-light)"
32 |   })
33 | });
34 | 
35 | export const Title = createComponentWithProxy(title, "h1");
36 | 


--------------------------------------------------------------------------------
/components/toggle-theme.js:
--------------------------------------------------------------------------------
 1 | import { createComponentWithProxy } from "react-fela";
 2 | 
 3 | const toggleTheme = () => ({
 4 |   padding: "8px 12px",
 5 |   border: "none",
 6 |   zIndex: 1,
 7 |   display: "none",
 8 |   cursor: "pointer",
 9 |   position: "fixed",
10 |   fontSize: "12px",
11 |   lineHeight: "1",
12 |   fontWeight: "400",
13 |   letterSpacing: "0.04em",
14 |   fontFamily: "monospace",
15 |   transition: "all 200ms ease-in",
16 |   top: "32px",
17 |   right: "32px",
18 |   background: "var(--color-bg-alt)",
19 |   color: "var(--color-fg)",
20 |   boxShadow: "4px 4px 0px var(--color-primary-alt)",
21 |   ":hover": {
22 |     boxShadow: "4px 4px 0px var(--color-primary)"
23 |   },
24 |   ":active": {
25 |     boxShadow: "none",
26 |     transform: "translate(4px,4px)"
27 |   },
28 |   "@media print": {
29 |     display: "none!important"
30 |   }
31 | });
32 | 
33 | export const ToggleTheme = createComponentWithProxy(toggleTheme, "button");
34 | 


--------------------------------------------------------------------------------
/components/wrap.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { createComponentWithProxy } from "react-fela";
 3 | 
 4 | const wrap = () => ({
 5 |   padding: "0 16px",
 6 |   margin: "0 auto",
 7 |   maxWidth: "640px",
 8 |   display: "flex",
 9 |   flexDirection: "column",
10 |   "@media print": {
11 |     display: "block"
12 |   }
13 | });
14 | 
15 | export const InnerWrap = createComponentWithProxy(wrap, "div");
16 | 
17 | export const Wrap = ({ children, ...props }) => (
18 |   <InnerWrap {...props}>{children}</InnerWrap>
19 | );
20 | 


--------------------------------------------------------------------------------
/fela.config.js:
--------------------------------------------------------------------------------
 1 | import { createRenderer } from "fela";
 2 | import { themes } from "./theme";
 3 | 
 4 | export function getRenderer() {
 5 |   const renderer = createRenderer();
 6 | 
 7 |   const theme = themes["light"];
 8 |   const cssVariables = {};
 9 |   Object.keys(theme).forEach(key => {
10 |     cssVariables["--" + key] = theme[key];
11 |   });
12 | 
13 |   renderer.renderStatic(cssVariables, ":root");
14 |   renderer.renderStatic(`
15 |     @media print {
16 |       :root {
17 |         ${Object.keys(theme)
18 |           .map(key => "--" + key + ":" + theme[key] + "!important;")
19 |           .join("")}
20 |       }
21 |     }
22 |   `);
23 | 
24 |   renderer.renderStatic(
25 |     {
26 |       background: "var(--color-bg)",
27 |       color: "var(--color-fg)",
28 |       fontSize: "16px",
29 |       transition: "all 0.2s ease-in",
30 |       lineHeight: 1,
31 |       fontFamily:
32 |         'system-ui, -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif'
33 |     },
34 |     "body"
35 |   );
36 | 
37 |   renderer.renderStatic(
38 |     {
39 |       margin: "0",
40 |       padding: "0"
41 |     },
42 |     "*"
43 |   );
44 | 
45 |   return renderer;
46 | }
47 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | const slug = require("rehype-slug");
 2 | const withMDX = require("@next/mdx")({
 3 |   extension: /\.mdx?$/,
 4 |   options: {
 5 |     rehypePlugins: [slug]
 6 |   }
 7 | });
 8 | const withBundleAnalyzer = require("@next/bundle-analyzer")({
 9 |   enabled: process.env.ANALYZE === "true"
10 | });
11 | 
12 | module.exports = withBundleAnalyzer(
13 |   withMDX({
14 |     exportTrailingSlash: true,
15 |     pageExtensions: ["js", "jsx", "md", "mdx"]
16 |   })
17 | );
18 | 


--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "trailingSlash": true,
 3 |   "redirects": [
 4 |     {
 5 |       "source": "/stubbing-window-location-javascript/",
 6 |       "destination": "/blog/2013-02-06-stubbing-window-location-javascript/"
 7 |     },
 8 |     {
 9 |       "source": "/best-practice-testing-javascript-event-handlers/",
10 |       "destination": "/blog/2013-02-22-best-practice-testing-javascript-event-handlers/"
11 |     },
12 |     {
13 |       "source": "/sortable-list-component-react-js/",
14 |       "destination": "/blog/2014-04-03-sortable-list-component-react-js/"
15 |     },
16 |     {
17 |       "source": "/truly-reactive-sortable-component/",
18 |       "destination": "/blog/2014-04-24-truly-reactive-sortable-component/"
19 |     },
20 |     {
21 |       "source": "/react-sortable/",
22 |       "destination": "/blog/2014-04-03-sortable-list-component-react-js/"
23 |     }
24 |   ],
25 |   "rewrites": [
26 |     {
27 |       "source": "/jQuery-Collapse/(.*)",
28 |       "destination": "https://webcloud-jquery-collapse.netlify.app/$1"
29 |     },
30 |     {
31 |       "source": "/Assortment/(.*)",
32 |       "destination": "https://webcloud-assortment.netlify.app/$1"
33 |     }
34 |   ]
35 | }
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webcloud.se",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "export NODE_OPTIONS='--openssl-legacy-provider' && node bin/blog && next dev",
 7 |     "build": "node bin/blog && next build && next export"
 8 |   },
 9 |   "dependencies": {
10 |     "@mdx-js/loader": "1.5.9",
11 |     "@mdx-js/react": "1.5.9",
12 |     "@next/bundle-analyzer": "9.3.0",
13 |     "@next/mdx": "^9.1.3",
14 |     "date-fns": "^2.9.0",
15 |     "next": "9.3.5",
16 |     "prism-react-renderer": "^1.0.2",
17 |     "react": "16.12.0",
18 |     "react-dom": "16.12.0",
19 |     "react-fela": "^11.1.2",
20 |     "rehype-slug": "^3.0.0",
21 |     "uglify-js": "^3.6.9",
22 |     "webpack": "^4.46.0"
23 |   },
24 |   "devDependencies": {
25 |     "eslint": "^6.8.0",
26 |     "eslint-plugin-react": "^7.18.0",
27 |     "prettier": "^1.19.1"
28 |   }
29 | }


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import App from "next/app";
 3 | import Head from "next/head";
 4 | import { format } from "date-fns";
 5 | import { Flex } from "../components/flex";
 6 | import { withRouter } from "next/router";
 7 | import { Spacer } from "../components/spacer";
 8 | import { Paragraph } from "../components/paragraph";
 9 | import { MDXProvider } from "@mdx-js/react";
10 | import { components } from "../components/mdx";
11 | import { ArticleWrap } from "../components/article-wrap";
12 | import { ToggleTheme } from "../components/toggle-theme";
13 | import { Title } from "../components/title";
14 | import blogPosts from "../blog-manifest.json";
15 | 
16 | class MyApp extends App {
17 |   render() {
18 |     const { Component, pageProps } = this.props;
19 | 
20 |     const path = this.props.router.pathname;
21 |     const type = path.split("/")[1];
22 |     let post = false;
23 |     let nextPost = false;
24 |     let prevPost = false;
25 | 
26 |     if (type === "blog") {
27 |       post = blogPosts.filter(post => post.path == path)[0];
28 |       prevPost = blogPosts[blogPosts.indexOf(post) + 1];
29 |       nextPost = blogPosts[blogPosts.indexOf(post) - 1];
30 |     }
31 | 
32 |     return (
33 |       <MDXProvider
34 |         components={{
35 |           ...components,
36 |           wrapper: function MdxWrapper({ ...props }) {
37 |             return (
38 |               <ArticleWrap
39 |                 title={post.title}
40 |                 nextPost={nextPost}
41 |                 prevPost={prevPost}
42 |                 {...props}
43 |               />
44 |             );
45 |           },
46 |           h1: function BlogTitle() {
47 |             return (
48 |               <Flex>
49 |                 <Title>{post.title}</Title>
50 |                 <Spacer size={5} />
51 |                 <Paragraph
52 |                   extend={{ fontSize: "12px", color: "var(--color-fg-alt)" }}
53 |                 >
54 |                   {format(new Date(post.date), "d MMMM Y")}
55 |                 </Paragraph>
56 |               </Flex>
57 |             );
58 |           }
59 |         }}
60 |       >
61 |         <Head>
62 |           <title>webcloud</title>
63 |         </Head>
64 |         <ToggleTheme id="toggle-theme" />
65 |         <Component {...pageProps} />
66 |       </MDXProvider>
67 |     );
68 |   }
69 | }
70 | 
71 | export default withRouter(MyApp);
72 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Document, { Main, Head } from "next/document";
 3 | import { RendererProvider, renderToNodeList } from "react-fela";
 4 | import { getRenderer } from "../fela.config.js";
 5 | import { themes } from "../theme";
 6 | import fs from "fs";
 7 | var UglifyJS = require("uglify-js");
 8 | 
 9 | const clientSideJs = UglifyJS.minify(
10 |   fs.readFileSync("client-js/index.js", "utf8")
11 | ).code;
12 | 
13 | class MyHead extends Head {
14 |   render() {
15 |     let { head } = this.context._documentProps;
16 |     let children = this.props.children;
17 |     return (
18 |       <head {...this.props}>
19 |         {children}
20 |         {head}
21 |       </head>
22 |     );
23 |   }
24 | }
25 | 
26 | export class MyMain extends Main {
27 |   render() {
28 |     const { html } = this.context._documentProps;
29 |     return <div dangerouslySetInnerHTML={{ __html: html }} />;
30 |   }
31 | }
32 | 
33 | export default class extends Document {
34 |   static async getInitialProps(ctx) {
35 |     const renderer = getRenderer();
36 |     const originalRenderPage = ctx.renderPage;
37 |     ctx.renderPage = () =>
38 |       originalRenderPage({
39 |         enhanceApp: App => props => (
40 |           <RendererProvider renderer={renderer}>
41 |             <App {...props} />
42 |           </RendererProvider>
43 |         )
44 |       });
45 |     const initialProps = await Document.getInitialProps(ctx);
46 |     return { ...initialProps, renderer };
47 |   }
48 | 
49 |   render() {
50 |     return (
51 |       <html lang="en">
52 |         <MyHead>
53 |           {renderToNodeList(this.props.renderer)}
54 |           <script
55 |             dangerouslySetInnerHTML={{
56 |               __html: `var THEMES = ${JSON.stringify(themes)}`
57 |             }}
58 |           />
59 |           <meta
60 |             name="viewport"
61 |             content="width=device-width, initial-scale=1, shrink-to-fit=no"
62 |           />
63 |           <script dangerouslySetInnerHTML={{ __html: clientSideJs }} />
64 |         </MyHead>
65 |         <body>
66 |           <MyMain />
67 |           <script async defer src="https://sa.webcloud.se/app.js" />
68 |           <noscript>
69 |             <img src="https://sa.webcloud.se/image.gif" alt="" />
70 |           </noscript>
71 |           <script src="/instant.js" type="module" defer />
72 |         </body>
73 |       </html>
74 |     );
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/pages/_error.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Title } from "../components/title";
 3 | import { Wrap } from "../components/wrap";
 4 | import { Card } from "../components/card";
 5 | import { Spacer } from "../components/spacer";
 6 | import { BackToBase } from "../components/back-to-base";
 7 | 
 8 | function Error({ statusCode }) {
 9 |   return (
10 |     <Wrap
11 |       extend={{
12 |         height: "100vh",
13 |         alignItems: "center",
14 |         justifyContent: "center"
15 |       }}
16 |     >
17 |         <Title>{statusCode}</Title>
18 |         <Spacer size={4} />
19 |       <Card extend={{ textAlign: "center" }}>
20 |         <Title>🙈</Title>
21 |         <Spacer size={2} />
22 |         <Title variant="kiwi">
23 |           This page could not be found. Sorry about that.
24 |         </Title>
25 |       </Card>
26 | 
27 |       <BackToBase />
28 |     </Wrap>
29 |   );
30 | }
31 | 
32 | Error.getInitialProps = ({ res, err }) => {
33 |   const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
34 |   return { statusCode };
35 | };
36 | 
37 | export default Error;
38 | 


--------------------------------------------------------------------------------
/pages/blog/2009-02-01-removing-from-node-list.md:
--------------------------------------------------------------------------------
 1 | # Removing HTML elements from a NodeList
 2 | 
 3 | ## The Scenario
 4 | 
 5 | You have the following elements:
 6 | 
 7 | ```html
 8 | <span>2</span>
 9 | <span>3</span>
10 | <span>4</span>
11 | <span>5</span>
12 | <span>6</span>
13 | ```
14 | 
15 | And now you want to remove them. Maybe you tried the following:
16 | 
17 | 
18 | ```javascript
19 | var spans = document.getElementsByTagName("span"),
20 |     l = spans.length;
21 | for(var i = 0; i < l; i++) {
22 |     spans[i].parentNode.removeChild(spans[i]);
23 | }
24 | ```
25 | 
26 | If you did, you probably failed, why? Because when you remove a element from the DOM, any reference to this element previously stored in a NodeList is also removed.
27 | 
28 | When the for loop reaches the 3:rd iteration there are only 2 items left in the spans NodeList and hence spans[3] is all of a sudden `undefined`.
29 | 
30 | ## The Solution
31 | 
32 | The solution is simply to iterate through the NodeList backwards.
33 | 
34 | ```javascript
35 | while(l--) {
36 |     spans[l].parentNode.removeChild(spans[l]);
37 | }
38 | ```
39 | 
40 | By doing this, you'll safely remove all span elements from the document
41 | 
42 | 
43 | That is all.
44 | 


--------------------------------------------------------------------------------
/pages/blog/2013-02-06-stubbing-window-location-javascript.md:
--------------------------------------------------------------------------------
 1 | # Stubbing window.location in JavaScript
 2 | 
 3 | ---
 4 | 
 5 | Let's imagine you have the following code:
 6 | 
 7 | ```javascript
 8 | var el = document.getElementById("some-container");
 9 | el.addEventListener('click', handleClick, false);
10 | 
11 | function handleClick(e) {
12 |   var link = e.target.getElementsByTagName('a')[0]
13 |   if(link) {
14 |     if(e.metaKey) {
15 |       return window.open(link.href);
16 |     }
17 |     window.location = link.href;
18 |   }
19 | }
20 | ```
21 | 
22 | ## How do I test this?
23 | 
24 | Short answer: You don't. The reason is that the browser will not allow you to override anything in the window [host object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects).
25 | 
26 | Long answer: Your best bet is to abstract any 'window' related logic into your own methods. For example, let's create a redirect helper method:
27 | 
28 | ```javascript
29 | function redirect(path, _blank) {
30 |   if(path) {
31 |     if(_blank) {
32 |       return window.open(path);
33 |     }
34 |     return window.location = path;
35 |   }
36 | }
37 | ```
38 | 
39 | Now let's utilize this method to simplify the handleClick method.
40 | 
41 | 
42 | ```javascript
43 | function handleClick(e) {
44 |   var link = e.target.getElementsByTagName('a')[0]
45 |   if(link) {
46 |     redirect(link.href, e.metaKey);
47 |   }
48 | }
49 | ```
50 | 
51 | ## Stub it all
52 | 
53 | Testing it will now be possible by stubbing out our redirect method. I'm using [Sinon.js](http://sinonjs.org/) here, a library that provides excellent tooling for stubs.
54 | 
55 | ```javascript
56 | sinon.stub(window, 'redirect');
57 | 
58 | // Create a fixture
59 | var div = document.createElement('div');
60 | div.innerHTML = '<a href="#hello">Hello</a>';
61 | 
62 | // Override event object
63 | var e = {
64 |   target : div,
65 |   metaKey: false
66 | };
67 | 
68 | // Call our method
69 | handleClick(e);
70 | 
71 | // Assert
72 | stub.calledWith('#hello', false); // === true
73 | ```
74 | 
75 | That's all folks. Happy testing!
76 | 


--------------------------------------------------------------------------------
/pages/blog/2013-02-22-best-practice-testing-javascript-event-handlers.md:
--------------------------------------------------------------------------------
 1 | # How to test JavaScript Event Handlers
 2 | 
 3 | ---
 4 | 
 5 | At some point, you'll find event handling code on top of jQuery written like this:
 6 | 
 7 | ```javascript
 8 | $('#some-element').click(function(e) {
 9 |   e.preventDefault();
10 |   $(this).toggleClass('active');
11 | });
12 | ```
13 | 
14 | Testing this code will require us to:
15 | 
16 | 1. Setup a HTML fixture so that the event can bind to it.
17 | 2. Fire the actual click event on the fixture
18 | 3. Assert if the CSS class was changed on the target element
19 | 
20 | Here's the test:
21 | 
22 | ```javascript
23 | // Create fixture
24 | $('body').append('<div id="#some-element"></div>');
25 | // Trigger click event
26 | $('#some-element').trigger('click');
27 | // Assert
28 | assert($('some-element').attr('class') == 'active');
29 | ```
30 | 
31 | We're essentially forced to test our code through the jQuery API. As you may know, jQuery already has a test suite, we should really focus on testing our code.
32 | 
33 | Further more, there is no way to assert that `e.preventDefault()` was called.
34 | 
35 | Let's make our code slightly more verbose to improve testability.
36 | 
37 | ```javascript
38 | $('#some-element').click(toggleMe);
39 | function toggleMe(e) {
40 |   e.preventDefault();
41 |   $(e.target).toggleClass('active');
42 | }
43 | ```
44 | 
45 | Testing the above will be easier:
46 | 
47 | ```javascript
48 | // Setup
49 | var div = document.createElement('div');
50 | var e = {
51 |   target : div,
52 |   preventDefault: sinon.spy()
53 | }
54 | toggleMe(e);
55 | 
56 | //Assert
57 | assert(e.preventDefault.called);
58 | assert(div.className == 'active');
59 | ```
60 | 
61 | The `sinon.spy()` method is from [Sinon.js](https://sinonjs.org/) which is an excellent library for performing common test tasks like spying and stubbing. It allows us to assert that the preventDefault was called on the supplied event object.
62 | 
63 | That's all folks. Happy refactoring!
64 | 


--------------------------------------------------------------------------------
/pages/blog/2014-04-03-sortable-list-component-react-js.md:
--------------------------------------------------------------------------------
  1 | # Creating a Sortable List Component in React
  2 | 
  3 | ---
  4 | 
  5 | [React](https://reactjs.org/) is all about data flow. The idea is that you should never manually change the state of the application by modifying the DOM. Instead, the DOM should always reflect the UI based on the state of the application data.
  6 | 
  7 | Having personally worked a lot with libraries like jQuery and Backbone.js, the non DOM-centric philosophy of React was initially somewhat confusing to me.
  8 | 
  9 | To better illustrate the reactive workflow I'm going to show you how to create a sortable list component. Instead of using one of the many "sortable-widget-plugins" that are out there, we're naively going to roll our own HTML5 based solution.
 10 | 
 11 | 
 12 | ## Starting with the data
 13 | 
 14 | In this example I'm just going to use an array of color names as our application data.
 15 | 
 16 | ```javascript
 17 | var colors = [
 18 |   "Red", "Green", "Blue", "Yellow", "Black", "White", "Orange"
 19 | ];
 20 | ```
 21 | 
 22 | ## A basic list component
 23 | 
 24 | Next up we need to create a basic component that will render a list.
 25 | 
 26 | ```jsx
 27 | var List = React.createClass({
 28 |   getInitialState: function() {
 29 |     return {data: this.props.data};
 30 |   },
 31 |   render: function() {
 32 |     return <ul>
 33 |       {this.props.data.map(function(item) {
 34 |         return <li>{item}</li>;
 35 |       })}
 36 |     </ul>
 37 |   }
 38 | });
 39 | ```
 40 | 
 41 | A few lines of CSS to give it the looks
 42 | 
 43 | ```css
 44 | ul {
 45 |   list-style: none;
 46 |   margin: 0;
 47 |   padding: 0
 48 | }
 49 | li {
 50 |   padding: 5px;
 51 |   background: #eee
 52 | }
 53 | ```
 54 | 
 55 | And finally we call to render it into the DOM:
 56 | 
 57 | ```jsx
 58 | ReactDOM.render(
 59 |   <List data={colors}/>, document.getElementById('app')
 60 | );
 61 | ```
 62 | 
 63 | ## Let's start dragging
 64 | 
 65 | The story about HTML5 Drag & Drop is a little bit ugly. The spec itself has repeatedly (and perhaps deservedly) [received a beating](http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html), and the browser implementations haven't been [overly impressive](http://www.kryogenix.org/code/browser/custom-drag-image.html) either. All that being said, it actually works.
 66 | 
 67 | 
 68 | ### Adding event handlers
 69 | 
 70 | The first thing we need to do is to update the render method and add some event handlers for the drag events.
 71 | 
 72 | 
 73 | ```jsx
 74 | var List = React.createClass({
 75 |   ...
 76 |   render: function() {
 77 |     return (
 78 |       <ul onDragOver={this.dragOver}>
 79 |         {this.state.data.map(function(item, i) {
 80 |           return (
 81 |             <li
 82 |               data-id={i}
 83 |               key={i}
 84 |               draggable="true"
 85 |               onDragEnd={this.dragEnd}
 86 |               onDragStart={this.dragStart}
 87 |             >
 88 |               {item}
 89 |             </li>
 90 |           )
 91 |         }, this)}
 92 |       </ul>
 93 |     )
 94 |   }
 95 | });
 96 | ```
 97 | The key attribute on the list items is used internally by React to keep [things efficient](http://facebook.github.io/react/docs/reconciliation.html). I've also added a data-id attribute that will be used to find out over which element the drop is performed.
 98 | 
 99 | ## Creating a drop placholder
100 | 
101 | For the sake of usability we're going to add a placeholder that will indicate for the user were the drop will happen.
102 | 
103 | ```javascript
104 | var placeholder = document.createElement("li");
105 | placeholder.className = "placeholder";
106 | ```
107 | 
108 | 
109 | ...and here's some shiny CSS to make it all pretty and nice.
110 | 
111 | ```css
112 | li.placeholder {background: rgb(255,240,120);}
113 | li.placeholder:before {
114 |   content: "Drop here";
115 |   color: rgb(225,210,90);
116 | }
117 | ```
118 | 
119 | ## Handling the events
120 | 
121 | All that is left now is to wire up the event handlers to some actual functions.
122 | 
123 | ```jsx
124 | var List = React.createClass({
125 |   ...
126 |   dragStart: function(e) {
127 |     this.dragged = e.currentTarget;
128 |     e.dataTransfer.effectAllowed = 'move';
129 | 
130 |     // Firefox requires calling dataTransfer.setData
131 |     // for the drag to properly work
132 |     e.dataTransfer.setData("text/html", e.currentTarget);
133 |   },
134 |   dragEnd: function(e) {
135 | 
136 |     this.dragged.style.display = "block";
137 |     this.dragged.parentNode.removeChild(placeholder);
138 | 
139 |     // Update state
140 |     var data = this.state.data;
141 |     var from = Number(this.dragged.dataset.id);
142 |     var to = Number(this.over.dataset.id);
143 |     if(from < to) to--;
144 |     data.splice(to, 0, data.splice(from, 1)[0]);
145 |     this.setState({data: data});
146 |   },
147 |   dragOver: function(e) {
148 |     e.preventDefault();
149 |     this.dragged.style.display = "none";
150 |     if(e.target.className == "placeholder") return;
151 |     this.over = e.target;
152 |     e.target.parentNode.insertBefore(placeholder, e.target);
153 |   },
154 |   ...
155 | });
156 | ```
157 | 
158 | Instead of moving the DOM node being dragged, we simply update the state of the component. By doing this, React will automatically render the drop.
159 | 
160 | ## Improving the dragging experience
161 | 
162 | There is one major flaw in what we've created so far. Items can only be dropped before another item, what if we want to drag something to the end of the list?
163 | 
164 | To solve this, we'll track the relative position of the mouse inside the element being dragged over.
165 | 
166 | ```javascript
167 | // Inside the dragOver method
168 | var relY = e.clientY - this.over.offsetTop;
169 | var height = this.over.offsetHeight / 2;
170 | var parent = e.target.parentNode;
171 | 
172 | if(relY > height) {
173 |   this.nodePlacement = "after";
174 |   parent.insertBefore(placeholder, e.target.nextElementSibling);
175 | }
176 | else if(relY < height) {
177 |   this.nodePlacement = "before"
178 |   parent.insertBefore(placeholder, e.target);
179 | }
180 | ```
181 | 
182 | We'll also have to update the dragEnd method to update the data accordingly.
183 | 
184 | ```javascript
185 | // Inside dragEnd method
186 | if(this.nodePlacement == "after") to++;
187 | ```
188 | 
189 | That's all folks, and remember kids: Stay Reactive!
190 | 
191 | 


--------------------------------------------------------------------------------
/pages/blog/2014-04-24-truly-reactive-sortable-component.md:
--------------------------------------------------------------------------------
 1 | # A Truly Reactive Sortable Component
 2 | 
 3 | ---
 4 | 
 5 | You may recently have heard a lot of chanting on how [data changing over time is the root of all evil](http://youtu.be/nYkdrAPrdcw?t=24m58s), "the source of truth" and how [React](http://facebook.github.io/react/) is all about "one directional data flow". These are all pretty words but what do they mean in practice?
 6 | 
 7 | To better illustrate this I'm going to take the [Sortable React component](/sortable-list-component-react-js) that I built, and fix a major flaw in it's design.
 8 | 
 9 | ## Getting rid of manual DOM labour
10 | 
11 | The "drop" action is already being done reactively. This is nice because the change will reflect on any other component in UI that relies on the same data. But I'm still manually inserting a placeholder on drag. What if I wanted to reflect this state somewhere else in the application or vice versa?
12 | 
13 | ### Redefining the state
14 | We need a minor update to the data structure in order for it to carry some more information about the state.
15 | 
16 | ```javascript
17 | var data = {
18 |   colors: [
19 |     "Gold",
20 |     "Crimson",
21 |     "Hotpink",
22 |     "Blueviolet",
23 |     "Cornflowerblue",
24 |     "Skyblue",
25 |     "Lightblue"
26 |   ]
27 | };
28 | ```
29 | 
30 | ## Continuously re-rendering everything
31 | 
32 | Keeping track of DOM changes over time is hard, re-rendering everything based on a state is easier. Instead of manually removing and inserting a DOM placeholder node, we're going to keep track of what's being dragged by saving it in the state.
33 | 
34 | The code is pretty straightforward. The interesting part is the sort method, where we are setting a "dragging" property to the state
35 | 
36 | ```jsx
37 | sort: function(colors, dragging) {
38 |   var data = this.state.data;
39 |   data.colors = colors;
40 |   data.dragging = dragging;
41 |   this.setState({data: data});
42 | },
43 | dragEnd: function() {
44 |   this.sort(this.state.data.colors, undefined);
45 | },
46 | dragStart: function(e) {
47 |   this.dragged = Number(e.currentTarget.dataset.id);
48 |   e.dataTransfer.effectAllowed = 'move';
49 | 
50 |   // Firefox requires calling dataTransfer.setData
51 |   // for the drag to properly work
52 |   e.dataTransfer.setData("text/html", null);
53 | },
54 | dragOver: function(e) {
55 |   e.preventDefault();
56 | 
57 |   var over = e.currentTarget
58 |   var dragging = this.state.data.dragging;
59 |   var from = isFinite(dragging) ? dragging : this.dragged;
60 |   var to = Number(over.dataset.id);
61 |   if((e.clientY - over.offsetTop) > (over.offsetHeight / 2)) to++;
62 |   if(from < to) to--;
63 | 
64 |   // Move from 'a' to 'b'
65 |   var items = this.state.data.colors;
66 |   items.splice(to, 0, items.splice(from,1)[0]);
67 |   this.sort(items, to);
68 | },
69 | render: function() {
70 |   var listItems = this.state.data.colors.map(function(item, i) {
71 |     var dragging = (i == this.state.data.dragging) ? "dragging" : "";
72 |     return (
73 |       <li data-id={i}
74 |           className={dragging}
75 |           key={i}
76 |           draggable="true"
77 |           onDragEnd={this.dragEnd}
78 |           onDragOver={this.dragOver}
79 |           onDragStart={this.dragStart}>
80 |         {item}
81 |       </li>
82 |     );
83 |   }, this);
84 |   return {listItems}
85 | }
86 | ```
87 | 
88 | And that's it: The Root of all Evil and The Source of truth!
89 | 


--------------------------------------------------------------------------------
/pages/blog/2020-01-26-mx-518.md:
--------------------------------------------------------------------------------
 1 | # MX 518 Retrospect
 2 | 
 3 | ![The MX 518](/mx518.jpg)
 4 | 
 5 | <Intro>
 6 |   In this day and age of modern consumerism and <Link href="https://duckduckgo.com/?q=planned+obsolescence">planned obsolescence</Link>, how many of my frequently used electronic appliances have survived the past decade? I only found one: The Logitech MX 518 mouse.
 7 | </Intro>
 8 | 
 9 | After inventorying all technical appliances that I still consider functional for daily use I conclude: the MX is the longest serving member of the household. In fact, the only other electrical appliance that has outlived the MX is my kitchen toaster (disclaimer: as of writing I'm 32 years of age).
10 | 
11 | The MX was originally released in in 2005 retailing at around $50. I bought mine in 2008 and it's been a reliable workhorse since. I've used it daily for browsing, creative work, and occasional gaming. I've owned four different laptops during the same time period.
12 | 
13 | Yes, it's a relatively simple piece of technology, and there aren't too many moving pieces that can break. It's also fairly easy to clean and has no software dependencies. Regardless, I still find it amazing that everything still works after 12 years of daily use. The buttons are as responsive as ever and the precision still feels great.
14 | 
15 | ## Newer, better?
16 | 
17 | As far as pointer devices go, there's been a great deal of innovation since the MX was launched. I've had the opportunity to try some at work. Cordless, "magic" mice, trackpads, high-DPI laser, adjustable weights, the list goes on. The only real draw has been the cordless, but the hassle of charging and occasional connectivity issues are enough to keep me sticking with the MX. Even the physical design and aesthetic of the MX still feels contemporary. The only reason I see myself replacing it, is if it actually stops working.
18 | 
19 | ## End of life
20 | 
21 | All things will eventually come to an end, and so will the MX. Question is how and when? I don't know too much about optical sensors lights, but that feels like a potential candidate of failure. The other thing bound to wear out would be the buttons. I assume the repairability of the MX once it breaks will be next to none.
22 | 
23 | ## Future Prediction
24 | 
25 | My gut feeling is that the trend in consumer electronics is still pointing towards less repairability and longevity. More "smart" connected appliances that are bound to become obsolete as new software is forcedly pushed down onto end users. 
26 | 
27 | 
28 | ### The MX survived the past decade, but will it stay relevant during this one?
29 | 
30 | <SponsoredParagraph>
31 |   Logitech has obviously capitalized on the popularity and success of the MX 518 and released a successor/re-issue: <SponsoredLink href="https://amzn.to/2UiIPNU">The Logitech G MX518 Gaming Mouse</SponsoredLink>
32 | </SponsoredParagraph>
33 | 


--------------------------------------------------------------------------------
/pages/blog/2020-02-02-personal-website-2020-tech-stack.md:
--------------------------------------------------------------------------------
  1 | # My Personal Website 2020 Tech Stack
  2 | 
  3 | ---
  4 | 
  5 | <Intro>Roughly every six years or so, I set out on the seemingly meaningless expedition of re-building my personal website. This post outlines decisions and thoughts on the new architecture, as well as a reflection over what's changed since last time.</Intro>
  6 | 
  7 | I first launched my personal website in 2007. It's taken many forms since. From raw HTML, to PHP, to [Django](https://www.djangoproject.com/), to [Jekyll](https://jekyllrb.com/), and back to raw HTML. It's always been a fun way to explore new technology and do silly over-the-top things without justifying the cost. Who needs Medium or other proprietary blogging platforms!?
  8 | 
  9 | ![Vintage Webcloud](/vintage-webcloud-2010.jpg "Ah, my good old 2010 vintage website in IE7, starting to feel like an old bottle of wine")
 10 | 
 11 | ## Static Pages
 12 | 
 13 | In 2010 this website was statically generated with Jekyll. It took a bunch of Markdown files, processed them and spat out HTML files, later uploaded on a CDN. What felt like great tool at the time also felt somewhat novel. A good fit for my personal blog, but for "real" work? I wasn't sure.
 14 | 
 15 | Fast forward to 2020: Apparently what I did a decade ago is now referred to as the [Jamstack](https://jamstack.org/). Frameworks like [Next.js](nextjs.org/), [Gatsby](https://www.gatsbyjs.com/careers/) and [Hugo](https://gohugo.io/) have become the new mainstream. Companies like Netlify and ZEIT have made static site deployments easy, cheap and accessible to all. What used to be a novel way to build your blog is is now multi-million dollar business model.
 16 | 
 17 | ### Look mum, no React on the client
 18 | 
 19 | For this site, I'm using Next.js to server side render React components into HTML. I'm actually **not using React.js on the client**, as I think it's completely overkill for a personal website/blog. I have few lines of "vanilla" JavaScript to progressively enhance some things like theming, but that is all.
 20 | 
 21 | Turns out I'm one of those weird people who thought that the biggest draw of React.js was JSX (w/ SSR), and the pioneering of componentization. It just made so much sense to me from a UI composition/structure/architectural perspective.
 22 | 
 23 | If anything, not having React at your disposal really makes you think twice about what functionality does the web platform offer natively out of the box. Remember CSS, HTML and browser API's???
 24 | 
 25 | 
 26 | ## Content
 27 | 
 28 | After using raw HTML to create my blog posts for the past 6 years, I'm back to good old Markdown. Ironically this brings me back to what I used with Jekyll 10 years ago. I think any abstraction that outlives my stupid personal website re-builds is probably here to stay. Markdown has stood the test of time!
 29 | 
 30 | The only recent development and addition to this area is the innovation of [MDX](https://mdxjs.com/). I've been a heavy MDX user at work during the past year. Turns out it's a great way to write technical documentation as it allows you to embed JSX into your Markdown.
 31 | 
 32 | Slightly related to recent rise of "static site" popularisation, 2019 also turned out to be a good year for the so called [Headless CMS](https://www.smashingmagazine.com/2018/11/structured-content-done-right/) solutions. This make me happy, as a Front-End developer I've been fighting proprietary black box legacy CMSs for most of my working career.
 33 | 
 34 | 
 35 | [![Serverless Server side Rendering](/serverless-ssr.jpg "Serverless Server Side Rendering As a Service - SSSRaaS. It's a joke... or is it?")](https://twitter.com/KrijnHoetmer/status/1071010569438838786)
 36 | 
 37 | 
 38 | ## Styling & Theming
 39 | 
 40 | In conjunction with the rise of React and other JavaScript UI frameworks we've also seen the rise of CSS-in-JS libraries. This has been a point of much controversy over the past few years.
 41 | 
 42 | I've played around with most of them (eg. Styled Components) but the one that stuck with me was [Styletron](https://www.styletron.org/), and later [Fela](http://fela.js.org/). They both implement the concept of [Atomic/Virtual CSS](https://ryantsao.com/blog/virtual-css-with-styletron).
 43 | 
 44 | ```jsx
 45 | <div css={{ color: "red", background: "blue", padding: "20px" }}>
 46 |   <div css={{ color: "blue", background: "red" }}>Hello</div>
 47 | </div>
 48 | ```
 49 | 
 50 | Outputs the following CSS:
 51 | 
 52 | ```css
 53 | .a { color: "red"; }
 54 | .b { background: "blue"; }
 55 | .c { padding: "20px"; }
 56 | ```
 57 | 
 58 | This essentially means that you can inline exactly the CSS needed to render a specific page, and that no CSS property will ever be declared twice. No unused properties, no duplication. What used to be a pretty hard obstacles like "inline critical CSS required to render above the fold" or 2 MB CSS files are now history.
 59 | 
 60 | Turns out [Facebook is doing something similar](https://twitter.com/adamwathan/status/1123705771995410432?s=12) to this. Disclaimer: while conceptually similar, I'm not convinced by the so called Utility First CSS frameworks like [Tailwind](https://tailwindcss.com/) or [Tachyons](http://tachyons.io/). Why learn a new abstraction when I already know CSS?
 61 | 
 62 | ### Welcome to the dark side
 63 | 
 64 | One thing I wanted for the new site was to let the user pick a preferred color scheme. A light mode or a dark mode (yes I know this is old news). But how could that be done with pre-rendered static HTML pages, no React on the client, and no back-end?
 65 | 
 66 | The answer to that is a piece of inline render-blocking "vanilla" JavaScript in the document `<head>` and the power of [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). I'll do a follow up post on that shortly!
 67 | 
 68 | 
 69 | ## Analytics
 70 | 
 71 | ![Google Analytics Data](/ga-10-years.jpg "Ten years of Google Analytics visitor data. Yes folks, I was killing it back in 2012 :D")
 72 | 
 73 | In all fairness, Google Analytics is a really sophisticated product, and it's free. It's really hard justifying not to use it. I've used it for almost 10 years now both privately and at work. For the sake of learning new tools and exploration, I've opted to go for something else this time. I was mainly looking at three criterias:
 74 | 
 75 | 1. Simpler/more lightweight, GA is overkill for what I need.
 76 | 2. Non privacy-invasive
 77 | 3. Support small bussiness, break big tech monolopy!
 78 | 
 79 | I ended up going with <SponsoredLink href="https://referral.simpleanalytics.com/daniel-stocks">Simple Analytics</SponsoredLink>. I've had a great experience so far and even got help from the founder setting up DNS CNAME records to serve the analytics script from my own domain.
 80 | 
 81 | 
 82 | 
 83 | ## Deployment
 84 | 
 85 | Up until now I've been using GitHub pages to deploy this site, and 6 year ago it was by far the simplest way to hook up a Git repository to a static site deploy. It's *incredible* how much these services have matured since. We now have the likes of [Netlify](netlify.com), [Firebase](https://firebase.google.com/) and [ZEIT Now](https://zeit.co/home), only to name a few. And for personal use, they are all free!
 86 | 
 87 | I ended up using Zeit Now, because they offer more configurability out of the box. As a bonus they fixed an issue/bug in their server software [that I reported on GitHub](https://github.com/zeit/now/issues/3731) and deployed the fix in less than 48 hours. Consider me impressed.
 88 | 
 89 | 
 90 | 
 91 | 
 92 | 
 93 | ### Static sites (on steroids)
 94 | 
 95 | One really powerful concept that most static site hosting providers now offer out of the box are URL rewrites. This allows you to essentially proxy requests to other domains. The simplicity of this really blew me away. I remember I used to have to configure and setup NGINX or other proxy services to do stuff like this. Now all I have to do is create a JSON file.
 96 | 
 97 | ```json
 98 | {
 99 |   "rewrites": [
100 |     { "source": "/about", "destination": "/about-our-company.html" },
101 |     { "source": "/resize/:width/:height", "destination": "/api/sharp" },
102 |     { "source": "/user/:id", "destination": "/api/user" },
103 |     { "source": "/proxy/(.*)", "destination": "https://example.com/$1" }
104 |   ]
105 | }
106 | ```
107 | 
108 | ## CI/CD
109 | 
110 | One really cool thing with Zeit Now is that you get **preview deploys** out of the box. Open a pull request and the changes will be deployed in a production like environment.
111 | 
112 | I was able to leverage GitHub Actions to run Lighthouse Performance and QA tests, as well as Percy visual regression [tests against previews deploys](/blog/2020-02-16-github-actions-preview-deploys) in pull requests. This gives me A LOT of confidence that I wont merge anything that will degrade the quality of the site.
113 | 
114 | 
115 | ## Long term maintenance
116 | 
117 | The last thing I want to do is to have to spend a lot of time maintaining my personal website. For this rewrite I got a great deal of inspiration from Jeff Huangs excellent article: [This Page is Designed to Last](https://jeffhuang.com/designed_to_last/)
118 | 
119 | Looking back at the old site: The main pain point throughout the years was fixing occasionally breaking 3:rd party JavaScript plugins: Namely Disqus and JSFiddle embeds. So, I got rid of those.
120 | 
121 | 
122 | ## In summary
123 | 
124 | The quality and variety of **free** tools, libraries and services available today is absolutely amazing.
125 | I truly feel more empowered then ever when it comes to shipping a website in a limited time frame with no budget.
126 | 
127 | I've been building websites for a relatively long time now (I started out with Microsoft FrontPage and Macromedia Dreamweaver). When I rebuilt my website 6-7 years ago, it was either all manual labour, or spending both time and money on setting up custom infrastructure.
128 | 
129 | Are you wondering how all of this looks ties together? Have a look at the [GitHub repository](https://github.com/danielstocks/webcloud/) that powers this site.
130 | 
131 | I'm looking forward to rebuild my site again 2030! So long folks!
132 | 
133 | 


--------------------------------------------------------------------------------
/pages/blog/2020-02-16-github-actions-preview-deploys.md:
--------------------------------------------------------------------------------
  1 | # Running GitHub Actions on Preview Deploys
  2 | 
  3 | ![GitHub Deploy Action PR checks](/github-deploy-action.png)
  4 | 
  5 | <Intro>
  6 | Ever wanted to run CI/CD tools like Lighthouse or Visual Regression tests against a PR preview deploy using GitHub actions? This is how I did it.
  7 | </Intro>
  8 | 
  9 | Preview deploys is a GitHub integration offered by services like [Netlify](https://docs.netlify.com/site-deploys/overview/#deploy-preview-controls) and [Zeit Now](https://zeit.co/docs/v2/platform/deployments/#preview) that will automatically deploy a changes from a feature branch to a production-like environment.
 10 | 
 11 | Many existing examples of testing static sites with GitHub actions involved running `npm install` and `npm build`, and then running a HTTP server to test against localhost. While this works, I wanted to run these tests against an actual preview deploy. The benefits of this would be:
 12 | 
 13 | 1. Efficiency. Only running the tests if a preview deploy succeeded. If the deploys fails in the first step why even bother attempting running the rest of the CI/CD toolchain.
 14 | 
 15 | 2. Trust. Running the CI/CD tests against a production-grade environment gives me more confidence in the test feedback and results.
 16 | 
 17 | ## Workflow
 18 | 
 19 | To understand all moving parts here, let's examine the full workflow written in text:
 20 | 
 21 | 1. Commit code to a branch, push to GitHub
 22 | 2. Open a Pull Request
 23 | 3. **Action**: Immediately Run Static Checks:
 24 |     * Unit tests
 25 |     * ESlint/Prettier check
 26 | 4. Deploy Changes to a "Preview Deploy"
 27 | 5. **Action**: When preview deploy is done:
 28 |     * Run Lighthouse tests against Preview Deploy URL
 29 |     * Run Visual Regression tests against Preview Deploy URL
 30 | 6. All checks green? Ask for code review!
 31 | 7. Merge.
 32 | 8. Profit.
 33 | 
 34 | 
 35 | ## GitHub Deployments
 36 | 
 37 | If you've setup preview deploys correctly there should be a link to "environments" on your repository page. Here you'll see "Deployed to Production" an "Deployed to Preview". 
 38 | 
 39 | The nice thing about GitHub Deployments is that they are events that we can hook into. We want to run the action once the deployment has finished but only if it's successful. We can do this by triggering our workflow on the `deployment_status` event, but only run the job if `github.event.deployment_status.state` equals `success`.
 40 | 
 41 | ### Example Workflow: deploy_status conditional build
 42 | 
 43 | ```yaml
 44 | # .github/workflows/example_workflow.yml
 45 | name: Successful Deploy Action Example
 46 | on: deployment_status
 47 | jobs:
 48 |   build:
 49 |     if: github.event.deployment_status.state == 'success'
 50 |     runs-on: ubuntu-latest
 51 |     steps:
 52 |       - name: XYZ
 53 |         run: npm run xyz
 54 |         env:
 55 |           DEPLOY_URL: ${{ github.event.deployment_status.target_url }}
 56 | ```
 57 | 
 58 | You'll also notice that i set the `DEPLOY_URL` environment variable here, retrieved from `github.event.deployment_status.target_url`. This will allow my NPM script to access the URL to the preview deploy through `process.env.DEPLOY_URL`.
 59 | 
 60 | 
 61 | ## Full Example #1: Lighthouse CI Integration
 62 | 
 63 | One of the actions I run on preview deploys are Lighthouse CI tests, to find any regressions in performance, accessibility, SEO or other best practices. I recommend you read the [Lighthouse CI get started guide](https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md) if you haven't already
 64 | 
 65 | ```yaml
 66 | name: Lighthouse CI
 67 | on: deployment_status
 68 | jobs:
 69 |   lhci:
 70 |     if: github.event.deployment_status.state == 'success'
 71 |     name: Lighthouse CI
 72 |     runs-on: ubuntu-latest
 73 |     steps:
 74 |       - uses: actions/checkout@v1
 75 |       - name: Use Node.js 10.x
 76 |         uses: actions/setup-node@v1
 77 |         with:
 78 |           node-version: 10.x
 79 |       - name: run Lighthouse CI
 80 |         run: |
 81 |           npm install -g @lhci/cli@0.3.x
 82 |           lhci autorun --collect.url=${DEPLOY_URL} --upload.target=temporary-public-storage || echo "LHCI failed!"
 83 |         env:
 84 |           LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
 85 |           DEPLOY_URL: ${{ github.event.deployment_status.target_url }}
 86 | ```
 87 | 
 88 | In the above example I'm only running the lighthouse test against a single page. You can pass multiple URLs by passing the `--collect.url` multiple times. In the future I want to automate this by running only against the URLs that have potentially been affected by the changes in the PR (this could be done with a simple diff against master branch).
 89 | 
 90 | Also Worth mentioning is that I'm using `upload.target=temporary-public-storage` which means my HTML reports are being stored publicly on a shared Google Cloud Storage account (currently offered for free by Google but that might change)
 91 | 
 92 | 
 93 | ## Full Example #2 - Percy Visual Regression Tests
 94 | 
 95 | I'm using [Percy](https://percy.io/) to run and store my visual regressions tests. This workflow will take snapshots and compare them to the latest approved version on the master branch.
 96 | 
 97 | ```yaml
 98 | name: Visual Regression Test
 99 | on: deployment_status
100 | jobs:
101 |   build:
102 |     if: github.event.deployment_status.state == 'success'
103 |     runs-on: ubuntu-latest
104 |     steps:
105 |       - uses: actions/checkout@v1
106 |       - name: Use Node.js 10.x
107 |         uses: actions/setup-node@v1
108 |         with:
109 |           node-version: 10.x
110 |       - name: Percy Test
111 |         run: |
112 |           npm install
113 |           npx percy exec -- node test/snapshots.js
114 |         env:
115 |           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
116 |           DEPLOY_URL: ${{ github.event.deployment_status.target_url }}
117 | ```
118 | 
119 | Instead of running screenshots of all pages (e.g. blog posts individually == too many) I'm continuously running them on three specific URLs. These pages cover most of the ways I use UI components both in a "dark theme" and "light theme". I might also improve this in the future only to screenshot page that have a HTML diff. Here's the sample snapshots file:
120 | 
121 | 
122 | ```javascript
123 | const PercyScript = require('@percy/script');
124 | 
125 | PercyScript.run(async (page, percySnapshot) => {
126 |   await page.goto(process.env.DEPLOY_URL);
127 |   await percySnapshot('homepage');
128 |   await page.click('#toggle-theme');
129 |   await percySnapshot('homepage - dark');
130 | });
131 | ```
132 | 
133 | And that's all for today folks! I hope you learned something.
134 | 
135 | 
136 | 
137 | 
138 | 
139 | 
140 | 


--------------------------------------------------------------------------------
/pages/blog/2020-03-12-nextjs-without-client-side-react.md:
--------------------------------------------------------------------------------
  1 | # Server-side Only React with Next.js
  2 | 
  3 | ---
  4 | 
  5 | <Intro>
  6 | A commonly heard critique of React is that it's a heavy handed or over-engineered framework, that for many websites provides little or no added benefit. As an experiment, I removed React from my website... on the client-side.
  7 | </Intro>
  8 | 
  9 | You know that feeling you get sometimes that *the web* is broken?
 10 | 
 11 | You visit a seemingly simple website with little or no interactivity, yet somehow it sends you 2 MB of JavaScript to digest. You're half way down the article that you're reading and suddenly: client-side rendering kicks in, resets everything. You try to find your way back but the page is now janking around. Your mobile device is brought to a crawl and behaving like it's taking its last dying breath. You end up rage quitting and screaming: THE WEB IS BROKEN, as your colleagues look worryingly in your direction.
 12 | 
 13 | 
 14 | [![Netflix talk React SSR](/netflix-react-ssr.jpg "The UI Engineers over at Netflix created a Twitter storm while doing similar experiments back in 2017, but for purposes slightly other than mine.")](https://twitter.com/NetflixUIE/status/923374215041912833)
 15 | 
 16 | 
 17 | In spite of all this, when I re-built my personal website (for the n:th time) I made the decision to use [React](https://reactjs.org/) and [Next.js](https://nextjs.org/)! Am I a hypocrite? (you decide for yourself).
 18 | 
 19 | ## Why Next.js + React for a Blog?
 20 | 
 21 | Even if I didn't intend on using React on the client-side, I still wanted to use it on the server for the following reasons:
 22 | 
 23 | - I wanted to write blog posts in Markdown, so I needed something to convert Markdown to HTML. [MDX](https://mdxjs.com/) (Markdown + JSX) enabled me to transform Markdown into custom React Components.
 24 | 
 25 | - React aside, I really like organizing code around the component mental model. I wasn't keen on going back to string based templates and CSS preprocessors (looking back at my old Gulp/Grunt files can trigger nightmares).
 26 | 
 27 | - There's a bunch of great JavaScript libraries I want to use server side, for [date-formatting](https://date-fns.org/), code [syntax highlighting](https://prismjs.com/) etc. Having a Node.js compatible application framework allows me to do that.
 28 | 
 29 | - Next has a truly great developer experience that allows me to leverage what I already know about React and is highly configurable. Simply drop js and md files into a _pages/_ and you're ready to go.
 30 | 
 31 | ### Other options considered?
 32 | 
 33 | I did try [Gatsby](https://www.gatsbyjs.org) and it's great, but I felt it was too much of a black box, and I have no idea what's going on under the hood. I also tried rolling my own minimal setup with MDX and Reacts `renderToString`, but I found myself simply re-inventing Next. In the past I've also tried [Jekyll](https://jekyllrb.com/) and [Hugo](https://gohugo.io/). I found that both work great out of the box, but were hard to customize as I'm not very fluent in either Ruby or Go.
 34 | 
 35 | The other option I did consider was the plain vanilla ice-cream flavour. Simple, no build step, no Markdown, only plain HTML, JS and CSS files. This was tempting. I usually opt for this if the project allows it. The downside being that as soon as you want to do anything fancy like component re-use or refactoring it quickly gets messy and hard to maintain.
 36 | 
 37 | ## What's _Next?_
 38 | 
 39 | [Next.js](http://nextjs.org) is a multi-purpose React application framework, but for my purposes it's mainly a static site generation tool (comparable to Jekyll or Gatsby). It takes an input (Markdown in my case) and spits out a bunch of HTML files that are later deployed on a CDN. No server-side runtime required.
 40 | 
 41 | ### Next is great for universal websites
 42 | 
 43 | Websites built with Next are isomorphic/universal out of the box. That means that most of the JavaScript you write is run on the server, but also automatically bundled, tree-shaken, split into small modules and shipped to the client. This allows you to seamlessly pre-render your JavaScript application on the server, and add interactivity on the client without any extra configuration.
 44 | 
 45 | ### The Elephant In the Room: 453kB of JavaScript
 46 | 
 47 | So what's the problem? Ladies and Gentlemen, this is a blog. It's a one way communication channel with little or no interactivity. Most people read one article and then leave, and that's OK.
 48 | 
 49 | For the tiny amount of interactivity that this site offers there is simply no way I could justify sending you 453kb of JavaScript that simply "re-renders" the page on the client.
 50 | 
 51 | ![Client Side Bundle](/client-side-bundle.jpg "What are you saying? All of this JavaScript? For no value!?!")
 52 | 
 53 | ## Part 2: Killing the Elephant
 54 | 
 55 | <Disclaimer>Disclaimer: no animals were harmed during this experiment</Disclaimer>
 56 | 
 57 | What I like about Next is that you can heavily customize it. I've done so to an extent that there's no notion of the Next runtime or traces of it in the statically generated HTML.
 58 | 
 59 | What I've done here is to remove all client-side JavaScript and extra markup that Next outputs. This is how:
 60 | 
 61 | ### Create a Custom Head Component
 62 | 
 63 | One option is to just use a normal HTML `<head>` element here. However, extending the Next Head component will allows us to inject a `<title>` from any component or page, this is useful.
 64 | 
 65 | ```jsx
 66 | import { Head } from "next/document";
 67 | class MyHead extends Head {
 68 |   render() {
 69 |     let { head } = this.context._documentProps;
 70 |     let children = this.props.children;
 71 |     return (
 72 |       <head {...this.props}>
 73 |         {children}
 74 |         {head}
 75 |       </head>
 76 |     );
 77 |   }
 78 | }
 79 | ```
 80 | 
 81 | ### Create a Custom Main Component
 82 | 
 83 | This is not really necessary but to satisfy my OCD I wanted to get rid of the `<div id="next">` wrapper around my content.
 84 | 
 85 | ```jsx
 86 | import { Main } from "next/document";
 87 | export class MyMain extends Main {
 88 |   render() {
 89 |     const { html } = this.context._documentProps;
 90 |     return <div dangerouslySetInnerHTML={{ __html: html }} />;
 91 |   }
 92 | }
 93 | ```
 94 | 
 95 | ### Stitching it together: Custom Document
 96 | 
 97 | Customizing the `pages/_document.js` is quite common, only we're going to do it slightly differently. The key here is that we omit the `<NextScript/>` component and keep things as slimmed down as possible
 98 | 
 99 | ```jsx
100 | import Document from "next/document";
101 | export default class extends Document {
102 |   render() {
103 |     return (
104 |       <html lang="en">
105 |         <MyHead>
106 |           <meta
107 |             name="viewport"
108 |             content="width=device-width, initial-scale=1, shrink-to-fit=no"
109 |           />
110 |         </MyHead>
111 |         <body>
112 |           <MyMain />
113 |         </body>
114 |       </html>
115 |     );
116 |   }
117 | }
118 | ```
119 | 
120 | For brevity, I've left out the CSS-in-JS parts in the example above, I'll leave that for another article.
121 | 
122 | ### End Result
123 | 
124 | With this bare bone setup we get the following HTML output:
125 | 
126 | ```html
127 | <!DOCTYPE html>
128 | <html lang="en">
129 |   <head>
130 |     <meta
131 |       name="viewport"
132 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
133 |     />
134 |     <meta charset="utf-8" />
135 |     <title>webcloud</title>
136 |   </head>
137 |   <body>
138 |     <div>Welcome to my no JavaScript Next page</div>
139 |   </body>
140 | </html>
141 | ```
142 | 
143 | The end result is pretty cool: I get a HTML page that is server-side rendered with React, generated from a Markdown file. Things like code syntax highlighting is done on the server, so no need for a client-side runtime.
144 | 
145 | I'm using [Fela](http://fela.js.org/) for CSS-in-JS so that the critical amount of CSS needed to render a specific page is inline directly in the head. This means a HTML page that is entirely self-contained, no external CSS or JavaScript files required, only a single request!
146 | 
147 | ### Bonus: Adding client-side JavaScript back in the mix
148 | 
149 | OK I lied, this page is not entirely JavaScript free. You may have noticed that I have a dark/light theme switching button in the top right corner. To achieve this I've added roughly 0.5kB of render blocking JavaScript that detects the users OS color preference, and modified CSS global properties before the page is rendered. I've written [another article](/blog/2020-04-06-flash-of-unstyled-dark-theme) about this.
150 | 
151 | ### Bonus: Getting back that "SPA" feeling
152 | 
153 | One thing that _is_ nice with client side applications is that navigating between pages is more or less instant. This is not huge problem for me, as most of my content is long form, and I don't expect my visitors to be doing a lot of navigation between pages. Regardless, I still wanted to find a way to enhance perceived navigational performance without introducing too much complexity.
154 | 
155 | To achieve this I added a small script called [instant.page](https://instant.page/) (1 kB). It uses just-in-time preloading — it preloads a page right before a user clicks on it.
156 | 
157 | ### To do: Opt out of client-side bundling build step
158 | 
159 | One thing that I haven't figured out yet is how to make Next not build the client side bundle on deploy. The cost of this will grow over time as I get more and more markdown pages, but right now the entire site builds in less than 10 seconds so it's not really an issue.
160 | 
161 | ## Summary
162 | 
163 | This was an experiment, and while I'm relly happy with the result I wouldn't advise people to build a website using this method. For my specific project and purpose it's been a good fit. Most important of all I had a lot of fun while doing it and learned quite a few things about Next!
164 | 
165 | If you're interested in learning how everything fits together you can check out the [source code](http://github.com/danielstocks/webcloud) for my website on GitHub
166 | 
167 | Lastly I want to thank you [Robin](https://weser.io/) and [Geries](https://www.gtothesquare.com/) for reviewing this article prior to publishing.
168 | 


--------------------------------------------------------------------------------
/pages/blog/2020-04-06-flash-of-unstyled-dark-theme.md:
--------------------------------------------------------------------------------
  1 | # FOUDT: Flash of Unstyled Dark Theme
  2 | 
  3 | ---
  4 | 
  5 | <Intro>
  6 | As many of us are embarking on the dark theme website trend, the popularity of building statically generated websites with frameworks like Gatsby and Next is also growing. This has given rise to a new unintentional side effect — <em>the flash of unstyled dark theme</em>. Learn what it is, and how to avoid it.
  7 | </Intro>
  8 | 
  9 | !["DARK THEME"](/gatsby-dark-theme-lighthouse.jpg "Running a lighthouse test again gatsbyjs.org (as of 2020-04-02) reveals that the page has pre-rendered a light theme and then re-renders with a dark theme once client-side JavaScript kicks in")
 10 | 
 11 | 
 12 | ## Naive Implementation
 13 | 
 14 | Statically generated sites are "pre-rendered" HTML files usually served from CDN. As part of pre-rendering CSS is also applied, usually with some CSS-in-JS framework involved. On first paint, the user will see a pre-rendered page. Once client-side JavaScript runs and detects the users preferred theme, the page will re-render.
 15 | 
 16 | If the users preferred theme is different from the default theme, the page re-render will be perceived as a "flash" between the two. I call this the *naive theming implementation*.
 17 | 
 18 | 
 19 | ### Is this *really* a problem?
 20 | 
 21 | From a UX perspective, this is similar to other undesirable side effects such as [flash of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) and [flash of faux text](https://www.zachleat.com/web-fonts/demos/foft.html). It might not be the end of the world but it's still noticeable. On a slow connection it can be very distracting and confusing as it takes a longer time for client-side JavaScript to execute.
 22 | 
 23 | ## Improved implementation
 24 | 
 25 | It turns out this side-effect is entirely avoidable with some basic usage of CSS media queries and global [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (commonly referred to as CSS variables)
 26 | 
 27 | If you're just rendering the page based on user OS theme preference, this problem can **and should** be solved in CSS, not in JavaScript. Use the `prefers-color-scheme` media query in the `<head>` section of your HTML.
 28 | 
 29 | ```css
 30 | :root {
 31 |   --color-fg: #000;
 32 |   --color-bg: #fff;
 33 | }
 34 | @media (prefers-color-scheme: dark) {
 35 |   :root {
 36 |     --color-fg: #fff;
 37 |     --color-bg: #000;
 38 |   }
 39 | }
 40 | ```
 41 | 
 42 | In your React components simply refer to your global custom properties.
 43 | 
 44 | ```jsx
 45 | // Pseudo code
 46 | const Text = ({ children }) {
 47 |   <P css={{ color: "var(--color-fg" }}>
 48 |     {children}
 49 |   </P>
 50 | }
 51 | ```
 52 | 
 53 | Or if you're using good old global CSS, just do something like:
 54 | 
 55 | ```jsx
 56 | body {
 57 |   color: var(--color-fg);
 58 |   background: var(--color-bg);
 59 | }
 60 | ```
 61 | 
 62 | As we've now moved the theming logic to CSS, there should be no flash as client-side rendering kicks in.
 63 | 
 64 | One drawback is that CSS custom properties has [limited support](https://caniuse.com/#search=custom%20properties) in legacy browsers (notably Internet Explorer), but it can be [polyfilled](https://jhildenbiddle.github.io/css-vars-ponyfill/). I would find it acceptable to have a fallback for those browsers to only supported a single theme.
 65 | 
 66 | 
 67 | ## Adding more features
 68 | 
 69 | The global CSS custom properties solution works well for the simple use case of rendering a single theme. What about the more complex use cases?
 70 | 
 71 | ### Allow users to switch themes
 72 | 
 73 | A common feature is to allow users to switch between themes after the initial rendering. For this kind of interactivity we need JavaScript. That does not imply that we need React, we simply need an interface to modify the global CSS custom properties. Let's start with extracting our theme into a JSON structure:
 74 | 
 75 | ```javascript
 76 | var themes = {
 77 |   light: {
 78 |     "color-fg": "#000",
 79 |     "color-bg": "#fff",
 80 |   },
 81 |   dark: {
 82 |     "color-fg": "#000",
 83 |     "color-bg": "#fff",
 84 |   }
 85 | };
 86 | ```
 87 | 
 88 | Now you can add this piece of *render-blocking* JavaScript in your `<head>`
 89 | 
 90 | ```javascript
 91 | // Get root <html> node style interface
 92 | var root = document.documentElement.style;
 93 | var darkMatcher = window.matchMedia("(prefers-color-scheme: dark)");
 94 | var prefersColorScheme = darkMatcher.matches ? "dark" : "light";
 95 | 
 96 | /*
 97 |  * You can overwrite this function from within your React app.
 98 |  * eg: window.__onSetTheme = (themeName) => setThemeName(themeName)
 99 |  */
100 | window.__onSetTheme = function() {};
101 | window.__setTheme = function(themeName) {
102 |   var theme = themes[themeName];
103 |   Object.keys(theme).forEach(function(key) {
104 |     // Set global custom properties on root element
105 |     root.setProperty("--" + key, theme[key]);
106 |     window.__onSetTheme(theme)
107 |   });
108 | }
109 | window.__setTheme(prefersColorScheme);
110 | ```
111 | 
112 | This will set the color scheme for the initial render and also expose a global `__setTheme` function that you can call from within your React UI. You can also override the `__onSetTheme` to subscribe to when a theme change is applied.
113 | 
114 | 
115 | ### Persist user theme preference
116 | 
117 | The next thing you might want to do is to persist the theme that the user has opted for. A good candidate for this is to use `localStorage`. Update the `__setTheme` function
118 | 
119 | ```javascript
120 | window.__setTheme(themeName) {
121 |   window.localStorage.setItem("themeName", themeName);
122 |   ...
123 | }
124 | ```
125 | 
126 | Update the `setTheme` function call to attempt to use the persisted theme first, otherwise pass the `prefersColorScheme`
127 | 
128 | ```javascript
129 | var savedTheme = window.localStorage.getItem('themeName');
130 | window.__setTheme(savedTheme || prefersColorScheme);
131 | ```
132 | 
133 | Ps. Consider wrapping your `localStorage` calls in a try/catch block statement to avoid any [runtime errors](https://stackoverflow.com/questions/18860098/on-a-browser-sessionstorage-in-safaris-private-browsing-does-not-work-the-same).
134 | 
135 | ### Listen to thematic changes in user OS
136 | 
137 | As a last added bonus, we can listen to if the user changes the preferred OS color scheme. It can be debatable if the page should should change if the user has explicitly chosen a theme to use. I can see this being more useful for apps that always should adapt to it's surroundings like a desktop or mobile application.
138 | 
139 | ```javascript
140 | darkmatcher.addListener(function() {
141 |   setTheme(darkMatcher.matches ? 'dark' : 'light');
142 | })
143 | ```
144 | 
145 | Note: If you're using a pure CSS media query solution as outlined in the first improved example, you already get this for free without any additional JavaScript.
146 | 
147 | 
148 | ### Working examples
149 | 
150 | For the sake of this article I've put together two working demos to show how everything fits together. They include the React UI parts and local state management wired together with the theme switching JavaScript functions.
151 | 
152 | - Next example: [Demo](https://next-flash-of-unstyled-dark-theme.netlify.com/) | [Source](https://github.com/danielstocks/flash-of-unstyled-dark-theme/tree/master/next)
153 | - Gatsby example: [Demo](https://gatsby-flash-of-unstyled-dark-theme.netlify.com/) | [Source](https://github.com/danielstocks/flash-of-unstyled-dark-theme/tree/master/gatsby)
154 | 
155 | ## Summary
156 | 
157 | Hopefully you've now learned how to apply theming on a statically generated website built with React while avoiding the *flash of unstyled dark theme* side effect!
158 | 
159 | What we've covered in here:
160 | 
161 | - The naive theming approach
162 | - The CSS only solution
163 | - Adding Features
164 |   - Theme switching
165 |   - Persisting theme preference
166 |   - Subscribing to OS level theme changes
167 | - Next and Gatsby examples
168 | 
169 | A topic that we haven't covered in this article that I highly recommend studying further is that of [theming imagery](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b).
170 | 
171 | 
172 | ### Credits
173 | 
174 | - Thanks to [Geries](https://www.gtothesquare.com/) & [Robin](https://weser.io) for reviewing this article
175 | 
176 | - The article title "Flash of Unstyled dark Theme" was taken from a [tweet](https://twitter.com/zachleat/status/1245453351950716936) by [Zach Leatherman](https://www.zachleat.com/)
177 | 
178 | 
179 | 
180 | 
181 | 


--------------------------------------------------------------------------------
/pages/blog/2021-11-23-minimal-git-config-mac-m1-zsh.md:
--------------------------------------------------------------------------------
  1 | # A Minimal Zsh Git Setup
  2 | 
  3 | ---
  4 | 
  5 | <Intro>
  6 | This how I setup my Git configuration on a Mac M1 device with Zsh. A reference for my future self.
  7 | </Intro>
  8 | 
  9 | Since switching to an Mac M1 device earlier this year my [old dotfiles](https://github.com/danielstocks/dotfiles) didn't work anymore.
 10 | Apart from X86 => Arm, Mac OS also ships with Zsh as the default shell instead of Bash since a while back. Instead of attempting to migrate my entire setup I decided to use a vanilla configuration for a few months to really identify the annoynances of my daily git usage. Here's what I ended up really missing:
 11 | 
 12 | ## User configuration
 13 | 
 14 | Like many, I use the same device _at my job_, as I do for working on personal and open source projects. For the latter, I want to use my personal credentials when doing git commits.
 15 | 
 16 | I use a `.gitconfig` file in `~` together with a `.gitconfig-work` and a `.gitconfig-personal` to fix this.
 17 | 
 18 | ```sh
 19 | # .gitconfig
 20 | [includeIf "gitdir:~/Projects/personal/"]
 21 |   path = .gitconfig-personal
 22 | [includeIf "gitdir:~/Projects/work/"]
 23 |   path = .gitconfig-work
 24 | ```
 25 | 
 26 | ```sh
 27 | # .gitconfig-personal
 28 | [user]
 29 |   name = Daniel
 30 |   email = daniel@my-personal-email.com
 31 | ```
 32 | 
 33 | ```sh
 34 | # .gitconfig-work
 35 | [user]
 36 |   name = Daniel
 37 |   email = daniel@my-work-email.com
 38 | ```
 39 | 
 40 | To verify that you've set it up correctly. Go into a git repository and type `git config user.email` to verify the right user is configured for the present working directory.
 41 | 
 42 | ## Aliases
 43 | 
 44 | In my `.zshrc` i a few simple git aliases, but that I type atleast 100 times per day:
 45 | 
 46 | ```sh
 47 | alias gs="git status"
 48 | alias gb="git branch"
 49 | alias gc="git checkout"
 50 | ```
 51 | 
 52 | What's nice about aliases is that you can still pass arguments that you would normally do. For example `gc -b new-branch`
 53 | 
 54 | I don't commit, push, pull or rebase as offen so I usually leave those as is.
 55 | 
 56 | ### Pushing new branches to origin
 57 | 
 58 | This is by far my favorite shortuct. If you're like me, you create a lot of branches locally, and then you want to push them to something like GitHub, typing `git push` will yield the following error:
 59 | 
 60 | ```sh
 61 | fatal: The current branch my-new-branch has no upstream branch.
 62 | To push the current branch and set the remote as upstream, use
 63 | 
 64 |     git push --set-upstream origin my-new-branch
 65 | ```
 66 | 
 67 | Instead of copy pasting the above (which i used to do all the time), I now have a alias named `gpo` that does the following:
 68 | 
 69 | ```sh
 70 | alias gpo="git push -u origin HEAD"
 71 | ```
 72 | 
 73 | Edit (2024-05-21): This can now also be set to happen automatically with the [push.autoSetupRemote](https://git-scm.com/docs/git-push#Documentation/git-push.txt-pushautoSetupRemote) git configuration flag.
 74 | 
 75 | You can set it by running `git config --global --add --bool push.autoSetupRemote true` in your CLI.
 76 | 
 77 | ## Minor Zsh improvements
 78 | 
 79 | ### Prompt
 80 | 
 81 | The standard prompt looks something like this. Not very helpful.
 82 | 
 83 | ```sh
 84 | daniel@Daniels-Mac some-project-dir %
 85 | ```
 86 | 
 87 | With a few lines of configuration in `.zshrc`
 88 | 
 89 | ```sh
 90 | autoload -Uz vcs_info
 91 | precmd_vcs_info() { vcs_info }
 92 | precmd_functions+=( precmd_vcs_info )
 93 | setopt prompt_subst
 94 | zstyle ':vcs_info:git:* ' formats '%b '
 95 | PROMPT='%B%F{240}%1~%f%b $vcs_info_msg_0_➟'
 96 | ```
 97 | 
 98 | We can make it show the current git branch (`main` in this example) if inside a folder with a git repository.
 99 | 
100 | ```sh
101 | some-dir ➟
102 | cd some-project-dir
103 | some-project-dir main ➟
104 | ```
105 | 
106 | Atleast that saves my typing `gb` 50 times less a day :D
107 | 
108 | ### Autocompletion
109 | 
110 | I used to think this required a big old bash script to work, but it turns out it's as easy as enabling Zsh's built in [Completion system](https://www.csse.uwa.edu.au/programming/linux/zsh-doc/zsh_23.html)
111 | 
112 | ```sh
113 | autoload -Uz compinit && compinit
114 | ```
115 | 
116 | And you're done. Magic.
117 | 
118 | ### But what about "x" ?
119 | 
120 | The tweaks in this article adressed the things that annoyed me the most after using git for a few months without any configuration.
121 | 
122 | I know there are a million things to configure with git but I tend to stick with a simple setup these days :)
123 | 


--------------------------------------------------------------------------------
/pages/blog/2024-04-23-mapped-indexed-access-types-typescript.md:
--------------------------------------------------------------------------------
 1 | # Mapped vs Indexed Access types in TypeScript
 2 | 
 3 | ---
 4 | 
 5 | <Intro>
 6 | A quick example on how to improve type checking in your TypeScript code by using a mapped type instead of an indexed access type.
 7 | </Intro>
 8 | 
 9 | TypeScript provides a nice level of runtime safety, well... assuming that you have `strict": true` and `"noUncheckedIndexedAccess": true` configured (now all you have to do is write code that compiles without errors :).
10 | 
11 | Here's an abstract example: Fetching a value from an object and then using the value as a key to access a value in another object, where the keys are known. As a relative newcomer to the language, I found myself writing a lot of code just to satisfy the compiler, checking for undefined values, which turned out to be unnecessary.
12 | 
13 | Here's a concrete example: Getting the opposite of a direction and translate it into something readable. My first instinct here was to reach for an [indexed access type](https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html), and did the following:
14 | 
15 | ```js
16 | type Direction = "n" | "s" | "w" | "e";
17 | 
18 | const oppositeDirections: {
19 |   [key: string]: Direction
20 | } = {
21 |   s: "n",
22 |   n: "s",
23 |   e: "w",
24 |   w: "e"
25 | };
26 | 
27 | const translations = {
28 |   n: "north",
29 |   s: "south",
30 |   w: "west",
31 |   e: "east"
32 | };
33 | 
34 | let north: Direction = "n";
35 | 
36 | console.log(
37 |   `The opposite of ${translations[north]} is ${
38 |     translations[oppositeDirections[north]]
39 |   }`
40 | );
41 | ```
42 | 
43 | While this may seem intuitive at first, it will unfortunately give you the following error: `Type 'undefined' cannot be used as an index type.` because TypeScript doesn't know if oppositeDirection will actually map to an actual value. To fix this, you could first make sure that `oppositeDirection[north]` isn't `undefined`.
44 | 
45 | ```js
46 | let north: direction = "n";
47 | let oppositeDirection = oppositeDirections[north];
48 | 
49 | if (oppositeDireciton) {
50 |   console.log(
51 |     `The opposite of ${translations[north]} is ${translations[oppositeDireciton]}`
52 |   );
53 | }
54 | ```
55 | 
56 | This feels kind of annoying, as it requires an extra runtime check only to satisfy the TypeScript compiler. In this case we _know_ that oppositeDirection is always going to return a direction (the way that we typed it with a string union).
57 | 
58 | The solution? Use a [Mapped Type](https://www.typescriptlang.org/docs/handbook/2/mapped-types.html) instead:
59 | 
60 | ```js
61 | const oppositeDirections: { [K in Direction]: Direction } = {
62 |  n: "s",
63 |  s: "n",
64 |  w: "e",
65 |  e: "w",
66 | };
67 | ```
68 | 
69 | With a mapped type the TypeScript compiler will know exactly what properties will exist on the object _ahead of time_. Therefore you can safely access the property with no extra conditional check needed.
70 | 
71 | Enjoy!
72 | 


--------------------------------------------------------------------------------
/pages/blog/2024-06-11-improved-control-flow-analysis-typescript-5.5.md:
--------------------------------------------------------------------------------
  1 | # Improved control flow analysis in TypeScript 5.5
  2 | 
  3 | ---
  4 | 
  5 | <Intro>
  6 | TypeScript 5.5 ships with some nice ergonomic improvements to type inference when working with arrays and indexed accessed objects.
  7 | </Intro>
  8 | 
  9 | Isn't it annoying when the TypeScript compiler can't infer a type that you as developer felt was quite obvious to deduce? I know that I hate to write code just to please the compiler. This has thankfully improved a lot of the years and has now been improved further in [TypeScript 5.5](https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/) (pending release as of writing)
 10 | 
 11 | ## Inferred Type Predicates
 12 | 
 13 | Type inference has now been improved when working with arrays:
 14 | 
 15 | ```ts
 16 | const items = [1, 2, "three"];
 17 | items
 18 |   .filter(item => typeof item === "string")
 19 |   .map(item =>
 20 |     // item: number | string
 21 |     item.toUpperCase()
 22 |   );
 23 | ```
 24 | 
 25 | Previously, if you tried to compile the above code, the compiler would tell you `Property 'toUpperCase' does not exist on type 'number'`. To fix this you would have to throw in an additional type check inside the map function:
 26 | 
 27 | ```ts
 28 | const items = [1, 2, "three"];
 29 | items
 30 |   .filter(item => typeof item === "string")
 31 |   .map(item => {
 32 |     // Checking for string again
 33 |     if (typeof item ==== "string") {
 34 |         return item.toUpperCase();
 35 |     }
 36 |   });
 37 | ```
 38 | 
 39 | lo and behold I was pleasantly surprised the other day when I by accident tried to compile some code without the extra type check and it somehow worked! Only then did I learn that [TypeScript 5.5](https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/#inferred-type-predicates) can [Infer type predicates from function bodies using control flow analysis](https://github.com/microsoft/TypeScript/pull/57465). Which means:
 40 | 
 41 | ```ts
 42 | const items = [1, 2, "three"];
 43 | items
 44 |   .filter(item => typeof item === "string")
 45 |   .map(item =>
 46 |     // item: string
 47 |     item.toUpperCase()
 48 |   );
 49 | ```
 50 | 
 51 | Here's another similar example of what we can now do without having to resort to extra type checks just to satisfy the compiler!
 52 | 
 53 | ```ts
 54 | type Cat = {
 55 |   type: "cat";
 56 | };
 57 | type Dog = {
 58 |   type: "dog";
 59 |   color: string;
 60 | };
 61 | 
 62 | type Animal = Cat | Dog;
 63 | 
 64 | let animals: Animal[] = [
 65 |   { type: "cat" },
 66 |   { type: "dog", color: "pink" },
 67 |   { type: "dog", color: "red" }
 68 | ];
 69 | 
 70 | let dogColors = animals
 71 |   .filter(animal => animal.type === "dog")
 72 |   .map(dog => dog.color);
 73 | 
 74 | console.log(dogColors); // => ["pink", "red"]
 75 | ```
 76 | 
 77 | Try it out yourself in the [TypeScript Playground](https://www.typescriptlang.org/play/?ts=5.5.0-beta#code/C4TwDgpgBAwghsKBeKBvAUFKpIC4oBEAxggQDToC+6O0AIgPYDmyam24E+BAJs+eyIMANgwBO+AM7AxASwB2TKuhqcoAQXmyAtnGGt4iAD5RGS9MIiI4W3cMn5NOvQG0AuqxftUHPIRLABFCUFFg+tNx8TORQQqIShGAKANYEId6+XIRRMXHi3GIQPGnobiqWiFEwIuKSrDbO9gB0AGaywsAQYgAUDXbIAHxQ3ex9ek20yEgovPzoAJTzTbpg3VGDw+xRTXliC-MqQvKSIhBNokxrzNXxkvNAA). Fun fact: The same developer that raised this issue [7 years ago](https://github.com/microsoft/TypeScript/issues/16069) now finally managed to fix it!
 78 | 
 79 | ## Control Flow Narrowing for Constant Indexed Accesses
 80 | 
 81 | Another improvement is that TypeScript is now able to narrow expressions of the form `obj[key]` when both ´obj´ and ´key´ are constant.
 82 | 
 83 | ```ts
 84 | function test(obj: Record<string, unknown>, key: string) {
 85 |   if (typeof obj[key] === "string") {
 86 |     // Now ok, previously was "Object is of type 'unknown'".
 87 |     obj[key].toUpperCase();
 88 |   }
 89 | }
 90 | 
 91 | test(
 92 |   {
 93 |     greeting: "hello"
 94 |   },
 95 |   "greeting"
 96 | );
 97 | ```
 98 | 
 99 | Trying to compile the above code prior to 5.5 would fail, but now works as expected. Try out [the example](https://www.typescriptlang.org/play/?ts=5.4.5#code/GYVwdgxgLglg9mABFApgZygCjgIwFYBciASihHAE4AmAPBhTGAOYA0i4A1mHAO5gB8bDigCeReoyYBKRAG8AUIiWIYwRJigiADijhrceANrCRAXUQBeK4gBEE5jZkLlLxAeOjTAOihwAqlo6FADCAIZoKJhSANxKAPRxiAByvG4cbFoUKABu8CBoADYiiDzhtgDy+GRQKmhuapo6iADknNx8zTZeisoAvvL98qgYmM6ITFkosMxENgAWKAUFcDYDbDYTKFOSjkA) yourself in the TypeScript Playground.
100 | 
101 | That's it. Less screaming, kicking and fighting the compiler, more fun and games. Enjoy!
102 | 


--------------------------------------------------------------------------------
/pages/cv.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import Head from "next/head";
  3 | import { Wrap } from "../components/wrap";
  4 | import { Spacer } from "../components/spacer";
  5 | import { Link } from "../components/link";
  6 | import { Flex } from "../components/flex";
  7 | import { Title } from "../components/title";
  8 | import { List } from "../components/list";
  9 | import { ListItem } from "../components/list-item";
 10 | import { Paragraph } from "../components/paragraph";
 11 | import { Card } from "../components/card";
 12 | import { Github, Linkedin, Twitter, Email } from "../components/social-icons";
 13 | import { BackToBase } from "../components/back-to-base";
 14 | import {
 15 |   Job,
 16 |   JobSummary,
 17 |   JobTitle,
 18 |   JobMeta,
 19 |   JobCompany,
 20 |   JobDuration,
 21 |   JobLocation,
 22 |   JobDescription,
 23 |   SocialLink
 24 | } from "../components/cv";
 25 | 
 26 | const CV = () => (
 27 |   <Wrap>
 28 |     <Head>
 29 |       <title>CV - Daniel Stocks</title>
 30 |     </Head>
 31 |     <BackToBase />
 32 |     <Flex as="header">
 33 |       <Spacer size={4} />
 34 |       <Title>CV - Daniel Stocks</Title>
 35 |       <Spacer size={6} />
 36 |       <Title variant="kiwi">
 37 |         Hi, I'm Daniel, from Sweden. This is my CV but I'm not currently looking for work.
 38 |       </Title>
 39 |       <Spacer size={6} />
 40 |       <Card
 41 |         extend={{
 42 |           width: "100%",
 43 |           marginLeft: "-16px",
 44 |           "@media print": {
 45 |             padding: 0,
 46 |             margin: 0,
 47 |             boxShadow: "none!important"
 48 |           }
 49 |         }}
 50 |       >
 51 |         <SocialLink href="mailto:daniel@webcloud.se">
 52 |           <Email />
 53 |           <Spacer size={2} />
 54 |           <span>daniel@webcloud.se</span>
 55 |         </SocialLink>
 56 |         <Spacer size={2} />
 57 |         <SocialLink href="https://github.com/danielstocks">
 58 |           <Github />
 59 |           <Spacer size={2} />
 60 |           <span>github.com/danielstocks</span>
 61 |         </SocialLink>
 62 |         <Spacer size={2} />
 63 |         <SocialLink href="https://www.linkedin.com/in/daniel-stocks">
 64 |           <Linkedin />
 65 |           <Spacer size={2} />
 66 |           <span>linkedin.com/in/daniel-stocks</span>
 67 |         </SocialLink>
 68 |       </Card>
 69 |       <Spacer size={6} />
 70 |       <Paragraph>
 71 |         I have 10 years plus of working experience with building digital
 72 |         products at startups, advertising agencies, and large-scale enterprises.
 73 |         I'm specialised in UI Engineering (eg. JavaScript/React/Web
 74 |         Platform/Native Android and iOS).
 75 |       </Paragraph>
 76 |       <Spacer size={3} />
 77 |       <Paragraph>
 78 |         With a backround as CTO and Staff Software Engineeer, I've organized
 79 |         multiple teams of software engineers in both small and large scale
 80 |         projects. I have a proven track record of building web and mobile
 81 |         products from scratch to scale.
 82 |       </Paragraph>
 83 |     </Flex>
 84 | 
 85 |     <Spacer size={6} />
 86 |     <Spacer size={4} extend={{ pageBreakBefore: "always" }} />
 87 | 
 88 |     <Flex as="main">
 89 |       <Title variant="pear">Job Experience</Title>
 90 |       <Spacer size={6} />
 91 |       <Job>
 92 |         <JobSummary>
 93 |           <JobTitle>CTO</JobTitle>
 94 |           <JobCompany>Carla</JobCompany>
 95 |           <JobMeta>
 96 |             <JobDuration>January 2021 - Present</JobDuration>
 97 |             <JobLocation>Remote, Sweden</JobLocation>
 98 |           </JobMeta>
 99 |         </JobSummary>
100 |         <JobDescription>
101 |           <Paragraph>
102 |             Improving the online car buying and leasing experience for electrified vehicles
103 |           </Paragraph>
104 |         </JobDescription>
105 |       </Job>
106 | 
107 |       <Job>
108 |         <JobSummary>
109 |           <JobTitle>Staff Software Engineer</JobTitle>
110 |           <JobCompany>Volvo Cars</JobCompany>
111 |           <JobMeta>
112 |             <JobDuration>January 2019 - December 2020</JobDuration>
113 |             <JobLocation>Stockholm, Sweden</JobLocation>
114 |           </JobMeta>
115 |         </JobSummary>
116 |         <JobDescription>
117 |           <Paragraph>
118 |             Providing company-wide technical leadership and guidance within the
119 |             UI engineering discipline, enabling Volvo Cars to transform into an
120 |             industry leader in the digital product space.
121 |           </Paragraph>
122 |           <List>
123 |             <ListItem>
124 |               Initiating, scaling and future-proofing our UI codebase, strategy
125 |               and architecture.
126 |             </ListItem>
127 |             <ListItem>
128 |               Delivering tools and infrastructure to empower UI engineers across
129 |               the company.
130 |             </ListItem>
131 |             <ListItem>
132 |               Promoting a positive and inclusive UI engineering culture,
133 |               breaking down silos and enable for cross team collaboration and
134 |               communication.
135 |             </ListItem>
136 |             <ListItem>
137 |               Working in close collaboration with product owners and engineering
138 |               leads, to help them align with best practices and ship high
139 |               quality digital products.
140 |             </ListItem>
141 |             <ListItem>
142 |               Bridging the gap between Software Engineering and UX/Design.
143 |             </ListItem>
144 |           </List>
145 |         </JobDescription>
146 |       </Job>
147 | 
148 |       <Job>
149 |         <JobSummary>
150 |           <JobTitle>CTO</JobTitle>
151 |           <JobCompany>Carvanro</JobCompany>
152 |           <JobMeta>
153 |             <JobDuration>Feburary 2016 - March 2018</JobDuration>
154 |             <JobLocation>London, UK and Tehran, Iran</JobLocation>
155 |           </JobMeta>
156 |         </JobSummary>
157 |         <JobDescription>
158 |           <Paragraph>
159 |             Building a peer to peer ride-sharing platform to enable more
160 |             efficient transportation for commuters in densely populated
161 |             metropolitan areas in Iran.
162 |           </Paragraph>
163 |           <List>
164 |             <ListItem>
165 |               Overall responsible for technical architecture, recruitment,
166 |               operations, and day-to-day management of the inhouse development
167 |               team
168 |             </ListItem>
169 |             <ListItem>
170 |               As part of the founding team, we raised over $1.5m in venture
171 |               capital.
172 |             </ListItem>
173 |             <ListItem>
174 |               Setting up continuous integration and zero downtime deployment
175 |               pipeline.
176 |             </ListItem>
177 |             <ListItem>
178 |               Selection of technologies used: Node.js, React, React Native,
179 |               Python, Flask, ElasticSearch, PostgresSQL, Redis, AWS, K8s, Docker
180 |               and RabbitMQ.
181 |             </ListItem>
182 |           </List>
183 |         </JobDescription>
184 |       </Job>
185 | 
186 |       <Job>
187 |         <JobSummary>
188 |           <JobTitle>Solutions Architect</JobTitle>
189 |           <JobCompany>Evil Enterprise</JobCompany>
190 |           <JobMeta>
191 |             <JobDuration>
192 |               September 2013 - December 2018
193 |             </JobDuration>
194 |             <JobLocation>All over the place</JobLocation>
195 |           </JobMeta>
196 |         </JobSummary>
197 |         <JobDescription>
198 |           <Paragraph>
199 |             Running my own consultancy agency. Helping clients solve problems
200 |             that required a deep domain knowledge of web technologies and UI
201 |             software engineering.
202 |           </Paragraph>
203 |           <List>
204 |             <ListItem>
205 |               Helping clients such as Volvo, Husqvarna, Digitas LBi with various
206 |               projects
207 |             </ListItem>
208 |             <ListItem>
209 |               Lecturing a course in JavaScript and Front-End Development at
210 |               "Yrkeshögskoleutbildning vid Göteborgs Stad Utbildning".
211 |             </ListItem>
212 |             <ListItem>
213 |               Worked extensively on several Open Source JavaScript libraries and
214 |               React Components (available on GitHub)
215 |             </ListItem>
216 |           </List>
217 |         </JobDescription>
218 |       </Job>
219 | 
220 |       <Job>
221 |         <JobSummary>
222 |           <JobTitle>Lead Front-End Developer</JobTitle>
223 |           <JobCompany>Saltside</JobCompany>
224 |           <JobMeta>
225 |             <JobDuration>August 2011 - September 2013</JobDuration>
226 |             <JobLocation>Gothenburg, Sweden</JobLocation>
227 |           </JobMeta>
228 |         </JobSummary>
229 |         <JobDescription>
230 |           <Paragraph>
231 |             Saltside builds online marketplaces (classifieds) in emerging
232 |             markets. As one of the first hires I was responsible for the overall
233 |             quality and performance of the product interface. The company grew
234 |             to become the highest ranked classified site in three countries,
235 |             employing over 500 people.
236 |           </Paragraph>
237 |           <List>
238 |             <ListItem>
239 |               Building web applications with JavaScript and Ruby. Frameworks
240 |               including Ruby on Rails, Sinatra, Node.js, Backbone.js.
241 |             </ListItem>
242 |             <ListItem>
243 |               Built and launched an adaptive low-bandwidth mobile site optimized
244 |               for internet access in developing countries.
245 |             </ListItem>
246 |           </List>
247 |         </JobDescription>
248 |       </Job>
249 | 
250 |       <Job>
251 |         <JobSummary>
252 |           <JobTitle>Front-End Developer</JobTitle>
253 |           <JobCompany>Aino</JobCompany>
254 |           <JobMeta>
255 |             <JobDuration>June 2009 - August 2011</JobDuration>
256 |             <JobLocation>Gothenburg, Sweden</JobLocation>
257 |           </JobMeta>
258 |         </JobSummary>
259 |         <JobDescription>
260 |           <Paragraph>
261 |             Aino is a leading web agency collaborating with some of the biggest
262 |             adveritisng agencies to deliver high quality digital expierences to
263 |             various clients.
264 |           </Paragraph>
265 |           <List>
266 |             <ListItem>
267 |               Building web sites and applications using Python, Django,
268 |               PostgreSQL, JavaScript, HTML and CSS.
269 |             </ListItem>
270 |             <ListItem>
271 |               Built a responsive website for Nudie Jeans including the Nudie
272 |               Jeans fitguide with Backbone.js (replacing their legacy flash app)
273 |             </ListItem>
274 |             <ListItem>
275 |               Developed the main website for SSRS (Swedish Sea Rescue Society)
276 |               including an interactive weather forecast web app.
277 |             </ListItem>
278 |             <ListItem>
279 |               Built website for the Gothenburg Opera House (opera.se), along
280 |               with a custom CMS backend
281 |             </ListItem>
282 |           </List>
283 |         </JobDescription>
284 |       </Job>
285 | 
286 |       <Job>
287 |         <JobSummary>
288 |           <JobTitle>Front-End Developer Intern</JobTitle>
289 |           <JobCompany>NetRelations</JobCompany>
290 |           <JobMeta>
291 |             <JobDuration>April 2008 - August 2008</JobDuration>
292 |             <JobLocation>Gothenburg, Sweden</JobLocation>
293 |           </JobMeta>
294 |         </JobSummary>
295 |         <JobDescription>
296 |           <Paragraph>
297 |             As an intern at NetRelations I learned about the importance of
298 |             accessibility, performance and building ressiliant front-end
299 |             applications.
300 |           </Paragraph>
301 |           <List>
302 |             <ListItem>
303 |               Primarily tasked with building websites in HTML/CSS and JavaScript
304 |             </ListItem>
305 |             <ListItem>
306 |               NetRelations is primarily a .NET shop running most of their client
307 |               work on SharePoint and EPIServer which gave me valuable insights
308 |               into the Microsoft application stack.
309 |             </ListItem>
310 |           </List>
311 |         </JobDescription>
312 |       </Job>
313 |     </Flex>
314 | 
315 |     <Spacer size={6} />
316 |     <Spacer size={4} extend={{ pageBreakBefore: "always" }} />
317 | 
318 |     <Title variant="pear">Other Experience</Title>
319 |     <Spacer size={6} />
320 | 
321 |     <Job>
322 |       <JobSummary>
323 |         <JobTitle>Founder And Coordinator</JobTitle>
324 |         <JobCompany>Taket</JobCompany>
325 |         <JobMeta>
326 |           <JobDuration>April 2008 - August 2008</JobDuration>
327 |           <JobLocation>Gothenburg, Sweden</JobLocation>
328 |         </JobMeta>
329 |       </JobSummary>
330 |       <JobDescription>
331 |         <Paragraph>
332 |           Co-founded a co-working place in the heart of Gothenburg for artists,
333 |           freelancers and other creative individuals. We frequently organized
334 |           exhibitions, meetups, workshops etc. At it's peak we were housing ~30
335 |           individuals renting work space on an annual basis.
336 |         </Paragraph>
337 |       </JobDescription>
338 |     </Job>
339 | 
340 |     <Spacer size={6} />
341 |     <Title variant="pear">Education</Title>
342 |     <Spacer size={6} />
343 | 
344 |     <Job>
345 |       <JobSummary>
346 |         <JobTitle>Webbutvecklare</JobTitle>
347 |         <JobCompany>Yrgo</JobCompany>
348 |         <JobMeta>
349 |           <JobDuration>2007 – 2009</JobDuration>
350 |           <JobLocation>Gothenburg, Sweden</JobLocation>
351 |         </JobMeta>
352 |       </JobSummary>
353 |       <JobDescription>
354 |         <Paragraph>Yrkeshögskoleutbildning, 400 YH-poäng.</Paragraph>
355 |         <Paragraph>
356 |           A two year vocational course focused on Full-Stack Web Development.
357 |           Design/UX, HTML, CSS, JavaScript, PHP, SQL, C#, .NET
358 |         </Paragraph>
359 |       </JobDescription>
360 |     </Job>
361 |     <Spacer size={6} />
362 |   </Wrap >
363 | );
364 | 
365 | export default CV;
366 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { Wrap } from "../components/wrap";
  3 | import { Flex } from "../components/flex";
  4 | import { Spacer } from "../components/spacer";
  5 | import { Link, IconLink } from "../components/link";
  6 | import { Title } from "../components/title";
  7 | import { Paragraph } from "../components/paragraph";
  8 | import { Github, Linkedin, Bluesky } from "../components/social-icons";
  9 | import blogPosts from "../blog-manifest.json";
 10 | 
 11 | const blogPostsGroupedByYear = {};
 12 | blogPosts.forEach(post => {
 13 |   const year = post.date.split("-")[0];
 14 |   if (blogPostsGroupedByYear[year]) {
 15 |     blogPostsGroupedByYear[year].push(post);
 16 |   } else {
 17 |     blogPostsGroupedByYear[year] = [post];
 18 |   }
 19 | });
 20 | 
 21 | const ArticleGroup = ({ year, children }) => (
 22 |   <>
 23 |     <Flex
 24 |       extend={{
 25 |         flexDirection: "row-reverse",
 26 |         justifyContent: "space-between"
 27 |       }}
 28 |     >
 29 |       <Paragraph extend={{ paddingLeft: "8px" }}>{year}</Paragraph>
 30 |       <Flex extend={{ fontWeight: "var(--font-weight-normal)" }}>
 31 |         {React.Children.toArray(children).map((article, i) => (
 32 |           <React.Fragment key={year + i}>
 33 |             <div>{article}</div>
 34 |             <Spacer />
 35 |           </React.Fragment>
 36 |         ))}
 37 |       </Flex>
 38 |     </Flex>
 39 |     <Spacer size={3} />
 40 |   </>
 41 | );
 42 | 
 43 | const Home = () => (
 44 |   <Wrap>
 45 |     <Spacer size={10} />
 46 |     <Flex id="header" as="header">
 47 |       <Title>Hello there.</Title>
 48 |       <Spacer size={6} />
 49 |       <Title
 50 |         variant="kiwi"
 51 |         as="p"
 52 |         extend={{ "& svg": { verticalAlign: "text-bottom" } }}
 53 |       >
 54 |         I'm Daniel and this is my personal website. I{" "}
 55 |         <Link href="/cv">specialise</Link> in creating software. I'm currently
 56 |         occupied improving the{" "}
 57 |         <Link href="https://www.carla.se/">
 58 |           online car buying and leasing experience
 59 |         </Link>{" "}
 60 |         for electrified vehicles. If you wish to get in touch please send an
 61 |         email to{" "}
 62 |         <Link href="mailto:daniel@webcloud.se">daniel@webcloud.se</Link>
 63 |         <br />
 64 |         or find me on{" "}
 65 |         <IconLink href="https://github.com/danielstocks">
 66 |           <Github />
 67 |         </IconLink>
 68 |         ,{" "}
 69 |         <IconLink href="https://bsky.app/profile/webcloud.se">
 70 |           <Bluesky />
 71 |         </IconLink>{" "}
 72 |         or{" "}
 73 |         <IconLink href="https://www.linkedin.com/in/daniel-stocks">
 74 |           <Linkedin />
 75 |         </IconLink>
 76 |         .
 77 |       </Title>
 78 |     </Flex>
 79 |     <Spacer size={8} />
 80 |     <Flex as="main">
 81 |       <Title variant="pear">Articles</Title>
 82 |       <Spacer size={4} />
 83 |       {Object.keys(blogPostsGroupedByYear)
 84 |         .sort()
 85 |         .reverse()
 86 |         .map((year, i) => (
 87 |           <ArticleGroup key={year + i} year={year}>
 88 |             {blogPostsGroupedByYear[year].map(post => (
 89 |               <Link key={post.path} href={post.path}>
 90 |                 {post.title}
 91 |               </Link>
 92 |             ))}
 93 |           </ArticleGroup>
 94 |         ))}
 95 |     </Flex>
 96 |     <Spacer size={8} />
 97 |   </Wrap>
 98 | );
 99 | 
100 | export default Home;
101 | 


--------------------------------------------------------------------------------
/public/client-side-bundle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielstocks/webcloud/5a07d15dedeb88d6e3d15e7dbafb372896a15c2a/public/client-side-bundle.jpg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielstocks/webcloud/5a07d15dedeb88d6e3d15e7dbafb372896a15c2a/public/favicon.ico


--------------------------------------------------------------------------------
/public/ga-10-years.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielstocks/webcloud/5a07d15dedeb88d6e3d15e7dbafb372896a15c2a/public/ga-10-years.jpg


--------------------------------------------------------------------------------
/public/gatsby-dark-theme-lighthouse.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielstocks/webcloud/5a07d15dedeb88d6e3d15e7dbafb372896a15c2a/public/gatsby-dark-theme-lighthouse.jpg


--------------------------------------------------------------------------------
/public/github-deploy-action.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielstocks/webcloud/5a07d15dedeb88d6e3d15e7dbafb372896a15c2a/public/github-deploy-action.png


--------------------------------------------------------------------------------
/public/hello-world-react.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielstocks/webcloud/5a07d15dedeb88d6e3d15e7dbafb372896a15c2a/public/hello-world-react.jpg


--------------------------------------------------------------------------------
/public/instant.js:
--------------------------------------------------------------------------------
1 | /*! instant.page v3.0.0 - (C) 2019 Alexandre Dieulot - https://instant.page/license */
2 | let t,e;const n=new Set,o=document.createElement("link"),s=o.relList&&o.relList.supports&&o.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype,i="instantAllowQueryString"in document.body.dataset,r="instantAllowExternalLinks"in document.body.dataset,a="instantWhitelist"in document.body.dataset;let c=65,d=!1,l=!1,u=!1;if("instantIntensity"in document.body.dataset){const t=document.body.dataset.instantIntensity;if("mousedown"==t.substr(0,"mousedown".length))d=!0,"mousedown-only"==t&&(l=!0);else if("viewport"==t.substr(0,"viewport".length))navigator.connection&&(navigator.connection.saveData||navigator.connection.effectiveType.includes("2g"))||("viewport"==t?document.documentElement.clientWidth*document.documentElement.clientHeight<45e4&&(u=!0):"viewport-all"==t&&(u=!0));else{const e=parseInt(t);isNaN(e)||(c=e)}}if(s){const n={capture:!0,passive:!0};if(l||document.addEventListener("touchstart",function(t){e=performance.now();const n=t.target.closest("a");if(!f(n))return;h(n.href)},n),d?document.addEventListener("mousedown",function(t){const e=t.target.closest("a");if(!f(e))return;h(e.href)},n):document.addEventListener("mouseover",function(n){if(performance.now()-e<1100)return;const o=n.target.closest("a");if(!f(o))return;o.addEventListener("mouseout",m,{passive:!0}),t=setTimeout(()=>{h(o.href),t=void 0},c)},n),u){let t;(t=window.requestIdleCallback?t=>{requestIdleCallback(t,{timeout:1500})}:t=>{t()})(()=>{const t=new IntersectionObserver(e=>{e.forEach(e=>{if(e.isIntersecting){const n=e.target;t.unobserve(n),h(n.href)}})});document.querySelectorAll("a").forEach(e=>{f(e)&&t.observe(e)})})}}function m(e){e.relatedTarget&&e.target.closest("a")==e.relatedTarget.closest("a")||t&&(clearTimeout(t),t=void 0)}function f(t){if(t&&t.href&&(!a||"instant"in t.dataset)&&(r||t.origin==location.origin||"instant"in t.dataset)&&["http:","https:"].includes(t.protocol)&&("http:"!=t.protocol||"https:"!=location.protocol)&&(i||!t.search||"instant"in t.dataset)&&!(t.hash&&t.pathname+t.search==location.pathname+location.search||"noInstant"in t.dataset))return!0}function h(t){if(n.has(t))return;const e=document.createElement("link");e.rel="prefetch",e.href=t,document.head.appendChild(e),n.add(t)}
3 | 


--------------------------------------------------------------------------------
/public/mx518.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielstocks/webcloud/5a07d15dedeb88d6e3d15e7dbafb372896a15c2a/public/mx518.jpg


--------------------------------------------------------------------------------
/public/netflix-react-ssr.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielstocks/webcloud/5a07d15dedeb88d6e3d15e7dbafb372896a15c2a/public/netflix-react-ssr.jpg


--------------------------------------------------------------------------------
/public/photo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielstocks/webcloud/5a07d15dedeb88d6e3d15e7dbafb372896a15c2a/public/photo.jpg


--------------------------------------------------------------------------------
/public/serverless-ssr.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielstocks/webcloud/5a07d15dedeb88d6e3d15e7dbafb372896a15c2a/public/serverless-ssr.jpg


--------------------------------------------------------------------------------
/public/vintage-webcloud-2010.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielstocks/webcloud/5a07d15dedeb88d6e3d15e7dbafb372896a15c2a/public/vintage-webcloud-2010.jpg


--------------------------------------------------------------------------------
/test/snapshots.js:
--------------------------------------------------------------------------------
 1 | const PercyScript = require('@percy/script');
 2 | 
 3 | PercyScript.run(async (page, percySnapshot) => {
 4 |   await page.goto(process.env.DEPLOY_URL);
 5 |   await percySnapshot('homepage');
 6 |   await page.click('#toggle-theme');
 7 |   await percySnapshot('homepage - dark');
 8 | 
 9 |   await page.goto(process.env.DEPLOY_URL + "/cv/");
10 |   await percySnapshot('cv');
11 |   await page.click('#toggle-theme');
12 |   await percySnapshot('cv - dark');
13 | 
14 |   await page.goto(process.env.DEPLOY_URL + "/blog/2020-02-02-personal-website-2020-tech-stack/");
15 |   await percySnapshot('blog post');
16 |   await page.click('#toggle-theme');
17 |   await percySnapshot('blog post - dark');
18 | });
19 | 


--------------------------------------------------------------------------------
/theme.js:
--------------------------------------------------------------------------------
 1 | export const themes = {
 2 |   light: {
 3 |     "color-fg": "#111",
 4 |     "color-fg-alt": "#444",
 5 |     "color-bg": "#f9f9f9",
 6 |     "color-bg-alt": "#efefef",
 7 |     "color-border": "#dfdfdf",
 8 |     "color-primary": "rgb(0, 128, 86)",
 9 |     "color-primary-alt": "rgba(0, 128, 86, 0.6)",
10 |     "color-code-punctuation": "#bd717e",
11 |     "color-code-comment": "#aaa",
12 |     "color-code-method": "#2879a8",
13 |     "color-code-string": "#843a96",
14 |     "color-code-function": "#a95600",
15 |     "color-code-dom": "#f74949",
16 |     "color-code-property-access": "##7d4500",
17 |     "color-code-class-name": "##7d4500",
18 |     "color-code-operator": "#e6a3cb",
19 |     "font-weight-light" : "200",
20 |     "font-weight-normal" : "400",
21 |     "font-weight-bold" : "600",
22 |     "shadow": "4px 4px 0px rgba(125,125,125,0.2)",
23 |   },
24 |   dark: {
25 |     "color-fg": "#f9f9f9",
26 |     "color-fg-alt": "#c0c0c0",
27 |     "color-bg": "#0f0f0f",
28 |     "color-bg-alt": "#1f1f1f",
29 |     "color-border": "#484848",
30 |     "color-primary": "rgb(40, 168, 126)",
31 |     "color-primary-alt": "rgba(0, 128, 86, 0.6)",
32 |     "color-code-punctuation": "#a89828",
33 |     "color-code-comment": "#666",
34 |     "color-code-method": "#3b93c5",
35 |     "color-code-string": "#e6a3cb",
36 |     "color-code-function": "#3fbfbf",
37 |     "color-code-dom": "#f17272",
38 |     "color-code-property-access": "#a08c72",
39 |     "color-code-class-name": "#a08c72",
40 |     "color-code-operator": "#e6a3cb",
41 |     "font-weight-light" : "100",
42 |     "font-weight-normal" : "300",
43 |     "font-weight-bold" : "500",
44 |     "shadow": "4px 4px 0px rgba(0,0,0,1)",
45 |   }
46 | };
47 | 


--------------------------------------------------------------------------------