9lessons Programming Blog - Tutorials about Angular, ReactJS, PHP, MySQL and Web Development
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Sunday, October 09, 2022

React Removing Unused CSS and Obfuscate JavaScript in Post Build Process

This is continues of my previous post about how to remove unused CSS and convert unclear JavaScript to protect your source code in the post-build process. If you are using CSS libraries like Bootstrap, Tailwind CSS, etc.. and sometimes multiple frameworks. But your application components are not using all of the styles and it adds more weight to the application performance. This post will explain how to configure the React post-build process to remove unused CSS and hidden JavaScript files that enhance the application security and definitely improve the app loading time and save the overall bandwidth cost.

React Removing Unused CSS and Obfuscate JavaScript

Thursday, October 06, 2022

Angular Removing Unused CSS and Obfuscate JavaScript in Post Build Process

Nowadays most applications are developed based on large CSS libraries like Bootstrap, Tailwind CSS, etc.. and sometimes multiple frameworks. But your application components are not using all of the styles and it adds more weight to the application performance. This post will explain the Angular post-build process to remove unused CSS and hidden JavaScript files that enhance the application security and definitely improve the app loading time and save the overall bandwidth cost.

Angular Removing Unused CSS and Obfuscate JavaScript

Wednesday, July 20, 2016

Ad Blocker Detector for Google Adsense with JavaScript

Advertisements are very important for any post published in internet. This is what decides the person’s revenue. But, recently adblocker system is killing revenue of the publisher because of which it also effects the creativity of that person. Today, I am providing a simple new solution for those depressed and effected persons of adblocking system. Here is a simple javascript to be included along with your website code to either hide the content of your website or show a pop-up or alert message to remove the viewers adblock plugin. Any blogger or any website management can use this code to improve your revenue of your website. This code is mainly designed for Google Adsense.

Ad Blocker Detector for Blogger with JavaScript

Tuesday, November 03, 2015

Twitter Heart Button CSS3 Animation

Today twitter has been introduced a new heart (like) button, it is actually a replacement for favorite button. I love the way twitter has implemented cool animation effect for click action. This post will explain you, how to implement this using CSS3 and Jquery. Read my previous post Facebook Like System with Jquery, MySQL and PHP, you will understand more about Like System database design and ajax functionality. Take a quick look at the live demo and click the hearts.


Sunday, January 25, 2015

Google Materialize a Responsive HTML5 Framework

Materialize is a Responsive CSS Framework based on Google’s Material Design Concepts. Materialize aims to bring material design to web which was initially made by Google for Android. In this tutorial I will explain what material design is and then we will build a blog home page using Materialize.

What is Design Language?
A design language(or design vocabulary) is an style that guides the design of a complement of products. Designers wishing to give their suite of products a unique but consistent look and feel define a design language for it, which can describe choices for design aspects such as materials, color schemes, shapes, patterns, textures, or layouts.

Detect Shake in Phone using Jquery

Sunday, November 02, 2014

iOS Style Switch Button using CSS3 and Jquery.

I said earlier the mobile revolution has been started, now time to build mobile web application for your web projects. Many third party platforms like Apache Cordova and Phonegap are offering that you can convert web application into native mobile application. This tutorial will help you how to design iOS style switch button component using HTML, CSS and Jquery. Specially I love CSS :before and :after pseudo-elements, this helps you to minimize the HTML code.

Facebook Style Notification Popup using CSS and Jquery.

Thursday, September 11, 2014

Facebook Style Notification Popup using CSS and Jquery.

Are you looking for Facebook UI features, this post will explain you how to create a Facebook style notifications popup using Jquery, HTML and CSS, you will understand how CSS elements will helps to improve better web design. This is the most needed feature for social networking web projects to minimize and enrich the UX elements. Just few lines of code implement these concepts in your next project, take a quick look at this live demo.

Facebook Style Notification Popup using CSS and Jquery.

Tuesday, April 02, 2013

HTML5 Template Design for Blog.

This is right time to adopt HTML5 semantic markup tags into your website design. W3C has conducted a study of over billion websites and found that the most of common div IDs and classes are footer, header, menu, content, title and nav. HTML5 semantic markup elements that can convey the purpose of the element to developers, browser and search spider algorithms.

HTML5 Template Design for Blog.

Sunday, December 30, 2012

Responsive Web Design for Menu, Image and Advertisements

This post is the continuation of my previous Responsive Web Design using CSS3. I had explained how to design a basic responsive web page using CSS3 and Modernizr for lower version browsers. In this post we want to explain how to design responsive collapsed navigation menu, images and advertisements grids for different media devices.

Responsive Web Design using CSS3
Tuesday, December 11, 2012

Responsive Web Design using CSS3

Smartphone revolution brings new features to the web development, it is time to change your website design into a responsive design instead of maintaining a separate mobile version . Responsive design will automatically adjust itself based on the screen size of the media devices. This post explain you how to use CSS 3 @media property and working with Internet Explorer using Modernizr.

Responsive Web Design using CSS3
Sunday, August 12, 2012

Facebook Wall Script 5.0

Very Long days back I released a commercial script called Wall Script 4.0, It is a rich Jquery, PHP, MySQL application and collaboration of 9lessons blog tutorials. After many requests I’m releasing Wall Script 5.0 with extra features like friend relations, user authentication, news feed with existing Wall Script 4.0 features and implemented latest Jquery plugins Don't miss the video demo. Thanks

Facebook Wall Script
Wednesday, July 11, 2012

ECommerce Menu Design with JSON Data.

Now the right time to build an online selling portal, people started believing online shopping for buying things. This tutorial helps you to to speed up the most important product category navigation menu system for your ecommerce projects. I had implemented Amazon style menu with category image using PHP, MYSQL andj JQuery.

Menu Design with JSON Data.
Wednesday, June 20, 2012

Simple Drop Down Menu with Jquery and CSS

This post is very basic level Jquery and CSS implementation. I want to explain how to design simple drop down menu  with CSS, HTML and Jquery. This system helps you to minimise the menus list. Just take a quick look at this post very few lines of code, use it and enrich your web projects. 

Drop Down Menu with Jquery and CSS
Wednesday, June 06, 2012

Facebook Style Dynamic Timeline for Wall Script.

Few months back I had posted any article about Facebook New Timeline Design HTML version using CSS and Jquery, after that I received many requests from wall script users and readers that asked to me how to convert this into dynamic with PHP and MySQL. This is an update for Wall Script 4.0 users to convert the user updates into timeline data visualization just take a look at the this live demo with multiple actions like scrolling results, commenting, updating, expanding and delete.

Facebook Style Dynamic Timeline for Wall Script.
Wednesday, May 23, 2012

Gravatar Login Box Design with Jquery, CSS and PHP.

I had designed a simple interesting login box with contains Gravatar image, just importing user avatar from Gravatar.com based on email ID.  This post is very basic level CSS implementation and few lines of Jquery and PHP code. I hope this login box design  gives special flavor to to your web project. Before trying this live demo upload your avatar at Gravatar.

Gravatar Login Box Design with Jquery, CSS and PHP.
Monday, March 19, 2012

Bootstrap Tutorial for Blog Design.

Bootstrap is a toolkit, which is developed by the Twitter team. This actually helps you to develop web applications much faster.Bootstrap contains CSS and Javascript files using which you can enrich your web page with Grids, Layouts, Typography, Tables, Forms, Navigation, Alerts etc,. This avoids cross browser compatibility problem. This time I am aiming to explain how to design a template of the basic fluid blog for different resolutions and devices like iPad and iPhone.
.

Bootstrap Tutorial
Monday, January 30, 2012

Facebook Timeline Design using JQuery and CSS.

I know what my readers are expecting from 9lessons blog, after long time I'm going to discuss about Jquery usage. Facebook timeline design makes big revolution in social networking world and it gives new feel to the user profile pages. In this post I want to explain how simple I had implemented this design with Jquery and CSS. Try this demo with modern browsers like Chrome, Firefox and Safari (IE is dead).

Facebook Timeline Design using  JQuery and CSS.
Monday, January 09, 2012

Jquery AnchorCloud Expanding Link Plugin.

Introducing a new jQuery AnchorCloud Link Identifier plugin, This helps make better and enrich link expanding system for your web content pages. This plugin developed using yahoo query language(YQL) for extracting website content like page title and description. First version supports we included Youtube and Vimeo, next release we are planning to include some more popular video and photo services.

jquery Anchor Cloud expanding links plugin
Monday, October 17, 2011

How to Create a Jquery Plugin

This post is explains how easy you can built a jQuery plugin, we made a simple plugin called LinkColor. It makes your website anchor links so colourful and pretty beautiful, Just few line of code and very simple to use. Follow the eight steps and learn how to create your own jquery plugin. Take a look the live demo. Thanks!

Jquery Link Color plugin
Monday, October 10, 2011

Facebook Wall Script 4.0 Release

Introducing the Wall Script 4.0 commercial edition, a rich wall updating script and it’s a collaboration of 9lessons blog tutorials and some Jquery plugins. We added and improved many new features like instant photo uploads , webcam snap, more button, collapsed comments, expanding urls and delete update animations. Don't miss the video demo. Thanks!

Facebook Wall Script 4.0
mailxengine Youtueb channel
Make in India
X