By Syed Fazle Rahman Create awesome transparent ghost buttons using Bootstrap buttons. This tutorial teaches you how to modify the existing Bootstrap code to generate ghost buttons.
Source:: htmlxprs.com
By Syed Fazle Rahman Create awesome transparent ghost buttons using Bootstrap buttons. This tutorial teaches you how to modify the existing Bootstrap code to generate ghost buttons.
Source:: htmlxprs.com
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.
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.
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!
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
By Danny Markov
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!
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:
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
By Danny Markov
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.
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:
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 | ✆ | ✆ | ✆ |
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 | ➴ | ➴ | ➴ |
Name | Preview | Code | |
---|---|---|---|
Numero | № | № | № |
Copyright | © | © | © |
Registered | ® | ® | ® |
Trademark | ™ | ™ | ™ |
Estimated | ℮ | ℮ | ℮ |
Bullet | • | • | • |
Middle Dot | · | · | · |
Name | Preview | Code | |
---|---|---|---|
Euro | € | € | € |
Pound | £ | £ | £ |
Lira | ₤ | ₤ | ₤ |
Yen | ¥ | ¥ | ¥ |
Cent | ¢ | ¢ | ¢ |
Currency | ¤ | ¤ | ¤ |
Name | Preview | Code | |
---|---|---|---|
Degree | ° | ° | ° |
Small Sun | ☀ | ☀ | ☀ |
Big Sun | ☼ | ☼ | ☼ |
Cloud | ☁ | ☁ | ☁ |
Snowflake 1 | ❆ | ❆ | ❆ |
Snowflake 2 | ❅ | ❅ | ❅ |
Snowflake 3 | ❄ | ❄ | ❄ |
Name | Preview | Code | |
---|---|---|---|
Pointer Left Black | ☚ | ☚ | ☚ |
Pointer Right Black | ☛ | ☛ | ☛ |
Pointer Left White | ☜ | ☜ | ☜ |
Pointer Up White | ☝ | ☝ | ☝ |
Pointer Right White | ☞ | ☞ | ☞ |
Pointer Down White | ☟ | ☟ | ☟ |
Name | Preview | Code | |
---|---|---|---|
Spades Black | ♠ | ♠ | ♠ |
Hearts Black | ♥ | ♥ | ♥ |
Diamonds Black | ♦ | ♦ | ♦ |
Clubs Black | ♣ | ♣ | ♣ |
Spades White | ♤ | ♤ | ♤ |
Hearts White | ♡ | ♡ | ♡ |
Diamonds White | ♢ | ♢ | ♢ |
Clubs White | ♧ | ♧ | ♧ |
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 | ♟ | ♟ | ♟ |
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 | □ | □ | □ |
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) | ⅞ | ⅞ | ⅞ |
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 | Ⅻ | Ⅻ | Ⅻ |
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
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!
Let’s start with these articles which explain the basic ideas of responsiveness.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Less Framework is a CSS grid system for designing adaptive websites. 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.
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.
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?
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.
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.
There is also a number of useful jQuery libraries and plugins that can give your website the extra responsive magic that it needs.
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.
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.
jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.
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.
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.
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!
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.
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.
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.
Swipebox is a jQuery “lightbox” plugin for desktop, mobile and tablet.
SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions.
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.
A cool jQuery plugin that lets you flick through content. It is also fully responsive and touch enabled.
Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin.
FlexSlider is an awesome, fully responsive jQuery slider toolkit.
RoyalSlider is an image gallery and content slider plugin.
Camera slideshow is an open source project, based on Diapo slideshow, but improved a lot.
PhotoSwipe is a self contained JavaScript library that can be easily integrated into your mobile websites.
ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container.
Everything you ever wanted in an animated content and image slider, all packaged up into one awesome plugin!
Magnific Popup is a responsive lightbox & dialog script with a focus on performance and providing best experience for a user on any device.
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.
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.
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.
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.
SlickNav transforms your navigation menus into a hamburger menu when resizing your browser.
jQuery plugin for creating responsive side menus. They can be shown from the left or right side.
BigSlide is a teeny tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel navigation.
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.
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.
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.
“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.
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.
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
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:
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:
.
) matches any character. If you want to match the dot as a character, escape it like this: .
?
) 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)
Building up from the previous example, we can write regexes that match only certain character by using sets:
[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.[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)
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)
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)
Another common task that often calls for the use of regular expressions is searching and replacing text. There are two basic ideas here:
$1
for the first group).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)
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
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
By Danny Markov
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.
See an online demo here and read a quick overview of the basics behind HTML5 form validation below.
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.
By simply adding the “required” attribute to a , or
<input type="checkbox" name="terms" required >
The problem here is that nearly any data will fulfill this requirement – for example you can bypass it with an empty space (we’ll show you how to prevent this in a moment).
When you set the required attribute on email or url fields, the browser expects a certain pattern to be followed, but it’s very permissive and emails such as “z@zz” are considered valid (read on to see how to work around this).
We can set some basic limitations like max length and minimum and maximum values for number fields. To limit the length of input fields and textareas, use the “maxlength” attribute. What this does is to forbid any string longer than the field’s “maxlength” value to be entered at all. If you try and paste a string witch exceeds this limit, the form will simply clip it.
<input type="text" name="name" required maxlength="15">
The fields use “max” and “min” attributes to create a range of possible values – in our example we’ve made the minimum allowed age to be 18 (too bad you can be whatever age you want on the internet).
<input type="number" name="age" min="18" required>
CSS3 pseudo classes let us style any form field depending on its state. They are:
:valid
:invalid
:required
:optional
:in-range
:out-of-range
:read-only
:read-write
This means that you can have required fields look one way, optional ones another and so on.
In our demo we’ve combined the “valid” and “invalid” selectors with the “focus” pseudo class to color form fields red or green when the user selects them and starts typing.
input:focus:invalid, textarea:focus:invalid{ border:solid 2px #F5192F; } input:focus:valid, textarea:focus:valid{ border:solid 2px #18E109; background-color:#fff; }
As you’ve probably noticed, when you try to submit a form that’s not correctly filled, a pop-up appears. By setting the “title” attribute of our fields, we can add additional hints on what values our rules validation expects.
Note that different browsers display the pop-ups in differently. In Chrome, the title attribute value will appear under the main error-message text in smaller font. In Firefox it doesn’t show your custom tooltip text at all, unless you’ve used the “pattern” attribute as well, which then is taken as a pattern info.
<input type="text" name="name" title="Please enter your user name.">
The error boxes or their default content can’t be changed that simply and require the help of JavaScript, but that’s a whole other tutorial.
The “pattern” attribute lets developers set a Regular Expression, which the browser will match against the user supplied input, before allowing the form to be submitted. This gives us great control over the data entries, since RegEx patterns can be quite complex and precise. To learn more about Regular Expressions, check out our article – Learn Regular Expressions in 20 Minutes.
Now, with the ability to filter out input values, our example form accepts only full email addresses and a password with a minimum length of 8 characters, including at least one number.
Here’s how to use it:
<input type="email" name="email" required pattern="^S+@S+.S+$" title="example@mail.com">
We hope that this quick tip helped you get up to speed with HTML5′s validation features. Thanks for reading!
Source:: Tutorialzine.com
By Syed Fazle Rahman From creating default Bootstrap 3 buttons to customising them using Less, this tutorial covers everything you should know about Bootstrap buttons. It also highlights how to create various different types of buttons without writing any CSS codes.
Source:: htmlxprs.com
By Sandeep Panda Meteor 1.0 is already out and everybody is talking about its reactiveness. In this article I will show you how to create a basic social news sharing app like Hacker News in 20 minutes with Meteor.
Source:: htmlxprs.com