Archives de
Catégorie : Non classé

JavaScript Loops Explained

JavaScript Loops Explained

In JavaScript, loops are used to conduct repeated activities based on a condition.When conditions are analyzed, they usually return true or false.A loop will continue to run until the specified condition is false. The three most common types of loops are for while do while You can type js for, js while or js do while to get more info on any of these. Let’s look at them, and some variations, in more detail now. for loop Syntax The javascript…

Lire la suite Lire la suite

SVELTE

SVELTE

Svelte is a new uprising client side tool which is definitely worth learning. We will guide you through the basic steps required to setup a Svelte Project and display a simple component. What is Svelte used for? Svelte is a new framework that can be used to create user interface just like other frameworks like React and Vue. The major update in Svelte does most of the code conversion to lower level at compile time itself. Since the work is…

Lire la suite Lire la suite

HTML5 form controls

HTML5 form controls

From HTML5 the control of forms is possible directly in the html input thanks to the pattern attribute and its value in the form of a regex. A regex is a regular expression, in other words a very powerful text control filter verifying the validity of information. Before HTML5, control of forms had to be done in JavaScript and its use was less convenient. The pattern attribute is compatible on browsers: Firefox 4+ Chrome 5+ Opera 9.6+ Internet explorer 10+…

Lire la suite Lire la suite

Colors Management, Why HSL()/HSLA() is always forgotten.

Colors Management, Why HSL()/HSLA() is always forgotten.

Everybody knows each function to definized a color in CSS. The most famous are X11, RGB() and RGBA() or HEX. Least famous but equally important, HSL() and his counterpart HSLA() are functions to manage shadows and brightness in a chromatic circle. Take back the features of each functions for a good comprehension of HSLs’ differents The RGB() : Red Green Blue. RVB is the most popular function of color management, is used by webdesigner, grafist, UX, because it’s not exclusive…

Lire la suite Lire la suite

Less, CSS pre-processor

Less, CSS pre-processor

We all know CSS can be a bit frustrating to write, especially when it comes to more serious projects with thousands of lines of code. You end up duplicating the same rules all over the place and using your editor’s search and replace for every color change. It takes a lot of effort and discipline to keep your CSS maintainable. But it doesn’t have to be this way. Luckily, the web development community has solved this problem. We now have…

Lire la suite Lire la suite

Materialize css.

Materialize css.

https://materializecss.com/ Materialize css. In research about progress in development, frameworks show up as sources of good ideas it’s not new. But today i will show you a little piece of framework that can be helpful to have a really good looking website. Its name is : Materialize. First of all, what are the basics of this framework ? Based on : Material Design https://material.io/ What that : Css language, inspired by nature , physical and texture. What for ? Transform some brutal aspects of fluid…

Lire la suite Lire la suite

CSS PSEUDO CLASSES: :has(), :is() and :where()

CSS PSEUDO CLASSES: :has(), :is() and :where()

What’s a pseudo-class? As a reminder, a CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). What is :has() ? It is a part of CSS selector 4 called relational pseudo-class. It represents elements whose relative scope selector matches when evaluated absolute Matching <a> elements that directly contain an <img> The following selector matches only <a> elements that directly contain an <img> child: a:has(> img) Matching <h1> elements that are followed by…

Lire la suite Lire la suite

METHODOLOGIE BEM-CSS

METHODOLOGIE BEM-CSS

BEM is a highly useful, powerful, and easy naming convention for CSS class names that makes your front-end code less complicated to examine and understand, less complicated to work with, less complicated to scale, extra strong, explicit, and extra strict. A BEM class name includes up to three parts: [BLOCKS]__[ELEMENTS]–[MODIFIERS] [BLOCKS]= .block{} The first element of the component is defined as the block and  represents the highest level of an abstraction or component. The most common blocks are : <header>, <aside>,…

Lire la suite Lire la suite

Neumorphism

Neumorphism

Neumorphism (aka neomorphism) is a relatively new design trend and a term that’s gotten a good amount of buzz lately. It’s aesthetic is marked by minimal and real-looking UI that’s sort of a new take on skeuomorphism — hence the name. It got its name in a UX Collective post from December 2019, and since then, various design and development communities have been actively discussing the trend, usually with differing opinions. Chris poked fun at it on Twitter. Adam Giebl created an online generator for…

Lire la suite Lire la suite

MinMaxing: Understanding vMin and vMax in CSS

MinMaxing: Understanding vMin and vMax in CSS

Vmin and vmax units are far less known and generally poorly understood. This is unfortunate, as the units have some truly novel use-cases in web development. 1vh is equal to 1% of the current viewport height (i.e. the open browser window), while 1vw is 1% of the current viewport width. vmin and vmax use those same units, but in response to particular rules: vmin uses the ratio of the smallest side. That is, if the height of the browser window…

Lire la suite Lire la suite