Constructs

Google Chrome is one of the most popular web browsers used today by many people on desktop and mobile devices. It is also the favorite web browser for many web developers because of the exceptional Chrome DevTools for development and debugging of websites. Danny Markov from Tutorialzine has written an excellent article highlighting 15 must-know Chrome DevTools tips and tricks for web developers. Some of the features I really like from the list are:

Go to line
Easily jump to any line in Sources tab file.

Use multiple carets & selection
It allows you to write in many places at once.

Pretty Print
Easily transform minified files to a human-readable format.

Force element state
Easily activate CSS states such as :hover to ease styling process.

View More

Performance of a website has become one of the most important ranking factor on Google as well as a sure way to keep visitors from leaving your website. This article goes in depth about optimizing the performance of WordPress websites. The author uses Google PageSpeed as his benchmark tool and elaborates every points in the benchmark results in a WordPress-relevant manner. Although this article only focuses on WordPress performance, the tips can also be applied in any kinds of websites in general. Hit the button to learn more.

View More

Although WordPress have an effective built-in comment management interface, there are several bulk tasks that are easier and quicker to do via plain SQL. This article shows you some super useful SQL queries to manage your WordPress comments more easily. With these basic SQL UPDATE and DELETE queries you can do things like deleting comments between two dates, disable comments on all posts at once and search and replace comment text just to name a few. Click the button below to learn more.

View More

A nicely written frontend coding guidelines covering some of HTML, CSS and JS best practices by Benjamin De Cock.

View More

Shade is a mathematically derived gradient explorer tool created by Brent Jackson that could be useful to frontend developers for quickly visualizing the kinds of gradient they have in mind. At the control panel section, you have the option to set base color via hex code and control the gradient spread by changing hue, saturation and lightness values using the slider controls. Shade will then auto-generate the CSS code based on the gradient settings like background-image: linear-gradient(-90deg, #FF0048, #30CFB2);. However, you don’t have control over the type of gradients and its directions. Hit the button below to try it out.

View More

If you are wondering how to improve your website ranking in search engines, try this 5 SEO Tips by Andreas Hecht from noupe.com.

Tip 1: Internal Links

A good internal linking is very important as it allows search engines to crawl the website better. A great example would be Wikipedia.

Tip 2: Improve Your Content

Make sure your website have the best, relevant and updated content. Test your content from different perspectives especially as a visitor looking for specific and straightforward information.

Tip 3: Enhance the Click Rate in the Search Results

Take advantage of search engine extra features to boost your visibility in the search results page such as using Google Rich Snippets to highlight your entry.

Tip 4: Enhance Interaction

Not only the click rates but also the bounce rate and the time spent on the site are relevant indicators. Both indicators can be improved by increasing user interaction with your website by having good navigation and content structure, picture gallery or videos.

Tip 5: Loading Performance – All You Need Is Speed

The faster the information is loaded, the higher the chance visitors will continue browsing sub pages of your website and search engine crawlers notice this too. Caching and compression are the most common solution. If you are running a high-traffic website, a top tiered hosting plan is also crucial.

Hit the button below to read more.

View More

Grid Displayer is a bookmarklet that can be used to the display grid systems on Bootstrap or Foundation based websites. Grid Displayer is designed and built by Antoine Lefeuvre. To install this bookmarklet, simply drag the Grid Displayer button to your bookmark bar and open any Bootstrap or Foundation based websites. Hit the button below to get the Grid Displayer.

View More

A very good article by Ivaylo Gerchev showcasing top 5 front-end frameworks for 2014 which are Bootstrap, Foundation, Semantic UI, Pure and UIkit. The most popular as everyone knows are Bootstrap and Foundation. Below is the comparison table for both front-end framework. For a closer and more technical look at Bootstrap vs Foundation comparison, check out this article.

At the end of the article Ivaylo also added an informative little guideline on the things to consider when choosing a framework to work with. Hit the button below to see the full comparison.

View More

If you are tired of hard-refreshing your website every time you make CSS updates on your server, ProtoTool will come in handy for you. ProtoTool is a front-end development tool in the form of Google Chrome extension created by Vaclovas Vičius. With ProtoTool, you can see CSS changes take place in real time once you have configured it to read from the domain you are working on. Other ProTool features are:

• Auto reloads your CSS/SCSS files
• Create pixel perfect layouts with “Pixel perfect mode”
• Media query view
• Grid line toggling (under development)
• Difference mode

View More