Carefully Packaged Information on Web Design & Development
Concepts, JavaScript, PHP, Tutorials & Guides
Implementing Tree Shaking for FontAwesome
Implementing Tree Shaking for FontAwesome Article Featured Image

Tree Shaking is the process of stripping out parts of libraries that you’re not actually using in your applications in order to optimize the file size of your build. In this short tutorial I’m going to apply it to CSS and a WOFF2 file, but you can use the same technique for other types of files as well; e.g.: JS files.

Continue reading…
JavaScript, Tutorials & Guides
How To Move the Cursor Inside an Input
How To Move the Cursor Inside an Input Article Featured Image

I’ve hit this problem when I was working on a @mentioning system for a chat I’m developing at work. When the user selected a mentionee from the results, I needed to insert that user in the input at the current cursor / caret position.

Continue reading…
Concepts, Tutorials & Guides
Another Method to Protect Against Web Scrapers
Another Method to Protect Against Web Scrapers Article Featured Image

It’s common practice for people to use Web scraping (copying) to fetch the content of other sites in order to reuse the information. Sometimes this is well intended, for example, when people curate only the best of the best of the content from multiple sites. There’s also the case of news aggregators that combine news from multiple sites to provide their users with a complete list of news.

Continue reading…
Hacking, Tools
How To Programmatically Download VideoJS Files
How To Programmatically Download VideoJS Files Article Featured Image

Someone came up to me recently with the task of downloading a few video files hosted via OpenLoad. The files belonged to them, and OpenLoad has an API designed for this, but I didn’t find out about it until it was too late.

Nevertheless, the process of programmatically (headless) downloading files loaded with VideoJS, as is the case for OpenLoad, is pretty interesting, so I thought I should share my approach.

Continue reading…
Tools, Tutorials & Guides
How To Automatically Deploy Your PHP Apps
How To Automatically Deploy Your PHP Apps Article Featured Image

A typical developing environment includes versioning the application with Git, so how does one get the project into production without logging into the server every time to pull the new code, refresh the cache, compile the assets, and so on?! This seems like a bad idea to do every time you want to deploy something into production. In this article, we’re going to talk about a tool called PHP Deployer, which allows us to create a script that will do all that, and more, for us.

Continue reading…

Tutorials & Guides
How to Create a Pull Request
How to Create a Pull Request Article Featured Image

A pull request is a way of contributing to a Git project as a 3rd party. If you’ve found a bug or a way to improve something in an open-source project, you can use this to submit (commit) your changes to be reviewed by the moderators of that repo. The moderators have the ability to accept your changes and add them to their project, reject them, or alter and then accept them.

Continue reading…

Tools
Testing APIs with Postman
Testing APIs with Postman Article Featured Image

If you’ve ever worked on a real-world app or website before, you’ve probably had to use APIs. And if you did, you know how cumbersome testing them can be, because you have to set up your way for creating requests, manage tokens, and so on, before actually doing any of the real work. So you’re basically spending time building a shadow dev environment which you’ll throw away after you’re done testing anyway. What if you told you that there’s a better way? The Postman way. Continue reading…

Hacking, Tutorials & Guides
Hacking Electron Apps: How To Restyle the New Skype
Hacking Electron Apps: How To Restyle the New Skype Article Featured Image

If you don’t know what Electron is, it’s a wrapper of Chromium which allows you to develop desktop applications using Web technologies like HTML, CSS, and JavaScript. It’s been largely adopted by big companies in the last few years because it allows developers to use these very common technologies to develop desktop apps and because it provides multi-platform support out of the box. It works as an extension of Node.js and it’s open-sourced, meaning that anybody can use it.

Continue reading…

Concepts
Introduction to APIs and REST
Introduction to APIs and REST Article Featured Image

APIs allow us to leverage a 3rd party’s computing power and features, programmatically. In simple terms, we send some input data to a certain endpoint and receive a processed result back. An API can provide us with a variety of possibilities, from simple text processing to building out entire websites. This is the standard way of creating a communication channel between us and a 3rd party. In this article, we’re going to learn what an API is and how to use them.

Continue reading…

Concepts
Content Placeholders: A Way to Style Waiting Time
Content Placeholders: A Way to Style Waiting Time Article Featured Image

You’ve probably seen by now applications and websites that use content placeholders before the actual content loads. These are simple mockups of the content that’s going to be displayed. Implementing this technique lets a user know what to expect, it makes your page appear more ‘reliable’ because it removes sizing glitches that happen when the content doesn’t load instantly, and, also, it replaces the boring loading screens. Some people refer to this as “Skeleton CSS.”

Continue reading…