Added By: Feedage Forager Feedage Grade C rated
Language: English
container queries  container  css  day  deep work  deep  design  don’t  grid  i’m  keyboard  queries  social media  time  work 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics

Tips, Tricks and Bookmarks on Web Development.


Container Grids

Mon, 24 Apr 2017 20:38:39 +0000

There’s been a rumbling of people that want Container Queries—myself included. (Come see my talk this year... it’s all about container queries!)

The idea behind container (née element) queries is that you specify that under certain conditions—most commonly, the width of a particular container—apply different CSS.

The problem with container queries is that it opens up the window for circular references. You could theoretically have CSS that says the following: if the width of the container is under 500px then make the contents 600px. At which point, your container is no longer under 500px and the CSS is no longer applied. At which point, the contents are no longer 600px and the width of the container is now back under 500px and the CSS should be applied. That’s bad.

In my exploration of CSS grids, I’ve been building a mental model of how they work. Let’s start with the following example:

.grid {
    display: grid;
    grid-template-columns: 200px 500px;

Guess what happens when the container doesn’t have enough room for the two columns? It just overflows the container. There’s no reflow and the container remains the same size.

Container Grids?

One purpose for container queries is to specify different layouts. Maybe adjust the size of something or rearrange something.

My “what if” lightbulb wondered if there were a way that we could one day solve the container query circular reference problem by using a grid layout system exclusively with container queries. (Other layout systems could still be used. They just couldn’t be used in conjunction with container queries.)

Since this system would be specific to grid, I’m imagining a syntax similar to responsive images that allows you to specify the minimum width for which the grid would apply.

.grid {
    display: grid;
        200px 300px 600w, 
        200px 200px 1fr 900w;

Container Other?

This doesn’t solve the problem of how to apply other design changes like font and colour changes or margin and padding changes that would also be applicable under those conditions.

I don’t have an eloquent solution for that. It’d need to be something that can deal with the cascade.

Now, I’m just spitballing here and don’t know enough about how the CSS specification works to know whether this could even work but what if you could name those grid templates?

.grid {
    display: grid;
        200px 300px 600w tablet, 
        200px 200px 1fr 900w desktop;

From there, being able to style elements using those keywords.

.item:grid(tablet) {
    padding: 20px;

.item:grid(desktop) {
    padding: 40px;

Due to inheritance, the keywords would be applicable to child elements. If you have a grid inside a grid then the same inheritance rules apply, with the child element outranking the parent element.

You could have the same cascade rules, too.

Where to go from here?

I suspect there are many holes in this idea. But maybe it’s enough to spur someone somewhere along the way to make container queries a reality.

Template Technology Agnosticism

Tue, 18 Apr 2017 15:02:07 +0000

Brad Frost recently wrote about managing technology-agnostic design systems. In his post, he recommends using a technology that doesn’t tie itself to any specific framework. When I was at Yahoo!, we took a very similar approach. We knew we wanted to build out these components and be able to use them across multiple projects. And due to product acquisitions or teams deciding different stacks, we knew that we had the real possibility of needing to support templating in JavaScript, PHP, and Java environments. Mustache We chose Mustache because of its agnostic approach. (Pattern Lab—of which Frost is a contributing member—also uses Mustache under the hood.) It’s an approach that worked well for us at Yahoo! and one that I’ve been advocating for ever since. Like Frost says in his post, we wired up much of the system using some lightweight JavaScript for simple interactions. Some components, however, had a full JavaScript API. Something like an autocomplete widget would have Mustache, CSS, and JavaScript counterparts that would all be part of the final deliverable to other teams. Our prototyping engine was able to render (at request time) a small part or a large part of a page through a combination of file hierarchy and naming convention. And all of this was done outside of any team’s engineering efforts. The advantage to separating this out from other teams allowed us to avoid the complexity of their build process and release cycles—of which, different teams had different processes and different cycles. Single Stack On the flip side, when I was at Xero, I had made a different recommendation. Instead of an agnostic design system, I recommended picking a specific tech stack. Xero, too, had different tech stacks used across the application. Unfortunately, the plethora of platforms was more a hindrance, slowing down the ability to iterate on design and maintaining a consistent experience across the entire application. Some parts of the application wouldn’t have a team looking after it and thus would languish. Likewise, it was difficult to have people who had knowledge of all the tech stacks to roll design changes out system wide. As a result, inconsistency grew over time. By choosing a single tech stack, the intent was to build an API that allowed new projects to ramp up quickly while also allowing designers and front-end developers to roll out changes across the entire platform. Decisions When do you choose an agnostic platform versus a specific one? I believe it comes down to an organizational one. At Yahoo!, the Mustache templates were the source of truth. Thus, any design changes started within the prototyping platform and then pushed out to other teams. For that approach to work at Xero, a generic platform would need to be established as a source of truth and then pushed to an intermediate stage. Personally, I’m not sure that the intermediate stage is necessary. The more layers between designers and production, the more resistance to change is likely to occur. As Brad Frost intimates, if you’re using an intermediate step, you’re going to need a build process that converts the generic components into platform-specific ones. You’ll want to do this to avoid platform-specific implementations from becoming the new source of truth for any implementation. Otherwise, changes will have to roll back and forth between intermediary and preliminary stages. Conclusion I’m a big fan of Mustache, even over its more feature-laden cousin, Handlebars. I like it because of its simplicity and because it requires the heavy work with the data to be done before it sees a template. (This is a strategy I’ve been using in web development for 15 years now and I find it works well.)[...]

Matias Wireless Keyboard

Mon, 20 Mar 2017 14:29:41 +0000

I don’t normally do product reviews but the Matias Wireless Keyboard looked like a great addition.

The Matias keyboard has the same layout as the full wired Apple keyboard—with full-sized arrow keys and full number pad. But it’s wireless!

The keyboard comes in colours to match your MacBook. In my case, I got the Gold. They've done a good job of matching the style.

The keyboard takes about 5 hours for a full charge and should last for up to a year before needing to be charged again (according to the box). Best thing is that it can be charged and be used at the same time! (This shouldn’t be a novelty but considering neither the Apple Magic Mouse nor the Apple Pencil can be used while charging, this is something special.)

Overall, it has a similar feel to the older wired keyboard with a similar amount of travel. (I believe the newest Apple keyboard is closer to the newer Apple MacBooks.)

Another really nice feature that really clinched it for me is the ability to connect the keyboard to 4 different devices. With a quick tap of the button, the keyboard will switch over to that device. I currently have the keyboard linked to my Mac, my PC, and my iPad Pro. It takes about a second for it to connect, which has been barely noticeable when switching devices.

When connected up to the Surface, the function keys work but the media keys don’t. Speaking of connecting to the Surface, it took a few tries before it even saw the keyboard. Once it found it, though, it worked fine.

One last thing to mention about the keyboard is that I can feel the printing of the letters on the keys. I can’t think of a keyboard I’ve had in the last decade where that's been the case. It doesn’t really bother me—at least, it hasn’t yet.

(Thanks Kitt for ordering the keyboard for me!)

Attempting Deeper Work

Sat, 18 Mar 2017 17:08:18 +0000

I’m in the midst of reading Deep Work. I’m about two-thirds of the way through and while it’s probably a bit hasty to jump into a review, I have been thinking about what it means to how I work and what I want to work on. The concept behind the book is that for the knowledge worker, success comes from the ability to think and work deeply on something. Basically, to get into a state of flow. This is extremely difficult for me with my constant need to read Twitter, Facebook, Instagram, Slack, and whatever else I think needs me attention immediately. Deep Work describes how we need to train our minds to resist shallow distractions. More than that, we need to develop a routine so that these shallow distractions don’t deplete our ability to attend to things deeply. I’m currently looking at my schedule to see how I can structure my day, to think less about what I should be doing at any given moment, and to think more deeply about the task that I know is at hand. The temptation is definitely there to just give up on social media altogether—especially with the onslaught of negativity that pervades the platforms right now. I believe I still get value from these platforms and can also provide value back. Thus, I don’t plan to give them up outright. I do need to restructure my relationship with them, though. And I haven’t determined the best way to do that, yet. The Schedule 07:00 Day Prep 09:00 Deep Work 10:00 Break 10:30 Deep Work 11:30 Lunch 13:30 Deep Work 15:00 Research 16:30 Disconnect 19:00 Reading Day Prep attempts to normalize days I do and don’t have my kids with me. I get up, get them ready, and off to school. When I don’t have them, this is time I can use to go get a coffee, chill out, or do whatever. Maybe practice some meditation. I want to avoid using this time to be on my phone because I don’t want to deplete my attention energy at the beginning of the day. Meditation in some form or another would be ideal. (The book talks about different forms of meditation that can be helpful.) Although it’s only two hours worth, I’m trying to front load my time for deep work. The intention being that I won’t already be mentally fatigued and thus, more able to get into a state of flow. The lengthy two hour lunch lets me go out to grab a bite to eat or stay in and prep a meal. If I have extra time, I can deal with email and other social media. This would be the first time of the day in which I would do so. After lunch, I have my next big block of time to focus on Deep Work. This brings the grand total to 3½ hours. That’s not a lot but hopefully the increased focus during this time will bring greater gains. Lastly, I cap off the afternoon with some research time. This is shallow activity time. This could include social media time, as well. After all that, the early evening routine, again, attempts to normalize my days with and without my kids. When I have the kids, we’re doing dinner and homework. When I don’t, maybe I’m getting groceries. Or hanging out with friends. Or just relaxing with a book. I wasn’t really sure what to do with the end of the day. Do I spend this time back on social media? Is there anything else that might fit in here? Having a routine of daily reading sounds ideal. Basically, finish off the day with something to sleep on, letting the subconscious process things. Weak Spots When I first put together my schedule, I noticed I only had an hour and a half of deep work time by the time lunch rolled around. Putting most of my deep work time in the afternoon might mean I’d already be too tired to get into a state of flow. Thus, I switched things around to at least get a bit more time. I could use more but I think it’d mean getting up earlier and I’m not yet sure I want to do that. How do I deal with identifying and dealing with urgent matters? If I get a text from my ex that I need to pick up a sick kid from school, do I[...]