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

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

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

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.

 

Understanding Z – Index Property in CSS Part 1

 

Understanding the Z-index

When we design an image in 3D software, we use three axis values to define its position: X-axis for its horizontal position, Y-axis for its vertical position, and Z-axis for its stacking position or depth in the space. Therefore, Z-axis value define that whether the object will remain at the bottom of depth in space, or on the top of the all objects, or in between the other objects.

No doubt, it is easy to enter these three axis related values in the graphical interface of 3D software, but translating them into the code of any web page or UI designs of mobile app is a daunting task in itself. However, visually computer screen displays only 2D images in real world, but their simulations using various visual techniques like creating objects with borders, background, and its shadows make illusion of third dimension, though it is never – in reality.

Thus, creating stacking orders of such virtual objects become a tricky job for any programmer, and in this series, we will try to understand them with enough code examples too.

Understanding Natural Stacking Order

When we refer simple term “Index” we mean to a list of items in an order begins from number 1 or A to infinite numbers or up to Z. In Index, 2 comes after 1, and 3 comes after 2, like the way.

Now, assume that we put such values in Z-axis of the graphics so object 2 will overlap the object 1 and object 3 will overlap both 1 and 2 objects. Reasons are obvious because we have placed number 2 after the number 1 and number 3 after the number 2 so their over lapping is natural, thus hiding the other objects on the computer screen.

In HTML web page if we don’t put any value in Z-axis or Z-index, there are certain natural factors determine the natural stacking order of the objects on the screen. Those factors are as following:

• Border and background of the element or object establishes the stacking context on the web page
• Objects with negative stacking contexts in order of appearance
• Block-level objects with non-positioned (and their children) and non-floated tags/values in order of appearance
• Elements/object with non-positioned (and their children)yet floated in order of appearance
• Elements or objects places as inline elements in order of appearance
• Elements or objects positioned (and their children) in order of appearance

Therefore, it is obvious that if HTML elements are in natural order of hierarchy that begins with root elements and reaching to children of children creating natural stacking orders and their natural elements like negative margins, borders, and background color as well as opacity. Thus, you can see natural stacking order of the elements without applying any Z-index.

Before diving in to the application of Z-index, I would like to clarify that the natural order in hierarchy can’t change the stacking order of the elements even with Z-index. For instance, root elements can’t come ahead of other elements and children never comes ahead of their parents.

Of course, there are many other rules and conditions may change or prohibit the Z-index functions, but we will explore them in-depth in next part of the series. Web developers at Lujayn are ready to serve you for your coding concept clarifications in broad interests.

 

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

 

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.

 

 

Assure a Successful Email Marketing Campaign Part 7

 

Responsive Email Designing

In previous part 6 of this series, we have explore the different types of email designing for your email marketing campaigns. Now, in this part, I would like to introduce you with the designing aspects of email designing and development process.

As per our discussions, in part 1 of this series, we will look at selective subjects of email designs such as responsive email designing, unique/custom designs, typography, content, CTA, etc. in these parts of series.

Mobile Friendly Email Designs

Recent statistics revealing one fact loudly that the mobile client devices are in higher numbers, which opens the emails in compare their big sister devices. This has affected vastly the email designing, for not only email campaign runners, or providers, but regular email providers like Gmail, Hotmail, Yahoo!, etc. too.

Now, if we talk about your custom email designing I would like to suggest you to go for fully responsive email designing. Unfortunately, it takes longer and bit costlier. Therefore, I am going to set some valuable guidelines for you to do mobile friendly email designing. In such designing, you need to focus on the layout much and its important considerations are:

• Keep email layout in single column design
• Keep width of layout ranging between 400-600px and 450px is ideal width. This way your layout won’t g wonky at all when it being resized on smartphones like tiny devices
• On mobile devices, readability of your email is a big issue. Therefore, you need to keep fonts size larger and according to mobile OS specifications. For instance, iOS needs minimum font size of 13px and something is similar for Android too. However, standard hierarchy for heading and body layouts should be kept well. For example, heading layout should have 30px size and body should have 20px.
• Hotspots/clickable area should finger tap friendly and isolated from other links with enough spaces
• Try to apply display:none tags for unwanted UI elements to de-clutter the layout.

Absolute Responsive Email Designing

At tech point of view fully responsive email programming involves media queries to display emails in desired look and feel. Unfortunately, none of big devices browsers and web mail clients are extending support for such media queries all the time from back to latest versions.

Hence, the job of email programmers becomes somewhat similar to coding responsive website. They have to make desktop email layout as a base version and give max-width queries to fix the tiny sizes of smartphone and tablets. Therefore, your two or three column layout will convert in a single column layout and would have enough resolution images to respond retina displays.

Unfortunately, Google is not thinking about its own kids and leave Gmail to non-supportive for media queries in Android. Thus, we have one more alternate design remains to get robust user experiences and that is fully fluid email designing.

Fluid Type Email Designing

Programmatically, this kind of email programming involves use of conditional comments (for Outlook) and media query (for Apple Mail) so we have same user experiences across the devices. At email designer point of views, we have to set layout with less than 600px and most possible in one or two columns with simple design and UI elements.

The down side of this type of fluid design is image width that is in percentage so we can’t create templates for them. Since modern email designing involves, minimalist approaches, thus they have least amount of images, content, and allied designs in order to improve the overall performance in downloading and interactions. This makes fluid design more favorite in contemporary market.

Fortunately, responsive web designers at Lujayn are experts in all sorts of email designing you might have highly cost-effective and robust email design for a successful email campaign.

 

Assure a Successful Email Marketing Campaign Part 4

 

Transactional Emails

In previous part 3 of this series, we have explore the newsletter types of email marketing and role of Lujayn to enable you to do it the most cost-effective ways. Now, in present part, I would like to address another most important email-marketing component, transactional emails so let’s check it out at a glance.

Generally, transactional emails are dispatching in response to the interactions made on a website or web application of a company or an e-commerce storefront and that relating to the financial activities. Therefore, Magento and other e-commerce platforms are offering in-built templates to shoot as auto generated emails of transaction type.

Transactional emails are providing relevant and highly contextual information such as an order confirmation or payment confirmation. In additions to these, they also serve to entice shoppers back or create reselling opportunities in marketing campaign if designed smartly. In practice, many brick-and-mortar businesses use this sort of email marketing giving links of “tripadvisor” or such review sites to enhance their traffic further.

Transaction Email Services at Lujayn

Since this type of emails are essential in most of the businesses and send in bulk with greater frequencies, Lujayn is extending its technical hands to lower the communication cost and reduce the overload on resources like creating and using SMPT infrastructure for your bespoken usage. We are making endeavors to eliminate cost and complexities involved in effective transactional email marketing campaign and its infrastructure with our expertise and experiences.

Transactional Email Designs at Lujayn

We classify our transactional email designs based on their purposes such as:

Regulatory or functional emails: Here we address the most basic functions of transactional emails like shooting billing notices, confirmation, sign-up process, password issues, order confirmation, shipping confirmation, shipping updates, etc.

Engagement emails: shooting notices based on the visitors’ actions like making comment, rating, reviews, tags or likes on social networking sites, product or sell inquiries, etc.

Commercial opportunity creating emails: it is true that transactional emails also offering some commercial opportunity creations such as abandoned cart notification may give reminding of the products that visitors had left, some brand related info, and some incentives offering on repurchase, etc.

Fortunately, our designers and coders know inside out of such transactional email designing and can address them carefully as well as in smart manners.

Lujayn Does the Best Integrations

It is true that the success of such transactional emails are depending on the flexible web and SMPT API plugin integrations as well as knowledge of various coding. Therefore, we often employ multiple development frameworks like CakePHP, CodeIgniter, Django, Node.js, ROR, Symphony with additional libraries and API needed for a successful and functional interactions through your transactional email marketing.

We insert the code of Event and Parse API’s to get details of statics of email campaign effectively. We also enable our patrons to post email content to a web application or a social networking site with a single click.

Lujayn Creates Best Transactional Email Templates

Since we are the creators of the best template engines using HTML5, CSS3, JavaScript, jQuery and other scripts in your transactional email templates. We enable our non-tech clients to edit such templates without diving into code base with simple graphical interfaces. We build RESTful APIs to make implementations easy and responsive with suitable layouts.

Lujayn Creates Secure Transactional Emails

Since many transactional emails consisting or vital and critical data of their shoppers, we use the best encryption methods available in the market. We make authentication private and secure by automating process. In order to do that we use secure cloud services for your email cloud hosting.

However, the importance of our live support is not less than.