Posts

HTML minifier module for Nodejs

HTML minification is a process involving striping off unneeded, abundant or otherwise unused HTML attributes and elements without affecting the webpage appearance. minification is useful for statically genetated 'serverless' web application webpages as it delivers easy to digest minimal webpages html-minifier is free and open-source npm nodejs module written in JavaScript for minifying HTML documents, as compared to similar nodejs html minification modules html-minifier proves to be pretty fast, flexible and efficient html-minifier module can be used to minify HTML code programmatically or alternatively you can minify HTML code using global commandline module Npm module Installation To install module in your terminal type npm i html-minifier To install commandline version of html-minifier in your terminal type npm i -g html-minifier usage: html-minifier [options] [files...] options: --remove-comments Strip HTML comments --remove-empty-attributes Remove all attri

Open-graph meta data tags introdution

Open-graph elements are meta tags that contain extra meta data of a webpage open-graph is used by Facebook to create website cards for urls shared on it's platform  cards contain website image thumbnail and as well as title, description, type and url open-graph meta tags have a property attribute containing a property prefixed by "og:" For example; <meta property="og:image"  content="image-url">

Solutions to blocked URLs on Facebook

Facebook allows sharing links on it's platform but in order to protect it's users from accessing URLs containing malicious content Facebook on a regular scraps content on shared URLs effectively raising an alarm if content shared goes against Facebook community standards or in short it's content is forbidden on the Facebook platform, Forbidden content may include potentially malicious crafted phishing websites or websites spreading malware among others Facebook may as well ban content flagged spam either reported or flagged by Facebook moderating algorithm "Facebook sheriff" You wouldn't want to find your website 'spam-list handed' you should avoid that There's no way to redeem a website flagged as a blocked website on Facebook except other non viable alternates such as completely changing your domain or using another sub-domain Facebook may as well ban content containing banned URLs in the meta open graph attributes To resolve open-graph sha

How to remove null elements from array in JavaScript

Every now and then arrays normally tend to have null or otherwise empty elements Array filter is a specialized JavaScript function for filtering array elements found to be matching a given criteria for example; const arr = ['max', 'duke'] In order to remove duke from elements of the array you can do it as follows; arr.filter(name => (name == 'duke' ? false : true)) // returns ['max'] You can filter empty and false elements as well, using a similar syntax as done above; const arr = ['max', null, 'duke'] arr.filter(name => name) // ['max', 'duke']

How to strip out html using regular expression in JavaScript

Regular expression isn't a very viable solution for manipulating html due to the complexity of html syntax in the browser it's recommended to create dom elements, appending html source code and then manipulating it using built-in dom querySelectors that has few drawbacks especially for environments without a dom take for instance nodejs You can use regular expression replace function as; const str = "<b>John swana</b>" str.replace(/(<([^>]+)>)/ig, "") // John swana And that's it

Es6 new features summarized round up

Escmascript es2017 or better known as es16 is the edition after the famously popular es15, In this edition there are only two new additional features the exponention operator and Array.prototype.includes() function exponention operator ** Operator is a short hand method used for raising numbers to their power Its syntax is similar to native operators such as '+' Addition and '-' (minus) for subtraction Example usage Initially to raise a number to the power you would need to use math library pow function as; Math.pow({number}, {factor}) Since es2017 you can simplify the operation above down to simply as; {number} ** {factor} Example as; 5 ** 2 // Giving you 25 Array.prototype.includes () Array includes is a feature similar to a pre existing function array.indexof() as compared to array.indexof() array.includes() function notably returns a true  boolean on matched value, and false if value not matched Examples on how to use 'array.includes ()' funct

unused css rules tree shaking elimination nodejs

Unused css rules elimination process is a lot more like tree shaking done by JavaScript bundlers for instance if you're familiar with how webpack eliminates dead code as a result tree shaking generates a much smaller bundle with only essential code Purifycss is a nodejs npm open source package that eliminates unused css You can use purifycss to remove excess css from libraries such as bootstrap, materal design lite to name a few, Installation You can get "purify-css" npm package from the package manager by typing in your terminal; npm i purify-css To install globally add -g flag; npm i -g purify-css Basic example usage; You can use css purify global cli package as; Syntax; purifycss {css} {html} Important flags; -m minify output -o specify output file name For example; purifycss *.css *.html -o css.min.css Output containg minified css rules will get saved to css.min.css

what is 'array.includes' function in JavaScript

Array includes is a feature introduced in JavaScript es16 or es2017 it's similar to a pre existing function array.indexof() as compared to array.indexof() array.includes() function notably returns a true  boolean on matched value, and false if value not matched Examples on how to use 'array.includes()' function The first argument is the value to be looked upon in an array; const arr = ['dogs', 'cats', 'snakes'] arr.includes('liars') // false arr.includes('snakes') // true arr.includes('lizards') // false I hope you get the concept

'**' exponential operator in JavaScript

** Operator in an es6 Escmascript feature a short hand method used for raising numbers to their power Its syntax is similar to native operators such as '+' Addition and '-' (minus) for subtraction Example ussage Initially to raise a number to the power you would need to use math library pow function as; Math.pow({number}, {factor}) Since es2017 you can simplify the operation above down to simply as; {number} ** {factor} Example as; 5 ** 2 // Giving you 25

How to make a Snake Game using JavaScript and html5

Image
I compiled stapes to create a game similar to Nokia developed, popular game called 'snake' Snake was first developed by Nokia, programmed in 1997 by Taneli Armanto and published on Nokia mobile devices,  It was introduced on Nokia model 6110, 3310 from 2000 and later the game was rebranded as " Snake Xenzia " Included on later mobile phone models I made a version that is more simplified and more beginners friendly, It's based on the same idea of making a snake that grows as it eats stuff and the score increases as it grows I'm implementing this whole game in pure vanilla JavaScript and a taste of html5 canvas, In this project the canvas is used as a renderer for the game's visual output concepts and initial ideas I got the idea while doing another retro gaming project, i thought it would be good too if i created this game, from start my plan had been simplicity and making this game easy to implement, So to simplify everything i had