profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/argyleink/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Adam Argyle argyleink @google Seattle https://nerdy.dev #argyleink { position: #CSS @GoogleChrome @CSSWG; maker: #VisBug; luv: CSS/JS/UX; role: parentNode; }

argyleink/blingblingjs 99

💲 Micro-library of shorthands for DOM selection, events, and attribute manipulation

argyleink/Bolt 29

⚡ is a fast grunt based, data driven, static site seed project, for rapid web development of PWA's or JAMstack projects

argyleink/Android-Webapp-Boilerplate 7

The project code needed to make a single webview android app

argyleink/Awesome-Design-Tools 6

The best design tools for everything.

argyleink/browserify-babel 3

Quickstart for playing with ES6 Babel and Browserify

argyleink/app-img 2

<app-image> a lazy image loading custom element for considerate user experiences

argyleink/affilicats 1

🐈 Progressive Web App demo that showcases flaky network resilience measures (📶 or 🚫📶).

startedslidevjs/slidev

started time in 2 hours

issue commentargyleink/gui-challenges

Tabs without scrolling to the anchor

rounding the number

while it may be disconcerting, it probably works fine right? if it tests well, i wouldn't worry about it 👍🏻 just dont guess it, test it =)

<br>

tabsection.scrollLeft = target.href.value.offsetLeft

generally requests for offsetLeft should be minimal, so you may see lag on low end devices when something is clicked.

<br> without your demo i'm having a kinda hard time imagining the constraints and goals you're working within. hopefully this is helpful so far!?

dlnr

comment created time in 19 hours

issue commentStateOfJS/StateOfCSS-2020

State of CSS 2021 Questions Feedback Thread

I could def see @layer being in the survey

SachaG

comment created time in 19 hours

push eventargyleink/gui-challenges

Adam Argyle

commit sha 276c62fcc646f074243484ae42075ff849cf8b61

fixes rtl checkbox hover highlight positioning

view details

push time in 20 hours

issue commentStateOfJS/StateOfCSS-2020

State of CSS 2021 Questions Feedback Thread

very exciting step through!

my only confusion moment was between Environments > Browsers and Other Tools > Browsers, felt like i was asked the same question back to back, but upon review, the difference was "Which browsers do you test in?" vs "Which browser(s) do you primarily work in during initial development?". no change request, just kinda documenting the moment i had.

i've got to shamelessly plug https://web.dev/learnCSS as a Resources > Sites & Courses candidate. But feel no pressure to add it, i just gotta !!say it.

SachaG

comment created time in a day

push eventargyleink/gui-challenges

Adam Argyle

commit sha b3b17463192c9e73e2d55081ba19bcf894bb1e7b

remove demo comment

view details

push time in 2 days

push eventargyleink/gui-challenges

Adam Argyle

commit sha e22275dc23dab64549205593059d911a18608f78

use logical sizes

view details

push time in 2 days

push eventargyleink/gui-challenges

Adam Argyle

commit sha 1480e50528bc6c1ed5362ee30d10d8e9ea3a5295

swap lingering physical props for logical ones

view details

push time in 2 days

push eventargyleink/gui-challenges

Adam Argyle

commit sha 6e62213ef2453ee18332e22526d11ffd0eaa39d5

adds screenreader feature that announces results

view details

Adam Argyle

commit sha 3574f730a45f313168cbffb1a486af0e470ce9a9

js populates screenreader results after layout

view details

Adam Argyle

commit sha ee607e9431b3867ab56dcfbc621725998674a410

ship functional color

view details

Adam Argyle

commit sha 7f41a03b85d18f8432704053817aa8258a6c33bc

use named custom property to fix ambiguity

view details

push time in 2 days

issue openedw3c/csswg-drafts

[mediaqueries-5] Allow `@custom-media` inside `@supports` or add `@custom-supports`

https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media

Consider the following styles where it feels wrong to use a custom-media inside supports right?

@custom-media --motionOK (prefers-reduced-motion: no-preference);
@custom-media --scrollTimeline (animation-timeline: works);

@media (--motionOK) { ... }
@supports (--scrollTimeline) { ... }

<br>

adding @custom-supports to the spec would allow proper type checking? making this the example instead:

@custom-media --motionOK (prefers-reduced-motion: no-preference);
@custom-supports --scrollTimeline (animation-timeline: works);

@media (--motionOK) { ... }
@supports (--scrollTimeline) { ... }

thoughts?

I very much love using @custom-media btw, very rad.

created time in 2 days

push eventargyleink/gui-challenges

Benjamin Bender

commit sha 4803727a9839fb3ed4bcd2f18a65874c2db9de88

Fix last leftover from #58 (#61) Consequently use logical properties.

view details

push time in 2 days

PR merged argyleink/gui-challenges

Fix last leftover from #58

Consequently use logical properties.

+1 -1

0 comment

1 changed file

benbender

pr closed time in 2 days

PullRequestReviewEvent

Pull request review commentGoogleChrome/web.dev

docs(learncss): Add Transitions guide

+---+title: Transitions+description: >+  In this module, learn how to define transitions between states of an element. Use transitions to improve user experience by providing visual feedback to user interaction.+  +audio:+  title: 'The CSS Podcast - 044: Transitions'+  src: https://traffic.libsyn.com/secure/thecsspodcast/TCP053_v1.mp3?dest-id=1891556+  thumbnail: image/foR0vJZKULb5AGJExlazy1xYDgI2/ECDb0qa4TB7yUsHwBic8.png+authors:+  - cambickel+date: 2021-09-15+---++When interacting with a website, you might notice that many elements have _state_. For example, dropdowns can be in opened or closed states. Buttons might change color when focused or hovered. Modals appear and disappear.++By default, CSS switches the style of these states instantly.++Using CSS transitions, we can interpolate between the initial state and the target state of the element. The transition between the two enhances the user experience by providing visual direction, support, and hints about the cause and effect of the interaction.++{% Aside 'key-term' %}+_Interpolation_ is the process of creating "in-between" steps that smoothly transition from one state to another.+{% endAside %}++{% Codepen {+  user: 'web-dot-dev',+  id: 'zYzNrJV',+  height: 320+} %}++## Transition properties++To use transitions in CSS, you can use the various transition properties or the `transition` shorthand property. ++### transition-property++The [`transition-property`](https://developer.mozilla.org/docs/Web/CSS/transition-property) property specifies which style(s) to transition.++```css+.my-element {+  transition-property: background-color;+}+```++The `transition-property` accepts one or more CSS property names in a comma-separated list.++Optionally, you may use `transition-property: all` to indicate that every property should transition.++{% Codepen {+  user: 'web-dot-dev',+  id: 'VwWPeEj',+  height: 400+} %}++### transition-duration++The [`transition-duration`](https://developer.mozilla.org/docs/Web/CSS/transition-duration) property is used to define the length of time that a transition will take to complete.++{% Codepen {+  user: 'web-dot-dev',+  id: 'wvegMYp',+  height: 400+} %}++`transition-duration` accepts time units, either in seconds (`s`) or milliseconds (`ms`) and defaults to `0s`.++### transition-timing-function++Use the [`transition-timing-function`](https://developer.mozilla.org/docs/Web/CSS/transition-timing-function) property to vary the speed of a CSS transition over the course of the `transition-duration`.++By default, CSS will transition your elements at a constant speed (`transition-timing-function: linear`). Linear transitions can end up looking somewhat artificial, though: in real life, objects have weight and can't stop and start instantly. Easing into or out of a transition can make your transitions more lively and natural.++{% Codepen {+  user: 'web-dot-dev',+  id: 'QWgdyZx'+} %}++Our [module on CSS Animation](/learn/css/animations/#animation-timing-function) has a good overview of timing functions.++You can use DevTools to experiment with different timing functions in real-time.++{% Img src="image/eiKy1JcjHqPp3gaedjAQWjPJ8YK2/G06SHV4Dra1HqTAL9d6t.png", alt="Chrome DevTools visual transition timing editor.", width="264", height="359" %}++### transition-delay++Use the [`transition-delay`](https://developer.mozilla.org/docs/Web/CSS/transition-delay) property to specify the time at which a transition will start. If `transition-duration` is not specified, transitions will start instantly because the default value is `0s`. This property accepts a time unit, for example seconds (`s`) or milliseconds (`ms`).++{% Codepen {+  user: 'web-dot-dev',+  id: 'jOwyWep'+} %}++This property is useful for staggering transitions, achieved by setting a longer `transition-delay` for each subsequent element in a group.++{% Codepen {

tiny nit on the demo 🙂 all the others have a gap between items, making this one look like it's missing it

camden

comment created time in 3 days

PullRequestReviewEvent
PullRequestReviewEvent

issue closedargyleink/gui-challenges

Split Button: Replace physical absolute positioning with logical, like `inset-block-end` instead of `bottom`

Hey,

I wondered if the inconsistent use of logical properties is a bug or intentional? If it's intentional I would love to see an added comment about the why.

F.e.: https://github.com/argyleink/gui-challenges/blob/86dddf0b9b886cd48013e36c4e4aefb1f7afcf1d/split-buttons/split-button.css#L170

closed time in 3 days

benbender

push eventargyleink/gui-challenges

Adam Argyle

commit sha 78ae8ab6161bd0274fafc026cf37f4fe2bb82f13

fixes #58 replaces physical absolute positions with logical ones

view details

push time in 3 days

push eventargyleink/gui-challenges

Adam Argyle

commit sha c05c59e737254c5c11f1a7cf31ee803ba8425139

Update README.md

view details

Adam Argyle

commit sha 6598d493bd8f5a3be2f93509f4544e5ef8a4e9d2

Merge branch 'main' into multiselect

view details

push time in 3 days

push eventargyleink/gui-challenges

Adam Argyle

commit sha c05c59e737254c5c11f1a7cf31ee803ba8425139

Update README.md

view details

push time in 3 days

push eventargyleink/gui-challenges

Adam Argyle

commit sha b1a67ce44ad2d84eebd8aff987a3233f1c0bf72c

fixes Safari by putting logical property usage in support query

view details

Adam Argyle

commit sha dc16f39663e0e908089c1793db5795589bef45c4

adds video

view details

Adam Argyle

commit sha cb042031bebae9063e374768fc0ac7773976ab11

adds github link to split text

view details

Adam Argyle

commit sha 4832be22a5bec6fac9329c6c005234d66ba82ce8

adds github link to media scroller

view details

Adam Argyle

commit sha 2a50d6c31d5221fdb5ed55d007712c3fe546337b

adds github link to color schemes

view details

Adam Argyle

commit sha 6b9447a1f267427a8e96ce5d427d219c985681cb

adds github link to breadcrumbs

view details

Adam Argyle

commit sha d4395f4943a87f5e10abc295edc5d9e49f1eeec3

adds github link to switch

view details

Adam Argyle

commit sha ce346e835784967a182e9b775ca9675924655d62

adds split-button github link

view details

Adam Argyle

commit sha a1bc672ae0c8798000e5b4411aa65cf0de25afdf

fixes layout alignment regression after adding github banner

view details

Adam Argyle

commit sha 86dddf0b9b886cd48013e36c4e4aefb1f7afcf1d

adds license

view details

Adam Argyle

commit sha b6ef11f96a56394c5bf76f8ca8b41120974ee066

Merge branch 'main' into multiselect

view details

push time in 3 days

PR opened argyleink/gui-challenges

Multiselect
+3382 -0

0 comment

10 changed files

pr created time in 3 days

create barnchargyleink/gui-challenges

branch : multiselect

created branch time in 3 days

PullRequestReviewEvent

startedcjimmy/grainy-gradients

started time in 4 days

issue commentargyleink/gui-challenges

Split Button: Replace physical absolute positioning with logical, like `inset-block-end` instead of `bottom`

inset-block-end would be a better choice definitely! i always forget that. Thanks!

benbender

comment created time in 4 days

issue closedargyleink/gui-challenges

CSS New Fectures

I like a lot the use of new CSS future features, but i think (personal opinion) that in some example they are use too heavy, for example in the split button css https://github.com/argyleink/gui-challenges/blob/main/split-buttons/split-button.css i'm experience a big fatigue to read the code ..... for example the use of long & chain remember me the pyramid of doom, or custom var of a custom var chain can be daunting to explore .... I'm thinking are aspects to thinking of with the new CSS stardars down the road !

closed time in 4 days

CICCIOSGAMINO

issue commentargyleink/gui-challenges

CSS New Fectures

I feel this yeah, it can easily become overwhelming looking at code, especially if it's using "new" features. Long & chains are definitely something to watch out for, and agree that my code might not be the best beginner friendly place to start. I'll try to adjust and see if I can mitigate some of these issues. Thanks for reporting!

CICCIOSGAMINO

comment created time in 4 days

issue commentargyleink/gui-challenges

Intentional use of pysical properties?

there are no logical absolute values yet, or transforms. afaik, they're different coordinate systems (aka they're not flow relative to the document).

logical props get you real far, but not 100% completion yet.

i'm open to suggestions!? how would you have styled it?

benbender

comment created time in 4 days

pull request commentargyleink/gui-challenges

Added Link to All GUI Challenges

hi! this looks like the same thing the readme is already showing. thanks tho!

DevGupta-ikr

comment created time in 4 days