CSS content and attr

CSS content and attr

CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily  There have been larger features added like transitions animations and transforms but one feature that goes under the radar is generated content  You saw a bit of this with CSS counters where we used the counter and counters expressions to set the content of a given element  There’s another expression attr that allows for CSS-based content creation as well Let me show you how attr an …..

No-Image

Tall Tales From A Large Man – Interview with Aaron Draplin

Aaron Draplin is a graphic designer and founder of the Draplin Design Company He’s done work for everyone from his friend’s hot dog company to President Obama himself He’s also a speaker and co-creator of Field Notes a popular notebook series among designers He’s bold outspoken and unapologetic about being awesome
He took a minute to talk with expert teacher Mat Helme and threw some knowledge bombs at him Enjoy!

The full interview will be available tomorrow to all Treehouse Gold Members
The post Tall Tales From…..

Logic in Media Queries

Logic in Media Queries

Just in case you have brain farts about this constantly like I do

If
That’s what media queries are: logical if statements “If” these things are true about the browser use the CSS inside
And
The keyword and
@media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
Comma separate
@media (max-width: 600px) (min-width: 800px) {
html { background: red; }
}
Technically these are treated like to separate media queries but that is…..

CSS-Tricks Chronicle XIII

CSS-Tricks Chronicle XIII

I’ll be speaking at the upcoming Front End Design Conference in Florida If you have tickets see you there! If not sorry this one is sold out
I recently spoke at TXJS and they recorded the talks so mine and a bunch of others are available on their Vimeo channel

Next week I head out for Graves Mountain as I do every year So this week I’m planning for that both getting ready for it as well as getting ready to be unplugged for the week

ShopTalk is…..

Mmenu: Mobile App-Like Sliding Menus With jQuery

Mmenu: Mobile App-Like Sliding Menus With jQuery

Sliding side menus are widely used in mobile apps as they are only visible on-demand and save space
jQuerymmenu is a slick plugin that brings the same behavior into any -mobile- web layout
It transforms unordered lists with unlimited sub-lists into menu items and has multiple options for customization

The options include the position of the menu (left/right) if a counter for the menu items will be displayed or not and more
jQuerymmenu can also be…..

No-Image

Laravel 4: A Start at a RESTful API (Updated)

RESTful API's are hard! There are a lot of aspects to designing and writing a successful one For instance some of the topics that you may find yourself handling include authentication hypermedia/HATEOS versioning rate limits and content negotiation Rather than tackling all of these concepts however let's instead focus on the basics of REST We'll make some JSON endpoints behind a basic authentication system and learn a few Laravel 4 tricks in the process The App Let's build an API for a simple Read-It-Later app Users will be able…..

Any Old Icon: All Wrapped up!

Any Old Icon: All Wrapped up!

Any Old Icon is complete 70 icons in all! Thank you to everyone who contributed you can be proud to have participated in the most random icon set on Earth! For the rest of you here’s how to download and use the set Quick Hat-Tip to Icomoon This really wouldn’t have been so easy to realise without the genius of @Keyamoon ‘s Icomoon webfont app Uploading a pile of SVGs and outputting as a neat usable webfont package has never been easier! And I’m…..

10 Free Online Photo Editors

10 Free Online Photo Editors

In an age dedicated to the advancement of technology there have been several factors that ultimately lead to either the failure or success of a product One of the main factors is convenience and when coupled with more favorable essentials like practicality and a low price it is no wonder that hundreds of free and functional apps for both mobile phones and websites tend to survive among competitors who charge a considerable fee
One popular type of web app that is at our everyday disposal is the online photo editor

…..

Developing over the YouTube API with JSON

Developing over the YouTube API with JSON

The process to understand API development is generally complicated but should become easier with practice Social networks like Twitter and YouTube offer XML/RSS/JSON feeds without the requirement of an API key However other smaller networking websites like Instagram and Etsy will require developers to sign up for a new API key before allowing them to make requests from the server
In this tutorial I want to demonstrate a really simple HTML/CSS/JS web application building over the YouTube API This demo will list a number of YouTube channels which you may click and pull out all the latest videos…..

Examples of Pseudo-Elements Animations and Transitions

Examples of Pseudo-Elements Animations and Transitions

View demo Download source
Today we are going to experiment with animations and transitions on pseudo-elements (:before and :after) and we are going to discover their potential We will talk a bit about animating pseudo-elements and look at four examples that use some special techniques to achieve a variety of effects
Let’s first have a look at the advantages and disadvantages that come along with using animations and transitions together with pseudo-elements
Advantages

Simplification and optimization of HTML markup
Taking advantage of CSS3 capacities…..

No-Image

Create a Sidebar that Sticks Within an Element

You’ve probably seen this trick used before with social icons or a sidebar that sticks to the top of your screen as you scroll down the page
The problem is that often they don’t stop scrolling and up either disappearing behind another element or overlapping something they shouldn’t which looks cheap and unprofessional
In this tutorial we’ll create a ‘sticky element’ that only scrolls until the maximum height of it’s parent element which will prevent that unsightly overflow
Let’s start with a very basic html structure:
<style>
body{
border: 0;
…..

8 jQuery Plugins for Spicing Up Your Forms

8 jQuery Plugins for Spicing Up Your Forms

Advertise here with BSA Forms are certainly a very important part of a website They should be intuitive user friendly and engaging This is why we’ve gathered 8 jQuery Plugins that will spice up your forms From options to make select boxes more user friendly to file uploaders and more All of the plugins are useful in a different way so check them out
iCheck
Customize checkboxes and radio buttons with iCheck

jQuery File Upload Demo
File…..

iStock Promo – Save 50% Off Vectors

iStock Promo – Save 50% Off Vectors

Advertise here with BSA Listen up guys! Today we have an  iStock promo  that is SO BIG it is only available for 24 hours so we don’t want you to miss it!
Today iStockphoto is offering 50% off credit downloads for vector illustrations What makes this offer even better is that we still have several other iStock promo codes that still work that can be combined with today’s 50% off discount Never have a I seen a discount this large from iStockphoto You do the math
Click…..

13 Common Photoshop Mistakes and Malpractices with Remedies

13 Common Photoshop Mistakes and Malpractices with Remedies

Photoshop is to a graphic designer as the rolling pin is to a baker As a graphic design tool Photoshop can be compared to the clay in a sculptor’s hands or the scalpel in the surgeon’s hands However Photoshop can also produce negative results A designer took a lot of flak for producing a picture of an unbelievably thin model
This led to accusations of unrealistic images of the female body Some might consider it a graphic design malpractice while others would say it is just a bad Photoshop job Bad Photoshop results…..

Test Automation Framework For Native & Hybrid Mobile Apps – Appium

Test Automation Framework For Native & Hybrid Mobile Apps – Appium

When building and updating native mobile apps testing them can be a pain as this may require including an SDK or recompiling the app
Appium is an open source framework  which helps automating mobile app testing from any language and any test framework with full access to back-end APIs and DBs from test code

It works for both iOS + Android apps and tests can be written with Java Objective-C JavaScript PHP Python Ruby C# Clojure or Perl
…..

Beautiful, Free & Responsive HTML5 Templates

Beautiful, Free & Responsive HTML5 Templates

HTML5 Up! is a website that creates and shares very good-looking and free HTML5-CSS3 templates
All the templates have responsive layouts (down to mobile) (uses Skeljs ) and they are compatible with all major browsers
There are already 10+ templates  where new ones are added within time and they can be used freely under the CCA license for both personal or commercial projects
Advertisements: ioDeck a self-hosted and awesome PHP form generator
…..

Natural Language Form with Custom Input Elements

Natural Language Form with Custom Input Elements

View demo Download source
There is something really interesting about Natural Language UIs and after visiting awesome Escape Flight we wanted to play around with NL forms and custom form elements The idea is to turn a classic form into one that uses natural language to obtain information from the user For that we’ll construct a sentence where some words and parts are select elements and text inputs We’ll then transform the select elements so that we can customize them
Natural language forms are…..

Mighty Deals:  WordPress Shortcodes Plugin + 3 Premium WP Themes

Mighty Deals: WordPress Shortcodes Plugin + 3 Premium WP Themes

A while back I wrote a post about WordPress Shortcode creation  Shortcodes are convenient and useful on so many levels and for so many levels of skilled WordPress users  A basic user can quickly learn shortcodes as can an expert-level developer  In short shortcodes are an invaluable tool for all levels of WordPress user  Mighty Deals is offering a WordPress plugin containing 5000 WordPress shortcodes plus three bonus themes for less than $20  Shortcodes include:

Buttons Hate the same old…..

No-Image

Creating Vanity URLs in Rails

A vanity URL is a search engine optimized (SEO) URL Instead of having a meaningless URL like http://storeofthefuturecom/products/2015 wouldn’t http://storeofthefuturecom/products/hoverboard be better and more meaningful?
It’s fairly straightforward to make URLs nicer in Rails I’ll walk you through the process
Baby Steps
In Rails the models have a method called to_param This method gets called when you pass a model into a URL helper like:
<%= link_to productname product %>

Or:
<%= link_to productname product_path(product) %>

By default the to_param …..

No-Image

iTunes Scrolling and Mobile Shelving – Treehouse Show Ep 40

In this episode of The Treehouse Show Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about iTunes Scrolling and Mobile Shelving

Here are the links for the week:
Quick ‘n dirty iTunes 11 style scroller – CodePen

http://codepenio/vaskemaskine/pen/DrdJE

Sly

http://darsain/sly/

jQueryShapeshift

http://mcpantsgithubio/jqueryshapeshift/

Packery

http://packerymetafizzyco/

Pure CSS Peeling Sticky – CodePen

http://codepenio/patrickkunka/pen/axEgL

Package Managers: An Introductory Guide For The Uninitiated Front-End Developer – TechPro

http://techpro/tutorial/1190/package-managers-an-introductory-guide-for-the-uninitiated-front-end-developer

Niice A search engine with taste

http://wwwniiceco/

jakiestfu/Snapjs · GitHub…..