Profile

Cover photo
David Gilbertson
Works at Sms Management & Tech
Lives in Crows Nest, Australia
203 followers|6,278,271 views
AboutPostsPhotosReviews

Stream

 
So this is new... Chrome Canary dev tools, in the styles tab you can now search for a CSS property, value or selector.

Or click one of the computed properties and it will highlight wherever that property is set.

The highlighting stays as you navigate the DOM tree with the arrow keys making it easy to hunt down where some property is being set.

Excellent stuff.
37
11
Bidossessi ALAHASSA's profile photoDaniela D'Amico's profile photoNezar Al Otti's profile photoprashant mishra's profile photo
8 comments
 
Don't know about Firebug, but the Firefox dev tools does have a search function for computed styles.
Add a comment...
 
This just in: Joyent teams up with Microsoft, SAP and IBM to gain insights into how to be out of touch with what developers and users really want.
Joyent, IBM, Microsoft, PayPal, Fidelity, SAP and The Linux Foundation Join Forces to Support Node.js Community With Neutral and Open Governance, Resources for Developers
7
Aaron Segal's profile photo
 
Well done +David Gilbertson​, well done :)
Add a comment...
 
As a recent convert to the Atom Editor, I thought I'd share a pro-tip and a few of my favourite things.

I've got the atom directory SugarSync'd, which means my packages and keyboard shortcuts are synced across all of my machines.

On the package front I'm loving project-manager with open-last-project, minimap is sweet too, all helping with Sublime withdrawal symptoms.

But the coolest thing is that it's good old HTML5. You can even bring up the dev tools if you want to poke around.

Oh and one more tip, if you're working with files over 2MB, you're out of luck.
25
3
Ilson Roberto's profile photoJohnny Alex's profile photoJairo Botero's profile photomushcloud.net IT Consultancy's profile photo
13 comments
 
+James Coyle can be a SQL batch script...
Add a comment...
 
If you've ever set your CSS transitions to 5 seconds so you can see what's happening when your widget transforms, this is awesome...

There's a new control in Chrome Canary's dev tools; on the elements tab, in the styles area. This let's you slow down any animations on the page, as low as 10% speed.

If you click the play/pause button, it seems to get focus, so the space bar becomes a play/pause keyboard shortcut for your animations (until you click elsewhere).
41
11
Hugues Herve's profile photoTom Hermans's profile photo
Add a comment...
 
My thoughts on hover for touch devices.

iOS can be a little funny when it comes to links where the parent has a hover state (to show a tooltip, for example). Short version is your users will have to tap once to see the tooltip, and a second time to follow the link.

Long version is here: http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

You can feature detect touch, but what about the growing number of laptops with touch?

Here's my solution, feedback is welcome!

I'll add a 'no-touch' class to the body, then remove it the first time a user touches their screen with this JS:

var onFirstTouch = function() {
  document.body.classList.remove('no-touch');
  document.body.removeEventListener('touchstart', onFirstTouch);
}
document.body.addEventListener('touchstart', onFirstTouch);

My CSS will then look something like this. Where .the-tooltip will show on hover, only if .link-with-tooltip is hovered with a mouse.

.the-tooltip {
  display: none;
}
body.no-touch .link-with-tooltip:hover .the-tooltip {
  display: block;
}
2
Add a comment...
 
An extension to yesterday's post. console.trace() is great, console.trace() inside Object.observe() is better.

Object.observe(mysteriousObject, function(changes) {
  console.log(changes);
  console.trace();
});

That will get you precisely nothing useful, unless you tick the Async box in the Call Stack section on the sources tab in Chrome's Dev Tools.
66
16
Marcin Wołoszyn (nme)'s profile photoAndrea Wox's profile photoCezary Walenciuk's profile photoMike Wolf's profile photo
2 comments
 
good
Add a comment...
Have him in circles
203 people
Simo Said's profile photo
Xin YAO's profile photo
Elizabeth Leon's profile photo
Michelle G.'s profile photo
mayur patil's profile photo
Chandu B's profile photo
Łukasz Żak's profile photo
Joseph Gier (Learn Grow)'s profile photo
José Lirón's profile photo
 
You can now play with transition curves from within the Chrome Dev Tools.

That's just so cool.

Canary only, naturally.
94
23
Camilo Aguilar's profile photoLudwig Gatzke's profile photoMarwen Kheder's profile photoRel Ro's profile photo
 
Just like Firefox 33 :D https://www.youtube.com/watch?v=GW5-R2ewaqA and animation editors in Firefox 37 (Developer edition) https://www.youtube.com/watch?v=3UZdsbmYduQ
Add a comment...
 
Chrome Dev Tools tip: on the elements tab, the search box will match on CSS selectors.

Note that Chrome won't find partial matches. In the screenshot I searched for [type=submit] .search-icon and it finds a result, but searching [type=submit] .search-ic won't find a match.

This one has been around for a while since it's in the stable channel, but I figured worth sharing anyway.
35
10
Sandra Flores López (sanflolop)'s profile photoLuke Tully's profile photoThanish Muhammed's profile photoShoaib Konnur's profile photo
 
I think it exactly working as CSS selector. Hence partial matches may not be provided.
Add a comment...

David Gilbertson

Tools/Editor/Git/Browsers  - 
 
I can't say enough good things about mongolab's support.
Lost some data in a database so sent support an email.
First response: 5 mins.
A few clarification emails over the next 20 mins.
Restore of just the problem collection from their system-level backups, all done in 30 mins from first contact.
Awesome.
MongoLab's MongoDB hosting platform is the fastest growing cloud database-as-a-service in the world. Get started with a free plan and expert support.
11
Add a comment...
 
For all you Mac and Linux users out there, Microsoft has VMs available for lots of different OS/IE versions that will run on OSX and Linux! (and Windows).
So if you don't have the luxury of supporting only modern browsers, you can properly test in IE8 including setting breakpoints and stepping through JS in the Dev Tools (IE8 had some decent stuff 5 years ago).
Explore our free set of browser testing and development tools. Access a free trial of Browserstack and download VMs for every operating system including Windows, Mac and Linux to start testing your website.
21
3
unknwn C's profile photoPlum Lis's profile photoMartin Steiner's profile photoShawn Haigh's profile photo
3 comments
 
Windows 10 Tech preview requires hardware acceleration.

I have the Windows XP one for nostalgia...
Add a comment...
 
I'm sure I'm late to the party, but I've just discovered console.trace() and it makes me happy.

Stumbled across it in a +David Walsh post, so thanks David!

I will now go and read the lot: https://developer.mozilla.org/en-US/docs/Web/API/console
The console object provides access to the browser's debugging console (e.g. the Web Console in Firefox). The specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided.
21
2
Scott Spittle's profile photoIstván Maczkó's profile photo
Add a comment...

David Gilbertson

Shared publicly  - 
 
 
Gogs is a self-hosted Git service written in Go: http://bit.ly/1ova24Y  - awesome. In case you need to spin up a private service...
7 comments on original post
1
Add a comment...
People
Have him in circles
203 people
Simo Said's profile photo
Xin YAO's profile photo
Elizabeth Leon's profile photo
Michelle G.'s profile photo
mayur patil's profile photo
Chandu B's profile photo
Łukasz Żak's profile photo
Joseph Gier (Learn Grow)'s profile photo
José Lirón's profile photo
Basic Information
Gender
Male
Work
Occupation
Web Designer & Developer
Skills
HTML5 Javascript, CSS3, jQuery, etc.
Employment
  • Sms Management & Tech
    Consultant, 2014 - present
  • Red Vivid
    Web Designer, 2013 - 2014
  • Kronia
    Web designer, 2013 - 2013
    Developing awesome web apps
Places
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Currently
Crows Nest, Australia
Links
Contributor to
Great food. Knocked over a glass of wine, smashed the glass, and they very kindly brought a new glass of wine. Not the friendliest waiter in the world though. Update: every time I come here it's great.
Public - a year ago
reviewed a year ago
40 reviews
Map
Map
Map
Never knew this place was here. It's just like all the others: a nice place, good beir. The Swiss Schnitzel is great, the Octoberfest Burger not very great. Crows Nest's first decent pub.
Food: GoodDecor: ExcellentService: Very Good
Public - a year ago
reviewed a year ago
The master class was awesome. The staff are great, (Anne-Marie and Tomislav) and a great sommelier. And the food was great.
Food: ExcellentDecor: Very GoodService: Excellent
Public - a year ago
reviewed a year ago