From 9cc40e239620e03b87401dcbf0ec0376e9240e97 Mon Sep 17 00:00:00 2001 From: Achim Rolle Date: Thu, 17 Jun 2021 14:38:36 +0200 Subject: [PATCH 1/4] add nextjs and css-in-js --- radar/2021-01-01/css-in-js.md | 44 +++++++++++++++++++++++++++++++++++ radar/2021-01-01/next-js.md | 10 +++++--- 2 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 radar/2021-01-01/css-in-js.md diff --git a/radar/2021-01-01/css-in-js.md b/radar/2021-01-01/css-in-js.md new file mode 100644 index 0000000..2f766e8 --- /dev/null +++ b/radar/2021-01-01/css-in-js.md @@ -0,0 +1,44 @@ +--- +title: "CSS-in-JS" +ring: trial +quadrant: methods-and-patterns +--- + +CSS-in-JS is a method where JavaScript is used to style components. The first libraries which implemented these technique where [Styled-Components](https://styled-components.com/), [Emotion](https://emotion.sh/) & [JSS](https://cssinjs.org/). + +### Example: + +```js +const Button = styled.button` + display: inline-block; + padding: 0.5rem 0; + background: transparent; + color: white; + border: 2px solid white; + + ${(props) => + props.primary && + css` + background: white; + color: black; + `} +`; + +return ; +``` + +Advantages of CSS-in-JS + +- Local Scoping instad of global namespace +- No classname to element mapping +- Use the full power of JavaScript to enhance CSS (loops, variables & more) +- Dynamic syling & Theming (Access to state or props) +- TypeScript Support + +Disadvantages of CSS-in-JS + +- Runtime cost when using dynamic styling +- Slightly different syntax than traditional CSS (object syntax vs template literals) +- Can add an extra layer of complexity + +In the meantime CSS-in-JS has evolved even more. The are some libraries which leverages nearly zero-runtime costs such as [Stiches](https://stitches.dev/) or [Vanilla Extract](https://vanilla-extract.style/) while still providing an excellence developer experience with TypeScript. diff --git a/radar/2021-01-01/next-js.md b/radar/2021-01-01/next-js.md index bb5afff..26b4763 100644 --- a/radar/2021-01-01/next-js.md +++ b/radar/2021-01-01/next-js.md @@ -1,5 +1,9 @@ --- -title: "Next.js" -ring: adopt -quadrant: languages-and-frameworks +title: "Next.js" +ring: adopt +quadrant: languages-and-frameworks --- + +[Next.js](https://nextjs.org/) claims itself as **the** React framework for production. It comes with first-class developer experience and many features for example: hybrid static & server-side rendering, TypeScript support, image optimization, code splitting & much more. + +We at AOE are already using Next.js for some big projects. The main reason for that is the modern stack (React with TypeScript) and the possibility to render on the server (static prerendering or dynamic SSR) to be able to get crawled by search engines and stay SEO relevant. From 0b6ac04581957df7f5d14d9b833817732ac2f122 Mon Sep 17 00:00:00 2001 From: bmsuseluda Date: Thu, 17 Jun 2021 14:57:48 +0200 Subject: [PATCH 2/4] Update css-in-js.md --- radar/2021-01-01/css-in-js.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/radar/2021-01-01/css-in-js.md b/radar/2021-01-01/css-in-js.md index 2f766e8..9f82781 100644 --- a/radar/2021-01-01/css-in-js.md +++ b/radar/2021-01-01/css-in-js.md @@ -41,4 +41,4 @@ Disadvantages of CSS-in-JS - Slightly different syntax than traditional CSS (object syntax vs template literals) - Can add an extra layer of complexity -In the meantime CSS-in-JS has evolved even more. The are some libraries which leverages nearly zero-runtime costs such as [Stiches](https://stitches.dev/) or [Vanilla Extract](https://vanilla-extract.style/) while still providing an excellence developer experience with TypeScript. +In the meantime CSS-in-JS has evolved even more. The are some libraries which leverages nearly zero-runtime costs such as [Stitches](https://stitches.dev/) or [Vanilla Extract](https://vanilla-extract.style/) while still providing an excellent developer experience with TypeScript. From 24eded9025fdd4845a8d59e0e2e5c2937191a96b Mon Sep 17 00:00:00 2001 From: Achim Rolle Date: Thu, 24 Jun 2021 08:29:34 +0200 Subject: [PATCH 3/4] update css-in-js --- radar/2021-01-01/css-in-js.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/radar/2021-01-01/css-in-js.md b/radar/2021-01-01/css-in-js.md index 9f82781..1626d65 100644 --- a/radar/2021-01-01/css-in-js.md +++ b/radar/2021-01-01/css-in-js.md @@ -42,3 +42,5 @@ Disadvantages of CSS-in-JS - Can add an extra layer of complexity In the meantime CSS-in-JS has evolved even more. The are some libraries which leverages nearly zero-runtime costs such as [Stitches](https://stitches.dev/) or [Vanilla Extract](https://vanilla-extract.style/) while still providing an excellent developer experience with TypeScript. + +We at AOE think that CSS-in-JS is the future of writing good, performant and maintainable CSS, therefore we already use different CSS-in-JS solutions throughout multiple applications. From 5c66dcb6e4fa1abc9be0cea6099cb061e5b7d41b Mon Sep 17 00:00:00 2001 From: bmsuseluda Date: Thu, 24 Jun 2021 09:18:08 +0200 Subject: [PATCH 4/4] Update css-in-js.md --- radar/2021-01-01/css-in-js.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/radar/2021-01-01/css-in-js.md b/radar/2021-01-01/css-in-js.md index 1626d65..aaf29e5 100644 --- a/radar/2021-01-01/css-in-js.md +++ b/radar/2021-01-01/css-in-js.md @@ -41,6 +41,6 @@ Disadvantages of CSS-in-JS - Slightly different syntax than traditional CSS (object syntax vs template literals) - Can add an extra layer of complexity -In the meantime CSS-in-JS has evolved even more. The are some libraries which leverages nearly zero-runtime costs such as [Stitches](https://stitches.dev/) or [Vanilla Extract](https://vanilla-extract.style/) while still providing an excellent developer experience with TypeScript. +In the meantime CSS-in-JS has evolved even more. There are some libraries which leverages nearly zero-runtime costs such as [Stitches](https://stitches.dev/) or [Vanilla Extract](https://vanilla-extract.style/) while still providing an excellent developer experience with TypeScript. We at AOE think that CSS-in-JS is the future of writing good, performant and maintainable CSS, therefore we already use different CSS-in-JS solutions throughout multiple applications.