Effective Writing For Your UI: Things to Avoid

1-tag0vok8pivu66heoasyfg

Text in your app should complement your visual UI: simple, concise, direct, and efficient. It should be understandable by anyone, anywhere, regardless of their culture or language.

Great list with small but very effective tips 🙂

Effective Writing For Your UI: Things to Avoid →

Elsewhere , , Leave a comment

Laphs: Apple Live Photos on the Web

live_photo-0

From the folks over at Tumblr:

Add support for Apple’s Live Photos in web browsers.

Install it using npm, or include the dist file:

npm install --save laphs

You can make Laphs work with existing elements:

<img src="STILL-PHOTO.jpg" data-live-photo="LIVE-PHOTO.mov" data-live-photo-still-image-time="1.71"/>

<script>LivePhotos.initialize();</script>

Or, alternatively, directly create new instances:

const livePhoto = new LivePhotos.LivePhoto(el, options);

Laphs: Live Photos on the Web →
Laphs Source (GitHub) →

Elsewhere , , , , Leave a comment

Hype Driven Development

1-_zxvohnqodpxequfdtzz7q

Software development teams often make decisions about software architecture or technological stack based on inaccurate opinions, social media, and in general on what is considered to be “hot”, rather than solid research and any serious consideration of expected impact on their projects. I call this trend Hype Driven Development, perceive it harmful and advocate for a more professional approach I call “Solid Software Engineering”. Learn more about how it works and find out what you can do instead.

Some great examples (and conclusions!) on Microservices and NoSQL I must say.

Hype Driven Development →

Elsewhere , Leave a comment

Keynote Extractor

ke-intro

Great tool by the folks at Mono. Just a drag a presention made in Keynote on the app and it’ll generate a neat HTML output containing both your slides and presenter notes.

We thought the default HTML export in Keynote didn’t fit our needs. Extract your slides alongside your notes using our super easy drag ‘n drop application for macOS.

Works great. It’d be handy if the generated images were resized though, as the end result can become quite large.

Be sure to read the introductory blogpost too, as it’ll give you some more background and highlight why the app can not be found on the App Store.

Keynote Extractor – A better HTML export for Apple Keynote® →
Keynote Extractor introductory blogpost →

Elsewhere , , , 1 Comment

From Pages to Patterns

Video of Charlotte Jackson’s talk at Beyond Tellerrand on how to adopt pattern thinking to developing a pattern library/styleguide:

This talk will look at how we can help everyone in the team adopt pattern thinking. This includes anyone with a decision to make—not just designers and developers. The whole team can start developing a shared vocabulary and attempt to make the challenge of naming things a little easier.

Naming things indeed is one of the two hard things in computer science, next to cache invalidation and off-by-one errors.

An article on A List Apart is also available: From Pages to Patterns: An Exercise for Everyone →

Elsewhere , , , Leave a comment

Come Together

A short film for H&M, directed by Wes Anderson starring Adrien Brody.

This short has all the things that make up Wes Anderson’s signature: tracking shots (panning of the camera), symmetrical shots, a refined color palette, … it’s all there 🙂

Elsewhere , , Leave a comment

10 principles for smooth web animations

1-1-ojmr242qurcnke-rlfgq

  1. Don’t change any properties besides opacity or transform!
  2. Hide content in plain sight with opacity: 0; and pointer-events: none;
  3. Don’t animate everything at the same time
  4. Slightly increasing transition delays makes it easy to choreograph motion
  5. Use a global multiplier to design in slow motion (and then speed everything up later)
  6. Take videos of your UI and replay them to get a valuable third-person perspective
  7. Network activity can cause lag
  8. Don’t bind directly to scroll
  9. Test on mobile early, and often
  10. Test frequently on multiple devices

10 principles for smooth web animations →

Elsewhere , , , Leave a comment

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout

Time to ramp up your CSS Grid Layout skills, as it’s now enabled by default in Chrome Canary:

It’ll also land in Firefox 52. Speaking of, Firefox also sports some great additions to the its devtools when it comes to working with CSS Grid Layout:

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout →
Things I’ve learned about CSS Grid Layout →

In case you haven’t yet, also bookmark Grid By Example.

Elsewhere , , Leave a comment

What’s the weather like in …? Just cURL it!

wttr-in

To know what the weather is like in a specific (or in the current city) I always Google for “{cityname} weather forecast”. Thanks to wttr.in I can now also get to know that via cURL. Just send a cURL request to the URL and voila:

$ curl wttr.in
Weather for City: Sint-Amandsberg, Belgium

     \   /     Sunny
      .-.      5 – 8 °C       
   ― (   ) ―   ↙ 15 km/h      
      `-’      10 km          
     /   \     0.0 mm   

You can also append the name of a specific city to the domain:

$ curl wttr.in/paris
Weather for City: Paris, France

    \  /       Partly cloudy
  _ /"".-.     6 – 9 °C       
    \_(   ).   ↙ 17 km/h      
    /(___(__)  10 km          
               0.0 mm     

Since it’s curlable, it’s on the web (ref). Ergo you can also visit wttr.in in your browser.

The actual fetching of the weather data is done by wego, a weather client for the terminal.

wttr.in →
wttr.in Source (GitHub) →
wego Source (GitHub) →

(via)

Elsewhere , , Leave a comment

Sublime HyperClick

51558bb4-971c-11e6-8ef2-d256da53d1da

Most of the time when you are navigating and reading a code-base, you need to jump between required/imported (whatever jargon your programming language uses) files. The “Go to Definition” functionality of Sublime falls short for most languages since jumping between these required files needs some knowledge about how the language or package manager of the language is working.

HyperClick tries to solve this issue. Currently, it knows how to jump between files in Javascript and Sass but can be easily extended to support more languages.

Ooh, I like this plugin a lot. Especially when clicking through our React+Redux based projects at work which tend to have a lot of files requiring each other.

UPDATE 2016.11.29: I’ve added support for Stylus to HyperClick. The pull request has already been merged 🙂

Sublime HyperClick →

Elsewhere , , , , Leave a comment