For the longest time I've resisted building pattern and component libraries for my projects. I've thought about them as a waste of time and resources. I conceptually understand their importance and how they benefit projects. At An Event Apart last year I heard Brad Frosthttp://bradfrost.com/ speak about Atomic Designhttp://atomicdesign.bradfrost.com/table-of-contents/ and, based on my earlier research in Polymer and Web Components, I decided to take a look at design patterns again without web components. Why a style Guide? I'm also planning a full rebuild of my old labs website and decided to have a pattern library to make it easier to...
As I'm working in enhancing the templates for my essay collection I've come up with a need to have a menu to link to the essays I want to make available to readers but not all the writing in the location where these essays are available. Rather than manually creating the menu I've decided t hat it may be better to atomate the process and use JSON and Javascript to create it. I've broken the content in three pieces, the JSON file with the items I want to add, the Javascript to create the menu and a small CSS to...
Most of the time we don't have to worry about alignment and text direction when working with web content. When the language works the same as English we have no problem. We start having issue becomes when we work with languages other than English in the same document. It gets more complicated when our primary language uses a different writing mode than the one we're used to. Think about vertical Kanji or right-to-left Hebrew or Arabic text mixed with your traditional English or latin content. We'll discuss tools that CSS gives you to control how languages other than English appear...
I've been looking at ways to group content in a semantic way. For example, rather than using: markup I would like to find an equivalent unit of content that would allow me to group the children and still be semantically valid. Looking at the code from Dudley Storey's The New Codehttps://thenewcode.com/ that I saw his use of the figure element to do this. Knowing that Dudley would never do something that went against spec I thought I'd look at the figure element and see if would do what I wanted it to do. The figure element is surprisingly flexible in...
New in ES2017 are async functions and the await keyword that will make writing async code easier to read, reason through and understand what caused any error that may get thrown. The hardest part, for me, of working with ES2016 and later is that I don't always see the reasoning behind the new code, the older version of the code still work just as fine. Async / Await are different. They look a lot like the callback code that we used to work with in the ES5 days but they produce the same asynchronous result as if we were writing...
I have to admit that I don't pay as much attention to accessibility as I should. I don't have enough of an audience to merit warranting the extra work that installing accessibility tools and running the tests periodically entail. But what if I could run the accessibility tests every time I run my build process? Then it would only be an issue of acting on the accessibility suggestions and that's a lot easier than running the tests. While at Smashing Conference I talked to one of the presenters and discussed the possibility of building a skeleton build system that contained...
One of the things I find particularly difficult when working with Youtube videos directly without lazy loading is that I don't get an image to use as a poster frame for the embedded videos. Instead of using locally hosted videos where I have more control of and that looks like this: markup I have created a video class to wrap around the iframe Youtube gives me and the result looks like this: markup There are ways to write the embed programmatically and get the embed to work they way you want but it's Javasacript I don't use Javascript for non...
I wasn't aware of Vestibular Disorders being an issue with animations on the web but it's a big part of the disabilities we need to consider when working on the web. It's important to remember that... > People with vestibular disorders have a problem with their inner ear. It affects their balance as well as their visual perception of their world around them. Sometimes the sensation lasts only a short while, but others can suffer it for years. Walking becomes a challenge and they have a constant risk of falling. Concentration is diminished leaving the sufferer unfocused and often unproductive....
In the beginning: CSS and CSS 2 Links have been on the web since the beginning as a representation of a connection to another document. In the beginning you could only change the color of the link itself and its underline. By default, text links are blue and underlined. This underlining strikes through descenders - letters that dip below the baseline, such as a lowercase j – making some links more difficult to read. with CSS level 2 we got the text-decoration keyword that allowed to change the way underlines in links and other elements looked like. With it you...
There are times when the CSS cascade becomes a pain in the ass. When we want to revert the value of a property to its default before we added any other value for the property in the current element or any ancestor up the chain we have to remember the property but also what the default value is. CSS provides several mechanisms to handle inheritance. We'll discuss several ways to work with the cascade to make it do what we need. initial The newest to me way to reset is the initial value. The initial CSS keyword sets and element...
