DEV Community: Poulami Chakraborty

New website

Poulami Chakraborty — Tue, 16 Mar 2021 15:19:30 +0000

Hi,
I recently completed my website .
It had a few CSS challenges which I had fun figuring out!

Website built with Vue.

Back to JS Basics: Objects

Poulami Chakraborty — Sun, 11 Oct 2020 21:29:03 +0000

This is a part of my series of notes as I revisit core JS concepts.

Concepts covered:

General object literals overview
Dot notation vs Bracket notation
Object References & Cloning

Constructor functions are not covered in this article.

In my last article, I had gone into the details of primitive data types in JS. This time it is the other data type in JS - objects.

As opposed to the primitive types, objects are used to store more complex entities - generally, a collection of related properties or methods.

A property is a “key: value” pair, where key is a string, and value can be anything (including array). A method is when the value is a function.

const user = {
name: 'Poulami',
handle: 'poulamic',
interests: ['UX', 'front-end', 'generative art'],
greet: function() {
    alert(`Hi! I'm ${this.name}.`);
  }
}

Some things to keep in mind:

An object declared as const can be modified. It isn't possible to reassign 'user'

const user = {
name: 'Poulami',
handle: 'poulamic',
interests: ['UX', 'front-end', 'generative art'],
greet: function() {
    console.log(`Hi! I'm ${this.name}.`);
  }
}
user.greet(); // Hi! I'm Poulami.

user.name = "Unknown"
user.greet(); // Hi! I'm Unknown.

user = {
name: 'Unknown',
handle: 'poulamic',
interests: ['UX', 'front-end', 'generative art'],
greet: function() {
    console.log(`Hi! I'm ${this.name}.`);
  }
}
// Uncaught TypeError

There is no limitation to what key variable name can be (including 'let', 'return', etc.). Except for a variable named _proto_ that has to be of type 'object'. (This is related to prototype, not included in this article)
There will be no error if we try to access a property that doesn’t exist - it will return 'undefined'.
To check if the property exists , we can use the in operator- it returns true if the specified property is in the object

user.age // undefined
'age' in user //false

Dot notation vs Bracket notation

There are two ways to access object properties - using dot notation, and using bracket notation.

//Get
user.name
user['name']

//Set
user.name = "Unknown"
user['name']= "Unknown"

Both essentially work in the same way, except in some cases where bracket notation is the only one which works.

Using variables for key name

let requested = "handle";
console.log(user.requested) //undefined
console.log(user[requested]) //poulamic

Multiword property names

const user = {
name: 'Poulami',
handle: 'poulamic',
interests: ['UX', 'front-end', 'generative art'],
"has published" : true, //multiword keys are in quotes
greet: function() {
    console.log(`Hi! I'm ${this.name}.`);
  }
}

user["has published"] // true

Within the object literal, square bracket is used for computed properties - i.e. while creating the literal, we set a property name through a variable;

let social = "twitter";
const user = {
name: 'Poulami',
handle: 'poulamic',
interests: ['UX', 'front-end', 'generative art'],
"has published" : true,
[`${social}account`]: true,
greet: function() {
    console.log(`Hi! I'm ${this.name}.`);
  }
}
console.log(user.twitteraccount) // true

Object References & Cloning

Primitives and objects behave differently when a variable is assigned a value through (equating with) a variable name.

let a = 5;
let b = a;

The expectation is that we have two independent variables 'a' & 'b' - both with value of 5. And that's true - when the value is of a primitive data type. (Under the hood, they are two different spots in memory).

let p = "poulami";
let q = p;
console.log(p,q) // poulami poulami
q= "unknown"
console.log(p,q) // poulami unknown

But it isn't so in case of objects. In case of objects, the actual object is stored somewhere in memory and the variable has a “reference” to it.

let user = {
name: 'Poulami',
handle: 'poulamic',
interests: ['UX', 'front-end', 'generative art'],
greet: function() {
    alert(`Hi! I'm ${this.name}.`);
  }
}

let user2 = user;

In this case, there are two variables, but only one value. The value has a point in memory & both the variables reference the same object. We can access the object and modify it through either variable, and changes are reflected when we try to access it through the other variable.

let user = {
name: 'Poulami',
handle: 'poulamic',
interests: ['UX', 'front-end', 'generative art'],
greet: function() {
    alert(`Hi! I'm ${this.name}.`);
  }
}

let user2 = user;
user2.name = "unknown";
console.log(user.name,user2.name) //unknown unknown

We can think of it like a shared document - in case of primitives, a variable is given a duplicated copy of the sheet which they can change without affecting the original; while in objects, the var is given author permission to the same sheet.

To have an independent copy, we need to clone the array. One way is to use the [Object.assign()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) method.

let user2 =Object.assign({}, user);
user2.name = "unknown";
console.log(user.name,user2.name) //Poulami unknown

Seems to work! Let's try another one

let user2 = Object.assign({}, user);
user2.name = "unknown";
user2.interests[0] = 'Design'
console.log(user2.interests) // [ "Design", "front-end", "generative art" ]
console.log(user.interests) //  [ "Design", "front-end", "generative art" ]

What happened?!

Well, the above method works with primitive values, but not object data types. Even within objects, nested objects (like arrays) behave as discussed above - variables are referencing to the object. So. when the (parent) object is cloned, it's the reference which is being copied.

Shallow and deep copy

A shallow copy is one in which only one level is copied while others are still connected to the original variable (through same reference). This will mostly work fine for an object containing only primitive values.

In a deep copy, on the other hand, all the values (including nested) have their own spot in memory and disconnected from the original variable.

This medium article explains several methods to shallow/deep copy objects and arrays in JavaScript.

References:
javascript.info
MDN

Back to JS Basics - Types & Coercion

Poulami Chakraborty — Sun, 04 Oct 2020 21:06:17 +0000

These are my notes as I go back & revisit the nitty gritties of JS core concepts.

JavaScript Data Types

A value in JavaScript is always of a certain type (ex:number) - data type is the attribute which determines the behavior of a particular value and how it is treated (ex: 1 vs "1"). This also effects how different operators work with the value.

JavaScript is a dynamic language or loosely typed therefore a variable doesn’t associate with any type - its value does. That means the same variable may be reassigned a new value of a different type.

var x = 5; //x is a number
x = "Hello world" //x is now a string

There are basically 9 types of data types in JS with

6 primitives: number, string, boolean, undefined, bigInt, symbol. A primitive data value is a single simple data value with no additional properties and methods.
2 structural: objects and functions. Object is a collection of properties, and a property is an association between a name (or key) and a value. A property's value can be a function, in which case the property is known as a method. Arrays, regular expressions, date, etc. are all different types of objects.

Functions are like a sub-type of objects.
1 special kind of primitive: null. null is a special instance of primitive datatype which points intentionally to a nonexistent or invalid object or address.

Both null and undefined cannot hold any value.

This article covers primitive types (& parts of null)

Null vs Undefined

undefined means a variable has been declared but has not yet been assigned a value. (An **undeclared* var, by contrast, is one that hasn't been declared yet, and will return a reference error*).

null represents null, empty, or non-existent reference. It is a blank object reference.

Peculiarities of `Number`

Number ≠ Integer ( 1, 1.0, 1. are all valid 'number' in JS. That may be important when trying to invoke a number method)
```
   console.log(1.toPrecision( 6)) // Uncaught SyntaxError
   console.log(1..toPrecision( 6)) //4.00000
```
Ideally, its better to assign value to variable and then access function on the var.

Floating point arithmetic is not always 100% accurate


   console.log(0.1 + 0.2) //0.30000000000000004

NaN(not a number) : Any mathematical operation in which both operands aren't numbers (or values that cannot be forced into number) results in an invalid number, giving the NaN value.
```
   console.log(5 - '123' ) // -118
   console.log(5 - '12 3' ) // NAN
```
NaN is a very special value in that it's never equal to another NaN value.
```
   console.log(NaN == NaN) //false
```

Type Conversions & Coercions

JS variables can be can be converted to a different data type by:

Use of a JavaScript function - we explicity convert to a different type. (Ex: String(123))
Automatic or implicit conversion of values - JS coerces an incorrect type to the expected data type. (Ex: 2*"2")

There are 3 possible conversions:

To String
To Number
To Boolean

1. To String

String() or toString() function can be used to explicitly convert to string. All primitives are converted to string type as may be expected:

String(123) → '123'
String(true) → 'true'
String(null) → 'null'
String(undefined) → 'undefined'

Implicit coercion is triggered by the binary + operator, when (atleast) one operand is a string

'a'+2 //a2

Note: String concatenation with + is not commutative. Ex: '$' + 4 + 5 will give '$45' but 4 + 5 + '$' will give '9$'

2. To Number

Mathematical operations results in implicit conversion to Number (except in case of + where it can result in conversion to string). It may not be a valid number - again NaN is also a sub-type of number!
```
   typeof(5 + true); //number
   typeof("6a"*"2"); //number
   typeof(5 - '12'); //number
```
An empty string , empty array, becomes 0. true is 1, while false is 0.
In explicit conversions of strings, white-spaces from the start and end are removed.

Number(' 123 ') // 123
Number('12 3') // NaN

When (loosely) comparing values of different types, there is implicit conversion to numbers. We will visit comparisons shortly.

3. To Boolean

Values that are intuitively “empty”, like 0, an empty string, null, undefined, and , become false. Everything else is true - including "0"
If statements: Logical operators (|| and &&) do not return boolean values.
```
   a||0; [//a](//a) 
```
When used within the condition of an if statement, there is an implicit coercion to boolean type.

Comparisons (Loose '==' vs Strict '===' equality)

As mentioned earlier, == uses type coercion to numbers if required.

A strict equality operator === checks the equality without type conversion. If two values are of different types, then a === b immediately returns false without an attempt to convert them.

console.log('0' == 0) //true
console.log('0' == false); //true
console.log('0' === false); //false

Number(null) & Number(undefined) are 0 & NaN respectively - so, they aren't equal.

null==undefined // false

Sources:

You-Dont-Know-JS/types & grammar

MDN: JavaScript data types and data structures

https://javascript.info/

CSS Animated Card with a single 'details' element

Poulami Chakraborty — Sat, 26 Sep 2020 20:32:14 +0000

I made an animated Card with only a <details> element for this week's Codepen challenge.
This took much more time than I anticipated!

WAI-ARIA : An Introduction

Poulami Chakraborty — Sun, 20 Sep 2020 20:19:55 +0000

What is ARIA?

ARIA stands for Accessible Rich Internet Applications, a specification designed by the Web Accessibility Initiative (WAI) in the W3C. Its purpose is to supplement the accessibility and semantics of a website or web application.

In practicality, this achieved by adding aria- attributes to a HTML element. (These mostly have no bearing on layout or browser functionality, but provides additional information for assistive technologies)

Why should you care about ARIA?

As the name suggests, ARIA is for making websites and webapps more accessible. I have written about why we need to care about semantics in HTML.

Writing Semantic HTML

Poulami Chakraborty ・ Sep 13 ・ 3 min read

#html #webdev #beginners

However, there are where native HTML isn't enough for all use cases or for the dynamic, interactive or complex layouts of today's webapps. This can range from a simple pop-up to a novel interaction pattern. This is where aria- attributes comes to the rescue.

Some common problems which aria- is used to address are:

Adding signposts/landmarks for better navigation in assistive technologies
Conveying functionality of component
Conveying states and properties of components
Indicating change in dynamic content

What can ARIA do?

ARIA can modify existing element semantics or add semantics to elements where no native semantics exist.

ARIA attributes can be of three types - roles, properties, and states.

1. Roles

Roles define what an element is or does. Most HTML elements have a default role that is presented to assistive technology (AT). For example, <button> has a default role of "button" and <form> has a default role of "form". With aria-role, we can tell the AT the functionality or role of non-semantic tags.

Role is an important information used by screenreaders to help their users easily navigate a page.

Ex: when creating tabs

<ul role="tablist">
    <li class="active" role="tab">
          <a href="#home">Home</a>
    </li>
    <li role="explore">
          <a href="#explore">Home</a>
    </li>
</ul>

Notes

aria-role should not be used as a substitute for semantic HTML!
Default HTML roles need not be duplicated using ARIA. Ex: <button role="button">
Do not over-ride native semantics with HTML (ex: <h2 role ="tab">Home</h2>). This (Wrong ARIA use) is more detrimental to accessibility than no ARIA.

Here is a list of WAI-ARIA defined roles.

2. States and Properties

ARIA states and properties offer the user further information on how to interact with a particular component.

ARIA States describe the current state of the element such as if something is collapsed or expanded (aria-expanded = "false") or if a formfield is disabled ( aria-disabled="true"). They are dynamic in nature, and usually updated with JavaScript.

ARIA properties are used to provide additional additional semantics not supported in standard HTML. Ex: aria-haspopup="true" added to a button will let TA know that the button, if clicked, will trigger a pop-up. aria-live applied to a dynamically updating element (chats, content refresh, etc.) will cause screenreaders to read out the content that is updated (exact behavior depends on the value of 'aria-live').

"States" and "Properties" refer to similar features - with a subtle difference: properties are often less likely to change throughout the application life-cycle than the values of states.

Both states and properties are denoted by aria-prefixed markup attributes.

Here is a list of all WAI-defined states and properties. Some of them may be global, while others are to be used in conjunction with specific roles - W3C has a table with how the ARIA roles and attributes work together.

When to not use ARIA?

The attempt should be keep its usage as low as possible - we only use ARIA when a problem can't be solved with native HTML. Here is W3C guide on using ARIA.

Writing Semantic HTML

Poulami Chakraborty — Sun, 13 Sep 2020 19:50:55 +0000

Writing Semantic HTML is about using the right HTML elements to convey or reinforce information about the kind of information contained within them. That is, the HTML tags play an important part in structuring of content, and are not just a way to group information into chunks for styling (like how it used to be done through div for all types of content).

It also means NOT to use a tag for the incorrect reason. Ex: don't use an strong tag just for styling (font-weight) -use it to emphasize text.

Semantic HTML aims to describe the meaning of the content present within HTML tags, making it clearer for both programmers and machines that process this information.

Why should you care about semantic HTML?

Accessibility: Semantic HTML gives context to screen readers, braille readers, TTS, etc. to provide readout, keyboard navigation & other accessibility features. The main content can be easily separated and prioritized over subsidiary, sections can be easily navigated, etc.
SEO: Its easier for search engines to index content and prioritize relevant content. Ex: Google snippet lists using to display li elements
Good Dev Practice: Semantic code is cleaner & easier to understand. It is also an effective way of separating content and styling. Moreover, many semantic tags come with useful functionalities & enhancements. Ex: a button , form can be navigated with Tab, Tab+Shift, etc.

How to make your document semantic?

1. Page Layout /Document Structure

For high-level structuring of the document we use the correct tags of header, footer, nav, main, aside, section, (form) and article

header represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, etc.
nav used for in-site navigation links (as opposed to naormal <a> tags
main represents the dominant content of the page
aside is a portion whose content is only indirectly related to the document's main content (it is not required to understand the current content)
article a self-contained portion which is intended to be independently distributable or reusable (ex: a blog post, news article)
section is a part of a standalone content (ex: a part of a blog post post which may or may not have/need a heading)
address indicates that the enclosed HTML provides contact information for a person or people, or for an organization
footer represents a footer for its nearest sectioning content or the site

(This is just an example - it doesn't have to be exactly this way)

2. Inline Text Semantics

Coming to the content, using proper and structured headers(h1, h2,... h6) and p tags helps in structuring the data. Some screenreaders take break after paragraph break. Users may be able to skip by sections (identified by headers).
ul, ol, dl along with li are to be used for lists.

Here are some tags you can use to provide more information on parts of text (rather than using span)

strong indicates that its contents have strong importance (this is semantic as compared to b).
em stresses text emphasis (use this as opposed to the not semantic i)
cite describe a reference to a cited work, and includes the title of that work.
q indicates that the enclosed text is a short inline quotation.
blockquote indicates that the enclosed text is an extended quotation (usually rendered visually by indentation)
dfn used to indicate the term being defined within the context of a definition phrase or sentence.
abbr represents an abbreviation or acronym (the optional 'title' attribute can provide an expansion or description for the abbreviation)
sub subscript element.
sup superscript element.
time used to represent time or time duration
kbd represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device
code indicates that the text is a short fragment of computer code.
samp represents sample (or quoted) output from a computer program
var represents the name of a variable in a mathematical expression or a programming context
del represents a range of text that has been deleted from a document.
ins represents a range of text that has been added to a document

A lot of information can be packed with co-relational tags - such as dd and dt, figure and figcaption, label and input

This is only a basic introduction. You can find all the HTML tags on this MDN page.

100 Background Patterns with CSS Gradients

Poulami Chakraborty — Sat, 12 Sep 2020 21:15:50 +0000

I created 100 patterns using CSS linear-gradient and radial-gradient for this week's Codepen Challenge.

Just Enough Regex

Poulami Chakraborty — Fri, 04 Sep 2020 22:01:39 +0000

This is a basic primer on a powerful programming tool - regular expressions.

Regular expressions (regex) are a powerful way to describe patterns in string data. In JavaScript, regular expressions are objects to find patterns of char combinations in strings. Some typical use cases of regular expressions are validating a string with the pattern, searching within a string, replace substrings in a string, extract some meta information from a string.

However, at first (and sometimes even after the hundredth) glance, regex looks complex and daunting. Until now, I had tried to get away with just understanding the concept and use of regex - after all, once I knew that I wanted to use regex, I could look up the syntax to hack together whatever I wanted. That works most of the time.

There are two problems with that process though - i) it is time-consuming, ii) it isn't a practical way when deconstructing regex (in others' code).

So, I finally decided to dive into regex with the express purpose of demystifying regex, and this is my documentation.

Some Regex and String Methods

Regex methods are out of scope of this article. However, as I would be using some methods to demonstrate concepts, I am starting with the format and use of the JavaScript functions.

`test()`

The test() method executes a search for a match between a regular expression and a specified string. Returns true or false.

var str = "This is an example"
var regex = /exam/;
console.log(regex.test(str)) // true

`match()`

There is a method of String. It finds matches for regexp in a string and returns an array of the matches.

var str = "This is a test to test match method";
var regex =/ test/
console.log(str.match(regex));  // [ " test" ]

To find all matches, we use the g (global) flag

var str = "This is a test to test match method";
var regex =/test/g
console.log(str.match(regex)); // [ "test", "test" ]

In case of no matches, null is returned (and NOT an empty array. Important to remember while applying array methods).

var str = "This is a test" ;
console.log(str.match(/hello/)); // null

(There is more to these functions - but again, out of scope of this article)

Regular Expressions

Constructor

There are two ways to construct a regular expression

Using the RegExp constructor

var re = new RegExp("pattern", "flags");

Using a regular expression literal, which consists of a pattern enclosed between slashes (slashes are like quotes for strings -they tell javscript that this is a regular expression)
```
var re = /pattern/flags;
```

'flags' are optional, and I will discuss them shortly.

Difference between the two methods

Both of them create an RegExp object, and will return same results. There is one difference:

Regex literal are compiled when the script is loaded while the constructor function provides runtime compilation of the regular expression.

What that ensues is that regex literals can only be static, i.e. we know the exact patterns while writing the code.They cannot be created from a dynamically generated string. Ex: wanting to use an user input as the regular expression.

For dynamic regex expressions we use the RegExp constructor method

var filter= "star";
var re = new RegExp(`${filter}`);
var str = "Twinkle twinkle little star"
console.log(str.match(re)); 

// [ star]

Flags

Flags are optional parameters that can be added to a regular expression to affect its matching behavior. There are six flags which modify the search in different ways

i: Ignores casing (/e/i will match both 'e' and 'E')
g: Global search returning all matches for a given expression inside a string - without it, only the first match is returned

The other flags (m s, u, y are used rarely and some require understanding of some advanced concepts. So, it is left out of this article. This codegauge lesson dives deep into the flags.

These flags can be used separately or together in any order.

var str = "Hello, hello";
console.log(str.match(/he/gi)
//Array(2)[ "He","he"]
]

Regular Expression Pattern

Literal Characters

The simplest regular expression is a series of letters and numbers that have no special meaning. There is a match only if there is exactly that sequence of characters in the string it is searching, i.e., it is a 'literal' match.

Simple patterns are constructed of characters for which you want to find a direct match. For example, the pattern /abc/ matches character combinations in strings only when the exact sequence "abc" occurs (all characters together and in that order).

console.log(/abc/.test("**abc**")); //true
console.log(/abc/.test("I am learning my **abc**s'")); //true
console.log(/abc/.test("The c**ab c**ollided")); //false

But this could also be done with indexOf. Why do we need regex?

Well, regex is mostly used when we want to for complicated or 'less literal' matches (ex: a date pattern - we don't want to match a particular date, just check the format). To do that, we use metacharacters.

Special (meta) characters and Escaping

A metacharacter is a character that has a special meaning (instead of a literal meaning) during pattern processing. We use these special characters in regular expressions to transform literal characters into powerful expressions.

In JavaScript, the special characters are - backslash \, caret ^, dollar sign $, period or dot ., vertical bar |, question mark ?, asterisk *, plus sign +, opening parenthesis (, closing parenthesis ), opening square brackets [. Some like curly brackets { have special characters when used with closing curly bracket } also have special meaning.

We will go over each of these in time. Before that - escaping.

What if we want to find a 'literal match' for one of these special characters? (Example: find a literal match for "^"?

To do that, we use another metacharacter - backslash . Prepending \ to a special character causes it to be treated as a literal character.

console.log/b^2/.test('a^2 + b^2 - C*3')); //false
console.log(/b\^2/.test('a^2 + b^2 - C*3')); //true

console.log/b^2/.test('a^2 + b^2 - C*3')); //false
console.log(/b\^2/.test('a^2 + b^2 - C*3')); //true

Groups and ranges

Several characters or character classes inside square brackets […] means we want to “search for any of these characters"

For example [ae] will match for 'a' or 'e'

console.log(/[ae]/.test("par")); //true
console.log(/[ae]/.test("per")); //true
console.log(/[ae]/.test("por")); //false

We can have square bracket within a bigger regex expression

console.log(/b[ae]r/.test("bard")); //true
console.log(/b[ae]r/.test("bread")); //false

Within square brackets, a hyphen (-) between two characters can be used to indicate a range of characters (where the ordering is determined by the character’s Unicode number).

Ex: [0-9] will match any character between 0 and 9, '[a-z]' is a character in range from a to z

console.log(/[0-9]/.test("for 4 years")); //true

A number of common character groups have their own built-in shortcuts in the form of character classes.

Character classes

Character classes are shorthands for certain character sets.

Character Class	Respresents
\d	Any digit character (from 0 to 9)
\D	Non-digit: any character except \d
\w	Any alphanumeric character from the basic Latin alphabet (including digit), including the underscore
\W	Non-wordly character: anything but \w. Ex: a non-latin letter (%, etc.) or a space
\s	a single white space character, including space, tab, form feed, line feed, and other Unicode spaces
\S	Non-space: any character except \s, for instance a letter

As we can note: For every character class there exists an “inverse class”, denoted with the same letter, but uppercased.

Apart from these, there are character class to supports certain non-printable characters

Character Class	Represents
\t	Matches a horizontal tab
\r	Matches a carriage return
\n	Matches a linefeed
\v	Matches a vertical tab
\f	Matches a form-feed
\0	Matches a NUL character (Do not follow this with another digit)
[\b]	Matches a backspace

Character classes can be written in series to create complex patterns. Example, to check for time format in hh:mm, the regular expression is '\d\d:\d\d' (For now, we are not checking validity of the input, i.e. 72:80 is also a valid time for our purposes)

console.log(/\d\d:\d\d/.test("2:25")); //false
console.log(/\d\d:\d\d/.test("02:25")); //true

Anchors

Anchors in regular expressions do not match any character. Instead, they match a position before or after characters. They can be used to “anchor” the regex match at a certain position.

Caret (^) matches the position before the first character in the string -i.e. the regular expression that follows it should be at the start of the test string.
Dollar ($) matches the position right after the last character in the string -i.e. the regular expression that precedes it should be at the end of the test string

console.log(/^Jack/.test("Jack and Jill went up the hill")); //true
console.log(/^hill/.test("Jack and Jill went up the hill")); //false
console.log(/hill$/.test("Jack and Jill went up the hill")); //true
console.log(/Jack$/.test("Jack and Jill went up the hill")); //false

Both anchors together ^...$ is often used to test whether or not a string fully matches the pattern.

Going back to our time example:

console.log(/\d\d:\d\d/.test("02:25")); //true
console.log(/\d\d:\d\d/.test("02:225")); //true
console.log(/^\d\d:\d\d/.test("02:225")); //true
console.log(/\d\d:\d\d$/.test("102:225")); //true
console.log(/^\d\d:\d\d$/.test("102:25")); //false
console.log(/^\d\d:\d\d$/.test("02:225")); //false

In multiline mode (with flag 'm'), ^ and $ match not only at the beginning and the end of the string, but also at start/end of line.

Apart from line boundaries, we can also check for the position word boundary in a string. There are three different positions that qualify as word boundaries:

At string start, if the first string character is a word character \w
Between two characters in the string, where one is a word character \w and the other is not
At string end, if the last string character is a word character \w

console.log(/hell/i.test(str)) //true
console.log(/hell\b/i.test(str)) //false
console.log(/hello\b/i.test(str)) //true

Quantifiers

Quantifiers are used to handle repeated patterns in regular expressions. For example, if we are to check for a 10-digit number, having to write /\d\d\d\d\d\d\d\d\d\d/ seems awful - how about a 100 digit number?

With quantifiers,we can specify how many instances of a character, group, or character class is required. The quantifier is appended just after the character which needs to be repeated, and applies only to that character. For example: in /a+/ the quantifier '+' applies to the character 'a', in /cat+/, the '+' applies to 't' and not the word 'cat'

{n} - matches exactly "n" occurrences
{n,m} - matches at least N occurrences and at most M occurrences (n<m)
{n,} - matches at least "n" occurrences
+ - matches 1 or more times
* - matches 0 or more times
? - matches 0 or 1 times. In other words, it makes the preceding token optional

Let's go back to the time example and simplify it using quantifiers. We want to have time in the format hh:mm or h:mm (Note ^ and $ are not affected by quantifiers)

var re = /^\d+:\d{2}$/
console.log(re.test("02:25")); //true
console.log(re.test("2:25")); //true
console.log(re.test("102:25")); //false
console.log(re.test("02:225")); //false

Let's try something a little more complex - let's see if a string is a html element - we will check for opening and closing tag (not considering attributes for now). The pattern will be a one or more letter tag in between '<' and '>' followed by optional text and then closing tags

var re = /<[a-z][a-z0-6]*>[\w\W]+<\/[a-z][a-z0-6]*>/i;
console.log(re.test('<h1>Hello World!</h1>')); //true
console.log(re.test('<h1>Hello World!')); //false
console.log(re.test('Hello World!</h1>')); //false
console.log(re.test('</h1>Hello World!</h1>')); //false

Groups

A part of a pattern can be enclosed in parentheses (). This is called a “capturing group”. It counts as a single element as far as the operators following it are concerned.

console.log(/(java)/.test('javascript')) //true
console.log(/(java)/.test('javscript')) //false

If we put a quantifier after the parentheses, it applies to the parentheses as a whole.

console.log(/(la)+/.test('lalalala')); //true

Negation

For cases where we don't want to match a character, we create negated or complemented character set. For negation also, we use the combination of [] and ^ special characters.
[^xyz] means that it matches anything that is not enclosed in the brackets. (Note: in anchors ^ is outside the brackets).

console.log(/ello/.test('hello')); //true
console.log(/[^h]ello/.test('hello')); //false
console.log(/[^h]ello/.test('cello')); //true

We can also do it for words:

console.log(/[^(password)\w+]/.test('password1234')); //false

Conditionals (Lookahead and lookbehind)

Sometimes we need to find only those matches for a pattern that are (or not) followed or (or not) preceded by another pattern.

Pattern	Meaning
x(?=y)	Matches "x" only if "x" is followed by "y"
x(?!y)	Matches "x" only if "x" is not followed by "y"
(?<=y)x	Matches "x" only if "x" is preceded by "y"
(?<!y)x	Matches "x" only if "x" is not preceded by "y"

var str = "apple mango pineApples grape Grapefruit";
console.log(str.match(/grape(?=(fruit))/gi)); // [ "Grape"]
console.log(str.match(/grape(?!(fruit))/gi)); // [ "grape"]
console.log(str.match(/(?<=(pine))apple/gi)); // [ "apple"]
console.log(str.match(/(?<!(pine))apple/gi)); // [ "Apple"]

Alternation

Alternation is just another word for logical OR - i.e. match this OR that. Previously discussed [] was for single character (out of several possible characters). Alternation is to match a single regular expression out of several possible regular expressions. It is denoted by the pipe character (|).

Ex: with /(abc\def)/, we are looking for matches for either 'abc' or 'def'

console.log(/\b(apple|mango)\b/.test('I like mango')) //true
console.log(/\b(apple|mango)\b/.test('I like apple')) //true

We can combine/nest with other things we have learnt to create more complex patterns

console.log(/\b((pine)?apple|mango)\b/.test('I like pineapple')) //true

That's it for this article. This is just an introduction; there are some more concepts to understand which can help become more proficient in regex - like greedy and lazy quantifiers, backreferences, more advanced conditionals, etc. Javascript.info and eloquentjavascript are two good places to start from.

Pure CSS lamp: step-by-step

Poulami Chakraborty — Tue, 25 Aug 2020 14:14:18 +0000

I wrote about the basic concepts for CSS art in the first part of the series. In this part, we will create a lamp from scratch.

Before starting, let's break down the objects into the component shapes. Here we have three - the shader, the leg and the foot are the basic parts. So, let's create the markup.



<div class = "lamp">
  <div class = "shade"></div>
  <div class = "leg"></div>
  <div class = "foot"></div>
</div>

Now, we will start with CSS.
First, we will set up the document to take complete span the complete window, and to prevent any scroll. Also we want the lamp to be in the center - we can achieve that with grid and place-items.

Within the lamp, we want the components center-aligned. We can achieve that with flex-box.



body{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.lamp{
  display: flex;
  flex-direction: column;
  align-items: center;
}

Now, let us create the basic shapes for the components



.shade{
  width: 30vh; 
  height: 20vh;
  background: #EEE4CF;
  border: 1px solid black;
}
.leg{
  width: 2vh; 
  height: 50vh;  
  background: #995136;
  border: 1px solid black;
}
.foot{
  width: 22vh; 
  height: 5vh;
  background: #995136;
  border: 1px solid black;
}

This is the result:

(Border used here to show overlaps of the shape in the next step)
I am using vh as the unit for both height & width to make it responsive and preserve aspect ratios.

Now, we will use positioning for minor adjustments - move the leg and the foot a bit higher for perspective. For slight adjustments from an elements default position, we can use relative postioning.

In addition the leg needs to be in the front of the stand - we will change that with z-index. (Note: in simple cases such as this, what appears on top can also be adjusted through markup - the later the element appears, higher it will be in the stacking context. Using it here just as a demo use for more complex cases ).



*{
  position:relative;
}

.shade{
  width: 30vh; 
  height: 20vh;
  background: #EEE4CF;
  border: 1px solid black;

  z-index: 3;
}
.leg{
  width: 2vh; 
  height: 50vh;  
  background: #995136;
  border: 1px solid black;

  top: -2vh; 
  z-index:2;
}
.foot{
  width: 22vh; 
  height: 5vh;
  background: #995136;
  border: 1px solid black;

  top: -4vh; 
}

Result:

Next, we will move to detailing each shape.

For the shade, we want rounded corners and a trapezium - we will create those with border-radius and clip-path.

For a 3d effect, we will use gradients. We can set the gradients on either background or background-image. In cases, where the gradients are used only to show shadows, I prefer to set the primary color as background, and add the shadows with black/white with alpha value in combination with transparent.

Also, as gradients are applied from bottom to top, we need to be conscious of the order.

In case of the shade, we are applying four layers (from bottom to top) - along the right slanted side, along the left slanted side, left to right, ellipse at the top.
Figuring out the opacity and angles for each may be through trial and error.



.shade{
  width: 30vh; 
  height: 20vh;
  background: #EEE4CF;
  z-index: 3;

  border-radius: 50% / 10%;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  background-image: 
    radial-gradient(closest-corner at 50% 2%, #EEE4CF 70%, transparent 78%),
    linear-gradient(to right, transparent 48%, #ffffff66 58% 75%, transparent 88%),
     linear-gradient(-253deg, #ffffffcc, #E5CB9A 15%, #DBB97C 20%, #EDDBB7 36%, #ffffff33 54%, transparent 95%),
    linear-gradient(253deg, #F8EFDD 20%, transparent)    
}

Similar for the leg: shadows to create a 3d effect



.leg{
  width: 2vh; 
  height: 50vh;  
  background: #995136;
  top: -2vh; 
  z-index:2;

  background-image: 
    linear-gradient(#00000044, transparent 20% 99.8%, #00000033 100%),
    linear-gradient(to right, transparent 15%, #00000055 36% 44%,  #00000011 60%, #ffffff4f 78% 95%, #9B5539 95%)
}

For the foot, we will use radius to make it an oval, use gradients and shadow to give it dimension.



.foot{
  width: 22vh; 
  height: 5vh;
  background: #995136;  
  top: -4vh; 
  border-radius: 50%;
  box-shadow: 0 0.4vh #773321;

  background-image: 
    linear-gradient(to right, transparent 11vh, transparent 12vh, transparent 13vh),
    linear-gradient( 40deg, transparent 5% 24%, #0000001f 28% 36%, #00000011 37% 44%, transparent 50%, #ffffff1c 56%, #ffffff44 68%, #ffffff1c 92%, transparent)
}

That's it!
You can find the pen here:

Intro to creating CSS Art

Poulami Chakraborty — Tue, 25 Aug 2020 14:13:21 +0000

The first time I saw art created with CSS, I was stunned. I regularly get frustrated with CSS while creating basic layouts, and here were people who could wield CSS to this degree!

It seemed way out of my skill levels, and I was just happy to lurk and admire the amazing work of others. However, sometime back, I decided to give it a try (lockdown effects!). I looked up resources and tutorial online before attempting my own original one - a simple Panda!

After understanding the underlying principles used, I dug into specific CSS concepts to master those - and with practice, I have been attempting projects with increasing complexity. I even created a single div CSS bookshelf inspired by Lynn Fischer's asinglediv project.

While I am no expert at CSS art (I hope to get better with practice), I wanted to document my learning & process in case it is helpful to anyone else. This will be a two part series about

the tools of the trade and
a step-by-step demo.

Why try CSS Art?

While I agree CSS art doesn't seem to have a lot of practical or 'real' use - SVG or images would be the practical method for most website/apps. However, CSS art is a fun way to level up your CSS game. In my case, it helped to finally string together a lot of CSS hacks into concrete concepts.
I have documented it here:

Diving deep into CSS Layouts - About the series

Poulami Chakraborty ・ Aug 17 '20

#css #webdev

Other than that, it enhances the ability to visualize graphics as a combination of basic shapes, and then to manipulate those shapes to create the desired graphics. In addition, I also find CSS art meditative and thus a favourite hobby.

The Tools (CSS concepts)

Ok, let's get started. Let's understand the tools we will use to create our CSS art.

Box Model

As we know, everything in CSS is a box. So, a rectangle(or square) is the basic shape we will manipulate to create every other shape. This is the raw material.
By default, the size (width, height) of a box is determined by the content and specified margin, padding. As we won't be having any HTML content, we need to explicitly mention the width and height of the (block) boxes - div is the normally used element.

::before, ::after

Along with every element we also have the pseudo-elements ::before and ::after as two additional boxes at our disposal. We can use those for some details as an alternative to adding more elements in our markup. (A good usage is adding new elements for different parts, and using pseudo-elements to add details like shades, patterns to a part).

Don't forget to add content:'' - without content, the pseudo-element won't be generated.

Positioning

A very important aspect of CSS art is positioning the shapes for alignment or for creating complex shapes from basic ones.
That requires manipulation of the co-ordinates of the shapes. To do that, we may need to set an absolute or relative positioning.

In a lot of case it helps to set *{position: absolute} - it's easier to calculate position relative to the parent element. But it's not always necessary - we can use relative positioning, or even flex/grid based on the particular use case (Flex with justify-content is a great tool for centering elements). The main point is figuring out how the different boxes are to be positioned wrt each other.

Along with positioning, z-index is handy to position elements in front of or behind other elements. *It helps to dig a bit into stacking context to deepen our understanding of z-index to wield it well (I wrote an article about that here)

DOM structure

This doesn't actually affect the CSS art as such. It's more about good practice for maintainable stylesheets . It better to have a hierarchy of elements to create the parts that make up the whole drawing. Ex: eyes divs should be placed inside a head div, if possible using ::before, ::after of an element for creating details only of that element (this won't and needn't be true if you are constraining the number of elements)

Border-radius

Now, we will move on to manipulating the square into different shapes.

Border-radius is a great way to create not only circles and ellipses, but also organic looking shapes.

This video explains how to manipulate horizontal and vertical radius for advanced control over the radius.
Here is the tool to easily you can use to generate radius.

Box-Shadow

While creating CSS art, box-shadow can be used create copies of a shape in addition to simulating a 3d effect. Multiple box-shadows can be applied to an element to create multiple copies of different sizes. Inset borders can be used to create shadows as well.

Clip Path

clip-path is another way to create custom shapes.

The clip-path CSS property creates a clipping region that sets what part of an element should be shown.

Here is a website to help create desired shapes.

Quick notes:

Some shapes (ex: triangles, trapezoids) can be made using border as well as through clip-path. One advantage of clip-path over border is that it is easier to apply gradients.
border-radius and box-shadow may not play well with clip-path

Gradients

Gradient is one of the most common tool used in CSS art. In websites, gradients are used for smooth transitions between two or more specified colors. However, once we know how to, gradients can be used to create shapes, patterns, shading, etc. in CSS art.

For example, in the following pen, all the details on the books have been created using gradients on a single element:

Multiple gradients can be applied separated by commas, and remember backgrounds are rendered from bottom(last) to top(first). This is a great article to refer for improving understanding of CSS gradients.

Breaking down objects into basic shapes

Again, this is not exactly a CSS property, but an essential requirement for CSS art. We break down what we want to draw into basic shapes (boxes, circles, semicircles, triangles, trapezoid, etc.), and try to think how those shapes combine, overlap or aligned to create our design.
We will initially have some idea about how those shapes can be generated (new element, copy through box shadow, through border-radius, or through gradients).
(It's alright to not pin down everything before starting -improvising along the way is ok!)

Conclusion

So, these are mostly the tools in your arsenal while creating CSS art. At times, a number of different methods can be used to create the same effect - which we use will depend on other interconnected shapes/factors.

For example:

using clip-path or gradient to create a parallelogram - clip-path isn't suitable if you need a box-shadow;
using a new box or box-shadow to create a new shape - box-shadow will only work if the required shape is of same aspect ratio and shape; box-shadow may affect your z-positioning

There is no formula to it - initially, it's a bit of trial & error. There are a number of nuances and tricks which can be picked up through the trial & errors. At times, choosing one is simply based on what we are more comfortable with.

Some notes:

i) I haven't talked about responsiveness yet (to keep it simple for now). It's good to use percentage units - atleast for inner elements - to avoid distortions. In the beginning, it is okay to optimize for smaller screens. Using viewport units for outer elements is a good way to create responsive designs. (along with considering max-width, max-height to handle larger screens)

ii) While I have provided links to tools for calculating radius, clip-path, etc. it is better to initially figure it out by trial & error - otherwise, it beats the purpose of leveling up CSS. (This is just a personal opinion)

iii) Check for browser compatibility. For example: conic-gradient isn't supported on Firefox. You can notice the difference in rendering of the following pen in Chrome & Firefox.

That's it. Now, we will move on to apply all of these to create a CSS lamp in the 2nd part

Stacking Context (CSS layouts)

Poulami Chakraborty — Tue, 18 Aug 2020 04:11:00 +0000

So far we have talked about positioning in the 2D plane. It is also possible to specify coordinates along a 3rd direction - the z-direction- which determines which box will be rendered on top in case of overlap.

And just like formatting context in the x-y plane, we have stacking context along the z-axis which determines the layout in the z-direction.

I mentioned that by default the layout is such that there is no overlap - in the x-y direction. There is, however, an overlap in the z-direction - children are stacked on top of parents

The deeper the element in the nesting, the higher up it appears.

Positioning & Floats impacts an elements position in the stacking context.

When the z-index property is not declared on any element, elements are stacked in the following order (from bottom to top):

The background and borders of the element
Descendant non-positioned blocks, in order of appearance in the HTML
Descendant positioned elements, in order of appearance in the HTML

A positioned element with a z-index creates a new stacking context.

z-index

z-index is how we explicitly specify the stacking order of an element. This is another CSS property which seems so simple - elements with a higher z-index value are displayed in front of those with a lower z-index value. That's it.

Well, not actually. The main thing to understand is that z-index is not a global property - it is scoped within its own stacking context.

Every stacking context has a single HTML element as its root element. And the z-index of an element confined to a stacking context is set relative to that element.

Elements of 2 different stacking contexts cannot intermix. No matter how high the z-index an element cannot be placed on top of an element whose containing stacking order is higher.

That sounds too complex- we will consider with a different example.

For analogy, consider this organization of books in a shelf - we can re-organize the books in each drawer, but never can a book in the blue layer appear above books in the orange layer, or below books in the pink layer. We need to change the order of the drawers in order to do that.

Watch out for

Position: z-index only works on positioned elements (i.e. non-static elements)
Stacking context created: New stacking contexts are created by opacity, transforms, filters
Pseudo elements: Pseudo-elements are treated as descendants of their associated element. To position a pseudo-element below its parent, you have to create a new stacking context to change the default stacking order.

Formatting Context (CSS layouts)

Poulami Chakraborty — Tue, 18 Aug 2020 03:59:32 +0000

We have talked about how some elements are removed from the normal flow due to absolute positioning, floats, etc. What happens to the flow of their nested/ descendant elements?

Well, the out-of-flow elements establishes a new flow for the layout of its child elements. That establishes a new independent formatting context - a formatting context is an area in which descendant boxes are laid out according to specific rules.

Everything on a page is part of a formatting context. The root element establishes a block formatting context where boxes are laid out according to the block-and-inline layout rules. Out-of-flow elements creates a new formatting context.

Watch out for:

New formatting context creation: Overflow anything other than visible, elements with display: inline-block, grid items create new block formatting context
Margin-collapsing: margins do not collapse across formatting context boundaries
Floats: An element that establishes a new block formatting context will contain internal floats and exclude external floats.

DEV Community: Poulami Chakraborty

New website

Back to JS Basics: Objects

Concepts covered:

Some things to keep in mind:

Dot notation vs Bracket notation

Object References & Cloning

Shallow and deep copy

Back to JS Basics - Types & Coercion

JavaScript Data Types

Null vs Undefined

Peculiarities of Number

Type Conversions & Coercions

1. To String

2. To Number

3. To Boolean

Comparisons (Loose '==' vs Strict '===' equality)

CSS Animated Card with a single 'details' element

WAI-ARIA : An Introduction

What is ARIA?

Why should you care about ARIA?

Writing Semantic HTML

Poulami Chakraborty ・ Sep 13 ・ 3 min read

What can ARIA do?

1. Roles

Notes

2. States and Properties

When to not use ARIA?

Writing Semantic HTML

Why should you care about semantic HTML?

How to make your document semantic?

1. Page Layout /Document Structure

2. Inline Text Semantics

100 Background Patterns with CSS Gradients

Just Enough Regex

Some Regex and String Methods

test()

match()

Regular Expressions

Constructor

Difference between the two methods

Flags

Regular Expression Pattern

Literal Characters

Special (meta) characters and Escaping

Groups and ranges

Character classes

Anchors

Quantifiers

Groups

Negation

Conditionals (Lookahead and lookbehind)

Alternation

Pure CSS lamp: step-by-step

Intro to creating CSS Art

Why try CSS Art?

Diving deep into CSS Layouts - About the series

Poulami Chakraborty ・ Aug 17 '20

The Tools (CSS concepts)

Box Model

::before, ::after

Positioning

DOM structure

Border-radius

Box-Shadow

Clip Path

Gradients

Breaking down objects into basic shapes

Conclusion

Stacking Context (CSS layouts)

z-index

Watch out for

Formatting Context (CSS layouts)

Watch out for:

Peculiarities of `Number`

`test()`

`match()`