How to Protect WordPress Login Page

Protect WordPress Login Page

Being the number one1 CMS in the world, websites running WordPress are a great target for hackers who want to take control of other people’s websites. Hackers will ask for a ransom, sell personal information that belongs to the site’s owner/s and it’s users, distribute malware, send spam or simply, to eliminate competitors.

One very popular way of getting administrative access to a WordPress site is by attacking the login page.

Thy name is wp-login.php.

We all know it and you should know that everyone knows it. Hackers will use it since it’s the gateway to your site and you should do your best to Protect your WordPress Login Page.

Using a technique called Brute Force Attack, hackers take advantage of a few weak points that come with every WordPress installation. You should harden those weak points as soon as possible to keep intruders outside and your site safe and protected.

In this tutorial, you will learn How to Protect WordPress Login Page from Brute Force Attack

Read more


How to Remove Border-Radius from Twitter

Remove Border-Radius from Twitter

Over at Twitter headquarters in San Francisco back in June 2017, Grace Kim, the VP of Design + Research @ Twitter published a blog post letting people know how Twitter is moving to a more round shaped design for Twitter profile images, Buttons, and the Tweet box, etc…

Not a lot of people are happy about this new design let me tell you.

I am personally not a big fan of the rounded design either. As you can see from the designs of News47ell, I enjoy a design with no radius, for example, Pinboard & Instapaper.

Read more


How to View the Source Code of a Google Chrome Extension

View Source Code Google Chrome Extension

While writing my previous article about How to Create a Google Chrome Extension, I wanted to make my example easy, so people could learn from it. A Google Chrome extension that isn’t complex, but it has a little bit of everything. So I picked the Extension That’s Pretty Good1

If you’ve ever downloaded a .CRX file locally on your browser and then attempted to open it via a text-editor like Atom by Github, you would notice that you can only see gibberish.

Read more


How to Create a Google Chrome Extension

Create Google Chrome Extension

After I learned how to create site specific WordPress plugin, I created many plugins for my site with functions ranging from changing the logo to a custom SVG logo, adding a randomized tagline, to hosting Google fonts locally and much more.

Now, I thought it was the right time to learn how to create something else for a platform that I use daily and that platform is my browser, Google Chrome.

Today, I will teach you how to create Google Chrome extension.

I’m sure everyone reading this article with Google Chrome has at least one extension installed. It’s no secret that extensions are useful to users who want to block ads, enhance Reddit browsing experience, manage Google Chrome extensions in quickly, analyze a website’s security header or check what fonts sites are using.

With a library that contains 50,870 extensions, there’s something for everyone. And today, it’s your turn to learn the basics of creating a Google Chrome extension.

Read more


Turn Atom into the Best Markdown Editor for Mac

Best Markdown Editor Mac

I’ve been writing in Markdown since the day I learned about it back in, only God knows when. Since then, my main writing tool on my macOS was Sublime Text but for the last month or so, things have changed. I moved to Atom by Github and today, I am going to tell you how to turn Atom into the Best Markdown Editor for macOS.

If you’ve been reading my recent articles, I mentioned in two of them Sublime Text as an example app to use for code editing. From now on, this will change, instead, I will recommend Atom by Github because it’s free, open source and you can customize it any way you want through packages and themes.

For those of you who use Editorial app on iOS for writing like I do, these Atom packages that I mention below should make the experience really similar.

Let’s Take a Look at How to Turn Atom into the Best Markdown Editor for Mac.

Read more



How to Host Google Fonts Locally in WordPress

How to Host Google Fonts Locally

One issue I encountered while trying to achieve a high score in GTmetrix was in regards to Google fonts and how I injected them into my site directly using Google fonts CDN. The only way to solve it was to learn How to Host Google Fonts Locally.

Most people are familiar with Google fonts. For those who don’t, here’s how I describe it:

It’s a big, free and awesome library of fonts which you can use as your heart desire. It’s managed by Google and served from the domains fonts.gstatic.com fonts.googleapis.com

Read more


How to Create Site Specific WordPress Plugin

Site Specific WordPress Plugin

I‘ve been silently doing a lot of minor and medium size changes to News47ell since the redesign. With those changes, I had to find a way to keep my code as organized as possible so that I can understand it when I go back to it later along the road. Because I use WordPress, I decided to convert all my code into Site Specific WordPress Plugin.

Each plugin does a specific thing on the site and it includes a PHP file, JS file & CSS file. They are all served from my server over at Lightning Base so I can reduce the number of HTTP requests required to render the page.

Read more


How to Implement Prism Syntax Highlighter into WordPress

PrisimJS Featured Image

If you want to display code blocks on your WordPress site in a beautiful and unique way then you arrived at the right place because in this tutorial I will teach you how to implement Prism syntax highlighter into WordPress.

As a regular CSS-Tricks reader, I’ve always wondered how Chris display code blocks in his site in this unique way. A bit of research and I discovered that he uses PrismJS.

Read more


How to Add Custom CSS to WordPress

How to Add Custom CSS to Wordpress

Today I will tell you How to Add Custom CSS to WordPress. Something I had to learn while redesigning this site. And I will tell you where you need to add your shiny new customs CSS.

WordPress themes already come with style.css file which you can add extra CSS to and change the old one, but when the theme receive an update, all the changes will be lost. You can use a child theme’s style.css file and do @import but you shouldn’t, and you need to avoid it.

How to Add Custom CSS to WordPress

Jetpack have a Custom CSS module which comes with code revision, it’s simple and works well. And last but not least, there’s Tom Usborne’s Simple CSS Plugin that include CSS editor in the Customizer so you can live preview your changes and Metabox for page/post specific CSS.
But I wanted more, I was really thirsty for a plugin with more features.

So I put my backpack and started my journey trying to find the perfect plugin in the land of repo, a land so far away, with a population of 46,074 plugins.

After spending days in this land, trying plugin after another, I finally found the perfect one, it has the basic feature, a place for your Custom CSS code, and a ton of extra features that you never think you need until you see them and try them yourself.

Here’s my Simple Custom CSS and JS Review:

Read more