profile
viewpoint
David Thyresson dthyresson Looking for next thing. Boston, MA street art, coffee, hockey, sports data, synths, drum machines and good design.

dthyresson/eucker 4

Eucker is a Hubot Baseball Campfire bot

dthyresson/apprenticeship 0

A packet to give new apprentices. It should be printed out and waiting on their desk when they arrive.

dthyresson/awesome-redwood 0

A community-driven collection of Redwood related plugins, config, themes, build scripts, tutorials, podcasts, and more.

dthyresson/Baraja 0

Baraja is a jQuery plugin that allows to move elements in a card-like fashion and spread them like one would spread a deck of cards on a table. It uses CSS transforms for rotating and translating the items. There are several options available that will create various spreading possibilities of the items, for example, moving the items laterally or rotating them in a fan-like way.

dthyresson/baseball-pi-day 0

Finding digits of PI in baseball inning scores for Boston Baseball Hackday and Pi Day 2019

dthyresson/baseballhackday.github.io 0

The new Baseball Hack Day website

dthyresson/card-creator 0

Baseball Hackday Project

dthyresson/colors 0

Smarter defaults for colors on the web.

dthyresson/create-redwood-app 0

Template for `yarn create redwood-app`

pull request commentredwoodjs/learn.redwoodjs.com

French translation for footer #32

@M0nica, can you check once more? If it's still showing the same issue, can you give me some idea to solve it? I haven't change any format files for the project. I just added the JSON files needed for the translations. Also, when I ran it in the localhost it is working fine.

Actually, I found out (based on the convo here: https://github.com/redwoodjs/learn.redwoodjs.com/issues/38#issuecomment-765701029) that the footer color changes are related to a pre-existing strange styling issue that are currently happening in the repo with certain environments 🤔 I see the same footer styling issue on another staging site as well https://deploy-preview-33--learn-redwood.netlify.app/docs/tutorial/welcome-to-redwood.

ShrillShrestha

comment created time in 8 minutes

issue commenttailwindlabs/headlessui

`Switch` thumb not disabled when enclosed in a `disabled` `<fieldset>`

Hum, running npm i @headlessui/react@dev doesn't install a new version. Care to update?

ulken

comment created time in an hour

Pull request review commenttailwindlabs/headlessui

apply disabled fix when inside a disabled fieldset

+// See: https://github.com/facebook/react/issues/7711+// See: https://github.com/facebook/react/pull/20612+// See: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-fe-disabled (2.)+export function isDisabledReactIssue7711(element: Element): boolean {+  let parent = element.parentElement+  let legend = null++  while (parent && !(parent instanceof HTMLFieldSetElement)) {+    if (parent instanceof HTMLLegendElement) legend = parent+    parent = parent.parentElement+  }++  let isParentDisabled = parent?.getAttribute('disabled') === '' ?? false+  if (isParentDisabled && isFirstLegend(legend)) return false

Sorry for being unclear. I was on my phone with limited time (and UX...).

I wasn't implying it was incorrect (which is why I considered it a nitpick), merely that the code could possibly be slightly simplified/refactored to:

if (isFirstLegend(legend)) return false
return isParentDisabled

Rationale: if it's in the first legend it should always return false, no matter where it is in the DOM or if it's enclosing fieldset is disabled.

Running it by your truth table yields the same result, as far as I can tell.

Not saying you should change it necessarily, you might find the current implementation more clear. Just throwing it out there how I see it.

RobinMalfait

comment created time in an hour

issue commentredwoodjs/learn.redwoodjs.com

a11y: low contrast for `span.token.comment` in code blocks

I had some additional code block changes (including a darker background) but those styles aren't showing in certain environments! So strange, but I can't comprehend all the combined processes that are in place to make CSS in the modern JS world. :(

I'll see what I can do!

M0nica

comment created time in 2 hours

pull request commentredwoodjs/learn.redwoodjs.com

French translation for footer #32

@M0nica, can you check once more? If it's still showing the same issue can you give me some idea to solve it. I haven't change any format files for the project. I just added the JSON files needed for the translations.

ShrillShrestha

comment created time in 3 hours

issue commentredwoodjs/learn.redwoodjs.com

a11y: low contrast for some text in nav and footer

Yep I'll take a look at these, thanks for pointing them out!

M0nica

comment created time in 4 hours

issue commentredwoodjs/learn.redwoodjs.com

a11y: low contrast for some text in nav and footer

@cannikin it would be helpful to get your input on making the color schemes more accessible as my understanding is you worked on the initial color schemes.

M0nica

comment created time in 4 hours

pull request commentredwoodjs/learn.redwoodjs.com

French translation for footer #32

I took a peek at your changes and noticed the footer color in light mode is different in your staging site than the production version of site. I am assuming that was an intentional side effect.

The top screenshot is what I see in light mode for the footer in the staging server (https://deploy-preview-36--learn-redwood.netlify.app/docs/tutorial/prerequisites/): Screen Shot 2021-01-22 at 2 19 08 PM

Whereas what I see in light mode for the footer for the production site (https://learn-redwood.netlify.app/docs/tutorial/welcome-to-redwood) is: Screen Shot 2021-01-22 at 2 19 00 PM

ShrillShrestha

comment created time in 4 hours

issue openedredwoodjs/learn.redwoodjs.com

a11y: low contrast for some text in nav and footer

Similar to https://github.com/redwoodjs/learn.redwoodjs.com/issues/38 I noticed on the site that the contrast value for certain text in the footer and navigation is currently too low to be accessible. Generally the minimum contrast level to be accessible is 4.5:1 for AA or 3:1 for large text.

Screenshots below:

Screen Shot 2021-01-22 at 2 05 10 PM Screen Shot 2021-01-22 at 2 04 57 PM Screen Shot 2021-01-22 at 2 04 18 PM Screen Shot 2021-01-22 at 2 04 10 PM

I am happy to work on updating the colors in the footer and navigation to be more accessible but am not sure in terms of branding what colors would be appropriate.

created time in 4 hours

issue openedredwoodjs/learn.redwoodjs.com

a11y: low contrast for `span.token.comment` in code blocks

I noticed on the site that the contrast value for span.token.comment is currently too low to be accessible as it is 1.64. Generally the minimum contrast level to be accessible is 4.5:1 for AA or 3:1 for large text.

I was able to encounter this issue by going to https://learn-redwood.netlify.app/docs/tutorial/cells and viewing the code example that contains // web/src/components/BlogPostsCell/BlogPostsCell.js at the top (screenshot below)

Screen Shot 2021-01-22 at 1 55 57 PM

visually the contrast looked too low for me, I used the Google Developer Tools to confirm the contrast level.

Screen Shot 2021-01-22 at 1 55 48 PM

I am available to work on resolving this issue.

created time in 4 hours

issue closedredwoodjs/learn.redwoodjs.com

Change footer colors to be more accessible

Our page has lovely theming now thanks to Rob but I noticed our footer is somewhat hard to read in light mode.

There is not enough contrast between the dark gray bg and dark red text.

The dark red text is similarly hard to read on dark red bg in dark mode

Light mode image

Dark mode image

closed time in 5 hours

clairefro

issue commentredwoodjs/learn.redwoodjs.com

Change footer colors to be more accessible

Resolved by #37

clairefro

comment created time in 5 hours

push eventredwoodjs/learn.redwoodjs.com

Rob Cameron

commit sha 2b5e10d7c7909b78700acba73d8016fd53f0fd1a

Set footer background color the old fashioned way

view details

Claire Froelich

commit sha 128119beb01ed6905cb34123196e817243f60b5b

Merge branch 'master' into rc-footer-color

view details

Claire Froelich

commit sha a928239a8abb4fa87286749cf0a14edb6e3a0686

Merge pull request #37 from redwoodjs/rc-footer-color Set footer background color the old fashioned way

view details

push time in 5 hours

push eventredwoodjs/learn.redwoodjs.com

Claire Froelich

commit sha e29e4bff65e68b6a0024fca86dd277a626da2895

Merge pull request #30 from redwoodjs/rc-search Adds Algolia serach

view details

Claire Froelich

commit sha c976680842e9b44a8f4e7f4684005bbbd0942095

Add test md doc

view details

Claire Froelich

commit sha 32230c53e8bdd4c8364b106952ae8848be3593f5

New translations test.md (French)

view details

Claire Froelich

commit sha 744b7a22b5656b29b91b32e5c94c7888392664ac

Start re-writing README, prune uneeded files

view details

Claire Froelich

commit sha adacd2e03add4c8f5bfdf25e88c262f77ee50ff2

Add translation guide content

view details

Claire Froelich

commit sha 88da467372fda19309b09c2e578d7938a2c69c32

Boldify FAQ questions

view details

Claire Froelich

commit sha c73f5db9163a2ba68bafc376fad032a96a83cbe6

Merge pull request #35 from redwoodjs/l10n_master New Crowdin updates

view details

Claire Froelich

commit sha fa0efe0b48714abd61060ccd44a4fab3e75d678c

Delete test.md

view details

Claire Froelich

commit sha 170c06ccf8c342253e3476c4df196f6ebc659a6d

Update README.md

view details

Claire Froelich

commit sha 128119beb01ed6905cb34123196e817243f60b5b

Merge branch 'master' into rc-footer-color

view details

push time in 5 hours

create barnchredwoodjs/learn.redwoodjs.com

branch : rc-footer-color

created branch time in 6 hours

push eventtailwindlabs/headlessui

Robin Malfait

commit sha ab820ded097cf7699da01e9f984bd86f9ec58065

update React Transition docs (#203)

view details

push time in 6 hours

delete branch tailwindlabs/headlessui

delete branch : update-transition-docs

delete time in 6 hours

pull request commenttailwindlabs/headlessui

update React Transition docs

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

headlessui-vue – ./packages/@headlessui-vue

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-vue/i22w5r0tf
✅ Preview: In Progress

RobinMalfait

comment created time in 6 hours

create barnchtailwindlabs/headlessui

branch : update-transition-docs

created branch time in 6 hours

Pull request review commenttailwindlabs/headlessui

apply disabled fix when inside a disabled fieldset

+// See: https://github.com/facebook/react/issues/7711+// See: https://github.com/facebook/react/pull/20612+// See: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-fe-disabled (2.)+export function isDisabledReactIssue7711(element: Element): boolean {+  let parent = element.parentElement+  let legend = null++  while (parent && !(parent instanceof HTMLFieldSetElement)) {+    if (parent instanceof HTMLLegendElement) legend = parent+    parent = parent.parentElement+  }++  let isParentDisabled = parent?.getAttribute('disabled') === '' ?? false+  if (isParentDisabled && isFirstLegend(legend)) return false

It should result in the same behaviour:

if (isParentDisabled && isFirstLegend(legend)) return false
return isParentDisabled

Because, when the isParentDisabled is false, then the result will be false anyway. So at this point it doesn't really matter that we are in a legend or not. The edge case is that when the parent is disabled but we are in the first legend, then we should ignore that.

Here is a truth table:

isParentDisabled isFirstLegend Return Value Info
true true false Disabled, but first legend, so we can 'ignore' the disabled state.
true false true Disabled, but not the first legend. else case is executed which is the result of isParentDisabled.
false true false Not disabled. else case is executed which is the result of isParentDisabled.
false false false Not disabled. else case is executed which is the result of isParentDisabled.

I think that this is the correct behaviour 🤔

RobinMalfait

comment created time in 6 hours

Pull request review commentredwoodjs/redwoodjs.com

Docs: TypeScript docs updates

 Create a `./web/tsconfig.json` file:     "paths": {       "src/*": ["./src/*"]     },-    "typeRoots": ["../.redwood"]+    "typeRoots": ["../.redwood"],+    "types": []   },-  "include": ["src"],+  "include": ["src"] } ```  You should now have type definitions, you can rename your files from `.js` to `.ts`, and the files that contain JSX to `.tsx`. +#### Getting types for `jest` in test files++If you're adding tests, you'll want to include the types for `jest` in your `tsconfig`.++```diff+-"types": []++"types": ["jest"]+```++Currently, these are added to `node_modules` by `@redwoodjs/core` and the above approach should just work. If this is not the case, you can `npm i -D @types/jest` in the `web` folder and they will resolve.

@Burnsy Thanks for the feedback! This is under the WEB section, but I guess it wouldn't hurt to add additional clarification language?

It might be a good idea to just add in a quick cli generator for tsconfigs that adds to the root and extends in the respective directories for overrides? I'm not sure if that's already a thing in the TS support meta tracker though.

msutkowski

comment created time in 6 hours

issue commenttailwindlabs/headlessui

`Switch` thumb not disabled when enclosed in a `disabled` `<fieldset>`

Sweet! I’ll make sure to try it out.

ulken

comment created time in 6 hours

Pull request review commenttailwindlabs/headlessui

apply disabled fix when inside a disabled fieldset

+// See: https://github.com/facebook/react/issues/7711+// See: https://github.com/facebook/react/pull/20612+// See: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-fe-disabled (2.)+export function isDisabledReactIssue7711(element: Element): boolean {+  let parent = element.parentElement+  let legend = null++  while (parent && !(parent instanceof HTMLFieldSetElement)) {+    if (parent instanceof HTMLLegendElement) legend = parent+    parent = parent.parentElement+  }++  let isParentDisabled = parent?.getAttribute('disabled') === '' ?? false+  if (isParentDisabled && isFirstLegend(legend)) return false

Minor nitpick, but shouldn’t you return false if first legend no matter if in a disabled fieldset or not?

RobinMalfait

comment created time in 6 hours

issue commenttailwindlabs/headlessui

Would you like to create headless components for svelte ?

Hey! Thank you for your suggestion! Much appreciated! 🙏

We are first focusing on React & Vue components, so I can't give you a good answer on this one. Maybe in the future!

mitya-borodin

comment created time in 7 hours

issue closedtailwindlabs/headlessui

multiple dropdowns menus on screen, wrong one is focused

https://codesandbox.io/s/headlessuireact-menu-example-forked-ejnc9

When there are multiple dropdown menus on the screen:

  • open the first dropdown image

  • open the second one -- the first one gets closed, but the first button receives the focus image

  • try arrow keys on the keyboard -- the first dropdown gets open and receives the keystrokes; the second dropdown remains open image

closed time in 7 hours

yurique
more