CSS Flexbox is a layout module that makes it easier to create flexible and responsive layouts in CSS. It provides a simple and powerful way to align elements within a container and distribute space between them.To use flexbox, you need to set the display property of an element to "flex". You can do this by adding the following rule to your CSS:.container { display: flex;}The flex container will now have two main axes: the main axis and the cross axis. By default, the main axis runs horizontally and the cross axis runs vertically. You can change this by setting the flex-direction property:.con...

CSS's :has is a pseudo-class representing an element if any of the selectors passed as parameters matching at least one element. From the name, it's also easy to understand how it matches elements.The syntax is pretty easy as well::has([some-selector])With this pseudo class, it can do lots of things which previously would be challenging or need tweaking the DOM elements with JavaScript. This post will demonstrate what :has can be used for.IntroductionBelow are a few simple examples on how it works.If wanna select all children with img in element a, can havea:has(> img)If wann...

rollup.js is a module bundler for JavaScript. It compiles small piece of JavaScript modules spreading in different files into a single larger standardized ES code file. This post will show some entry level usage for this library.IntroductionNormally a bundler tool would compile a few small JavaScript files into a single JavaScript so that web browser can read, parse and render it properly. A bundler tool may be needed because of a few reasons:Some early stage browsers don't understand modules, the modularized JS codes need to be packed into standard JS code so that browser can understandThe mo...

...

Below are a list of ES6 code snippets which are used frequently. Hope that it will be helpful.1. Shuffle array elementslet arr = [67, true, false, '55']arr = arr.sort(() => 0.5 - Math.random())console.log(arr)// [ '55', 67, false, true ]2. Remove characters which are not numbersconst str = 'xieyezi 23213 is 95994 so hansome 223333'const numbers = str.replace(/\D/g, '')console.log(numbers)// 23213959942233333. Reverse sequence or wordsconst sentence = 'xieyezi js so handsome, lol.'const reverseSentence = reverseBySeparator(sentence, "")console.log(reverseSentence);// .lol ,emosdnah os sj ize...

Voice devices are now everywhere, whether you like them or not. Amazon's Alexa, Google's Assistant, and Apple's Siri have proved that voice interactions are not from science fiction films but part of our new reality.Just as touch screens, voice interaction with devices will completely revolutionize how we interact with our computers, smartphones, and watches (and even cars and houses) in the coming years. But you might ask yourself, why is it evolving at such a fast speed? Well, there are many reasons.Artificial intelligence is fast advancing, allowing machines to understand a wider variety of...

Sometimes developers want to know whether the user is using a mobile browser or a desktop browser so that they can build corresponding user experience. Although in many cases responsive web design would help solve component alignment issues, there are performance related considerations in some cases where some code should not be ran or some feature should not be available if user is on mobile browser. or vice versa This post will summarize a few ways which are commonly used to check whether a user is on mobile device or not.navigator.userAgentThe straightforward approach is to parse the user a...

Redis is frequently used as a caching layer for web applications to improve its performance. In PHP 5.x, if one wants to use Redis, the redis extension needs to be installed and enabled first.This post will show how to install and enable redis extension on Windows with PHP 5.X. Basically there are two dlls to be downloaded: php_redis.dll and php_igbinary.dll.Below are detailed stepsGo to http://windows.php.net/downloads/pecl/releases/redis/2.2.7/ and find the respective php_redis zip matching your environment.Go to windows.php.net - /downloads/pecl/releases/igbinary/2.0.1/ and f...