Mr Branding

Monday, June 20, 2016

Web Design Weekly #240

Headlines

Improving CSS quality at Facebook and beyond

Learning the ins and outs about how big companies develop is fascinating. In this post we get to see an insight into how Facebook improve the quality of their CSS. It’s extremely cool to see they are using Stylelint, which is something that I blogged about this week. (code.facebook.com)

Prerelease Notes for Safari 10.0 (developer.apple.com)

Hired – The End of Job Searching

Finding a job doesn’t have to suck. Join Hired to start getting offers from top tech companies like GitHub, Facebook, and Stripe. You’ll get salary & equity upfront on every offer, and you’ll get a $1,000 signing bonus on top as a thank you! (hired.com)

Articles

Building better accessibility primitives

Google’s Rob Dodson recently ran into difficulty adding proper keyboard support to some components he was building and shares his ideas on how to resolve things. (robdodson.me)

CriticalCSS In Action

Love a fast site? In just her first few weeks at Bocoup, Susan Robertson learned a lot about performance and how to make a site smoking fast. She shares some great insights with us. (bocoup.com)

Enhancing Optimistically

Recently, Scott Jehl came across a better way to improve handling browser-or-network conditions in more fault-tolerant ways. (filamentgroup.com)

Using JavaScript in SVG

Web developers use JavaScript to achieve many things in SVG, including animation, interaction, creating and modifying elements, but adding a script inside an SVG document comes with a few special caveats, which Dudley Storey explains. (thenewcode.com)

Pixel Density, Demystified

Get ready to nerd out about how pixel density works and how it affects your designs. (medium.com)

Tools / Resources

New Google Fonts

A massive redesign has made Google Fonts even more awesome. I think I just wasted 30 minutes exploring type options for an upcoming project… Whoops. (fonts.google.com)

Drizzle

A streamlined tool for developing, documenting and presenting UI pattern libraries. (github.com)

LightCMS – Design More, Work Less

You do fun, we do boring. Create outstanding websites on LightCMS. (lightcms.com)

React CSS components

Define React presentational components with CSS (github.com)

A CSS Snap Points Carousel (filamentgroup.com)

Inspiration

Introducing studio.zeldman (zeldman.com)

The Path to Performance (speakerdeck.com)

Blobs – Fun canvas & SVG filter (codepen.io)

Jobs

Web Designer at GitHub

GitHub’s web design team works closely with other designers, product managers, engineers, and our marketing team to design, build and ship inspiring and approachable websites to our growing community of superfans across the world. (github.com)

Developer at Spotify

We are looking for web developers to join our teams throughout Spotify. We need engineers in all areas of web development, from people with excellent front end skills through to people with deep knowledge of back end integration. (spotify.com)

Have an Web Design related position you need to fill?

From The Blog

Integrate Stylelint Into Your Workflow For Better CSS

An overview into a handy CSS tool called Stylelint and an easy to follow guide intergrating it into your webpack workflow. (web-design-weekly.com)

Last but not least…

How Emoji Can Improve Your Code

TJ VanToll shares some of his recent experiments with using emoji into his day-to-day development. I can see this taking off. (tjvantoll.com)

The post Web Design Weekly #240 appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

An Introduction to TypeScript: Static Typing for the Web

“Oh, I’m using Gulp because of reason A” or “Oh, I’m using Redux because of reason B”. You hear these sorts of things from front-end developers all the time. It’s become fashionable to use new ways of improving on JavaScript’s old faults and that’s not a bad thing; even ES2015 has been a pretty determined attempt at righting those wrongs and it’s currently the official version of the language.

One of those attempts at creating a better experience with JavaScript, which we'll dive into here, is TypeScript. It's a promising change to our favorite language that’s likely to make a bigger splash in JavaScript’s future.

What Exactly is TypeScript?

TypeScript is a strongly-typed superset of JavaScript, which means it adds some syntactical benefits to the language while still letting you write normal JavaScript if you want to. It encourages a more declarative style of programming through things like interfaces and static typing (more on these later), offers modules and classes, and most importantly, integrates relatively well with popular JavaScript libraries and code. You could think of it as a strongly static layer over current JavaScript that has a few features to make life (and debugging especially) a bit more bearable.

The reason it’s gained such attention of late, though, is largely because it’s been selected for full support by the upcoming Angular 2 (which is also written in TypeScript itself). It's also developed by Microsoft, which means it has the backing of two major tech companies (not a bad place for any language). This means that we’ll probably be seeing a lot more about it in the months and years to come, and it will likely gain even more of a following and mainstream status in that time.

Needless to say, TypeScript is definitely worth looking into.

How Does it Work?

TypeScript actually looks much like modern JavaScript. At the most basic level it introduces a static typing paradigm to JavaScript, so instead of the following:

var name = “Susan”,
    age = 25,
    hasCode = true;

We could write the following:

let name: string = "Susan",
    age: number = 25,
    hasCode: boolean = true;

As you can see there’s not a whole lot of difference here. All we’re doing is explicitly telling the system what type each variable is; we’re telling it from the get-go that name is a string and age is a number. But that just seems like we have to write more code. Why bother telling the system such specific information? Because it gives the system more information about our program, which in turn means it can catch errors that we might make further down the road.

Imagine, for instance, you have something like this in your code:

var age = 25;
age = "twenty-five";

Mutating a variable like this and changing its type will likely end up breaking stuff somewhere else, especially in a really big program, so it’s great if the compiler can catch this before we load this up in our browser and have to sit for half an hour looking for the issue ourselves. Basically, it makes our program safer and more secure from bugs.

There’s more, though. Here’s an example from the TypeScript website intro tutorial (which you can find here):

Continue reading %An Introduction to TypeScript: Static Typing for the Web%

by Byron Houwens via SitePoint