Dublin Library

The Publishing project

Web Components as pattern libraries: Styling the element

Styling the element Insert the following CSS in the style declaration for our pattern-figure element css :host { display: block; clear: both; } :host > figure { max-width: min-content; } :host > figure > img { max-width: inherit } :host > figure > figcaption { color: 999; font-size: 80%; text-align: left; } :hostalign="left" > figure { clear: both; float: left; margin: 2em 0; } :hostalign="center" > figure { clear: both; margin: 2em auto; } :hostalign="right" > figure { clear: both; float: right; margin: 2em 0; } :hostalign="left" > figure > figcaption, :hostalign="center" > figure > figcaption, :hostalign="right" > figure >...

Continue reading →

Web Components as Pattern Libraries: Building the element

One of the things that have caught my attention about web components is how easy it is to adapt them as pattern libraries and design libraries. Because we can isolate the style and scripts for each individual component and compose larger UI elements from smaller elements, Web Components are ideal for this type of work. Before we can delve into pattern and design libraries we need to design what they are. So here we go: > A design library completely covers an element or a pattern: what it intended purpose is, how it looks, what behaviors and styles are available...

Continue reading →

CSS and Javascript working together

Do we need CSS after all? CSS is not immune to the framework wars. This is a quick look at some of the available CSS frameworks. - Bootstrap - Foundation - Semantic-UI - Susy - Material UI - MaterializeCSS - Gumby - Pure - Metro UI CSS 2.0 - Leaf Beta They all solve the same problem of laying out and styling content but they all have different styles to solve the same problem of providing consistent, reusable and scalable CSS libraries. Different CSS frameworks present different approaches to building a good CSS suite of tools. The problem is that...

Continue reading →

Developer frustration: Better be ready

There is a point when we need to decide if technology is a help or a hindrance. This came up recently in a conversation with @jiminpanhttps://twitter.com/JiminyPan in Twitter made me realize something: We all react differently to the way technology communicates with us. The tweet that started it all: I mean, Lighthouse auditing really can belittle you sometimes — needless to say it failed to audit some stuff… pic.twitter.com/xigLoNc3EY— Jiminy Panoz @JiminyPan December 30, 2016 While cognizant that things are different for different developers and that different projects have different requirements I can speak about some of the things I've...

Continue reading →

(Fully) Understanding Why To Progressively Enhance

Introductory Note Every so often we see twitter rants about progressive enhancement versus using Javascript for everything... after all we can do most of what CSS can with Javascript and the CSS Object Model, right? The latest iteration of this debate has been between Alex Russell who advocates for smaller JS payloads, lazy loading and progressive enhancement versus the people saying that we shouldn't worry about javascript being available because all modern browsers are evergreen and people wouldn't think about disabling Javascript. These are some random thoughts and ideas about the subject Do we still need progressive enhancement? Rather than...

Continue reading →

Thoughts and experience with frameworks: The best tool for the job

Let's face it. The web has become too big. At every stage on the development process we have several different tools each with a passionate following that will tell you their tool is better than the other tools in that category. If you've been doing development for any length of time you'll remember that frameworks are not new. We can go as far back as jQuery and libraries developed around that time August, 2006 to see the evolution of frameworks. When they are first introduced they are good. Does anyone remember other Frameworks from the early jQuery era? - MooTools...

Continue reading →

My basic development toolkit

The argument about tool overload is not a new one. There have been many discussions over the years about what framework is better, what language is better, whether you should use Ruby on Rails versus Angular, SASS instead of LESS or Compass instead of plain SASS and even whether you should use SASS syntax over SCSS or vice versa. I've been working with web technologies since before we had Javascript and CSS. I subscribe to the school that says learn the basics and then jump into the fancy advanced stuff or in this case, paraphrasing Addy Osmani: first do it,...

Continue reading →

Conference Report: Books in Browsers

> Part conference review and part ideas moving forward. This may or may not make as much sense as the review for AEA did. I still think they complement each other. Where AEA dealt with the how to create content and the tools to use. BIB Books in Browsers, to me, deals with the content we create and the intersection of the stories we tell and the technologies we use to tell them. I was surprised to see how much of these new channels interact with the web is and what the web can be and become. It is also...

Continue reading →

Conference Reports: An Event Apart, San Francisco

I thought I was crazy when I saw that both An Event Apart and Books in Browsers were back to back on the same week and decided not to cancel. Now that BiB is almost done I'm kinda glad it did. AEA gave me ideas and tools about the how to do design work and BiB is giving me ideas on what to work on and where to look for experiment ideas that may or may not fall squarely on the web. AEA I've been promising to myself that I would attend An Event Apart for years. It all worked...

Continue reading →

My CSS Starter Kit: Links, Resources and References

- Grids - labs.jensimmons.nethttps://labs.jensimmons.com - rachelandrew.co.ukhttps://rachelandrew.co.uk/archives/ - Modular Scale - Modular Scalehttp://www.modularscale.com/ - More Meaningful Typographyhttp://alistapart.com/article/more-meaningful-typography -- Tim Brown, A List Apart - Web Font Loading Patternshttps://www.bramstein.com/writing/web-font-loading-patterns.html -- Bram Stein - Molten Leadinghttps://github.com/Wilto/Molten-Leading - Molten leading or, fluid line-heighthttp://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/ -- Tim Brown, Nice Web Type - Viewport Sized Typography - Viewport Sized Typographyhttps://css-tricks.com/viewport-sized-typography/ -- CSS Tricks - Viewport sized typography with minimum and maximum sizeshttps://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum-and-maximum-sizes.html -- Eduardo Boucas - FitTexthttp://fittextjs.com/ - CSS Viewport Units: vw, vh, vmin and vmaxhttps://dev.opera.com/articles/css-viewport-units/ -- Chris Mills, Dev.Opera - Fluid Typehttp://trentwalton.com/2012/06/19/fluid-type/ - Precise control over responsive typographyhttps://madebymike.com.au/writing/precise-control-responsive-typography/ -- Mike Riethmuller - Font Face Observerhttps://github.com/bramstein/fontfaceobserver --...

Continue reading →