Tag Archives: HTML

Intro with Lesser-Known but Brilliant Apps for Web Developers Part 2

In previous part 1, we have explored some cool lesser-known tools for CSS and HTML users in particular. Now, in this part, we may have some more robust helping hands for various purposes to ease the life of the web developer community.

CodeKit – Steroid for Web Developers

This application is exclusively build for Mac users and it eases the lives of SASS or LESS lovers along with many numerous scripts such as JavaScript, Stylus, CoffeScript, Typescript, Jade, etc.

It does nothing but compiles the files of SASS or LESS like scripts on the go, optimize them along with your projects images and reload the live page in browser window as readymade product.

 

XRAY – To See Through

During web development, we need to inspect elements frequently and opening browser’s  tool in a separate window hindrance our speed, if element is small and need quick info in code in particular. Therefore, this little bookmark-let XRAY allows us to interrogate a page to look at the box model info in DOM for a particular selected element. You will get all information regarding to the element’s position in DOM and its basic style such as IDs/Classes. This may quick your workflow and cut your mistakes in web programming.

 

Code Anywhere – Multiplatform Cloud Editor

It is true that majority of web programmers or mobile programmers use desktop as their primary code editing device. However, in recent mobile and cloud era, we have to perform many emergencies while we are on the go, whether in bus, train, car or waiting for commuting. In such cases, we have either laptop, tablet or a smartphone in hand and we need some flecks in the code of our patrons in urgency.

Code Anywhere is especially build for platform and device agnostic coding using available browser. It lets you edit your files from underlying services such as FTP, Dropbox, GiitHub, etc. using impeccable tools in your browser in a collaborative manner. It supports wide range of web formats such as HTML, PHP, CSS, JavaScript, XML, etc. so the lives of web developers become quite easy with Code Anywhere.

 

JSFiddle – To Create JS, HTML, CSS, etc.

Many time web programmers are in hurry and wish to see quick results of their code in real-time. Thus, JSFiddle gives them opportunities to get such playground. You have enough alternatives there like JSBin ofr JavaScript optimization, Dabblet for CSS building and SQL Fiddle for prototyping data schema.

There are many tools we miss here, which are known or lesser known like Basecamp for project management, Plagiarism checkers, etc. If you are interested in and need more help, you can contact the web development team of Lujayn any time and from anywhere.

 

Advertisements

Keep Track Of Stacking Contexts and Orders in CSS Using Z-Index

 

Usage of Z-index
Usage of Z-index

Since we have basic understandings of the concepts of Z-index in previous series, we know how to implement them in creative ways in modern responsive web designing. In CSS, we have different contexts in form of different sets of elements. Thus, we can arrange their stacking orders in relative to their own sets of contextual elements. In this post, I would like to mention something more than CSS alone like JavaScript and SASS or LESS.

Z-index for Dynamic Elements

JavaScript is use for dynamic purposes and Z-index can apply dynamically in JavaScript syntax, which is somewhat similar in format. In JavaScript Z-index properties, you have ot use “camel casing” instead of hyphenated CSS properties. Thus, your “z-index” will become “zIndex”. For instance, look at the code example below:

var myElement = document.getElementById("gold_box"); myElement.style.position = "relative"; myElement.style.zIndex = "9";

Z-index for Sassy Elements

Today in cloud computing age, we are highly depending on SASS or LESS and the syntax of SASS is quite simple for stacking orders. They are call SASS list like:

$elements: project-covers, sorting-bar, modals, navigation;

Here the order of elements are deciding the stacking order in the appearance of the elements. In simple words, from lowest to highest z-index assign to each element in the order. For instance, in above example “project-cover” element will return “z-index: 1” and “navigation” would “z-index: 4”.

It is true that this simplification in order pave ways to add any element in between the other elements and z-index of all elements would automatically updated according to their new orders. For example, if we want to add user-tooltip just after the project-cover element, we simply have to add that class “.user-tooltip” in the SASS order in following ways.

$elements: project-covers, user-tooltip, sorting-bar, modals, navigation;

Thus, entire syntax would be:

.project-cover {
z-index: 1;
}
.user-tooltip {
z-index: 2;
}
.sorting-bar {
z-index: 3;
}
.modal {
z-index: 4;
}
.navigation {
z-index: 5;
}

Fortunately, we can go for many complex layouts using multiple contexts and stacking orders. This is possible due to possibilities to create a new stacking order for each stacking context by giving any children of the element a stacking order specific to its parents. For sake of better understanding, lets add children elements to the one of the main element of the list “modals” in following way.

$elements: project-covers, user-tooltip, sorting-bar, modals, navigation;

$modal-elements: fields, form-controls, errors, autocomplete-dropdown;

Therefore, resulting z-index would generate following ways in compiler:

.modal {
z-index: 4;
}
.modal .field {
z-index: 1;
}
.modal .form-controls {
z-index: 2;
}
.modal .error {
z-index: 3;
}
.modal .autocomplete-dropdown {
z-index: 4;
}

Thus, using hard-core values for z-index like 999 or 99999 may prove fatal in CSS so stacking order creation in SASS may prove beneficial for long-term integrity and collaboration if we save the above SASS file as “_zindex.scss” and call these global orders in your specific CSS files as per needs.

Show Creativity with Z-Index

There are many practical implementations of z-index properties of CSS such as:

  • In case of overlapping tabbed navigation
  • For CSS Tooltips
  • For light box
  • For drop-down menu
  • In photo gallery effects
  • In layered layout enhancements
  • For fancy social bookmarking boxes
  • To create perfect full page background image
  • And in many more innovative ways

Expert web programmers at Lujayn know how to go creatively using latest CSS technologies like z-index to create 3D effects dynamically.

 

 

Understanding Z – Index Property in CSS Part 2

In part 1 of this series, we have get some fundamental understanding of Z-index concept and about natural stacking order in software programming. I would like to clarify that z-index is only applicable where position properties exist otherwise the element without position property will render first and will remain at the bottom of staking order even though it is top in HTML hierarchy.

Stacking order without Z-index
Stacking order without Z-index

For instance, in above image, we have taken DIV elements in their natural order in HTML like from DIV #1 to DIV #5. In this example Div #1 to Div #4 are appearing in natural HTML stacking order though they don’t have rendered any Z-index in below example code. Whereas Div #5 is seating at the bottom/behind the stacking order because it doesn’t have any position property allocated.

div {
font: 12px Arial;
}
span.bold { font-weight: bold; }
#normdiv {
height: 70px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv1 {
opacity: 0.7;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv2 {
opacity: 0.7;
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#absdiv1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#absdiv2 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
</style></head>
<body>
<br /><br />
<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
</div>
<div id="reldiv1">
<br /><span class="bold">DIV #2</span>
<br />position: relative;
</div>
<div id="reldiv2">
<br /><span class="bold">DIV #3</span>
<br />position: relative;
</div>
<div id="absdiv2">
<br /><span class="bold">DIV #4</span>
<br />position: absolute;
</div>
<div id="normdiv">
<br /><span class="bold">DIV #5</span>
<br />no positioning
</div>

 

Stacking order with Z-index
Stacking order with Z-index

Now, if we apply z-index to each Div element and try to change their natural stacking orders in our customized ways, we would have definite success when the Div element has position property applied before. Otherwise, as in case of Div #5 it will remain at the bottom of visual hierarchy even though it has z-index 8, and at the top in HTML code hierarchy.

This becomes obvious in the example below.

div {
opacity: 0.7;
font: 12px Arial;
}
span.bold { font-weight: bold; }
#normdiv {
z-index: 8;
height: 70px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv1 {
z-index: 3;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv2 {
z-index: 2;
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#absdiv1 {
z-index: 5;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#absdiv2 {
z-index: 1;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
</style></head>
<body>
<br /><br />
<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
<br />z-index: 5;
</div>
<div id="reldiv1">
<br /><span class="bold">DIV #2</span>
<br />position: relative;
<br />z-index: 3;
</div>
<div id="reldiv2">
<br /><span class="bold">DIV #3</span>
<br />position: relative;
<br />z-index: 2;
</div>
<div id="absdiv2">
<br /><span class="bold">DIV #4</span>
<br />position: absolute;
<br />z-index: 1;
</div>
<div id="normdiv">
<br /><span class="bold">DIV #5</span>
<br />no positioning
<br />z-index: 8;
</div>

Therefore, web developers at Lujayn has concluded that z-index will work only when an element has a position property explicitly set to absolute, relative, or fixed.

 

Intro with Lesser-Known but Brilliant Apps for Web Developers Part 1

 

Brilliant Apps for Web Developers
Brilliant Apps for Web Developers

We as web developer community use some standard and essential web development tools in our day-to-day workflow. For instance, IDE, programming software according to the technological specifications, debuggers, analytic software, etc.

These are well-known and highly used tools among the web developers of all ages. Since, our web development is becoming more intricate, due to increased demands from clients, quality credentials, speed, and numbers of technologies entering in the market every day. In such conditions, we need additional helps from the some advanced and lesser-known tools. Therefore, in this series I am going to mention such tools in brief.

CSS3 Click Chart for CSS Lovers

CSS is essential part of our web programming and keeping CSS code compact is must condition for rapid development. In order to keep CSS code compact, we need to write them in short forms keeping their attributes’ order intake. If you can’t remember the order of CSS attributes, this CSS3 Click Chart is very handy tool to get live code examples of CSS3 syntax according to the attributes you have selected. You can find trendy attributes along with all common ones.

Patternizer for Awesome Code-based Patterns

With augmentation of responsive designing using HTML, CSS, and JavaScript, we can’t rely on the images to create designing patterns on our multiple devices canvases. No doubt, it is daunting task to create code base patterns each time from the scratch. Therefore, Patternizer will surely help you to obtain tiny script in (.js) JavaScript format that may let you create infinitive options in your pattern designs on your website. Patternizer may let you be creative with its GUI and get instant code to place on element.

Sprite Box to Improve Performance

Web developers know one fact obviously that frequent client-server requests cost us in delayed downloading of web pages and interactions. Images are taking big chunk of processing powers and requests in frequencies. Therefore, preparing sprites for UI elements and important images reduce the numbers of images to download and numbers of request to the server in return.

Of course, coding for small and simple project for sprite making is easy, but managing big projects make web programmers sweating. Therefore, Sprite Box has made WYSIWG tools to define/generating sprite classes and IDs based on your uploaded images to create sprites. You can line up your graphics perfectly.

This WYSIWG tool let you to align areas of a sprite image based on the background position properties of CSS using combination of jQuery and HTML5.

Primer for Rapid CSS Creation

We have seen that many web programmers among the web development community who used to write markup first and then create CSS on later stage. Primer is the ideal tool for them. What you have to do is just paste your HTML code in a window and press prime it button. You will have blank CSS code based on the classes and IDS you have used in your markup. Copy them and fill the blanks with your desired styling parameters in those empty CSS nodes. You will have functional CSS files quickly and accurately without syntax mistakes.

There are many other tools out to help you to be productive just like the web development team at Lujayn does. Of course, we will see about them in the next part of this short series.

 

 

How to Create and Combine Images for CSS Sprite

We are hard-pressed to make performance optimization our priority whether we are web developer or mobile developer. We need to code HTML and CSS carefully measuring every step of coding by its ensue. Web performance optimization experts are always cling to reduce the interactions between client-server at any cost.

If you dig their data you will find that apart from initial HTML page requests, the most of HTTP requests are made for image/content loading and UI elements loading. Here we can’t eliminate individual and unique images from HTTP requests, but we can think about the small images as frequently and regularly occurring UI elements as well as those images, which are appearing on all pages as theme might be included as our targets to reduce the HTTP request hence improve the page loading performance.

This is in fact, not a big rocket science. If we can combine all small images/UI elements or theme elements in one single large image and optimize them using latest Photoshop techniques, we can do great job to eliminate all HTTP request against this single one. Another benefit is that we can reduce the overall KBs for all images downloading if we go for only one. This technique is calling CSS Sprite in web development community.

However, we can’t implement CSS sprite technique for all sort of images, but icons and button images which are need to change frequently in order to show interactions and dynamism on the web page i.e., on-off status. For instance you want to show one button that is in “On” position before the visitor click it and in “Off” position if visitor has accomplished the clicking action.

single_button
single_button.png

In such conditions, we have almost identical images of these two status so if we place these two images either in vertically or horizontally aligned and make one combine image, we have to shoot only one HTTP request instead two. Well now, question is that how we can make two different calls for two different images with a single image.

Good question, here CSS properties of X, Y positions help us to determine that which image will show when and we can accomplish this by creating two separate functions for both individual image display. In simple words if we want to show “On” status we have to create a div class “On” and another div class “Off”. See below.

<div class=”On”> </div>

<div class=”Off”> </div>

Now, let’s define the functions for these classes such a way that they display our single combine image in two different X, or Y positions in terms of pixels here. But before that you have to do some graphics work in Photoshop or alike tool and set two status of the same button measuring their pixels/spaces.

For instance, if we have both status of button in same size, say 100px we have to create a combine image of 200px and call it single_button.png. Either in horizontal direction (X)or in vertical direction (Y). here we have taken horizontal direction.

Our next step would be code/define two separate functions for two different status. Therefore, the first function would be On function for On class in following ways.

.On {width:100px; height:100px;

Background:url (images/single_button.png) 0 0px; }

This function simply returns the image positioned on the starting point at top and the starting point at the left.

.On {width:100px; height:100px;

Background:url (images/single_button.png) -100 0px; }

This function simply returns the image positioned on the starting point at top and the 100px away in right side direction.

Isn’t it easy?