This topic may sound familiar to people who have been reading my blog for a while. I’ve posted about most, if not all the component technologies I’ll be speaking about below. I hope I can change the context of the discussion enough not to bore you to death. Unless it’s necessary I will not write code, this is meant as an idea generator. Either I’ve already written about the technology or I will do so in a separate post. I keep coming back to Jen Simmonshttp://jensimmons.com/ SFHTML5 talk on web layouts. Partly because it takes me back to my beginnings...
One of the most frustrating things from doing CSS development is all the cool things that appear on the horizon that we can't really use right now and won't be able to until browser vendors decide that they can implement in a performant manner and one which will not "break the web". The result is that while there are tens of CSS modules available it is still problematic to polyfill forward or prollyfill for probably fill CSS as much as it is to create custom elements with Web Components. hitch.js Hitch.js sounds like an interesting promise. A Javascript library that...
my take on cutting the mustard I'm old enough to remember doing some serious browser detection when building pages. We had to detect browsers because they worked different enough even within different platforms of the same version of a browser. Browser detection fell out of favor as standards improved and browser vendors decided to work together instead of against each other. The alternative was feature detection where if you knew the feature you wanted to support you could test for it directly. One of the best examples was working with layers and DHTML. Who remembers code like this: javascript var...
One of the earliest large scale interactions between man and technology I saw is Unnumbered Sparkshttp://www.unnumberedsparks.com/, an installation by Janet Echelmanhttp://www.echelman.com/ and Aaron Koblinhttp://www.aaronkoblin.com/ produced for TED’s 30th anniversary in Vancouver, BC. What I found most striking, even though I wasn’t there was the audience participation. people passing by the exhibit would use their phones to draw, change colors and add sounds to the piece. > The sculpture spanned 745 feet between buildings in downtown Vancouver, Canada from March 15-22, 2014 maphttps://www.google.com/maps/place/Vancouver+Convention+Centre/@49.2889178,-123.1146661,18z/data=!4m2!3m1!1s0x0:0x24cec96c28a4a2bd. At night, it came alive with illumination. Visitors with smartphones and tablets were able to paint vibrant beams...
HTML documents don’t have many features to include additional semantics. With XHTML we could use namespaces but nowadays everyone seems to hate anything related to XML and the functionality of namespaceshttps://www.w3.org/TR/html5/infrastructure.htmlnamespaces seems to have changed considerably since XHTML 1.0https://www.w3.org/TR/xhtml1/. But there are ways to add semantics to an HTML page through custom attributes, extensions to HTML or a combination of both. We’ll explore some of the macine readable semantic additions to HTML: - Microformats, - RDFa Lite - JSON-LD - Microdata - data- attributes We’ll also explore some semantics derived from WAI and WAI-ARIA specifications along with their digital publishing...
Gulp 4.0, the next version of Gulp, should be released any day now and it will make some parts of the workflow easier to manage. This section is not a comprehensive guide to Gulp 4 and the changes it brings in. It’s meant to get the file we’ve worked in on previous sections working against Gulp 4 mostly because it allows me to run serial tasks. > Gulp 4.0 is alpha software. It’s still under development and the APIs we discuss here may change without notice. Use the code and examples below at your own risk. To get started with...
> The custom tasks use Gulp 3 syntax. You will have to change them to work with Gulp 4 After we’ve created the tasks we need for our project, we can define custom tasks to run one or more of these tasks. In the task below we run the targets in square brackets clean, copy, fonts and processImages in parallel when we call gulp prep. This example runs copy, fonts and processImages in parallel. Gulp will launch all the tasks at the same time and will let them take as long as they need before notifying you that it’s complete....
Serving content under development and watching for file changes It’s nice to publish to gh-pages when we want but to do so after every change we make to our code CSS, JS or HTML gets old really quickly. Instead we create two ways to serve content from a local web server The first one serves content from our app source directory, most likely after we’ve processed the files beyond transpilation from ES6 to Javascript and SASS to CSS. We also take care of watching for changes by specifying the following criteria and actions: - If an HTML page gets added...
Now for what, to me, is the most tedious part of the workflow… copying things around and doing housekeeping on the files I’m working with. This is easier now since I don’t have to create directories did that already or move things around only copy so we set up tasks to copy sets of files and clean up after ourselves. Copying things over Copying files ended up being stranger than I thought it would be. I could set up a big task that would copy everything every time I run it but I realized that such a task would be...
Vulcanize and Crisper are Polymer specific tasks that deal with the way web component works and make puns on the name Polymer too : Vulcanize will combine all elements in elements.html and produce a single file. This is the same as a concatenate task except that it understands Polymer way of doing things We run crisper in the vulcanized output to extract scripts so we comply with the Content Security Policyhttps://www.w3.org/TR/CSP2/ specification that bans all inline scripts as a way to make sure we’re not getting malicious code on our pages. See the inline scripts section of this HTML5 Rocks...
