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

Ten tips for organizing your css code

Ten tips for organizing your css code

1. Insert the CSS reset One of the biggest challenges when developing a website is cross-browser compatibility. The CSS reset is a style sheet that greatly reduces these incompatibility errors by providing a general style that is defined but easily customisable. Normalize.css is a modern and quite precise reset based on HTML 5. https://necolas.github.io/normalize.css/ You should insert the style sheet for this CSS reset in the <head> section, before your style definitions. 2. Organise the elements To be able to…

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

Selectors in CSS

Selectors in CSS

What are CSS selectors? A CSS selector is used as a way to target elements in our DOM (Document Object Model) and apply a certain style to it. Basically, what we are doing is defining the style we want to use and then applying a « filter » that target specified items. In order to do that, we are going to use this structure: There are many selectors in CSS, we’ll talk about them later on. The style we apply can target…

Lire la suite Lire la suite