I figure we needed a definitive reference for what work is triggered by changing various CSS properties. It's something I get asked about often enough by developers, and while we can do tests with DevTools, I have both the time and inclination to shortcut that for everyone. I'm nice like that. —Paul Lewis
As the web is being used for more and more tasks, expectations rise. Not only should web pages offer rich interaction, they must be responsive in both size and interaction.
This imposes a paradoxon that needs to be solved by building performing applications. It's not enough any more to have your web site do crazy stuff, it is also required to do it crazy fast. This card is intended to give you an introduction to this emerging aspect of web development.
Read this introductory [performance study on Pinterest](http://www.smashingmagazine.com/...
With ngAnimate, you can easily animate certain events (see directive support). We'll make use of ngClass animations to style an element on changed binding value.
Say we have a slider and a separate details container. Each time the slider changes, we want to "flash" the details container by hiding it and fading it back in.
Add a custom class to the element you want to animate, i.e. the details container:
<div class="details slide-index-{{ currentSlideIndex }}">
{{ co...
All browsers + IE9 know the CSS :empty selector. It lets you hide an element when it has no content, i.e. not even white space.
(How to prevent whitespace in HAML)
For instance, you have a badge displaying the number of unread messages in a red bubble with white text:
.unread-messages-bubble {
background-color: red;
border-radius: 10px;
padding: 10px;
color: white;
}
To hide that bubble entirely ...
Using the CSS border-radius property, we can create rounded shapes and circles. Add some gradients and they become spheres. Let’s try that, and add some animation to bring them to life.
Spreewald comes with a selector_for helper that matches an English term like the user's profile into a CSS selector. This is useful for steps that refer to a particular section of the page, like the following:
Then I should see "Bruce" within the user's profile
^^^^^^^^^^^^^^^^^^
If you're too lazy to manually translate English to a CSS selector by adding a line to features/env/selectors.rb, we already have an [auto-mapper to translate English into ...
Free Bootstrap theme resembling Material Design.
Bootswatch offers Sass and Less files, so the theme can easily be integrated into your usual Rails application.
Implements only Bootstrap features which means that some Material stuff is missing, but also that you can easily use or replace the theme.
Does not come with extra JavaScript; some effects like button click ripples are implemented via CSS.
Also check out their other themes which can be used in a similar fashion.
CTRL + SHIFT + ALT + N
: Search for any symbol in your application, like CSS classes, Ruby classes, methods, helpers etc.
CTRL + SHIFT + N
: Search for filename in your application (also dependencies)
CTRL + E
: Open a list of recently opened files
ALT + POS1
: Open a the navigation bar as a context menu. Allows you to quickly navigate between files.
CTRL + G
: Go to line
CTRL + SHIFT + A
: Find ...
iPads will not trigger click events for all elements. You can fix that, but you don't want to know why.
Example: Capturing clicks on table rows (use case would be clicking the 1st link inside it for better UI). Consider this setup:
<table>
<tr>
<td>hello</td>
</tr>
</table>
^
$(document).on('click', 'tr', function () {
alert('row clicked')
});
While this works on a desktop browser, clicking the row/cell on an iPad will just do nothing.
Turns out, the iPad will only trigger such events for ...
This blew my mind today:
Please make sure to check browser support for CSS features on Can I Use and the Mozilla Development Network before using.
outline-offset: specify how far away from the element an outline is rendered::first-letter: matches the first letter insid...CSS (+ some Javascript) framework, implementing Google's material design for static web pages.
Can be used for plain websites without requiring a full blown Javascript framework, unlike the (also excellent) Polymer paper elements, or Angular material.
I would recommend against using it at this stage, for a couple of reasons:
CSS support in major e-mail clients is horrible.
This will give you an overview what you will not be able to use across all clients.
Insanely detailled guide about controlling copy & paste behavior using web technology in 2015.
Note that you can now trigger a copy action through Javascript, no Flash required.
Small web application where you can upload an image (PNG, JPEG, GIF) and generate a base64-encoded version of it.
You can copy the result as
<img> tag with data URI,background-image and data URI,Note: Making a reverse proxy with nginx is much more straightforward.
A reverse proxy is a "man in the middle" server that tunnels requests to another server. You can use for things like:
Datetime picker that offers:
Localization happens via moment.js (which is a Dependency anyway).
However, you won't be happy trying to customize it too much:
Rails comes with a Rake task notes that shows code comments that start with "TODO", "FIXME", or "OPTIMIZE".
While it's generally not good practice to leave them in your code (your work is not done until it's done), in larger projects you will occasionally have to use them as other parts of the application that you depend upon are not yet available.
To keep track of them, run rake notes. Its output looks something like this:
$ rake notes
app/controllers/fron...
Fontawesome 4 ships with many useful CSS helper classes.
Add fa-lg (133%), fa-2x, fa-3x, fa-4x or fa-5x.
Add fa-fw. Will give all icons the same width.
Add fa-ul to a <UL> and fa fa-<icon name> fa-li to a <LI> to give the list items custom "bullets".
Add fa-border to get a border around the icon.
Add fa-spin to make any icon rotate. Suggested icons: fa-spinner, fa-refresh, fa-cog. Doesn't work in IE <10.
Fontawesome 4 has introduced new naming conventions that make it easy to retrieve variants of a given icon.
The format is:
fa-[name]-[alt]-[shape]-[o]-[direction]
Note that this is a naming convention which doesn't imply there's an icon for any combination of tags.
The name of the icon, e.g. comment, print, bookmark etc. See the full list.
An alternative icon.
The icon inside a circle or square.
An outlined ...
Clever hack using data-attributes to assign labels to cells.
It's still a massive duplication of code (labels), but better and more lightweight than most solutions I've seen for this surprisingly tricky problem.
If you want to rotate text, you can use CSS transforms in somewhat modern browsers to rotate the container element.
However, if you need to support IE8, transform is unavailable (if need only IE9 support, ignore the following and use -ms-transform).
Here is a solution that worked for me:
<div class="my-element">Hi!</div>
^
.my-element {
display: inline-block;
transform: rotate(90deg);
-ms-writing-mode: tb-rl;
-ms-transform: none;
}
This way, browsers will use CSS transforms when available -- w...
Opinionated Angular style guide for teams by @john_papa
Not everything in this guide works perfectly for us, but is still a good start.
Often times you want to give a bunch of elements the same style, except for the last. For example borders or margins.
You probably commonly used the :last-child CSS meta selector like so:
.foo {
border-bottom: 1px dashed #000;
}
.foo:last-child {
border-bottom-width: 0;
}
However, this only works when an element is the last child of its parent. Any other siblings which are unrelated to your case will break it.
Instead, prefer using the + sibling selector. It applies to the element following the other.
.foo + .foo {
...