Skip to content

Instantly share code, notes, and snippets.

Avatar
👨‍🚀
...

Michael Scharnagl justmarkup

👨‍🚀
...
View GitHub Profile
@justmarkup
justmarkup / style.css
Created Apr 16, 2019
Focus order example
View style.css
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
}
/* visually move the third element to the last position */
li:nth-child(3) {
@justmarkup
justmarkup / style.css
Created Apr 16, 2019
:focus-within example
View style.css
form {
padding: 10px;
position: relative;
overflow: hidden;
}
form:before {
content:"";
background: #ddd;
position: absolute;
left: 0;
@justmarkup
justmarkup / index.html
Last active Apr 16, 2019
Focus order examle
View index.html
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
</ul>
@justmarkup
justmarkup / style.css
Created Apr 16, 2019
:focus-visible example
View style.css
/* provide basic focus styles */
button:focus {
...
}
/* Remove focus styles for mouse users */
button:focus:not(:focus-visible) {
outline: none;
}
@justmarkup
justmarkup / index.html
Last active Apr 16, 2019
:focus-within example
View index.html
<form>
<label for="username">Username:</label>
<input id="username" type="text">
<label for="password">Password:</label>
<input id="password" type="password">
<input type="submit" value="Login">
</form>
@justmarkup
justmarkup / style.css
Created Apr 16, 2019
Custom focus style
View style.css
a:focus {
outline: none;
background-color: #651787;
color: #fff;
}
@justmarkup
justmarkup / thoughts.md
Last active Dec 30, 2016
Too many features
View thoughts.md

As 140 chars are not a good way for a discussion, here are my thoughts on a tweet from Jake Archibald https://twitter.com/jaffathecake/status/814751108975489024

Many clients want all the features but only have a limitited (low) budget which in the end often leads to the following scenario.The agency/web company wants the job and promises all the features for the budget, while knowing this way the performance/usability/accessbility will probably suffer. The developers working on the project know they have too little time to add all the features and therefore use tools (frameworks, libraries, plugins...) to reduce developer time and somehow meet the deadline.

In the end, I think it is often not developer experience, often it is that developers need to use available tools to get the job done as fast as possible, which often means no time left to improve performance/ux/accessibility. Most developers know that using an unoptimized framework or some plugins probably leads to poor performance/ux/a11y but they

@justmarkup
justmarkup / list.md
Last active Oct 18, 2016
First View - Flow View - Repeat View
View list.md

Note: This list doesn't include general performance improvements, like mentioned in this article

First View (a user visits a page for the first time or has cleared the cache/data since the last visit)

  • Load the core content as fast as possible and do it server-side
  • Load additional and third-party content asynrchronous
  • Inline critical CSS
  • Load web fonts asynrchronous and avoid FOIT and cache for repeat views, consider using no web fonts for first view
  • Fetch non-critical resources asynchronous and cache for later
  • Register a Service Worker and cache main assets
@justmarkup
justmarkup / index.html
Created Jul 16, 2016
simple service worker for reveal.js
View index.html
<script>
if (navigator.serviceWorker) {
navigator.serviceWorker.register('./serviceworker.js', {
scope: './'
});
}
</script>
View user-style-justmarkup-custom-properties.css
.user-style-justmarkup {
--color1: #118C3C;
--color2: #fff;
--color3: #9FD1B1;
--color4: rgba(0, 0, 0, 0.05);
--color5: rgba(17,140,60,0.25);
--color6: #E7F3EB;
--color7: #C3E2CE;
--color8: #0D7030;
--color9: #0A5424;
You can’t perform that action at this time.