Collective #442

Original Source:


Inspirational Website of the Week: ARCHE68

A fantastic exploration of shape, layout, motion and typography. Our pick this week.

Get inspired


Our Sponsor
Pramp – Free front-end interview practice

Can you ace an interview? Make sure you can. Pramp, a peer-2-peer mock interviews platform allows you to practice on-demand.

Practice for FREE



Varun Vachhar’s collection of experiments made with Matt DesLauriers’ canvas-sketch library.

Check it out


Practical CSS Scroll Snapping

Max Kohler shows how to use CSS scroll snapping in a set of useful examples.

Read it



A tool that checks an array of URLs for liveness. By Travis Fischer.

Check it out



A great library that makes use of CSS variables for animating text, grids, and more.

Check it out


Free Font: Space Grotesk

Based on Colophon’s “Space Mono” typeface, Florian Karsten created this beautiful Grotesk font with 5 weights.

Get it


The Stroboscopic Effect: Illusions on the Web

Dan Wilson’s third article in an amazing series on recreating optical illusions for the web.

Read it


Introducing CSS Values and Units Level 4

Read all about the First Public Working Draft of CSS Values and Units Level 4 with all its new additions.

Check it out


Chromatic Aberration Effect

A great hover effect demo by Robin Delaporte.

Check it out


Dweb: Building a Resilient Web with WebTorrent

As part of an article series on open source projects for a decentralized web, Feross Aboukhadijeh explains WebTorrent, the first torrent client that works in the browser.

Read it


How to Build A Simple Camera Component

A tutorial by David East where you’ll learn to code a camera component.

Read it


Water Paint

A lovely aquarelle effect based on this tutorial.

Check it out


Deep Learning World

Organized, useful resources for Deep Learning researchers and developers.

Check it out


Experimental Layouts with CSS Shapes and clip-path

Michelle Barker explores some possibilities for experimental layouts using CSS Shapes.

Read it


Simple Interactive Pie Chart with CSS Variables and Houdini Magic

An article by Ana Tudor where she dissects an interesting technique for building an interactive pie chart.

Read it


Everything You Need To Know About Alignment In Flexbox

Rachel Andrews takes a look at the alignment properties, and how they work with Flexbox.

Read it


Gradient Icons

A set of 100 free icons with beautiful gradient coloring from RoundIcons.

Get it


WebAssembly: How and why

Milica Mihajlija’s short crash course on WebAssembly and why you’d want to use it.

Read it


Font Shaming

A sobering collection of the most popular fonts used by the greatest startups from ProductHunt.

Check it out

Collective #442 was written by Pedro Botelho and published on Codrops.

SEMrush Review: Complete Digital Marketing Toolkit?

Original Source:

This SEMrush review discusses everything you need to know about the solution- it’s primary features and functionalities, plus pricing and overall usability. And to help you further, I’ll also throw in SEMrush’s weak points.

Search engine optimization is not the easiest thing right now. Getting noticed by Google takes a considerable amount of resources, time and persistent efforts

That’s why a good rank is always refreshingly satisfying. Breaking through to the first page of the search results alone places you in the category of sites attracting 75% of the organic clicks. And if you’re good enough for the first spot, the result is essentially 33% of the clicks.

It almost feels like winning the lottery, right?

But, let’s be honest here. Deep down you know that making it to that position is not the end game.

Maintaining it is even harder since competition at the highest levels is usually extremely fierce. You might go to bed as the leader, then rise up in the morning to find your site a couple of spots behind.

To make matters worse, Google is not dependable when it comes to conserving the status quo. Just when you think you’ve got it all figured out, a simple algorithm update might be enough to kick your site into oblivion. And probably even blacklist it.

We’ve all been there. And many actually recognize the possibility of backsliding. That’s why, as a matter of fact, 72% of business leaders believe that their enterprises will be vulnerable to threats emanating from digital market disruptions in the next three years.

Think that fear is a bit too familiar? In other words, do you think you have what it takes to effectively wage war against your competitors?

I tell you what. I know the feeling. So, I’ll cut to the chase here and walk you through a tool that’s predominantly leveraged for SEO and competitor intelligence.

But first, what is it all about?

SEMrush Review: Overview

Ask me about keyword research, and I’ll give you a list of tools optimized for it.

Switch to SEO site audit, and I’ll still mention multiple solutions off the top of my head.

Curious about playing dirty too? Well, I can also introduce you to a couple of web-based competitor intelligence services that give relatively accurate insights.

And so forth.

Now, we’ve barely scratched the surface here. By the time we’re halfway done, you’ll have integrated several third-party tools into your site. And there’s no problem with that. Apart from the obvious fact that it’ll be pretty cumbersome switching between them to coordinate your entire digital marketing strategy.

So, guess what? How about combining all these channels into one comprehensive suite?

Well, that’s how they came up with SEMrush in 2008.  With the concept of placing everything under one roof.


Quite simply, SEMrush is a powerful digital marketing suite that merges social media marketing, SERP, keyword research and implementation, backlinking, content marketing, paid ad campaigns, PPC, and SEO- to support streamlined marketing through one central dashboard.

All things considered, SEMrush is particularly known for helping its users go beyond their standard jurisdictions, into their competitors’ territories.

And what’s the point?

Well, get this. By granting insight into your competitors’ digital marketing strategies, SEMrush essentially facilitates counter-strategies from a vantage point.

Such provisions have seen this toolkit grow exponentially over the years, to host more than a million regular users.

By the end of 2016, in fact, SEMrush had expanded its reach to more than 160 million keyword databases in the US alone, 70 million in Canada, 95 million in Australia, 80 million in the UK, 45 million more in India, just to mention but a few.

Now that, admittedly, sounds impressive, to say the least. But, does SEMrush live up to user expectations? How much can it support your digital marketing efforts?

Well, let’s find out.

This SEMrush review discusses everything you need to know about the solution- it’s primary features and functionalities, plus pricing and overall usability. And to help you further, I’ll also throw in SEMrush’s weak points.

SEMrush Review: Features
Dynamic SEO

Confused about the best keywords to optimize for Google?

Well, it turns out that SEMrush provides organic research to help site owners establish the golden keywords that will get you that highest possible ranking.

For the best possible results, keyword assessment is based on several critical parameters. Some of the primary ones include competitive density, CPC, search volume, traffic, and overall trends.

Fair enough, but keyword optimization is only a small part of the whole SEO framework. The rest involves technical elements like page loading speeds and link-building.

That’s why, thankfully, SEMrush extends its features to offer a complete site audit on all SEO technicalities.

How, you ask?

Basically, its engine crawls through your site to analyze things like page loading speeds, hreflang attributes, AMP issues, images, HTTPS implementation, content, etc. Any errors that would affect your ranking are then identified for prompt resolution.

Consider duplicate content or broken images, for instance. Normally, it would be difficult to notice such discrepancies. But, SEMrush is capable of detecting even some of the smallest issues that might be hurting your overall ranking.

And speaking of ranking, SEMrush also comes provides a handy position tracking function. It closely monitors your site’s position across all search engine platforms, including Google’s local search versions. Consequently, even the slightest shifts in SERPs are identified quickly, to help you implement a counter strategy in good time.

Now hang on a minute. What counter strategies are we talking about here?

Well, all these insights are extremely valuable. But there’s one problem. They are as good as dead if you can’t figure out the most effectual response strategies. And that always boils down to your SEO expertise.

But, guess what? Instead of leaving it at the error-detection stage, SEMrush also proceeds to handle the heavy lifting for you. It provides helpful suggestions to improve your site’s SERP according to Google’s current algorithm set up.

Paid Ads Insight

By now, we pretty much acknowledge that organic search drives Google SERP.

But, make no mistake. That shouldn’t be the basis for dismissing paid ads. In fact, here’s the deal- PPC leads have 50% higher chances of buying something compared to organic visitors. That’s why businesses are now generating an average of $2 ROI for every $1 spent on Adwords.

Quite promising, but that’s just the average. So, of course, it’s possible to achieve even better returns. But you’ll need to eliminate all the possible errors in your ad framework.

It’s common, for instance, to see inappropriately placed PPC keywords competing against each other. To resolve such a problem, SEMrush provides a PPC keyword tool to identify and remove negative keywords, in addition to refining the entire keyword list.

When it comes to drafting the precise paid ads, SEMrush also comes in handy with its Ad Builder.  It makes the whole process much easier by not only capitalizing on your rivals’ ad templates, but also supporting dynamic keyword insertion for optimal ad relevancy.

Content Optimization

Have you ever invested heavily in content, hoping for the best, and then managed to acquire only a handful of leads? Have you ever been so discouraged by the results that you started believing that content marketing is a bit overhyped?

Well, the fact is content is still king. It’s three times as effective as paid search, and generates 200% more leads than outbound marketing. Most importantly, it forms the foundation for search engine ranking.

So, it makes sense that SEMrush attempts to go beyond keyword research here. To further sharpen your content marketing, the service helps you identify exactly what your target audience is interested in through its topic research function.

To top it off, SEMrush additionally comes with brand monitoring to inform the subsequent content distribution strategy.

Social Media Tracking

In essence, we can’t discuss digital marketing without mentioning social media.

Now, it turns out SEMrush has also engineered tools that delve into the deep stuff. Using just likes and comments to judge results is so last year. So, its tracker scans extensively for profound critical analysis.

You can track the relevant hashtags across Google+, Twitter, and Facebook, discover the principal content types preferred by your target audiences, follow up on all the social media data through PDF reports, plus keep an eye on third-party social media marketers handling your enterprise’s channels.

Come to think of it, however, you might not even need a third-party marketer. SEMrush’s social media poster might be an adequate alternative for a standard small business. It basically automates the posting process, allowing you to queue and schedule posts, curate content, and post to multiple platforms simultaneously.

And to establish the best practices, SEMrush acts as a window to your rivals’ social media methodologies. You get to learn about their posting patterns, top-performing posts, and their corresponding successes across the chief platforms.

Competitive Intelligence

Ok, we’ve mentioned a couple of helpful features for tracking competitors on different channels. But, they only add up to a fraction of SEMrush’s overall competitive intelligence capability.

To get collect comprehensive information about your enemies, you have to be equipped for the Bond-level of spying. That’s how the bulk of the leading brands have been able to remain dominant in the first place. As a matter of fact, 90% of the Fortune 500 companies actively engage extensive competitive intelligence.

That said, SEMrush provides data on your rivals’ SERP, organic keywords, SEO progress, social media marketing strategies, and content efficacy. Through traffic analytics, you can further establish your competitors’ traffic sources, compare traffic response patterns to the corresponding marketing tactics, plus weigh your site against its primary opponents, as you review the respective key metrics.


And you know what? You can also track your paid search competition through SEMrush’s advertising research. I was able to follow my rivals’ ad trends, establish mobile and desktop keywords they’ve been leveraging, plus monitor their top results, overall expenditure, and individual PPC tactics.

SEMrush Review: Pricing

The type and level of functions you’re able to adopt, overall, depends on your specific subscription package. And to cater to different types of users, SEMrush has structured its packages and their corresponding prices in line with the expected usage scales- from freelancers to enterprises.

For starters, you can take advantage of the free-trial offer. Unfortunately, it’s only applicable for 14 days, you’re essentially limited to SEMrush Pro.

Then comes the four fundamental packages:

Pro- For startups and freelancers with a limited budget. Costs $99.95 per month, or $999.40 per year for annual prepay subscribers.

5 scheduled PDF reports
Standard features
Crawls through 100,000 web pages
Tracks up to 500 keywords
5 projects
3,000 daily reports
10,000 results per report

Guru- For developing marketing firms plus small and medium enterprises. Costs $199.95 per month, or $1999.40 per year for annual prepay subscribers.

Branded PDF reports
All Pro features
Standard features
Historical data
20 scheduled PDF reports
Crawls through 300,000 web pages
Tracks up to 1500 keywords
50 projects
5,000 daily reports
30,000 results per report

Business- For enterprises with a large web presence, e-commerce projects, and large agencies. Costs $399.95 per month, or $3999.40 per year for annual prepay subscribers.

Product listing ads
All Guru features
Standard features
Historical data
Branded PDF reports
50 scheduled PDF reports
Crawls through 1,000,000 web pages
Tracks up to 5,000 keywords
200 projects
10,000 daily reports
50,000 results per report

Enterprise offers flexible features to large organizations with extensive needs. Its price is negotiable.

Unlimited site crawling
Standard features
On-site training
Custom keyword databases
Custom limits

Who Should Consider Using SEMrush?

Before we settle this, let’s look at what you might not like about SEMrush.

As you’ve probably noticed from the pricing strategy, cheap is not a word you’d use to describe SEMrush. $100 per month, for instance, is considerably costly for startups and freelancers.

But, I guess you could also argue that it’s reasonably priced if we compared it with the alternative option of adopting numerous tools from different providers.

Now, while combining all these functionalities streamlines your overall marketing strategy, here’s the kicker. Learning the ropes as a beginner is not as simple as it sounds. Only experienced marketers are able to leverage the tools effortlessly right off the bat.

And then, here’s an issue I didn’t quite pick up, but many experienced users have raised it on multiple platforms. That SEMrush’s data might have some discrepancies here and there. But that’s a rare occurrence it seems.

That said, SEMrush is best suited for digital marketers. But don’t let that stop you from giving it a try. You can still leverage it as a freelancer or business owner.

The post SEMrush Review: Complete Digital Marketing Toolkit? appeared first on Inspired Magazine.

Visualize & Debug Website’s Accessibility with Tota11y

Original Source:

A free toolkit for checking your website’s accessibility problems along with providing recommendations.

The post Visualize & Debug Website’s Accessibility with Tota11y appeared first on…

Visit for full content.

Create a leather material in Substance Designer

Original Source:

Although there are plenty of pre-made free textures around, if you want a specific material to use in your 3D art, it isn't that difficult to make your own. In this article, I'll show you how to create a simple leather material (shown above) using Substance Designer. You can watch a time-lapse of my process below, or read on for a step-by-step guide. 

When you have to create materials using nodes, like you can do in Substance Designer, Blender and other software, my pro tip is to keep a clean work environment in order to have control over all the elements of the material. So try to avoid overlapping elements and so on.

01. Add nodes

For this type of material, select the Physically Based (Metallic/Roughness) Graph Template and delete the Metallic output, since it isn’t necessary here. 

Now add these nodes from the Substance Designer library: the Cells 3 and BnW Spots 1 noises (these two are the main elements of the material), the Height to Normal World Units filter, four Levels filters, a Blend filter and, last but not least, the Gradient Map filter.

02. Link the elements

Now we can start to link these elements. Start by placing the Cells 3 at the beginning of the graph with the BnW Spots 1. These two generators will be linked to the first two Levels filters, and linked together with the Blend filter. 

Link the Levels filter of the Cells 3 generator to the Height to Normal World Units filter, the third Levels filter and the fourth Levels filter. The Height to Normal World Units filter will be linked to the Normal output, the third Levels to the Roughness output and the fourth to the Height output. Finally, connect the Blend filter with the Gradient Map, and this one directly to the Base Color output. 

03. Adjust parameters

Once you've finished linking every element of the scene, it's time to fix some of the parameters. In particular we need to fix the first two Levels filters of the substance: the first is linked to the Cells 3 generator and must be adjusted in order to increase the brightness of the texture, and the second generator (linked to the BnW Spots 1 noises) must be adjusted in order to decrease the contrast of the texture. 

For the other parameters of the Levels filters choose arbitrarily – but as always I suggest you don’t exaggerate. 

The latest element to fix is the Gradient Map. This filter is probably one of the most important; in fact it can help to give colour to the material. For this project I created a shade of red, but this element, like the others, can be changed as you prefer.

This article was originally published in 3D World, the world's best-selling magazine for CG artists. Buy issue 236 or subscribe.

Read more:

Create a tiles material in Substance DesignerSubstance Designer 5.5 reviewCreating convincing 3D materials

Collective #443

Original Source:


This content is sponsored via Syndicate Ads
Reinvest Your Time with HelloSign API

G2 Crowd says HelloSign’s API is 2x faster to implement than any other eSign provider. What are you going to do with all the time you save? Try it free today!

Try it free


A Native Lazy Load for the Web Platform

Learn about the new Chrome feature “Blink LazyLoad” in this article by Ben Schwarz.

Read it


Designing For Micro-Moments

An in-depth article with examples on how to optimally design for micro-moments. By Suzanne Scacca.

Read it


Puppeteer’ing in Firebase & Google Cloud Functions

Eric Bidelman shows how it is possible to run Puppeteer and headless Chrome in Google Cloud.

Read it


Getting Started with React – An Overview and Walkthrough

Tania Rascia gives an easy to understand overview of React.

Read it



A new concurrent key-value store designed for point lookups and heavy updates by Microsoft.

Check it out


Time-saving CSS techniques to create responsive images

Some quick solutions for responsive images by Adrien Zaganelli.

Read it


Matrix Theme JavaScript Webcam Face Filter

A tutorial by Xavier Bourry on how to create a great Matrix webcam filter.

Read it


Nano ID

A tiny, secure, URL-friendly, unique string ID generator for JavaScript.

Check it out


Web Payments, Payment Request API and Google Pay

Eiji Kitamura explains the differences between Web Payments, Payment Request API, and Google Pay.

Read it


Experimenting With CSS Variable / Custom Property DOM Inheritance

Ben Nadel experiments with CSS Custom Properties and shows how scoping and inheritance work.

Read it


Puppeteer Recorder

Puppeteer recorder is a Chrome extension that records your browser interactions and generates a Puppeteer script.

Check it out


Perlin Noise

Victor Vergara created this fantastic configurable Perlin Noise demo.

Check it out


Building Battleship in CSS

Daniel Schulz shares an interesting experiment of creating the Battleship game in CSS.

Read it


Capitalist: Food & Drinks Icon Set

A free gastronomic icon set in various formats by Pixelbuddha.

Get it


CSS Box Dog

An adorable animated dog illustration in CSS based on Tony Babel’s Dribbble shot.

Check it out



A free app for managing finances.

Check it out


Open Source Universal User Registration System

An open source project for building a React Apollo registration system.

Check it out


Checkbox vs Toggle Switch

Saadia Minhas shows some practical use cases of form design.

Read it


Git Tutor

With Git Tutor you can generate step-by-step markdown tutorials from your git history. By Andrei Volchenko.

Check it out

Collective #443 was written by Pedro Botelho and published on Codrops.

93% Off: Get the Film Director Essentials Bundle for Only $19

Original Source:

A director is the chief person, who is responsible for the creative aspects of the project. He/she is in charge of bringing a story to life. Being a film director is a fulfilling career path. But just like any other career, it is filled with challenges. If you’ve been wanting to direct your own movie, […]

The post 93% Off: Get the Film Director Essentials Bundle for Only $19 appeared first on

10 Free Infographic Templates for Web Designers

Original Source:

Whether you’re writing an article, sprucing up a webpage or giving a presentation, an infographic is a great inclusion. Visual content breaks up the monotony of text, making readers more engaged and interested.

However, creating stylish infographics can be pretty time-intensive. If you’re short on time and need to give a client a presentation, creating a chart of analytics for your personal use, or simply would rather use a pre-made template, these free graphics are easy to download and edit!

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets


15 Free Infographic Templates by Hubspot

15 Free Infographic Templates by Hubspot

These 15 infographics are packed with color and personality. Designed for PowerPoint, you also get five templates for Adobe Illustrator as well. There are timelines, data charts and all sorts of interesting designs. To get them, you’ll need to fill out a short form about your company, but the download is entirely free.

50+ Editable Infographic Templates

50+ Editable Infographic Templates

If you want to check out a huge package of templates, curated for multiple kinds of job fields, take a look at these infographics. There are charts for marketing, science, food and much more. You can either download them as PDF files or edit them in Edraw’s diagram-creating program.



Canva is an online graphic design tool, and the go-to for many artists. There are thousands of infographic templates to choose from – all unique, beautiful, and easy to edit. However, you’ll need to use Canva’s tool to work with these templates. You can export the results later, but if you prefer to work in your own program of choice, try a downloadable template. Canva’s licensing can also get messy, so make sure to do your research.



PresentationGo is a library for free PowerPoint resources, infographics among them. These templates are simple but effectively and cleverly designed. You can sort by color or by tags, and the templates are fully editable – even the shapes within them. Copyright is “free with attribution”, so remember to credit the website!



This freemium website has plenty of free infographics available for download. Created by both the website and its community, the templates are mostly vectors. Adobe Illustrator users will enjoy using Freepik. You’re limited to five downloads a day as a free user, and you must credit the author and Freepik. If you’re looking for variety, this is the place to find it.



Vecteezy is a vector resource site with over 100,000 vectors. There are premium graphics here, but thousands of free vectors available as well. Vecteezy has its own vector editor, so you can tweak an image before downloading if you want to!



A graphics and presentation editing software, the free version of Visme comes with a limited but stunning array of templates. You can either work in the online editor, or download it as a PowerPoint, HTML, PDF or PNG file. Some of these preserve the functionality while others do not.

17 Infographic Resume Designs

17 Infographic Resume Designs

Trying to stand out with your resume? These infographic designs can help you put together something eye-catching. But if you want to get creative, do some tweaking and use these simplistic, beautiful templates for anything!

How to Make an Infographic in PowerPoint? Free Infographic Template

How to Make an Infographic in PowerPoint? Free Infographic Template

If you’re new to infographic making and need to learn the ropes, this tutorial comes with a free template for you to practice with! And you can of course use this template in your other projects. It’s full of useful graphs.

Create Beautiful Presentations

With the right template, you can wow visitors and get across your information clearly. Everyone loves viewing infographics – just the extra visual element can make facts a lot easier to read and retain. So, go ahead and pick your favorite and getting started making a fun and engaging presentation!

Security Essentials for Site Developers and Admins

Original Source:

Of all tech topics, security is possibly the most complex, and certainly the most important. This is because security is always evolving. It is a forced evolution, as we must adapt to constantly emerging threats.

There are various levels of security that we’ll have responsibility for. The first level is ourselves or the organization we work for. The second level is our clients. And the third level is the users of the websites or applications we develop for our clients.

Despite our best efforts, clients will always find ways to undermine the protections we provide for them. They rely on us as IT professionals to help them stay safe, but paradoxically also rarely follow the safety advice we provide them with. Most users really are their own worst enemies.

What we need to do, then, is make it as difficult as possible for clients to compromise their own security, while also making it as easy as we can for them to do the tasks they need to do. Achieving both goals to perfection may be impossible, but in this article we’ll cover some things you can do to cut down the risks of a security breach occurring.

gif by Patswerk

Protecting your own devices and data

You are the first line of defense for yourself and your clients. If your systems are compromised, then everyone you work for could be at risk. Here are some recommendations for the minimums you can do to avoid operating in an increased risk environment:

Use a secure desktop operating system. This is the single most basic upgrade you could make, if you’re not already using a secure operating system. The most secure operating systems are Linux, Unix, and BSD. You should be using one of these operating systems as your primary desktop operating system.
The bonus for both developers and administrators is you get access to a much larger library of free development and security tools, and most of them work better than their Windows or OSX equivalents. To really operate in paranoid mode, choose the more secure Linux distros such as Parrot, Qubes, and Tails.
Maintain separation between the operating system and your data. If you’re running Linux or Unix, this is easy. You simply make sure that you have created a partition or separate hard disk to host your home partition on. Then all user files will survive any number of operating system installations, and as a bonus can be accessed from multiple operating systems on multi-boot systems.
Use a journaling file system to help prevent data loss if your system crashes or is halted unexpectedly.
Mirror your home partition. Regularly back up important files and use file versioning to avoid unintentional overwrites.
Consider using cloud backup (not to be confused with cloud sync, which is nowhere near as safe and secure as a genuine backup). Sensitive data should be encrypted before being uploaded.
Keep your system up to date, never ignoring security patches. Systems that use rolling updates have the advantage that you’ll always know when patches are available, what needs patching, and why.
Train people within your organization to be alert to social engineering methods that may be used against them to gain access to your systems.
Avoid running software from unverified sources. When downloading software from trusted sources, verify file signatures to be certain you have an authentic copy.
Maintain the physical security of your computers, especially when traveling. Carrying your laptop everywhere may not be practical, but it’s better than letting some evil maid corrupt your BIOS. If it’s really not an option to carry your computer, lock it up in a lockable case and secure that case in a safe or otherwise as best you can.
Always remember it’s better to be paranoid than to be an idiot who got hacked.

illustration by Phantom Points Creative

Protecting clients

Keeping clients safe from IT threats is difficult, because they don’t all understand the scale of the threat they face. Many will also have the view that if their site is compromised, then it’s your problem to sort out, not theirs.

Many sites have been exploited for years without the site owners being aware of it, because most malicious attacks against sites are not supposed to let their presence be known. You therefore can’t rely on the clients to inform you of problems. You’ll need to take a proactive approach.

Try to educate your clients about the risks. Most of the problem is due to ignorance that there is any risk to be on guard against.
Inform corporate clients that the greatest threat they will face is insider threats created by their own employees and contractors (often inadvertant, but not always so). Also make sure they’re aware of problems like social engineering, shoulder surfing, and dumpster diving.
Keep servers patched. Perform regular backups.
Scan for evidence of back door exploits or other malicious activity. Designing the file and folder structure for the site to be as simple as possible will help make detection easier. Know which files should be in each folder. If you see new files that are not familiar or seem to have computer generated names, that’s a serious red flag.
Know what files should be in the cgi-bin folder (for most sites, that will be no files), because this is a favorite location for stashing malicious programs.
Periodically check the htaccess file to make sure it hasn’t been tampered with.
Code that you write is unlikely to make extensive use of encoding and decoding strings, or to contain heavily encrypted content. If PHP files contain unusual code, it’s not very likely that those are legitimate files. Unusual character encoding instructions are also a giveaway. It’s not likely that your legitimate files will be encoded in Windows-1251 encoding, for example.
After confirming a breach, change your passwords. Check file permissions are set correctly for all files and folders. Monitor signs the intruder has returned. Even after changing your password, the attackers may have a way in. You’ll need to be sure they don’t. Set your server to inform you by email when any changes are made to the server.
Help your users choose passwords appropriately by explaining the rules to them in a way they can understand. This is how most people like to set their passwords: 

jenny23This is how system administrators usually advise them to set their passwords:


n@^2z`jGAnd the problem is the first password can be cracked in seconds, while the second password can be cracked in a few hours. Also there is no hope whatsoever that the user will remember the more complex password. Here’s an example of a password that would take several lifetimes to crack and could never be forgotten:


Ialwaysfly@40,000feetCharacteristics of the above password include: Over 20 characters in length, mix of upper and lowercase characters, includes both numbers and letters, includes non-alphanumeric characters, easily memorable. A similar example might be:




asImove^inlife,Iwillnever4getwhereIstartedThere’s really no limit to how creative you can get with passwords, and there is so much more advantage with

asImove^inlife,Iwillnever4getwhereIstarted compared to n@^2z`jG. The first example (41 mixed characters) would take until the end of time to crack and is easy to remember, while the second example (8 mixed characters) can be cracked in under six hours and is almost impossible to remember.Don’t think you can just string words together and everything will be fine, because the hackers are onto that. You still need to mix cases and use non-alphanumeric characters, but certainly length is more important than complexity as things stand now. Combining both gives you an edge over those who use only one or the other.

Most dictionary based attacks focus on English because it’s the most widely used language and most of the best sites to target (in terms of the value of what they can yield) are sites managed by people who speak English. If you know another language, use it when creating your passwords.

As excellent as 

asImove^inlife,Iwillnever4getwhereIstarted is, it’s still not as perfect as aMedidaQue^enLaVida,nuncaolivdarededondecomence because this adds yet another layer of complexity, forcing the cracker to resort to brute force.Learning another language just to create better passwords may be a bit much, so the other thing you could do is just become (or stay) really bad at English when you design a passphrase. For example:



For the ultimate, you could use badly spelled foreign language words and replace all the vowels with Leet vowels: 


I don’t know about you, but I wouldn’t have the patience to type that. Still, it is a very secure password, and forces the cracker to do an insane amount of work (to hopefully then discover that all they’ve accessed is a collection of cat pictures).
Make sure clients understand the dangers inherent in sending sensitive information by email, Skype, etc.

gif by Hoang Nguyen

A special note for developers

A quick and easy cultural shift for developers to adopt that would prevent countless security breaches each year is simply to minimize the external dependency chain of their sites. We are needlessly connecting to third party hosted scripts. Many of these scripts may have their own external dependencies. All for the sake of saving a few bytes.

Whenever possible, we should try to host all our scripts ourselves. A popular third party hosted script is a tempting target for an attacker, because by gaining control over the script, it is possible to run exploits on thousands of computers.

Concluding remarks

Computer security is a never ending challenge, and there is big money to be made on both sides of the challenge. The stakes are very high, and no one is completely safe, even those who believe they have nothing to hide. Winning is mostly a matter of using common sense and staying alert, never allowing yourself to become complacent.

header image courtesy of Josh Warren

The post Security Essentials for Site Developers and Admins appeared first on Inspired Magazine.

81% Off: Get The Ultimate Home Improvement Software Bundle for Only $19.99

Original Source:

Being a homeowner has always been a part of the American dream. According to studies, 80% of millennials want to buy their own home. One of the benefits of homeownership is having the freedom to decorate your space. You can make improvements in your home without getting approval from your landlord. Get ready to step […]

The post 81% Off: Get The Ultimate Home Improvement Software Bundle for Only $19.99 appeared first on

Easy and Responsive Modern CSS Grid Layout

Original Source:

In this article, I’ll show how to create a responsive modern CSS Grid layout, demonstrating how to use fallback code for old browsers, how to add CSS Grid progressively, and how to restructure the layout in small devices and center elements using the alignment properties.

In a previous article we explored four different techniques for easily building responsive grid layouts. That article was written back in 2014 — before CSS Grid was available — so in this tutorial, we’ll be using a similar HTML structure but with modern CSS Grid layout.

Throughout this tutorial, we’ll create a demo with a basic layout using floats and then enhance it with CSS Grid. We’ll demonstrate many useful utilities such as centering elements, spanning items, and easily changing the layout on small devices by redefining grid areas and using media queries. You can find the code in this pen:

See the Pen css-grid-example4 by SitePoint (@SitePoint) on CodePen.

Before we dive into creating our responsive grid demo, let’s first introduce CSS Grid.

CSS Grid is a powerful 2-dimensional system that was added to most modern browsers in 2017. It has dramatically changed the way we’re creating HTML layouts. Grid Layout allows us to create grid structures in CSS and not HTML.

CSS Grid is supported in most modern browsers except for IE11, which supports an older version of the standard that could give a few issues. You can use to check for support.

A Grid Layout has a parent container with the display property set to grid or inline-grid. The child elements of the container are grid items which are implicitly positioned thanks to a powerful Grid algorithm. You can also apply different classes to control the placement, dimensions, position and other aspects of the items.

Let’s start with a basic HTML page. Create an HTML file and add the following content:

<h2>CSS Grid Layout Example</h2>

<!–… –>

Copyright 2018

We use HTML semantics to define the header, sidebar, main and footer sections of our page. In the main section, we add a set of items using the <article> tag. <article> is an HTML5 semantic tag that could be used for wrapping independent and self-contained content. A single page could have any number of <article> tags.

This is a screen shot of the page at this stage:

The basic HTML layout so far

Next, let’s add basic CSS styling. Add a <style> tag in the head of the document and add the following styles:

body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
“Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”,
“Fira Sans”, “Droid Sans”, “Helvetica Neue”,

header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;

aside {
color: #fff;
border-style: solid;
float: left;
width: 6.3rem;

footer {
color: #fff;
border-style: solid;
clear: both;

main {
float: right;
width: calc(100% – 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);

main > article {
background: hsl(240, 100%, 50%);
background-image: url(‘’);
color: hsl(240, 0%, 100%);
border-width: 5px;

This is a small demonstration page, so we’ll style tags directly to aid readability rather than applying class naming systems.

We use floats to position the sidebar to the left and the main section to the right and we set the width of the sidebar to a fixed 6.3rem width. Then we calculate and set the remaining width for the main section using the CSS calc() function. The main section contains a gallery of items organized as vertical blocks.

A gallery of items organized as vertical blocks

The layout is not perfect. For example, the sidebar does not have the same height as the main content section. There are various CSS techniques to solve the problems but most are hacks or workarounds. Since this layout is a fallback for Grid, it will be seen by a rapidly diminishing number of users. The fallback is usable and good enough.

The latest versions of Chrome, Firefox, Edge, Opera and Safari have support for CSS Grid, so that means if your visitors are using these browsers you don’t need to worry about providing a fallback. Also you need to account for evergreen browsers. The latest versions of Chrome, Firefox, Edge, and Safari are evergreen browsers. That is, they automatically update themselves silently without prompting the user. To ensure your layout works in every browser, you can start with a default float-based fallback then use progressive enhancement techniques to apply a modern Grid layout. Those with older browsers will not receive an identical experience but it will be good enough.

The post Easy and Responsive Modern CSS Grid Layout appeared first on SitePoint.