Subscribe: Snook.ca
http://www.snook.ca/jonathan/index.rdf
Added By: Feedage Forager Feedage Grade B rated
Language: English
Tags:
app  apps  bit  button  context  css  function  images  might  modal  platform  platforms  tablet  thing  things  variation  windows 
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
Preview: Snook.ca

Snook.ca



Tips, Tricks and Bookmarks on Web Development.



 



Coding CSS for Context

Fri, 10 Feb 2017 15:15:57 +0000

Dave Rupert recently tweeted asking a question that I see quite often: .some-context .thing { /* special rules and overrides */ } Does that go in thing.css or some-context.css? Then, Harry Roberts discussed this concept further in his article of CSS Code Smells Revisited. Harry uses a practical example of .thing being a .button. (Well, actually, a .btn but whatever. And yes, I just “well, actuallied” myself. It’s preemptive mansplaining.) You’ll have the standard button that appears throughout your application. And then you have this variation in modal dialogs. Instinctively, we start writing .modal .button. Hence, Dave’s question of where to put this particular bit of code. It’s interesting to note that the results of Dave’s survey indicated that a slim majority of people prefer that this bit of code live in with the modal CSS and not with the button CSS. Harry indicated that it should live with the button CSS. And I agree with him. We’re styling a button! It should be in with the buttons. But then Harry seemed to contradict himself by saying that the button class name should be renamed to .modal__btn, making it a part of the modal component. In doing so, this bit of CSS should now live in with the modal CSS. (And based on naming convention, I would agree with him.) One thing you have to worry about is components becoming too complex. Yes, the modal has a button. It could also have inputs and headings and all sorts of things. Over my career, I’ve noticed useful boundaries and tend not to create components with deep hierarchies. Identifying The Thing Going back to our thing that we’re trying to style: the button. Yes, right now, we’re styling a button in a modal dialog. Is this the only place that this exists? Right now, quite possibly. Will it always be the only place it exists? If your project is constantly in flux, then not likely. Here’s what’s important: We want to identify that this is a variation on our button. We want to indicate the purpose of this button style. We want to avoid tying the code to a particular context that could change. Going with .button--modal, for example, now identifies it as a variation. But fails on the other two points: It indicates its context and doesn’t say what it’s trying to do other than be in a particular place on the page. So, why is the button in the modal different than regular buttons? (If you’re the designer, ask yourself this. If you’re not the designer, ask them this.) You might get something like, “It needs to be green to draw attention to the fact that it’s a primary action.” Or maybe something like, “the button is smaller because we don’t have as much room.” This helps you come up with a name like .button--primary or .button--compact. Either of those names satisfy the three points I mentioned above. It identifies itself as a variation using the BEM double hyphen. It indicates its purpose through the variation name. It hasn’t tied itself to a specific context. That last point, to me, is the most important. As a designer, I might end up using these styles on a new page that hasn’t been thought up yet. I might want to use a primary button style on a form that isn’t in a modal dialog. I might want to use a compact button in a sidebar where I don’t have a lot of room. And as Harry also mentioned, by keeping all our button styles in one place, we have the ability to see patterns emerge across an entire project. Three months down the line, do we suddenly find ourselves with 30 button styles and need to reduce the complexity of our UI? That can be harder to do if button styles are strewn throughout the codebase, hidden within other contexts.[...]



Mixed Content and Responsive Images

Tue, 24 Jan 2017 18:39:12 +0000

I ran into a weird issue. Images weren’t loading for some reason on this project I was working on. And yet, on the old site, they loaded just fine. What was different?

After some digging, I noticed that the images that weren’t loading were those defined using the element. Surely that’s not expected behaviour, is it? Turns out, it is.

There’s a Mixed Content spec. This spec defines the rules in which content should be blocked when they’re served from an unencrypted context within an encrypted one. (That is, an https page trying to load images and other assets over http.)

Images are considered passive content. As a result, browsers will serve them up even though they’re unencrypted. Scripts, on the other hand, are considered active content and, by default, get blocked.

Interestingly, within the spec is this very line: “Return allowed if one or more of the following conditions are met: [...] when request’s type is "image", and initiator is not "imageset".”

The picture element being an imageset, that means that unencrypted images defined in a or srcset will get blocked.

Solution?

From what I can tell, you have two options: serve the images over https or don’t use responsive images. (I recommend the former.)




On Platform Independence

Tue, 08 Nov 2016 13:12:17 +0000

As I explore running on Windows, I've been thinking about the apps and tools that I use. I went through a similar exercise when I dove into Android.

I definitely felt that one's enjoyment of a platform might come to how much you're willing to embrace that company's entire ecosystem. Using all Apple products for close to 10 years now had meant that moving from device to device was relatively effortless. Many of the recent features like unlocking my MacBook with my watch or having a universal clipboard are pretty handy.

The moment multiple platforms come into play, all this convenience starts to disappear.

As a result, I've started being more conscientious about where I want stuff to live. For example, do I store all my files in iCloud? That doesn't help me on Windows or Android. Then there's music. And photos. And so on.

This also goes for the apps that I choose to use. Even something as simple as a to-do app has been a frustration of mine as I seek to find something that not only meets my needs but can do so on all platforms. Not easy to do. (groan)

As a developer, it makes me think about the experiences I want to create and how I could reach the largest audience but also how I can create a great experience over all those platforms.

The web, of course, is a natural fit. There's a web browser on every platform. I do like standalone apps and I like the experience that native apps can provide. Sometimes those things are subtle. Performance, rendering, scroll or mouse events, and so many other things can often make me feel like I'm in an uncanny valley of applications.

The last version of iTunes, for example, would do this weird thing where it would reset the scroll position every time I selected an item. It ruined iTunes for me. Making a playlist was excruciating.

I'm hoping that Progressive Web Apps will fill this need. With local storage, service workers, notifications, and access to other native resources, we'll be able to build cross platform applications more easily. (Not that testing those applications will be easier, but that's another story.)

On Windows

For to-do apps, Wunderlist and Todoist seem to be the best of the bunch but both frustrate me in different ways.

For things like Twitter and Facebook Messenger, I've just gone with the web. They seem to provide the best experience right now. And Edge has worked just fine. Although I switch over to Chrome to do a few things. (And the lack of 1Password integration in Edge is a bit frustrating.)

Having 1Password available on all platforms has been a huge timesaver. The implementation on Windows, in general, is a bit behind but there have been and continue to be regular updates to improve the integration.

For photos, I've been using Lightroom. I like the mobile implementation but the need to store all the photos locally on desktop is a bit of a frustration. I like having my photos in the cloud and just pulling them down to edit them.

For all my other files, I think I'm going with Dropbox. I already have it and its cross-platform availability works for me. It also has integrations with a number of apps that other platforms don't have.

Hashtag

So, Dave Rupert had #davegoeswindows and now Dan Mall has #dangoeswindows. Do I need to have my own hashtag? I didn't realize this was a thing. I guess I might as well do #snookgoeswindows. (Up next: dev environment!)




Running into Windows

Mon, 03 Oct 2016 13:30:04 +0000

I enjoy exploring an ecosystem. Last year, I spent a month with an Android phone and tablet to see how they compared to iOS. Now, I'm going to try something similar by switching to Windows as my primary machine. Dave Rupert went through a similar exercise. Microsoft was kind enough to offer up a Surface Book for this experiment. When the Surface Book was announced, lots of people gave it very positive reviews. I have a Samsung tablet from a few years ago when Microsoft was exploring what it meant for a desktop OS to also be a tablet OS in Windows 7. That Samsung tablet, however, was bulky, ran hot, and the battery ran down quickly. Ick. Initial Impressions My first hour or so with the Surface Book created mixed feelings. On the hardware side, this laptop is quite nice. The detachable screen becomes a tablet and is surprisingly light. The keyboard feels good. The trackpad feels good. This is a really nice laptop. Having a laptop with a touch screen is nice. For the most part, I use the keyboard where I can but sometimes a button press is easier to just hit with my finger. The trackpad finger gestures are nice and remind me of the handy gestures on the Mac. I enjoy the three-finger swipe to switch applications or to minimize all the apps. I do find the multiple desktop feature annoying. Mostly because it creates isolated app switching for each desktop. If the app you want to switch to is on the other desktop then you need to switch desktops and then switch apps. One particular thing that bugs me: the top row of function and media keys. There's plenty of room to have had a separate function key row and media row. Instead, there's a function key that has to be turned on or off to choose between them. I never use the function keys on my Mac but in Windows, I use them all the time. I have to consciously be aware of whether the key is enabled, which is more cognitive load than I would like every time I need to use a function or media key. Speaking of the media keys, I'd rather the ability to control screen brightness via the keyboard (which I do multiple times a day) than the ability to control the brightness of the keyboard backlighting (which I do almost never). Also, I find it weird that when the laptop is folded over, it doesn't fold flush. Instead, it looks like a book with a pen stuck in the middle of it. (Hence the name, is my guess.) On the software side, I'm having a tough time pinpointing the things that really bother me. I think a lot of it comes down to polish, which in a lot of cases, comes down to how well third party apps built their apps. For example, I'm writing this article in an app called WriteMonkey. It's a fantastic app for writing in Markdown. It runs full screen and gets out of the way. Love it. The Twitter app, on the other hand, sometimes blanks the screen before reloading messages. The Facebook app seems to have a different scroll sensitivity than the rest of the OS. Edge supports two-finger swipe to go back but nothing else does. And Mail seems to have its own text entry with a custom context menu and the shortcut to paste without formatting (Ctrl-Shift-V) is mapped to something else. Oh, and Messenger locks up quite frequently, requiring a restart. Of course, I'm sure I could come up with a similar list for the Mac. I've just been on it long enough to get over the annoyances. When Windows 7 first came out, it felt spartan to the point of feeling unfinished. Windows 10 definitely has a lot more polish. Also, the Cortana voice recognition seems to work really well. I can't tell you how many times I ask Siri for something and she completely gets it wrong. "Play my loved playlist." "Now playing Love Yourself by Justin Bieber." "Goddammit Siri!" The Cortana integration in the Start menu is really nice, too. I like the speed and design. It feels very natural to just hit the Windows key and start typing for what I want. It finds what I want accurately and quickly. Living on the Edge [...]