Skip to content

Instantly share code, notes, and snippets.

View justmarkup's full-sized avatar
👨‍🚀
...

Michael Scharnagl justmarkup

👨‍🚀
...
View GitHub Profile
@justmarkup
justmarkup / userstyles-mastodon.css
Last active November 8, 2022 09:03
User stylesheet for Mastodon
/* Visually warn about inaccessible images in feed */
.status img:not([alt]),
.status img[alt=""] {
border-top: 2em solid red;
}
/* Highlight private toots, toots only mentioned people can see. From https://mastodon.social/@matuzo */
.status__wrapper-direct {
padding-inline-end: 20px;
}
@justmarkup
justmarkup / style.css
Created April 16, 2019 06:35
Focus order example
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 April 16, 2019 06:28
:focus-within example
form {
padding: 10px;
position: relative;
overflow: hidden;
}
form:before {
content:"";
background: #ddd;
position: absolute;
left: 0;
@justmarkup
justmarkup / index.html
Last active April 16, 2019 06:34
Focus order examle
<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 April 16, 2019 06:11
:focus-visible example
/* 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 April 16, 2019 06:26
:focus-within example
<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 April 16, 2019 06:08
Custom focus style
a:focus {
outline: none;
background-color: #651787;
color: #fff;
}
@justmarkup
justmarkup / thoughts.md
Last active December 30, 2016 17:21
Too many features

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 October 18, 2016 16:57
First View - Flow View - Repeat View

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 July 16, 2016 20:59
simple service worker for reveal.js
<script>
if (navigator.serviceWorker) {
navigator.serviceWorker.register('./serviceworker.js', {
scope: './'
});
}
</script>