MS Visual Studio Code

Microsoft released a free (not open source though) IDE called “Visual Studio Code” or “Code” for short. It has built in code integration the’ve dubbed “IntelliSense” that’s backed by their TypeScript library. Interestingly enough they’ve even released a Linux desktop package.

It seems like Microsoft is trying hard to gain any kind of relevance in the web development space built on the Open Source Software development model — especially in the Nodejs and Angular communities. Building multi-platform tools for web developers is a step in the write direction, but they have a big ditch to dig themselves out of. Any web developer that uses Unix or Linux has to break the association of software quality and Internet Explorer, before really being able to use a Microsoft product for their job.

It my hunch that these products are less for the Unix/Linux converts, but more likely intended for developers already using MS technologies and needing to be developing in either a Unix or Linux environment.

Making Badass Developers

Kathy Sierra (Serious Pony) Fluent Conf 2015 keynote discusses the optimization techniques for learning quicker by acknowledging our cognitive capabilities and modifying how we approach learning and mastering new skills or working with new APIs. I’ve been fascinated with cognitive overhead for a while – it’s great to get practical recommendations on how to combat it besides the common advice of simply exposing yourself to less of it by reducing daily choices across the board. This is definitely worth your time if you’re a web developer or are in a position where you’re required to do a massive amount of learning in a constrained time period.

Source

Mobile User Experience: Limitations and Strengths

In spite of the modern trend towards larger-screen phones, what makes mobile phones so convenient and portable is their small size. Compared with desktop and even laptop screens, phone screens accommodate a lot less content. As a result, screen size is a serious limitation for mobile devices. The content displayed above the fold on a 30 inch monitor requires 5 screenfuls on a small 4-inch screen. Thus, mobile users must (1) incur a higher interaction cost in order to access the same amount of information; (2) rely on their short-term memory to refer to information that is not visible on the screen. It’s thus not surprising that mobile content is twice as difficult.

Whenever you include a new design element or a new piece of content on the mobile screen, something else gets pushed out (or below the fold). Think hard of the opportunity cost of each new element: what does it mean for the users if you leave out element B in order to include element A? Is element A more important than element B? Content and feature prioritization is key. Although we provide general guidelines in this report, your answer likely depends on the kinds of users and tasks that you have.

It seems to me that feature prioritization is often compromised in responsive design. Part of this is the paradigm shift of actually switching to a small-screen first design approach. So often we end up making desktop features fit into a mobile design, because we think that people like feature parity between desktop and mobile viewports. I think in general that’s true, but that would contend that it’s actually content parity that’s more important. At any rate both are clearly it’s important.

Source

ES6 arrow functions, syntax and lexical scoping

Single line function expressions in ES6 are nice.

function (param) {
  return expression
}

Becomes:

param => expression

Which allows you to write much more readable code. This short walk through discusses some of the new JavaScript features you can be using now in combination with Babel. Assuming you’re using a build step this just makes sense. I’m particularly excited about the lexical scoping of “this” in the fat arrow function, which will allow us to avoid setting ‘var this = that;’, or using .bind(this) or .call(this).

Source

Cameron Moll discusses his history with Proxima Nova

2013

By now, Proxima’s use is rampant. It’s everywhere. Seriously, people. Websites, apps, you name it. Cries of banality flood the internets. How dare we use one font so excessively!

A fair cry indeed. Yet as it turns out, Proxima Nova is more than just the new Helvetica Neue. It’s incredibly versatile for digital interfaces, performs like a workhorse at many different sizes, and looks remarkable on retina displays.

And then in 2015:

In my experience as a UI designer, Medium and Semibold weights are indispensable for interface work, especially all-caps at small sizes (e.g. navigation menus and button text).

“Indispensable” doesn’t seem like the right word, but I would have to agree that it’s an incredibly usable, versatile font for interface design.

Source

Scopes in NPM

Great to see these features shipping.

Scopes go hand in hand with the new private modules system — which is a very nice feature considering NPM is currently managing 141,898 packages. One of the most difficult parts of programming is naming functions or variable declarations, and even though naming a package is outside of that scope it’s just one less thing to worry about at the end of the day if someone is hosting a module on NPM with the same name as something you’ve built.

Source

The Hamburger Menu on Office for Windows Phone Explained:

The problem is, there’s just way too many things on the top bar. For example, you might want to print. How do you do it? Well, you could design a print icon in the top bar. But it’s probably not worth it. You could hide it in the ribbon, but that sort of sucks for discoverability.

And then you notice the top left corner. And you think “Well, tons of Android apps just put everything there. Maybe we could try that?”

And so it became clear, due to the massive number of features in Office apps, and the extremely tight real estate, and alignment with tablets, that a hamburger was the best overall pattern.

And Later:

I was out for coffee with a Windows PM a few weeks ago and she said “what do you think of the hamburger?” And I’m starting to piece 2+2 together. Apparently there’s a big hamburger backlash brewing in the Windows community that I wasn’t aware of.

But here’s a design challenge. And I’m serious – when Excel comes out, download it and see everything in the hamburger. Then redesign it. I’m curious to see what people come up with, because I’m always ready to see more ideas. We went through a ton but that doesn’t mean we could have thought of everything

There’s always more ideas, but sticking to conventions can save time for design work on other, possibly more complex or important problems. I’m confident a better pattern will evolve eventually, but it might not be as universal.

Source

The New York Times on the path to mobile-first

In the early days of the web, almost all brick-and-mortar companies woefully under-invested in digital technology and product development. These days everyone has a website and even a mobile app or two. But the shift to mobile is so rapid that many companies are in danger of repeating the same mistake and under-investing in mobile.

At The New York Times, we are determined not to fall into that trap. Not only are we focusing more technology resources on mobile development, we are also rethinking how our newsroom and product development teams operate so that we can become a mobile-first company. And when we say mobile, we mean smartphone.

Defining ‘mobile’ as a smartphone is problematic for a few reasons. Does Frons mean a smartphone app or a smartphone website? Is it both? Do tablets with cell service or smartwatches count? Frons seems to be implying that mobile means mobile app (or multitude of apps in the case of The Times) when he advises:

If you’ve got 30 engineers on the web and three on mobile, you’ve got to even that balance out quite a bit. If you’re spending 80 percent of your money on desktop and 20 percent on mobile, it should probably be 50/50 at least, if not tilting the balance toward mobile just in terms of playing catchup.

I agree there needs to be a better balance if you have those kind of numbers, but personally I don’t think there should be such a strong distinction between desktop and mobile for news businesses. The news should be the same on whatever device you choose to consume it on web engineers should be working on building responsive and mobile-optimized sites. There doesn’t need to be a desktop web team and a mobile web team—but I get the impression from this article that this is what The Times has.

Frons adds another piece of advice without providing any evidence for his claims, offering it up as a “reminder”:

Remember that mobile is a push medium, that notifications have become crucial for driving traffic – reminding people that you’re there, stimulating awareness and encouraging usage.

I’d like to see numbers to back this up. I agree that notifications increase traffic, but that doesn’t imply that they’re crucial for a news company or that mobile is a push medium. Mobile is a multidirectional communication medium.

Source

The Atlantic Website Redesign

We created a site that makes a new priority of visual presentation, that offers a cleaner reading experience across digital devices, and that gives us the flexibility we need, both in our articles and on our homepage, to join the speed and urgency of the web with the noise-cutting and impact that have always been central to The Atlantic’s ambitions.

And:

Oh, and the typefaces are new. Hawk-eyed readers will recognize the display and text fonts, both Lyon, as the same ones we use in print.

In addition to the typography, the attention to detail in the Atlantic’s redesign is top notch. Moreover, they did it all in house. My favorite feature is a subtly which no one seems to get right. Almost every site with a sticky header ignores the fact that some people use the keyboard to navigate the page. Pressing the spacebar generally scrolls the page up so you can continue reading from the bottom, but this behavior doesn’t work when you use a fixed header. The text the reader expects to see ends up below the header, which isn’t a great experience. When your on the Atlantic’s new site and you press the spacebar you’re taken to the correct location on the page with the fixed header offset. These are the kind of details that add up and make the difference between good and great.

Source

Get updates via Twitter or RSS

We blog about website design, web and mobile devlopement, and occasionally bicycle propaganda. You should probably follow us.

Get Tweets Subscribe via RSS