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



How to Install Chrome Extensions in Opera

Yesterday I published an article talking about Why I use Google Chrome, I talked about how it’s able to sync all my date across multiple devices, it’s simple UI, and how Chrome’s extensions help me be more productive and do my work quicker.

But I know a lot of you dislike Chrome for one reason or another, and want to use other browsers like Opera. Well today I have a special extension for you Opera users out there who want to have best of both worlds. Using Opera and being able to install Chrome extensions.

Read more