profile
viewpoint

gatsbyjs/gatsby 46922

Build blazing fast, modern apps and websites with React

brendanmc6/atom-keyboard-shortcuts 0

A list of keyboard shortcuts for the Atom text editor

brendanmc6/brendanmc6.github.io 0

(old) My web resume. Baby's first CSS

brendanmc6/coding-challenge-examples 0

Coding Challenge Examples

brendanmc6/concatt-matt 0

A discord bot to concatenate matt when he posts too much.

brendanmc6/gatsby 0

Build blazing fast, modern apps and websites with React

brendanmc6/ioki-react-challenge 0

Created with CodeSandbox

brendanmc6/mapbox-gl-js 0

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL

issue closedOffsetra/carbon.fyi

Create Theme object

Reminder for myself to create a Theme object which holds color and other theme constants to be used throughout the app.

closed time in 11 days

brendanmc6

issue commentOffsetra/carbon.fyi

Create Theme object

Closed by #7

brendanmc6

comment created time in 11 days

Pull request review commentOffsetra/carbon.fyi

Cleanup & a11y enhancements

 export default function Emissions({ address }: { address: string }) {   const api_url = `https://api.etherscan.io/api?module=account&action=txlist&address=${address}&startblock=0&endblock=99999999&sort=asc&apikey=${api_key}`;   const { data, error } = useSWR(api_url, fetcher); -  let text;+  let text: string[];   if (error) text = ["Error fetching data."];   else if (!data) text = ["Fetching data..."];-  else if (data.status == 0) text = [data.result];+  else if (data.status === "0") text = [data.result];

It's tradition and convention in the JS world to NEVER use the abstract equality operator. It was written in "JavaScript: The Good Parts" and has been widely adopted ever since

brendanmc6

comment created time in 12 days

Pull request review commentOffsetra/carbon.fyi

Cleanup & a11y enhancements

 export default function Emissions({ address }: { address: string }) {   const api_url = `https://api.etherscan.io/api?module=account&action=txlist&address=${address}&startblock=0&endblock=99999999&sort=asc&apikey=${api_key}`;   const { data, error } = useSWR(api_url, fetcher); -  let text;+  let text: string[];   if (error) text = ["Error fetching data."];   else if (!data) text = ["Fetching data..."];-  else if (data.status == 0) text = [data.result];+  else if (data.status === "0") text = [data.result];   else text = emissionsText(address, data.result); -  const paragraphs = text.map((paragraph: string) => (-    <p>+  const paragraphs = text.map((paragraph, index) => (+    <p key={index}>

Usually its bad to use the index as the key but in this case we aren't reordering anything so I think it's OK

brendanmc6

comment created time in 12 days

Pull request review commentOffsetra/carbon.fyi

Cleanup & a11y enhancements

 import Link from "next/link";+import { FC } from "react";+import { colors } from "lib/theme";++const Banner: FC = () => (+  <nav>+    <ul>+      <ListItem href="/stats" color={colors.pear}>+        stats+      </ListItem>+      <ListItem href="/" color={colors.offsetraPurple}>+        offset+      </ListItem>+      <ListItem href="/about" color={colors.salmon}>+        about+      </ListItem>+      <style jsx>{`+        ul {+          list-style: none;+          display: flex;+          flex-flow: wrap;+          margin: 0;+          padding: 0;+        }+      `}</style>+    </ul>+  </nav>+);  interface ItemProps {-  text: string;-  link: string;+  href: string;   color: string; }--export default function Banner({ bannerProps }: { bannerProps: ItemProps[] }) {-  const items = bannerProps.map(-    ({ ...itemProps }: ItemProps, index: number) => (-      <Item key={index} {...itemProps} />-    )-  );-  return (-    <nav>-      <ul>-        {items}-        <style jsx>{`-          ul {-            list-style: none;-            display: flex;-            flex-flow: wrap;-            margin: 0;-            padding: 0;-          }-        `}</style>-      </ul>-    </nav>-  );-}--function Item({ text, link, color }: ItemProps) {+const ListItem: FC<ItemProps> = ({ href, color, children }) => {   return (     <li>-      <Link href={link}>

Prefer to name props consistently

brendanmc6

comment created time in 12 days

Pull request review commentOffsetra/carbon.fyi

Cleanup & a11y enhancements

-export default function Border(props: { children?: any }) {-  return (-    <div>-      {props.children}-      <style jsx>{`-        div {-          border: 0.2rem solid #743ee8;-          border-radius: 1.5rem;-          margin: 1rem 2rem;-          padding: 1rem;-        }-      `}</style>-    </div>-  );-}+import { colors } from "lib/theme";+import { FC } from "react";++const Border: FC = ({ children }) => (+  <div>+    {children}+    <style jsx>{`+      div {+        border: 0.2rem solid ${colors.offsetraPurple};+        border-radius: 1.5rem;+        margin: 1rem 2rem;+        padding: 1rem;

@de-souza cool that you use REM, lets apply this technique to the global css so we can work with units of 10 :)

brendanmc6

comment created time in 12 days

Pull request review commentOffsetra/carbon.fyi

Cleanup & a11y enhancements

-export default function Border(props: { children?: any }) {-  return (-    <div>-      {props.children}-      <style jsx>{`-        div {-          border: 0.2rem solid #743ee8;-          border-radius: 1.5rem;-          margin: 1rem 2rem;-          padding: 1rem;-        }-      `}</style>-    </div>-  );-}+import { colors } from "lib/theme";+import { FC } from "react";++const Border: FC = ({ children }) => (+  <div>+    {children}+    <style jsx>{`+      div {+        border: 0.2rem solid ${colors.offsetraPurple};

for the offsetra-next designs I've been using this slightly-more-pinkish purple, went ahead and swapped them out

brendanmc6

comment created time in 12 days

Pull request review commentOffsetra/carbon.fyi

Cleanup & a11y enhancements

 function Item({ text, link, color }: ItemProps) {           padding: 0.5rem 1rem;         } -        a:hover {+        a:hover,+        a:focus {

achieve the same hover effect when tabbing 👯‍♂️

brendanmc6

comment created time in 12 days

Pull request review commentOffsetra/carbon.fyi

Cleanup & a11y enhancements

 import Link from "next/link";+import { FC } from "react";+import { colors } from "lib/theme";++const Banner: FC = () => (+  <nav>+    <ul>+      <ListItem href="/stats" color={colors.pear}>+        stats+      </ListItem>+      <ListItem href="/" color={colors.offsetraPurple}>+        offset+      </ListItem>+      <ListItem href="/about" color={colors.salmon}>+        about+      </ListItem>+      <style jsx>{`+        ul {+          list-style: none;+          display: flex;+          flex-flow: wrap;+          margin: 0;+          padding: 0;+        }+      `}</style>+    </ul>+  </nav>+);  interface ItemProps {-  text: string;-  link: string;+  href: string;   color: string; }--export default function Banner({ bannerProps }: { bannerProps: ItemProps[] }) {-  const items = bannerProps.map(

clever but for readability it's better to mimic boring HTML composition (and equally as concise)

brendanmc6

comment created time in 12 days

PullRequestReviewEvent
PullRequestReviewEvent

push eventOffsetra/carbon.fyi

Brendan

commit sha c79d3da10e46716768e9078730d828561ead448f

json comments are controversial

view details

push time in 12 days

push eventOffsetra/carbon.fyi

Brendan

commit sha c0eabcc8e37102a257a542d58ca3670b65edf906

add A tag, focus

view details

Brendan

commit sha 640b9271560613285c3659c798aff2bcaf0957d3

add recommended extensions

view details

Brendan

commit sha 92f6c15b2ddbc00610d0614435870f971fbd4245

always use strict equal

view details

Brendan

commit sha 92a0ca4845e7468af09e7629a8e3cf05056f517b

add key and text arr type

view details

Brendan

commit sha f8147e31a130a0d4ca50c4c850911945708cc113

add color constants

view details

Brendan

commit sha 051c520d7fbc2e60ab16947214cd50f1a1a11ee4

remove Any types

view details

Brendan

commit sha ab6354193ab7f3febe82a8ee530f04c8ae543f8c

autoformat

view details

push time in 12 days

pull request commentOffsetra/carbon.fyi

Cleanup & a11y enhancements

Ah, quick note on :global() since you mentioned it: that just tells styled-jsx not to append the scoped css classname to the selector (you can observe these scoped classnames in devtools).

The only real downside to styled-jsx is IMO the need for :global() to target child components. Otherwise it's the best choice for this project. I love how concise styled-components can be, but I would avoid it because the the typescript definitions are crap. I'm looking into switching offsetra-next over to emotion because it has a very similar API as styled-components and hopefully better type definitions...

brendanmc6

comment created time in 12 days

pull request commentOffsetra/carbon.fyi

Cleanup & a11y enhancements

Good catch on the A tag, I noticed that Link still rendered the tag which is why I removed it, I'll add it back!

RE. the CRA post, I think that dev is really pulling hairs, of course they removed it from App because App doesn't have children, but implicit children type, enforced return type, and more readable declaration are nice (small) conveniences especially when hand writing 1000s of components for a large app. At this point its just a convention for me.

brendanmc6

comment created time in 12 days

issue openedOffsetra/carbon.fyi

Apply a global CSS reset (normalize)

https://necolas.github.io/normalize.css/

We should do this globally so it should be imported into the _app https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet

  • [ ] create a normalize.css file and apply it in _app
  • [ ] optional: create a global.css file which would contain any of our own resets we want to use (e.g. margins, reusueable button styles...). Apply it in _app

created time in 12 days

issue openedOffsetra/carbon.fyi

Create Theme object

Reminder for myself to create a Theme object which holds color and other theme constants to be used throughout the app.

created time in 12 days

PR opened Offsetra/carbon.fyi

Cleanup & a11y enhancements work in progress
+56 -74

0 comment

2 changed files

pr created time in 12 days

create barnchOffsetra/carbon.fyi

branch : a11y-enhancements

created branch time in 12 days

issue openedOffsetra/carbon.fyi

Add favicon and html meta tags, including OpenGraph tags

Checkout the offsetra-next repo for examples

created time in 19 days

issue openedOffsetra/carbon.fyi

Add README

just a few lines

  • [ ] Brief introduction
  • [ ] Contribution guide
  • [ ] About
  • [ ] Licence

created time in 19 days

issue commentstyled-components/styled-components

Strongly typed theme property

@kettanaito Thank you for the solution, however your claim that "name matters not" for styled-components.d.ts was misleading in my case. In my project, naming the file styled-components.d.ts was overwriting the entire module declaration. I have to name it styled.d.ts or put the declaration with my other global types inside index.d.ts

This behavior is in a fresh next.js typescript project with default configuration.

Otherwise, this works great, thank you!

farzadmf

comment created time in 2 months

more