|
|
|
|
Issue #4 (Chrome dev tools shortcuts, CSS/JS, and Free Books)08/15/13
If you use Chrome as your primary development browser, you probably spend a lot of time in the dev tools. For this week's introductory tip/tutorial, here's a quick run down of some keyboard shortcuts inside the dev tools that you may not be aware of. (If different, Mac shortcut is on the right, after the double pipe)
Open dev tools and go straight to the console:
CTRL-SHIFT-J || CMD-OPT-J
Open general settings inside dev tools:
? (question mark key)
Open split console window:
ESC
Cycle forwards through panels (Elements, Resources, Network, etc):
CTRL-] || CMD-]
Cycle backwards through panels:
CTRL-[ || CMD-[
File name search:
CTRL-O || CMD-O
Hide current element in Elements panel:
H
View autocomplete suggestions when editing a CSS property:
CTRL-SPACE
Increment/Decrement CSS values by 10:
SHIFT-UP/DOWN
Increment/Decrement CSS values by 100:
SHIFT-PgUp/PgDn
Increment/Decrement CSS values by 0.1:
ALT-UP/DOWN || OPT-UP/DOWN
Zoom in / Increase text size:
CTRL-+ || SHIFT-+
Zoom out / Decrease text size:
CTRL-minus || SHIFT-minus
Reset zoom:
CTRL-0 || SHIFT-0
Of course, some of these shortcuts do other stuff in the browser if you haven't focused the cursor inside the dev tools. You can learn more keyboard shortcuts for the dev tools in Google Developers documentation.
Now on to this week's tools!
HTML and CSS Tools
3D CSS Tester
A tool built by Chris Heilmann that allows you to test the different features of CSS 3D transforms.
Label.css
A small CSS library to add a label (a sort of tooltip) to any element. The label can appear on hover or always be visible, and can be given a custom position.
uCSS
A utility built by the folks at Opera that crawls your website to find unused and duplicate CSS selectors. Can also crawl past login pages and can exclude certain pages or subdomains.
Flexbox Functions
A PHP script that helps make cross-browser flexbox code much easier to write. Your CSS file needs to preprocess in PHP for this to be useful.
Stitches
Just another sprite sheet generator. Drag and drop images on the canvas then generate the sprite image and the accompanying CSS.
Glue
Yet another sprite generator. This one is a command line tool that has retina image support.
CSSButton
A CSS3 button generator with lots of options for customization.
CSS3 Gradient
A simple and attractive CSS gradient generator.
CSSFlow
A library of open source and commercial UI kits and code snippets.
CSSmatic
CSS generator tools. Includes tools to generate gradient, border radius, and box shadow code as well as a texture generator (which outputs a PNG image).
Typeplate
A "typographic starter kit" that isn't opinionated and can be downloaded in CSS or Sass. The focus is on typographic patterns rather than aesthetic design choices and site structure.
CSS triangle generator
Very easy to use. Offers positioning options for the triangle. Oddly, it offers support for IE6 using a "chroma" filter (which I'd like to see to believe).
Anima
An animation framework with "physics integrated" so you can create "lifelike animations with ease". Uses CSS transforms and 3d-transforms together with JavaScript to create the animations.
JavaScript and jQuery Tools
Chance.js
Generate anything random to reduce monotony when writing automated tests. You can try it out right on the page inside your console. e.g. chance.phone() will output a random phone number.
shuffle-array
Using something called the Fisher-Yates algorithm, randomizes the order of elements in an array. Installs via the Component package manager or can be included in a page directly.
Case
"An extensible utility to convert, identify, and flip string case." Example: Case.upper('foo_bar') returns 'FOO BAR'.
Skeuocard
This is cool. A mini-framework that converts a credit card form into a realistic visual credit card module. Try the demo and watch the card transform into whatever type of card number you're inputing.
grunt-modernizr
I like how this tool thinks: It will automatically go through your project files and create a custom Modernizr build for you, based on what it finds, so you don't have to do it manually.
ie8
A polyfill for DOM holes and inconsistencies in IE8 (addEventListener, preventDefault(), etc). You can submit requests for new features.
jQuery Impromptu
A more elegant replacement for JS's alert, prompt, and confirm, with some extra custom options.
Progression.js
Beautiful, animated real-time hints and progress updates for users filling out forms.
Popline
A rich-text editor toolbar. Just select the text on the page and the toolbar appears with options to format the text and even convert the text to a list or heading.
jQuery Resizable Columns
Make table columns resizable and it even uses localStorage to persist the resized columns after a page refresh.
typeahead.js
A fast and full-featured autocomplete library that works in IE7+.
Free Books
Version Control by Example
By Eric Sink. "This book uses practical examples to explain version control with both centralized and decentralized systems."
Pro Git
By Scott Chacon. An older book, the free version (HTML or downloadable PDF, MOBI, EPUB) of the still well-selling Apress publication.
Programming JavaScript Applications
By Eric Elliot. A free early release version of an upcoming O'Reilly title.
Single Page Apps In Depth
By Mikito Takada. No focus on a particular framework or API, but rather a "code and concepts" approach.
Suggest Your Tool via Twitter
Have you built or written something cool for front-end developers? Send a link to your project via Twitter @WebToolsWeekly. I'll publish most any kind of tool including libraries, plugins, apps, or even a new book release. Tutorials and articles will not be included — there are plenty of other weeklies for that! :)
For $2...
I want this newsletter to stay ad-free indefinitely. So if you like the newsletter, you have the option to go to the donate page and give a small one-time amount using one of the services listed. If every subscriber gave just $2, that would be more than enough to keep this thing going strong and ad-free for a while.
Before I Go...
Igor Presnyakov is one of the best acoustic guitar players I've ever seen. He's known for his acoustic renditions of all sorts of popular rock and pop songs. I particularly like his version of the Super Mario Bros. theme song. Check out the rest of his YouTube channel if you're into that sort of thing.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
