Code Comments Hierarchy
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* #################################################### L E V E L - O N E #################################################### */ /* :::::::::::::::::::::::::::::::::::::::::::::::::::: Level - Two */ /* Level three */ |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!-- #################################################### L E V E L - O N E #################################################### --> <!-- :::::::::::::::::::::::::::::::::::::::::::::::::::: Level - Two --> <!-- Level three --> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* #################################################### L E V E L - O N E #################################################### */ /* :::::::::::::::::::::::::::::::::::::::::::::::::::: Level - Two */ // Level three |
Category: Code Snippets
Get URL parameter string – jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | var getUrlParameter = function getUrlParameter(sParam) { var sPageURL = decodeURIComponent(window.location.search.substring(1)), sURLVariables = sPageURL.split('&'), sParameterName, i; for (i = 0; i < sURLVariables.length; i++) { sParameterName = sURLVariables[i].split('='); if (sParameterName[0] === sParam) { return sParameterName[1] === undefined ? true : sParameterName[1]; } } }; And this is how you can use this function assuming the URL is, http://dummy.com/?technology=jquery&blog=jquerybyexample. var tech = getUrlParameter('technology'); var blog = getUrlParameter('blog'); |
Category: Code Snippets
Add class to body based on the URL – jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // find the pathname var urlPath = window.location.pathname; //convert to lowercase urlPath.match(/\/(.*?)(\+|$)/)[1].toLowerCase(); // remove the first character urlPath = urlPath.replace(/\//g, '-').slice(1); //remove file extension urlPath = urlPath.replace(/\.[^/.]+$/, ""); // add class to body $(document.body).addClass(urlPath); // If body has no class its propably the homepage $('body:not([class])').addClass('home'); |
Category: Code Snippets
Bootstrap 4 Media Queries Tiered Breakpoints [snippet]
Bootstrap 4 introduces a new breakpoint to the grid system XL. Below are the Bootstrap 4 media queries used for the grid system breakpoints for you to add to your projects CSS file to customize things. If you are new to the Bootstrap grid I wrote a post explaining how it works in this post…. Read more »
Category: Code Snippets
Bootstrap 4 Grid Flexbox Tutorial with Layout Examples
The most important element of any CSS framework is the grid system. The Bootstrap 4 grid system has been used on many websites worldwide which makes it extremely stable. This cross-browser support is why you probably are considering using Bootstrap for your website (it was for me). In this post I will provide an overview… Read more »
Category: Tutorials
How to Customize Bootstrap Colors
A common Bootstrap customization request is changing the default color scheme. You have a few options depending on how you are using Bootstrap in your project. Table of Contents 1. Link to CDN – Find and Replace Colors2. Compiling Source – Update Sass variables3. Hybrid – Use an Online Build Tool Like PaintStrap 1. Link to CDN… Read more »
Category: Tutorials
5 Common Problems Web Developer Beginners Face and How to Fix Them
When I began learning web design, I built websites using Adobe Dreamweaver because I could see a visual output of what I was building. This was familiar to me because I was used to designing in Illustrator and Photoshop. However, when the site wasn’t working I had no choice but to use the source code tab and… Read more »
Category: Articles
Yoast Breadcrumbs CSS Styles for WordPress Templates
The Yoast SEO plugin is great and offers a nice breadcrumbs snippet. Unfortunately, there is not an easy way to add a wrapper ID or class to the breadcrumbs for styling. Follow the steps below to change that.
Category: Code Snippets
7 Steps to Build a Website for Your Business
Table of Contents 1. Dream2. Plan3. Sketch4. Design5. Build6. Launch7. Promote 1. Dream This is the most challenging and the most fun step in the process. Here you can picture what your website looks like, how it works, what pages will be included, etc. Visit multiple websites and look at their navigation, pictures, colors, and… Read more »
Category: Articles
10 Things Every Etsy Shop Owner Should Have
Table of Contents Have you noticed a drop in your listing views on Etsy?Have you maximized your potential growth on Etsy? Have you noticed a drop in your listing views on Etsy? Competition on these marketplaces have made it extremely difficult to receive listing views and exposure of your products. Your listings might be perfectly… Read more »
Category: Articles