Monthly Archives: December 2014

Here Is The Easiest Way To Create Equal Height Sidebars

HTML, JavaScript, RSS Feed

By Martin Angelov

easiest-way-equal-height-sidebar

For a long time we have been forced to create the interfaces of our web apps using CSS layout modes which were originally designed for laying down documents. No wonder it is such a pain for beginners! Luckily, things are changing – we now have the flexbox layout mode. If you can afford to ignore IE < 10 (which is a big if), you can use it today! The spec is finalized, and most browsers already support it unprefixed.

In this quick tutorial, I will show you how to use flexbox to create something basic that has been surprisingly tricky to do until now – a sidebar that has equal height to your main content. The tricky part lies in that you want both your sidebar and main page element to have content with varying lengths, but at the same time they should have equal heights. With flex box, this is very easy. Here is how to do it.

Say hello to Flexbox

There are plenty of guides to give you an overview of flexbox. Here, we will take a more practical approach, and jump right into using it. First, here is the HTML:

<section id="page">

	<div id="main">
		<!-- The content of the page will go here -->
	</div>

	<aside>
		<!-- This is the sidebar -->
	</aside>
	
</section>

We want to make the #main div and the aside show next to each other, and be of equal heights, regardless of the content that they hold. We also want to make the page responsive, so that the sidebar has a fixed width, but the main element shrinks/expands to fill the available space. Lastly, on small screens, we want the sidebar to go beneath the main content.

Equal Height Sidebar with Flexbox

Here is how to do it. First, we will activate flexbox:

#page {
    display:flex;
}

This will turn the #page element into a flex container. It will be displayed as a block level element (it will take the full width of the page), and will turn all the elements inside it into flex items. This is the important bit – we want our main content and sidebar to be flex items, so they take the full height of the page.

But we also want to make the #page element 1200px wide as a maximum, and we want it to be centered. It is still a normal block element, so we can center it as such:

#page {
    display:flex;

    /* Centering the page */
    max-width:1200px;
    margin:0 auto;
}

Perfect! Now we have to give widths to the #main element and the sidebar:

#main {
    /* This makes the element grow and take all available space, not taken by the sidebar */
    flex-grow:1;
}

aside {
    /* Give the sidebar a default width, and prevent it from shrinking */
    flex-shrink:0;
    width:280px;
}

Done! Our layout is nearly finished. When the content of the #main element causes it to become longer, it will enlarge the #page, which in turn would also grow the aside (and the other way around). The last thing to do is make the sidebar go beneath the main content on small screens, which can be done with a simple media query:

@media all and (max-width: 800px) {

    #page {
        flex-flow:column;
    }

    /* Make the sidebar take the entire width of the screen */

    aside {
        width:auto;
    }

}

By default flex containers have a flex-flow value of row, which shows elements side-by-side. On small screens we are switching it to vertical orientation, which pushes the sidebar below the main content.

I’ve omitted some of the CSS that does not pertain to the layout for brevity. You can download the entire example from the button near the top of this article. It is worth mentioning that I have not provided fallbacks for IE 10, which implements a slightly older version of the flexbox spec, so it only works in Firefox, Chrome, Safari, Opera and IE 11.

With this our sidebar is ready!

Conclusion

There is more to learn about flexbox, but I hope that this article gives you a quick start. Flexbox is by no means the only way to create this layout, but it is the way forward for building web interfaces. If you can afford to drop support for older IE, you can use it today.

Source:: Tutorialzine.com

12 Fun Sharing Button Effects

HTML, RSS Feed

By Danny Markov

12-fun-sharing-button-effects

Everyone loves eye candy and smooth CSS3 animations. This is why today we are sharing our latest experiment with you – a collection of effects for revealing sharing buttons. You can use them in your portfolio, image galleries and more!

How they’re made

Most of the different transformations and effects on the demos are done exclusively via CSS, so they should appear bug and lag free (if you are running a modern browser). Here are some of the key components that made these effects possible:

  • Transition – the transition property sets a duration of time in which CSS properties can transform their values gradually making HTML objects animate smoothly. Make sure to check out what its descendant properties do (such as “delay” and “timing-function”) and how to use them to your advantage.
  • Transform – this lets you move, rotate, scale and basically do anything with the dimensions and position of your HTML elements. It’s powers aren’t limited only to a 2D plane but also work in 3D.
  • Filter – another new CSS3 feature that enables developers to apply photographic effects on images thus making them black-and-white, blurred, saturated, and so on. Note that this property still requires the “-webkit-” prefix and doesn’t work in Firefox.

The Fall Back Effect

For one of the Demos we also used a fun jQuery plugin called jRumble. Give it a try – it’s awesome!

We hope you enjoy our collections of effects. Check out all the demos and tell us which is your favorite. As always, if you have any suggestions, questions or just want to share with us similar stuff – leave a comment below.

Source:: Tutorialzine.com

You don’t need icons! Here are 100+ unicode symbols that you can use

HTML, RSS Feed

By Danny Markov

100-plus-unicode-symbols

Ever needed to add an icon to your design, but you didn’t want to include images or an entire icon font like Font Awesome into your page? We’ve got good news for you – there is a vast library of available icons and glyphs already in your browser. It is called Unicode, and it is a standard which assigns a unique identifier for an ever expanding number (currently over 110 000) of characters, symbols and icons.

This doesn’t mean that you have a choice of a hundred thousand icons, though. It is up to the browser to render them, and it uses the fonts which are installed on the system to do so. In this article, we’ve collected a number of symbols that are available across Windows, Linux, OS X, Android and iOS. You can use them in your web designs today!

Tip: There is a good article which explains everything you need to know about character encodings and unicode, which we recommend for every software developer to read.

How to use these icons

The icons given in the tables below, are regular characters, which you can copy and paste as if they are letters of text. But if the encoding used to save your HTML/CSS files is not UTF-8 they might not show up. This is why we’ve provided an HTML escape code, which will always work. Here is what you need to do to use these icons:

  1. Find an icon that you like. We’ve provided small and large previews.
  2. Copy the code.
  3. Paste it in your HTML as regular text. In your CSS, you can use it as the value of the content property. In JS, PHP and other programming languages, you can use it as text in strings.
  4. You can customize the icons by setting a font-size, color and text shadows, just like regular text.

Icon-like

Name Preview Code
Smiley ☺ ☺ ☺
Hot Springs ♨ ♨ ♨
8-Ball ➑ ➑ ➑
White Star ☆ ☆ ☆
Black Star ★ ★ ★
White Heart ♡ ♡ ♡
Black Heart ❤ ❤ ❤
Airplane ✈ ✈ ✈
Black Scissors ✂ ✂ ✂
White Scissors ✄ ✄ ✄
Crown ♕ ♕ ♕
Cross ✝ ✝ ✝
Black-White Circle ◑ ◑ ◑
Eight Note ♪ ♪ ♪
Beamed Eighth Notes ♫ ♫ ♫
Four Balloon-Spoked Asterisk ✣ ✣ ✣
Circled White Star ✪ ✪ ✪
White Star ✰ ✰ ✰
White Four Pointed Star ✧ ✧ ✧
Black Four Pointed Star ✦ ✦ ✦
Ballot Box Check ☑ ☑ ☑
Check Mark ✔ ✔ ✔
Cross Mark ✘ ✘ ✘
Pencil ✎ ✎ ✎
Writing Hand ✍ ✍ ✍
Female ♀ ♀ ♀
Male ♂ ♂ ♂
Black Telephone ☎ ☎ ☎
White Telephone ☏ ☏ ☏
Envelope ✉ ✉ ✉
Telephone Location ✆ ✆ ✆

Arrows

Name Preview Code
Leftwards Arrow ← ← ←
Rightwards Arrow → → →
Upwards Arrow ↑ ↑ ↑
Downwards Arrow ↓ ↓ ↓
Left Right Arrow ↔ ↔ ↔
Up Down Arrow ↕ ↕ ↕
Right And Left Arrows ⇄ ⇄ ⇄
Up And Down Arrows ⇅ ⇅ ⇅
Down-Left 90deg Arrow ↲ ↲ ↲
Down-Right 90deg Arrow ↳ ↳ ↳
Up-Left 90deg Arrow ↰ ↰ ↰
Up-Right 90deg Arrow ↱ ↱ ↱
Leftwards Arrow To Bar ⇤ ⇤ ⇤
Rightwards Arrow To Bar ⇥ ⇥ ⇥
Anticlockwise Semicircle Arrow ↶ ↶ ↶
Clockwise Semicircle Arrow ↷ ↷ ↷
Anticlockwise Circle Arrow ↺ ↺ ↺
Clockwise Circle Arrow ↻ ↻ ↻
Wide-Headed Rightwards Arrow ➔ ➔ ➔
Downwards Zigzag Arrow ↯ ↯ ↯
North West Arrow ↖ ↖ ↖
Heavy South East Arrow ➘ ➘ ➘
Heavy Rightwards Arrow ➙ ➙ ➙
Heavy North East Arrow ➚ ➚ ➚
Dashed Rightwards Arrow ➟ ➟ ➟
Dotted Leftwards Arrow ⇠ ⇠ ⇠
Black Rightwards Arrowhead ➤ ➤ ➤
Leftwards White Arrow ⇦ ⇦ ⇦
Rightwards White Arrow ⇨ ⇨ ⇨
Left Angle Quotation Mark “ “ «
Right Angle Quotation Mark » » »
Right Black Pointer ► ► ►
Left Black Pointer ◀ ◀ ◀
Up Black Pointer ▲ ▲ ▲
Down Black Pointer ▼ ▼ ▼
Right White Pointer ▷ ▷ ▷
Left White Pointer ◁ ◁ ◁
Up White Pointer △ △ △
Down White Pointer ▽ ▽ ▽ Bow Arrow ➴ ➴ ➴

Special

Name Preview Code
Numero № № №
Copyright © © ©
Registered ® ® ®
Trademark ™ ™ ™
Estimated ℮ ℮ ℮
Bullet • • •
Middle Dot · · ·

Currency

Name Preview Code
Euro € € €
Pound £ £ £
Lira ₤ ₤ ₤
Yen ¥ ¥ ¥
Cent ¢ ¢ ¢
Currency ¤ ¤ ¤

Weather

Name Preview Code
Degree ° ° °
Small Sun ☀ ☀ ☀
Big Sun ☼ ☼ ☼
Cloud ☁ ☁ ☁
Snowflake 1 ❆ ❆ ❆
Snowflake 2 ❅ ❅ ❅
Snowflake 3 ❄ ❄ ❄

Pointers

Name Preview Code
Pointer Left Black ☚ ☚ ☚
Pointer Right Black ☛ ☛ ☛
Pointer Left White ☜ ☜ ☜
Pointer Up White ☝ ☝ ☝
Pointer Right White ☞ ☞ ☞
Pointer Down White ☟ ☟ ☟

Card Suits

Name Preview Code
Spades Black ♠ ♠ ♠
Hearts Black ♥ ♥ ♥
Diamonds Black ♦ ♦ ♦
Clubs Black ♣ ♣ ♣
Spades White ♤ ♤ ♤
Hearts White ♡ ♡ ♡
Diamonds White ♢ ♢ ♢
Clubs White ♧ ♧ ♧

Chess

Name Preview Code
King White ♔ ♔ ♔
Queen White ♕ ♕ ♕
Rook White ♖ ♖ ♖
Bishop White ♗ ♗ ♗
Knight White ♘ ♘ ♘
Pawn White ♙ ♙ ♙
King Black ♚ ♚ ♚
Queen Black ♛ ♛ ♛
Rook Black ♜ ♜ ♜
Bishop Black ♝ ♝ ♝
Knight Black ♞ ♞ ♞
Pawn Black ♟ ♟ ♟

Maths

Name Preview Code
Infinity ∞ ∞ ∞
Plus Minus ± ± ±
Less-Than Or Equal To ≤ ≤ ≤
More-Than Or Equal To ≥ ≥ ≥
Not Equal To ≠ ≠ ≠
Division ÷ ÷ ÷
Multiplication x × × ×
Heavy Multiplication x ✖ ✖ ✖
Superscript One ¹ ¹ ¹
Superscript Two ² ² ²
Superscript Three ³ ³ ³
Circled Plus ⊕ ⊕ ⊕
Circled Multiplication ⊗ ⊗ ⊗
Logical AND ∧ ∧ ∧
Logical OR ∨ ∨ ∨
Delta ∆ ∆ ∆
Pie ∏ ∏ ∏
Sigma (SUM) ∑ ∑ ∑
Omega Ω Ω Ω
Empty Set ∅ ∅ ∅
Angle ∠ ∠ ∠
Parallel ∥ ∥ ∥
Perpendicular ⊥ ⊥ ⊥
Almost Equal To ≈ ≈ ≈
Triangle △ △ △
Circle ○ ○ ○
Square □ □ □

Fractions

Name Preview Code
One Quarter (1/4) ¼ ¼ ¼
One Half (1/2) ½ ½ ½
Three Quarters (3/4) ¾ ¾ ¾
One Third (1/3) ⅓ ⅓ ⅓
Two Thirds (2/3) ⅔ ⅔ ⅔
One Eight (1/8) ⅛ ⅛ ⅛
Three Eights (3/8) ⅜ ⅜ ⅜
Five Eights (5/8) ⅝ ⅝ ⅝
Seven Eights (7/8) ⅞ ⅞ ⅞

Roman Numerals

Name Preview Code
Roman Numeral One Ⅰ Ⅰ Ⅰ
Roman Numeral Two Ⅱ Ⅱ Ⅱ
Roman Numeral Three Ⅲ Ⅲ Ⅲ
Roman Numeral Four Ⅳ Ⅳ Ⅳ
Roman Numeral Five Ⅴ Ⅴ Ⅴ
Roman Numeral Six Ⅵ Ⅵ Ⅵ
Roman Numeral Seven Ⅶ Ⅶ Ⅶ
Roman Numeral Eight Ⅷ Ⅷ Ⅷ
Roman Numeral Nine Ⅸ Ⅸ Ⅸ
Roman Numeral Ten Ⅹ Ⅹ Ⅹ
Roman Numeral Eleven Ⅺ Ⅺ Ⅺ
Roman Numeral Twelve Ⅻ Ⅻ Ⅻ

A few notes

There are some rendering differences between these symbols across operating symbols. This is caused by the different font families that are used. Also, iOS and Android replace some Unicode characters with emoji, so be sure to test there to make sure that this doesn’t happen and the icons show as intended. Have fun coding! 🙂

Source:: Tutorialzine.com

50 Useful Libraries and Resources for Responsive Web Design

HTML, JavaScript, RSS Feed

By Nick Anastasov

50-useful-libraries-resources-responsive-design2

Let’s talk about responsive web design. People are increasingly dependent on their smart mobile devices, and chances are that a large portion of the visitors of your website have used their phone or tablet to get to it. In this article you will find 50 articles, tools and resources, which will help you learn what responsiveness is, and how to apply these techniques to your current website. Happy learning!

Basics

Let’s start with these articles which explain the basic ideas of responsiveness.

1. Make it Responsive

Google’s “Make it Responsive” is a great introduction in the topic. It will get you into the responsive web-designs. During this course, you will be building a site that works across multiple screen sizes and device types. They also have other useful guides which we recommend.

Make it Responsive

2. MDN’s Responsive Web design Tutorial

This is a nice MDN article about some of the basic strategies people use to achieve responsiveness, such as liquid or fluid layouts, media queries and fluid images. They have also highlighted useful links to external resources on responsive web design.

MDNs Responsive Web design Tutorial

MDN’s Responsive Web design Tutorial

3. 5 Really Useful Responsive Web Design Patterns

DesignShack’s awesome article features lots of example patterns which can help you plan your own page layout. Some of the examples are really simple and others provide more imaginative ideas on how to arrange HTML elements.

5 Really Useful Responsive Web Design Patterns

5 Really Useful Responsive Web Design Patterns

4. Responsive Web Design Tutorial

Shayhowe presents an excellent series of lessons on web design. One of them teaches you how to make any page mobile-friendly. They start from the foundation of responsiveness and move up to different ways of making any page perfectly viewable in different screen sizes.

Responsive Web Design Tutorial

Responsive Web Design Tutorial

5. 9 Basic Principles of Responsive Web Design

Froont made this strange article that shows us the difference between divergent strategies used in making responsive web apps. They get bonus points for using cool animations to present the advantages of each technique. This is a very fun way to learn new things.

9 Basic Principles of Responsive Web Design

9 Basic Principles of Responsive Web Design

6. A List Apart’s Responsive Web Design Tutorial

An in-depth article on responsive design that covers topics such as fluid design and media queries. You’ll find something to learn in this great resource whether you are new to web developing mobile-friendly apps or you’ve already done a few responsive projects.

A List Apart's Responsive Web Design Tutorial

A List Apart’s Responsive Web Design Tutorial

7. Responsive design in 3 steps

This tutorial is intended to show you the basics of responsive design. It’s short and focuses only on the most important aspects. It features a helpful section on the viewport meta tag so that your sites can fit on screens perfectly.

Responsive design in 3 steps

Responsive design in 3 steps

8. Interface Sketch

This is not a guide, but is useful nonetheless. This is a collection of free sketch templates for web, mobile and tablet platforms. The templates are in PDF and contain multiple pages and layouts. Simply download a template, print out the pages you need and start sketching your next responsive design.

Interface Sketch

Interface Sketch

CSS frameworks

Writing responsive CSS by hand takes a lot of experience and most times you will be better off by using a framework. Here is a list of some of the best.

9. Ink

Quickly create responsive HTML emails that work on any device & client. Even Outlook. Email anywhere. On any device. How HTML email was meant to be read.

Ink

Ink

10. Skeleton

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, from desktop to mobile. This framework consists of a base html page that includes the necessary initial markup, some stylesheets which can help you with styling your page and an included icon-set.

Skeleton

Skeleton

11. Columnal

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. It makes responsive prototyping a little easier. It is 1140px wide, but since it is fluid, it will respond to the width of most browsers.

Columnal

Columnal

12. Bootstrap

Bootstrap is the most popular and maybe the most powerful from the frameworks presented here. It is made for folks of all skill levels, devices of all shapes, and projects of all sizes. There is also a large number of bootstrap plugins which you can use to extend it.

Bootstrap

Bootstrap

13. Less Framework

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts (Default, Tablet, Mobile and Wide Mobile) and 3 sets of typography presets, all based on a single grid. The only measures that change from layout to layout are the amount of columns and the width of the outer margins.

Less Framework

Less Framework

14. Entomic’s Responsive CSS

Layout your pages in minutes for beautifully responsive web sites on desktops, tablets and smartphones. A service that provides the option to create the layout of the page based on popular screen sizes. Simply create boxes and set their width, export the layout and just start using it.

Entomic's Responsive CSS

Entomic’s Responsive CSS

15. Susy

In a world of agile development and super-tablet-multi-magic-laptop-phones, the best layouts can’t be contained in a single framework or technique. CSS Libraries are a bloated mess of opinions about how to do your job. Why let the table-saw tell you where to put the kitchen?

Susy

Susy

16. Simple Grid

Simple Grid is another CSS grid framework. It strives for simplicity, so if you don’t need all the extra features of something like bootstrap, this framework is a good choice.

Simple Grid

Simple Grid

17. Furatto

Lightweight & friendly front-end framework to get the job done. Whether you are using Scss or CSS, it is really easy to start a project and get things done in no time.

Furatto

Furatto

JavaScript and jQuery Libraries

There is also a number of useful jQuery libraries and plugins that can give your website the extra responsive magic that it needs.

18. Intention

Intention.js offers a light-weight and clear way to dynamically restructure HTML in a responsive manner. What should an element’s classes be on mobile vs tablet? Where should advertising markup be placed when viewed on a desktop browser? Does the page require an alternate slideshow widget on touch-enabled devices? These are all scenarios that Intention.js can handle, altering the page based on users’ devices.

intention

Intention

19. JResponsive

JResponsive will organize your content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will arrange its children in a layout that makes optimal use of screen space, by “packing” them in tightly.

jresponsive

JResponsive

20. ReStable

jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.

restable

ReStable

21. Responsive Elements

Responsive elements makes it possible for any element to adapt and respond to the area they occupy. It’s a tiny javascript library that you can drop into your projects today.

responsive-elements

Responsive Elements

22. Restive

Restive.JS is a jQuery Plugin that helps you quickly and easily add features to your Web Site to enable it respond and adapt to virtually every Web-enabled Device. Using a combination of Device Detection, Advanced Breakpoints Management, and Orientation Management, Restive.JS will give your Web site an uncanny ability to stay robust in the face of a constantly changing device landscape.

restive

Restive

23. Fit Text

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. Oh, and don’t you dare let us catch you using FitText on paragraph text. This is for gigantic display text only!

fit-text

Fit Text

24. Collage Plus

This plugin for jQuery will arrange your images to fit exactly within a container. This creates an effect similar to Flickr’s profile pages or Google+ Albums. This plugin for jQuery will arrange your images to fit exactly within a container. This creates an effect similar to Flickr’s profile pages or Google+ Albums.

collage-plus

Collage Plus

25. Chartist

You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included.

Chartist

Chartist

26. OWL Carousel

Touch enabled jQuery plugin that lets you create beautiful responsive carousel sliders. You can add an unlimited amount of images which can be slided with a butter-smooth animation.

owl-carousel

OWL Carousel

27. Swipebox

Swipebox is a jQuery “lightbox” plugin for desktop, mobile and tablet.

swipe-box

Swipebox

28. Slides

SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions.

slides

Slides

29. Glide

Glide.js is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with JS fallback for older browsers. It’s simple, lightweight and fast. Designed to slide, no less, no more.

glide

Glide

30. FlickerPlate

A cool jQuery plugin that lets you flick through content. It is also fully responsive and touch enabled.

flicker-plate

FlickerPlate

31. One Page Scroll

Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin.

one-page-scroll

One Page Scroll

32. FlexSlider

FlexSlider is an awesome, fully responsive jQuery slider toolkit.

flex-slider

FlexSlider

33. Royal Slider

RoyalSlider is an image gallery and content slider plugin.

royal-slider

Royal Slider

34. Camera

Camera slideshow is an open source project, based on Diapo slideshow, but improved a lot.

camera

Camera

35. PhotoSwipe

PhotoSwipe is a self contained JavaScript library that can be easily integrated into your mobile websites.

photo-swipe

PhotoSwipe

36. Responsive Slides

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container.

responsive-slides

Responsive Slides

37. MasterSlider

Everything you ever wanted in an animated content and image slider, all packaged up into one awesome plugin!

master-slider

MasterSlider

38. Magnific Popup

Magnific Popup is a responsive lightbox & dialog script with a focus on performance and providing best experience for a user on any device.

magnific-popup

Magnific Popup

39. Justified

This is a jQuery plugin which arranges photos in a perfectly spaced grid, compensating for the different sizes of the photos. See a live demo here.

justified

Justified

40. Double Tap To Go

This is a concept for a multi-level navigation menu which works on mobile devices. To compensate the lack of a real hover event, the menu options get activated on double tap.

double-tap-to-go

Double Tap To Go

41. Menu-Aim

Menu-Aim is a jQuery plugin for dropdown menus that can differentiate between a user hovering over a dropdown item and trying to navigate into a submenu’s contents.

menu-aim

Menu-Aim

42. Menutron

Menutron transforms your navigation menus from a list to a select menu when resizing your browser. This is especially useful for navigation menu with lots of options.

menutron

Menutron

43. SlickNav

SlickNav transforms your navigation menus into a hamburger menu when resizing your browser.

slick-nav

SlickNav

44. Sidr

jQuery plugin for creating responsive side menus. They can be shown from the left or right side.

sidr

Sidr

45. Big Slide

BigSlide is a teeny tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel navigation.

big-slide

Big Slide

46. FitVids

A lightweight, easy-to-use jQuery plugin for fluid width video embeds. FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design and it’s really ease to use.

FitVids

FitVids

47. Adobe Edge

Testing mobile layouts is a pain. To help you, Adobe has created Edge Inspect. It is an essential application for web developers and designers who need to preview their content across multiple mobile devices.

adobe-edge

Adobe Edge

48. Can I use …?

Not all CSS features are available on mobile devices. To make sure that no pieces of functionality are missing on mobile devices, you can use caniuse, which is the go-to web site for up-to-date browser support tables.

Can I use...?

Can I use…?

49. Am I Responsive?

“Am I Responsive?” helps you to see if your website is a responsive one or not. It is also a great way to take a quick screenshot with your page in a number of devices at once.

am-i-responsive

Am I Responsive?

50. Device Mode & Mobile Emulation

Google has also developed a way for testing mobile layouts. If you use Google Chrome, you can try Device mode & Mobile emulation right from your developer tools, or even try remote debugging on an android smartphone connected to your computer.

chrome-dev-tools

Device Mode & Mobile Emulation

Conclusion

We hope that you find all these responsive plugins and resources useful! They will give you a great start into responsive design, and a lot of tools for creating your next awesome design. Did we miss anything? Tell us in the comment section 🙂

Source:: Tutorialzine.com

Learn Regular Expressions in 20 Minutes

JavaScript, RSS Feed

By Martin Angelov

learn-regex-20-minutes

You run into a problem and decide to use a regular expression. Now you have two problems. Or at least this is how the saying goes. Regular expressions are a powerful tool that skillful coders leave as a last resort, but when they do use it, they strike terror in the hearts of their enemies (and colleagues).

Regular expressions (or regex-es, as is the correct term for what we use in programming languages today) are specialized languages for defining pattern matching rules for text. They have their own grammar and syntax rules, which every beginner gets wrong. But you don’t have to! Here is what you need to know:

1. Matching a single character

Every programming language has a way of defining and using regular expressions. They have some differences, but the basics which are covered in this article should work anywhere. The examples here are written in JavaScript, so that you can try them out in your browser.

The most basic regexes are those that match a single character. Here are the rules:

  • The dot (.) matches any character. If you want to match the dot as a character, escape it like this: .
  • A question mark (?) means that the preceding character is optional. If you want to match an actual question mark, escape it: ?

You can play with our editor below. Clicking the Run button will execute your code.

(Play with our code editor on Tutorialzine.com)

2. Matching a character of a set

Building up from the previous example, we can write regexes that match only certain character by using sets:

  • A set is one or more characters enclosed in brackets [abc]. It matches only one of those characters – in this example only a, b or c. You can negate a set with ^. [^abc] will match any character that is not a, b or c. You can also specify a range [0-9], [a-z], which will match everything in the range.
  • There are built-in sets that make writing regexes easier (they are called shorthand). Instead of [0-9] you can write d and for [^0-9] you can write D. There are also sets for word characters (a through z with digits and underscore) – w and W, and spaces (including tabs and new lines) – s and S.

This example will makes things clearer:

(Play with our code editor on Tutorialzine.com)

3. Matching words

Most of the time, you will want to match entire words, instead of single characters. This is done by using modifiers which repeat a character or a character set. These are:

  • +, which repeats the preceding character or set one or more times
  • *, which repeats the preceding character or set zero or more times
  • {x} for an exact number of repetitions, {x,y} for varying number of repetitions (where x and y are numbers)

Also, there is the special b pattern which matches the boundaries at the ends of words (not a real symbol).

(Play with our code editor on Tutorialzine.com)

4. Matching/validating entire lines

In JavaScript, this is the type of patterns you would use to validate user input from text fields. It is just a ordinary regex, but anchored to the start and end of the text using ^ (start of line), $ (end of line) expressions. This will make sure that the pattern that you write spans the entire length of the text, and doesn’t only match a part of it.

Also, in this case we use the test() method of the regex object, which returns either true or false if the regex matches the string.

(Play with our code editor on Tutorialzine.com)

5. Search and replace

Another common task that often calls for the use of regular expressions is searching and replacing text. There are two basic ideas here:

  • A group is a set of patterns enclosed in braces (). Each group collects the text that was matched by the patterns inside it. The text matched by each group can be addressed later with indexes prefixed with dollar signs (starting from $1 for the first group).
  • Each group is available in the pattern itself as a back reference – backward slash followed by the group index, starting from 1 (see the example below). This is only rarely used, so you can blissfully forget about this feature.

(Play with our code editor on Tutorialzine.com)

Resources and further reading

And this concludes our quick overview! If you learn what was presented in this article, you will be well prepared to solve 80% of the problems that involve regexes. For the other 20%, try these tools and resources:

Source:: Tutorialzine.com

The Languages And Frameworks That You Should Learn In 2015

AngularJs, HTML, JavaScript, RSS Feed

By Martin Angelov

languages-frameworks-learn-2015

Last week, we asked you which were the languages and frameworks you were looking forward to learn in 2015. 47 of you replied, and here are your answers.

Languages / platforms

Node.js is the winner here, with PHP second, and JavaScript – third. There is an amazing community forming around Node.js, so it isn’t a surprise that a lot of you are excited about it. If you know JavaScript, you are already half the way to building web apps in Node.js.

This is only half of the picture. Here are the frameworks that our readers are looking forward to picking up.

Frameworks

AngularJS takes the lead in the frameworks category. Large companies and enterprises have adopted Angular, which drives the demand for coders skilled in the framework. The fact that it is backed by some of Google’s best engineers also helps it reach the top spot.

To help you make your choice, we’ve prepared an overview of the above technologies and more!

Here is what you should learn in 2015

Libraries and frameworks come and go, so it is risky to put the effort to learn every new thing that comes along. But here are our suggestions for languages and frameworks that we believe will stick around in the long run and are worth learning. They are all popular, have large communities, and give a lot of career opportunities.

1. JavaScript is everywhere

If you are doing web development, JavaScript is a language that you should know, regardless of what other language you write your backends in. These days you can use JS in the browser, on the server, in mobile apps and even on programmable hardware. ES6 will bring much needed improvements and will make the language even more powerful and easy to write. It is also a good idea to learn about Bower and npm, and also tools like jshint and jscs for code style and issue reporting.

2. AngularJS

angular

AngularJS is a JavaScript framework by Google, which quickly established itself as the enterprise way of building powerful web apps. With that recognition comes an increased demand for programmers experienced with the framework, and as a result, you will find it mentioned on the list of requirements of nearly every JavaScript-related job ad. But don’t jump into it just yet. It has been said that a large rewrite and rethinking of Angular is coming soon, so it would be better if you wait until version 2.0 is released before picking it up. See our guide with angularjs examples.

3. React

react

React is the newest entrant in this list, but it proved itself a practical realization of the idea for reusable web components. The library is developed by Facebook and provides very fast performance thanks to its virtual DOM, and can be easily plugged into existing projects. It also has a very active community that develops all kinds of components. In our opinion, React has a lot of potential and is the framework to watch (and learn) in 2015. See our quick react tutorial.

4. Node.js

nodejs

With Node.js you can develop networked server applications in JavaScript. It can be used for simple website backends using a framework like Express, API endpoints, websocket servers or even torrent clients. Node has an incredibly active community and surpassed every other language by module count this year. If you are a beginner, we recommend trying some of the interactive tutorials at NodeSchool.

5. NoSQL databases

nosql

Databases which need neither tables nor SQL are highly valued by today’s web developers and we believe these databases will only become more popular next year. The two noteworthy choices are Mongodb and Redis. It is much easier to get started with one of these databases than with MySQL and Postgres. But don’t get fooled into thinking that NoSQL databases are a perfect replacement – in some situations a classic relational database will make your development easier even if it takes more effort to set up.

6. Less/Sass/Stylus

lesscss

There is a lot to dislike about CSS. It is too easy to end up with an unwieldy 1000 line css file which is hard to navigate and change. To solve this, there are languages like Less, Sass and Stylus which are compiled to CSS and offer things like variables, macros and other goodies that will help you write better code. You can learn one of these in a single afternoon.

7. Exciting new frameworks

exciting-new-frameworks

Meteor is a radically new approach to web application development which blurs the boundaries between front end and back end. It allows you to write reall-time apps, and has a rapidly growing community writing packages for it. Hood.ie is a smaller contender, but offers a novel approach. It handles the backend for you, so you can concentrate entirely on the front end of your application.

8. Exciting new languages

exciting-new-languages

For the language nerds out there, here are some treats. Golang, Rust and Elixir are gaining momentum in programming circles and are used in situations which demand extremely high performance. We don’t recommend moving your development to one of these just yet, but you might want to do the interactive tutorials that are provided on their websites.

9. A classic full stack framework

full-stack-frameworks

Even though single page applications are gaining popularity, there is still a huge demand for classic server-side web apps. Ruby on Rails, Django, Laravel, Play, ASP.NET are the top full-stack frameworks at the moment. But any solid MVC framework will do wonders to your productivity if you take the time to study it.

10. The old guard

the-old-guard

There is a large collection of established languages and platforms that are still in demand – Java, .NET, Python, Ruby. They have large communities and will look good on any CV. They all have their pros and cons, but it doesn’t hurt to create small side projects in one of them every now and then. This is something that no programming course or tutorial will teach you and you will quickly get a feel whether that language fits with your way of work.

11. Don’t forget these

dont-forget-these

PHP, WordPress, and jQuery are still a perfectly valid way to create a website. WordPress has outgrown its blog platform past, and is now a powerful CMS/framework for developing a wide range of web applications. If you are a designer you should consider picking these technologies up. If you decide to go with PHP for your backend needs, don’t forget about the good practices in PHP the right way. Also, if you haven’t already, take a look at Bootstrap – it will help you write frontend code. There are also lots of bootstrap plugins you can choose from.

Source:: Tutorialzine.com

Quick Tip: Easy form validation with HTML5

HTML, RSS Feed

By Danny Markov

easy-form-validation-html5

When you collect information from people through a form, applying some kind of validation is a must. Failing to do so could lead to lost customers, junk data in your database or even security exploits of your website. Historically, building form validation has been a pain. On the server side, this is made easier by full stack frameworks which handle it for you, but on the client you often end up with JavaScript libraries that take a lot of effort to integrate.

Thankfully, HTML5 gives us a number of features that can handle most of your validation needs. Forms in HTML5 now have built-in support for validation through the use of special attributes and new input types, and give you a lot of control over styling with CSS.

Form Validation with HTML5

See an online demo here and read a quick overview of the basics behind HTML5 form validation below.

1. Specialized Input Types

HTML5 introduced several new input types. They can be used to create input boxes, which will accept only a specified kind of data.

The new input types are as follows:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

To use one of the new types, include them as the value of the type attribute:

<input type="email"/>

If the browser does not support the given input type, the field will behave as a regular text input. Also, it’s helpful to know that some of the input fields (such as “email” and “tel”) will cause a mobile devices to open specialized keyboards with a limited set of keys, and not the full QUERTY layout.

For more details on all the input types, head out to this MDN wiki – here.

2. Required Fields

By simply adding the “required” attribute to a , or