DEV Community: kamaldeen olaide, LAWAL.

Why are Feature Flags Important for Your Deployment Strategy?

kamaldeen olaide, LAWAL. — Thu, 21 Dec 2023 21:49:21 +0000

One of the tasks of being a junior software engineer in my team is to write reusable code that meets the software requirements. Hence, the DevOps team will work on deploying the software and automating the process.

In this post, we’ll look into the deployment strategy and the difference between a conventional and modern method of deployment strategy. We’ll also look at the importance of feature flags in deployment strategies.

Additionally, we’ll also look at feature flags for dark launching, canary release, and new features.

Understanding Deployment Strategy

What is Deployment Strategy? Deployment strategy in IT operations and software development is a set of techniques adopted by DevOps teams. This helps them update and release software applications in a very reliable condition.

In my company's case, systems get delivered without errors with little or no downtime to the end-users.

The difference between a conventional and “Modern” method of Deployment Strategies

There are two main known deployment strategies for updating a system and releasing software. They are the traditional method and the modern method of deployment strategies.

Conventional or Traditional Deployment Strategies.

Waterfall Model: This strategy has some characteristics which include but are not limited to sequential phases, comprehensive documentation, and limited flexibility among others. It is not a deployment strategy per se, but a traditional software development approach. Waterfall in the realm of deployment simply means each phase like the development, testing, and quality assurance phases must come before deployment.

Big-Bang Deployment: This strategy encompasses all changes, and hence, rolls out all the changes at a go without any incremental updates.

Modern Method of Deployment Strategies

Continuous Integration/Continuous Deployment (CI/CD): This is one of the modern methods of deployment. A method where any changes to a code are constantly integrated into a repository by large team members, and subsequently deploy the code changes to production.

Cloud-based Deployment: With cloud-based deployment, cloud computing services like Amazon Web Services (AWS), and Google Cloud Platform are used for the implementation of strategies as required by your specific needs.

Importance of Features Flags in Deployment Strategies

With feature flags, my company software and DevOps teams have total control of specific features on either a website or in a software application.
It reduces the risk of introducing bugs to the software by the software team, by allowing the software team to incrementally release new features, as well as selective releases of the feature to a specific user base.

Feature Flag in Deployment Strategy as a Risk Mitigation Tool

Having explained both the deployment strategy and the feature flags. Let's now explore why the feature flag serves as a risk mitigator during deployment strategy.

Risk mitigation during deployment strategy is identifying, minimizing, or eliminating risks that are bound to happen. Especially, during software application deployment.

While it’s difficult to identify all issues during deployment. It is a key concept to manage risk for smooth, and seamless deployment.

Feature flags help to serve as a mitigation tool in several ways

Measured Rollout: Risk mitigation is identifying risk before deployment. Feature flags allow you the opportunity to test your new functionality with a controlled subset of users in a limited exposure environment. With this, the impact of issues, if there are any, gets confined to a smaller group of users.

Flexible Rollback: Feature flags provide an instant ability to undo a change when critical or unexpected issues occur during development. This flexible rollback enhances customer satisfaction because it minimizes the risk of extended downtime.

Feature Flags in Deployment Strategy for User Personalization

User personalization in deployment strategy is the process of personalizing software applications to a specific individual user. This is a strategy employed by us to improve user experience and enhance user retention.

Feature flags help with User Personalization in Several Ways

Gradual Rollout: Feature flags help in user personalization by allowing developers to watch the performances of the features gradually released to a distinct set of users. This empowers the developers to increase the testing sample of users with the feature, because of the stability of the feature.

Instant Rollbacks: Feature flags allow developers without waiting for the full deployment to revert to the status quo if the newly baked user personalization feature produces an unwanted or unexpected issue that may lead to a bad user experience.

Feature Flags in Deployment Strategy for Parallel Development

In my team’s example, parallel deployment is the strategy we employed to compare and contrast vital information like functionality, and performance between the previous and the new version of the system application

Parallel deployment also known as parallel development is a software deployment strategy that reduces downtime, risk of failures, and errors. By allowing the gradual transition from the previous version to the new version of the software application.

Feature flags help for Parallel Development in Several Ways

Reduction in Merge Conflicts: Feature flags help reduce merge conflicts that arise from parallel development. Most especially if there are many developers on a codebase. By enabling a flag, where each developer can work on their features. Feature flags mitigate the issue of merge conflicts.

Reduction in Time-to-Market: Feature flags fastrack the time-to-market for new features. This enables the deployment of a feature despite having several developers working on many features before the other parallel efforts are completed.

Feature Flags in Deployment Strategy for Continuous Integration and Continuous Development (CI/CD)

The integration of code changes into a shared repository, and deployment of the system application is achievable through Continuous Integration and Continuous Development for continuous testing of the software.

Feature flags help for Continuous Integration and Continuous Development in Several Ways

Incremental Rollouts: Feature flags allow for the deployment of features incrementally under a feature flag, to gradually expose the feature to a specific set of users.

Risk Reduction: Feature flags help in identifying and addressing issues at the early stage of development. With the bit-by-bit release of the features. This allows for the risk reduction associated with deploying changes at a stretch.

Feature Flags in Deployment Strategy for Emergency Response

Emergency response is a deployment strategy for combating and addressing unannounced critical situations. This kind of strategy is mostly employed by government agencies and some emergency service providers. Feature flags help the organization to adequately respond to unforeseen circumstances.

Feature flags help in Deployment Strategy for Emergency Response in Various Ways

Recovery: Feature flags help in the recovery process immediately after the response stage. They can reintroduce features as the situation is brought under control, and iterating based on the needs of the respondent.

Top-Notch Security: Feature flags allow for prompt disabling of potentially exploitable features. That in turn combats the effect of the attack environment.

Features Flags for Dark Launching

Dark launching is the process of releasing a specific feature and taking its functionality to a segment of your users. It is also the less exposure of traffic of code deployed to the production environment.

Take my company as an example, dark launching is the release that allows our DevOps teams to fix bugs, access performance metrics, and gather feedback from the user about the feature.

The practical way to use dark launch is through feature flags, that allow the DevOps team to control both the visibility and availability of the new feature without deploying the code.

My team DevOps teams use dark launching to test new features on a segment of their user base. This opportunity is unlike the traditional method of releasing a risky-prone feature.

Pros of Dark Launching with Feature Flags

Real-time Control: Dark launching can start and finish the lifecycle of a feature with the help of a feature flag.

Continuous Deployment: Dark launching separates feature release from feature development with continuous deployment. It is easy to test new and existing features concurrently without disrupting the user experience.

Features Flags for Canary Release

Canary release is a release strategy employed for testing a newer version of an application in a real-world environment to gather feedback before making it available to a wider section of users.
Our DevOps team tests the feature stability by setting up the updated feature and shifting the production traffic from the old version of the feature to the updated features.

Feature Flags with Canary Release

Feature flags help in implementing canary release with its value set to off, this ensures no users have access to the new feature.
With a feature management platform like Unleash, the feature flags test the new features with a small percentage of users. The team can include beta testers or internal teams.
Proper monitoring of the performance metrics and feedback from the release, and an instant turn-off of the feature flags if issues are detected.

Pros of Canary Release with Feature Flags

Quick Iteration: Feature flags with the help of performance metrics, and feedback from users enable quick adjustments to the software application.
A/B Testing: Feature flags helps in comparing the performance and user engagement of distinct feature variation. This process is known as the A/B testing.

Features Flags for New Features

New features are an innovative approach to improve the speed, flexibility, and efficiency of software deployments. It is a new innovative approach or methodology that enhances the software deploying process.

New features require meticulous planning and execution for any organization that hopes to deliver high-quality software to its users while maintaining the ability to adapt to business needs.

Pros of New Feature with Feature Flags

Speed: Feature flags help the new feature to be fast in improving the software deployments.

Flexibility: Feature flags enable the new feature to be flexible which enhances the software development.

Conclusion

So, now you understand deployment strategy and the difference between traditional and modern methods of deployment. We have also discussed the importance of feature flags in deployment strategies, as well as the feature flags for dark launching, canary release, and new features.

Beginner's Guide To Array In JavaScript.

kamaldeen olaide, LAWAL. — Fri, 12 Aug 2022 18:53:00 +0000

Ultimate Guide To Array In JavaScript

Let’s look at important data structures we have in JavaScript. Array and iterables will be looked on in this article. We will cover ways of creating array(s), how to manipulate array and some of the important array methods.

What is an array?

An array in JavaScript is zero-indexed based and a collection of ordered lists of an element specified by index. An array doesn’t have a fixed length and can store any values of different types, ranging from string, Boolean, and number, to object and array itself.

Iterables vs. Array-like Objects

**Iterables **in JavaScript can be defined as any objects with @@ itearable method that also implements the iterable protocol. And most importantly, it is an object that can be looped through with a for-of-loop.

Some of the examples of iterables are NodeList, Map, Set, and String, and not every iterable is an array.

**Array-like **are objects that use indexes to access items and have a length property. Examples of array-like objects are String and NodeList, and not all array-like objects are arrays.

Creating Arrays

There are a couple of ways of creating arrays in JavaScript. They are as follows:

Creating with a square bracket notation [];

This is by far the most popular, easy, and recommended way of creating an array in JavaScript.

From the above code, an array of numbers was created using the [] method, and inside the code, you separate the values by comma and end the code with a semicolon;

Creating an array with a special keyword new and array()

This method uses a constructor function, and it builds a new array.

The above code will produce an array of numbers with two values of each number inside it, but it gets strange if we pass one value in the array and the result will be the below result.

We then get an empty array with a length of 9. We can also remove the special new keyword and the array will work perfectly.

Creating an array with Array.of();

This method of creating an array is a special method of of() on the globally available array objects in JavaScript.

The above code is created with the Array.of() method of creating an array.

Creating an array with Array.from()

Array.from() is special because it doesn’t take multiple numbers like the above mentioned ways of creating an array. If you do, it will give an error as the output.

The above code shows an error when multiple arguments are passed through an Array.from(); instead, it takes an array-like object or an iterable, which is not a real array and converts it to a real array.

Adding and removing elements from an array

PUSH()

One of the methods of adding data to an array in JavaScript is the push() method.

The above code shows that reading was added to the end of an array of favorites with the help of the push() method.

UNSHIFT()

Unshift() is an array method used to add elements to the beginning of an array.

POP()

Pop() is used to pop or remove the last element from an array.

Pop() doesn’t return the element it removes.

SHIFT()

Shift() is an array method used to remove the first element. It is similar to pop() but removes the first element of an array.

We can as well add/replace an element inside an array with the direct index access.

SPLICE()

Splice() is a special method only available on real arrays, not on array-like or iterable objects. It is used to insert an element between two elements in an array. There are two different versions of the splice method; one takes at least two arguments while the other takes more than two arguments.

The above code shows a splice method with more than two arguments. The first argument is for specifying the start index, amount of item you want to delete is the second argument, while the third argument is what you want to insert into the element. Start at index zero, delete no items, and insert kunle into the array.

Splice can also be used for the deletion of items in an array.

The above code shows splice with two arguments and is used for the deletion of an item. The first argument is the starting index, while the second argument specifies the number of items to delete.

SLICE()

The above code shows an array with sliceMethod was created with 7 items. Then, storedResult was assigned to that created array.

The new element was pushed to the sliceMethod array, and when we console.log the output, the storedResult has the new element pushed to sliceMethod. This is the normal behavior of an object because it is a reference type, but with the slice method, we can copy array as a brand new array based on the old array.

Slice() is one of the methods we can use on a real array, just like splice(). It is used to copy an array and return a brand new array.

The above code returns a brand new array, and this is another method of copying an array since an array is, in the end, an object and reference value.

Slice() can also be used to select ranges of an array, if you want to select more than one element at the same time, but not the entire elements.

The code above shows that when we use the slice() method on the sliceMeth array, we get the result of the items from index of 1 to index of 4.

Note that the index of 5 is not included in the result.

CONCAT()

A useful method for adding element to an array and return a brand new array, which will be useful if you want to create a copy an array after adding some element to it is concat() method.

Concat() method allows us to concatenate/ add element to the end of an array, this is similar to push() method, but with concat(), it takes an array or multiple arrays and combines the new array with the old array. It doesn’t add the new as nested array to the old array but instead, pull out all the element in the new array and passes them to the element in the old array and in turn return a brand new array.

indexOf() lastIndexOf()

Whenever you have an array of information and want to find out at which indexes in the array a certain element sits, you can either replace it or do whatever you feel like doing to that element.

indexOf() method will return the value of an element in an array. The output for the above code is 2. If you have the same value more than once in an array, indexOf() will return the first value alone.

lastIndexOf() is used to search for an element within an array from the right side of the array.

The above code shows that lastIndexOf() of the value 0 returns 6.

Note: both indexOf() and lastIndex0f() only work on primitive values and not on reference types of values, as the code below shows in detail.

find() and findIndex()

To find an object in an array is easy with find() and findindex(). They both take an argument that is a function that can accept up to three arguments. The first argument is the single object in the array. The index is the second of that single object, while the third argument is the full array.

findIndex() on the other hand will not return the matching item of the array , it will only return the index.

INCLUDES()

The includes() method is used to check if an element is part of an array, though it is mostly useful for primitive values because it is used to check values only.

The above code shows the output as true because it is included in the array.

FOREACH()

forEach() is an alternative to for of loop in JavaScript, it takes a function, and the function takes up to three arguments.

The above code shows the forEach() method in action. The first argument is the singular element in the array, the second argument is the index of the array, while the third argument is all the elements in the array if you need them. This enables us to have access to the indexes of the array, unlike using a for of loop.

MAP()

Map() is one of the special methods available on a real array. It has the task of taking an array, running a function on every item in the array, and the function will now return a transformed element for every element in the array.

Map() is a really nice method of transforming an array because it makes changing an element and getting a brand new array based on the changed element super easy.

SORT() and REVERSE()

Sort() is used to sort an element in an array. By default, sort() converts every element in an array to a string and sorts this in a string logic where 2 is smaller than 4. It takes a compare function that takes two numbers and executes this function on the pairs of elements.

The above code shows that the elements in the array were sorted in descending order.

reverse() is similar to the sort method as it returns the elements of the array in ascending order.

FILTER()

filter() allows us to filter the elements in an array. Just like other high-order array methods like sort, forEach, map, and find, it takes a function which allows us to reduce the number of elements of an array based on some filter.

REDUCE()

Reduce() is one of the most complex and challenging methods in JavaScript. It is used to sum up the elements in an array. It reduces an array to a simpler value.

The above code shows the arguments as previousvalue, currentvalue, currentindex, and the arrays. It also takes another optional argument which serves as the initial value to start with.

The previousvalue will be the initial value, while the first element of the array will serve as the currentvalue.

Spread Operator (…)

The spread operator is an operator that pulls out all the elements of an array and gives them to you as a standalone list of elements.

Array Destructuring

Array destructuring is a powerful and nice syntax feature used to pull out elements from an object, array included. You begin array destructuring by inserting a square bracket on the left side of the equal sign and pointing to your array; whatever you enter in the square bracket will serve as the variable name for the array on the right side.

Conclusion

In conclusion, we have looked at arrays and iterables, covered ways of creating arrays (s), how to manipulate arrays and some of the important array methods.

In this guide, we briefly talked about the popular spread operator and array destructuring.

Happy coding..

Beginner’s guide to JavaScript DOM

kamaldeen olaide, LAWAL. — Sun, 31 Jul 2022 16:28:00 +0000

Beginner’s guide to JavaScript DOM

In this article, we will learn about the JavaScript DOM, nodes and elements, querying and traversing the DOM, evaluating and manipulating DOM nodes, and how we can add and remove an element.

The Document Object Model (DOM)

The Document Object Model (DOM) is the heart of any web manipulation, created by the browser when an HTML document loads inside it.

The Document Object Model (DOM) is a built-in object with many properties and methods for manipulating content, styles, and structures. is one of the unique and useful tools in JavaScript. Interacting with the browser, reacting to user events, changing CSS styles, making cool popups, and many other things can be achieved through the DOM.

DOM and how it’s created.

The DOM describes an HTML page as a hierarchy of nodes; it parses the HTML codes and creates an object representation of it, where the HTML tag/element is translated to an element node and text/whitespace are translated to text node, because the browser doesn’t work with text behind the scenes.

JavaScript Vs Browser.

JavaScript and the browser are always in communication, with the browser being in charge of parsing, rendering, and loading HTML/JavaScript scripts when they are downloaded. As we all know, JavaScript is a hosted language where the browser provides the environment for effective running of JavaScript. The browser provides a bunch of APIs and functionality to enable JavaScript to work with the parsed documents.

DOM API

The majority of web APIs (DOM API Included) are written in JavaScript with the sole aim of manipulating the DOM of web documents.

The API is generally known as “Application Programming Interfaces,” which serves as the path between the rendered HTML documents and the JavaScript. It has collections of interfaces, properties, and methods, and is made up of code structures for manipulating the functionality of an application by developers.

The Difference between Nodes and Elements

Everything in the DOM is simply a node. Nodes are generally the objects that make up the DOM. Elements/Element nodes are HTML tags in the DOM, text nodes are text and whitespace in the DOM, while attributes create attribute nodes.

Nodes and elements are somehow used interchangeably in the DOM, but there is a difference between them.

**Elements **are simply one type of node available in the DOM, created from an HTML tag rendered without the text. It consists of some special properties and methods to interact with elements by either changing the style, content or by creating or removing the element. Node is both an element and a text node.

Our Sample Code

Selecting/Querying of Nodes.

There are many methods of selecting and querying nodes in your rendered HTML page in the DOM.

They are as follows.

querySelector().
querySelectorAll().
getElementById().
getElementsByTagName().
getElementByClassName().

querySelector(). With querySelector(), you can have access to a single element in the DOM. This method gives you more flexibility and power as it can take CSS selectors and pseudo selectors as you can use it in a CSS file.

Using document.querySelector() to access the first elements in the DOM is recommended.

This method can also be used to uniquely select the first instances, i.e., it takes any CSS selectors and will return the first element if there are selectors that match multiple elements. Despite the fact that all the li tags in our code have a class of listItem, it will return the first li alone.

querySelectorAll () This method is used if your wish is to access a collection of elements, an array like object, which is typically a node list, not a real array, but an array like object that supports certain behaviors of an array. You also have different ways of querying the documents by CSS selectors and pseudo selectors, which will return a non-live nodelist.

getElementById(). This method is the easiest way to find an element inside a DOM tree and will return a single element as Id is a unique way of assigning an attribute to an element.

The below code snippet shows the result of a unique way of selecting an Id of vp from our code.

getElementsByTagName() this method is used to access elements with similar tag names. It returns an HTML collection instead of a Nodelist like querySelectorAll(), and it will return a live Nodelist.

getElementsByClassName(). This method will retrieve elements with similar class names into an HTML collection.

The below code shows the result of selecting the className of all the li in our code sample.

DOM element evaluation and manipulation

There are many ways to manipulate and evaluate elements in the DOM, provide a good user experience for the users, change and modify the text of an element in the rendered user interface without the need to reload the page. The following are some of the methods of manipulating and evaluating elements in the DOM.

innerText
innerHTML
textContent

innerText; This is one of the methods of accessing and modifying text in the DOM. It displays the invisible text contained inside the node. Code below for more illustrations.

The above code shows the result for the innerText of the first li with an Id of fab. Note that I added span to the first li from our sample code.

InnerHTML; with this method, the text content and element spacing are returned, and the entire HTML element can be added into your DOM. The example below shows where the h2 element was added/appended to our sample code with the help of innerHTML.

textContent; this method gets the inner text as it was in the source code. It won’t return the tags but will return all spacing and hidden CSS text.

The above code replaces the text content, otherwise known as a text node, with the new text.

The Difference between Attributes and Properties

Although not always, attributes are strategically mapped to properties, which enables live synchronization. An attribute is anything written within HTML code that allows the browser to create a DOM object based on the tag name.

Properties are the value stored in the object that is created based on the HTML code automatically. Objects in JavaScript have properties.

How to set/remove/get an attribute

To change/modify/remove/get an attribute while in the DOM, there are many methods, which are listed below.

setAttribute() this method is used to set attributes to our specified element. This method takes two values, which are the name of the attributes you want to set (must be a string) and the value you want to give your set attribute.

removeAttribute() with this method, attributes can be removed from our HTML element. This method takes only a single value, unlike setAttribute() that takes two values.

getAttribute() this method as the name implies, allows for an attribute to be get/retrieve from the HTML code. It takes a single value just like removeAttribute().

Traversing the DOM.

This section is dedicated to traversing the DOM, where we will discuss some of the properties and methods needed for DOM traversal.

Traversing the DOM is using one selected node to access either its childrenElement, parentElement, siblingElement or the rest. You can move to any direction in the DOM with the help of traversing. Before we move ahead with traversing the DOM, let’s get hindsight on some of the terms we will encounter.

Child/Children

This simply means a direct child node or element node.

In the above code, h1 is the child of div.

Descendant/Descendants

Descendants are both direct and indirect nodes of an element in the DOM.

The above code shows that both the h1 and the sub tag are descendants of the div.

Parent.

Just like the child/children, a parent node is a direct parent node or an element.

The div is the parent of the h1 but not of the sub tag as shown above.

Ancestor

Ancestor is both direct and indirect parent node of an element.

Div is the ancestor of both the h1 and the sub tag.

Back to our DOM traversal, we can dive into any surrounding elements or nodes in the DOM once we have selected a node.

Some of the important properties are as follows.

parentElement/parentNode
childNode/children
firstChild/firstElementChild
lastChild/lastElementChild
nextSibling/nextElementSibling
previousSibling/previousElementSibling

parentElement/parentNode; the difference between parentElement and parentNode is that while parentElement is used to select an element’s parent node, parentNode is used to select any node in the DOM.

When there is a need to ascertain the parent element of a particular element that is nested in another, the parentElement property is used.

The code returns the above answer when you use parentElement on the li from our sample code.

childNode/children; the main difference between childNode and children is that while childNode returns all the child nodes in the DOM (text included), children is used to select only the element child node.

“children” is used to pull out all the nested elements inside the parent element.

All the children were pulled out when children’s property was used on their parent.

firstChild/firstElementChild; the difference between firstChild/firstElementChild is while firstElementChild returns the first element child alone, firstChild returns the first child node.

If you have many children nested within a parent and you need to select the first element child, you can use a querySelector to get the first child, but you can as well use the famous firstElementchild to get the result.

lastChild/lastElementChild; the difference between lastChild/lastElementChild is while lastChild returns the last node, the lasElementChild returns the last element child node.

If there are many children nested within a parent, and there is a need to select the lastelement child, lastElementchild will get you the result.

nextSibling/nextElementSibling; the difference between nextSibling/nextElementSibling is while nextSibling returns the next sibling node, the nextElementSibling returns the next element sibling node.

If you wish to select the next sibling element of an already selected element, the property to use is nextElementSibling.

The result from our sample code gives ul as the nextElementSibling to h1.

previousSibling/nextElementSibling; the difference between previousSibling/previousElementSibling is while previousSibling returns the previous sibling node, the previousElementSibling returns the previous element sibling node.

If you wish to select the previous sibling element of an already selected element, the property to use is previousElementSibling.

The output of the code that selects the previousElementSibling on the button with a class of .btn from our sample code is the ul.

Query Method vs. DOM Traversal

It is super important to be aware of all the DOM traversal techniques, where you can select any element in the DOM. This is powerful, but care must be taken in handling them. Query methods will always work fine in accessing elements in the DOM and you shouldn’t be shy about making use of them.

DOM Elements Styling

specific ways of manipulating elements in the DOM, providing a good user experience to the users, changing and modifying the style of an element is by changing their style.

Style Property

style; if you are familiar with CSS properties, we can access the properties in JavaScript and manipulate the styles and change them around using any CSS properties. You can directly target individual CSS styles using an inline method, and this has higher specificity that will override any style properties assigned to the element. From our code sample, I changed the background color of the h1 to blue. example below.

Note: When changing styles in JavaScript, instead of using snake case as we use in CSS, the convention is to use a camel case like I did in the above code, which changed from background-color in CSS to backgroundColor in JavaScript. This kind of styling, known as inline, will only work on a single element. If we want to change the background color of all our li tags, as we already gave them the class of listItem, it will not work until we loop through each and apply the style. code below for proper illustration.

Via className

With className, you can manipulate the CSS classes attached to an element by dynamically changing, removing, or adding new CSS classes to an element. With className, it takes a single string that contains all the classes to be added. All classes are set and controlled once and other properties like id can be controlled.

Via classList

classList is a JavaScript object with a couple of built-in methods that make it convenient to add/remove/toggle and check if an element contains a CSS class. It gives you control over the added classes and can also be used in conjunction with className.

Creating/Inserting new Element

This section will be dedicated to how a brand new element can be created and inserted into the DOM.

There are two major ways this can be done; they are as follows:

1 HTML String

creatElement()

HTML string can be used to create a new element in the DOM and can be added with innerHTML and insertAdjacentHTML.

innerHTML

innerHTML property which you will find on an element node that adds or renders an HTML code in the place you added it. It is useful whenever you plan on changing all the HTML content of an element.

insertAdjacentHTML.

Alternatively, insertAdjacaentHTML which is a method that can be use to add an HTML code next to an existing code instead of replacing the code. it has four positions, beforbegin, afterbegin, beforeend and afterend.

**createElement(); **Method use to create single DOM element node instead of a bunch of HTML at once. createElement() is always called on a document object and takes at least one argument, i.e. the tag name of the element without the angle bracket you want to create.

The above code shows a new element li created using the createElement method.

createElement() object can be added to the DOM with following methods.

appendChild()/append()
prepend(),before(),after(),insertBefore().
replaceChild()/replaceWith().

**appendChild/append(); **is used to append newly created elements into the DOM. While append() insert both text and element node, appendChild() is used to insert element node only.

**prepend(),before(),after(),insertBefore(); **used to insert an element/node in a specific position. Prepend() is used to insert newly craeted element as the fist element, before() is used to insert before a selected element, after() is for inserting of elemnt to a specific position after a selected element, while insertbefore is used to insert a child node before an existing child.

*replaceChild () or replaceWith () replaceWith *() is used to replace an entire element in the DOM.

DOM Node Cloning

Inserting of element will only move and not copy the element, if you want to copy the element the method available on every node element is the cloneNode(), which takes one optionally argument that is a boolean which determines whether the cloning is a deep when you input true or notify the input is false.

Removing Elements

It is nice to have an element inserted into the DOM, but it will be bad if we can’t remove unwanted elements from our DOM. Yes, with replaceWith() we can remove the element but to only replace it with another element. To get rid of an element entirely, there are remove() and removeChild() methods.

The above code will remove the ul in our sample code.

The above code shows how to use removeChild() .

Conclussion

That is a wrap.

We have covered so much in this article, we have touched on virtually all the important DOM manipulation properties and methods. We talked about the selection methods, traversing the DOM, creation, insertion, and deletion of elements, and many more.

I hope this article will help you to get a clear picture of the JavaScript DOM.

Enjoy your day.

Read this post and more on my Typeshare Social Blog

Functions in JavaScript.

kamaldeen olaide, LAWAL. — Thu, 21 Jul 2022 17:54:00 +0000

There are many core building blocks in programming language JavaScript included, and one the fundamental of any programming language is a function.

Function can simply be defined as code on demand or a block of code, which can be executed at a later point of time or called anywhere in your code to perform a specific task.

How to create functions

Function Declaration

A function declaration (also known as a function statement, or function definition) must have the following:

Function keyword (must).
Any name of your choice, which serves as the name of the function.
A parameter or list of parameters enclosed in parentheses (not a must).
The function body is between curly brackets, which is the code you want to execute.

The code below shows a function named upscale.

The above function has the function keyword, the body of the function (code inside the curly brackets), but doesn’t have a parameter.

Function expressions

 Function expression syntax is almost the same as that of a function declaration/statement, but in this case, the function is defined inside an expression with the function keyword at the right side of an assignment operator.

Anonymous Function

An anonymous function is the same as a function expression without a function name. An anonymous function can be used where you don’t store them in variables. An example is when it is used in an addEventListener method.

Arrow function

The arrow function is a newly added feature to JavaScript to shorten and make our code neater. In this form of writing a function, the keyword "function" that is a must in all of the above ways of defining a function is not needed. Instead, we make use of an arrow symbol. It is always used on the right side of the equal sign and in place of the anonymous function. A sample is shown in the code below.

The above code can be re-written in a shorter way if there is no argument, as shown below.

Note: An empty pair of parentheses is required.

Parentheses can be removed outright if there is only one parameter/argument, and if there is a single expression in the code, it can be written as shown below, where curly brackets can be omitted.

Calling the defined functions

JavaScript will store the above code in memory because the code doesn’t run immediately when the script is loaded until you execute it by calling the function.

A function is called using the name of the function with parentheses, and can be called as often as you like and wherever you want it to be called in your code.

Function Hoisting

For function declarations and statements, the code is automatically hoisted to the top and fully initialized by JavaScript, which means a function statement can be called before declaring it.

While the code is hoisted to the top in function expressions, it is, however, hoisted as undefined as you can’t call a function expression without defining it.

The difference between functions and methods

Functions are reusable code that can be called anywhere in your code to execute a specific task. A method is also a function, but a function associated with an object or data type (String). They are defined on an object or a data type (String), whereas a function is defined on its own.

Rest Parameters

The rest parameters/operator look like the spread operator. You add three dots "..." but the place you use the operator is different from the spread operator. In rest operator, the three dots are used in the function parameter list to perform the task of taking all the arguments the function gets and merging them all into an array, which enables you to call the function without passing an array.

One important note about rest parameters is that there must not be more than one rest parameter and they must be the last arguments on the list.

Functions inside of functions

It is quite possible to have functions inside of functions, with the exception that the function inside will have a local scope to the functions. This kind of function is also known as a nested function.

If you noticed from the above code, the nested function is inside of an object. Don’t be surprised, the function is also an object.

**Parameters and arguments

It is not suicidal for a programmer to use the words "parameter" and "argument" interchangeably, but there is a slight difference between the two.

Parameters are those variables used while defining a function within the parentheses.

Arguments, on the other hand, are the concrete values you pass to a function when calling it.

Understanding callback functions

Callback functions are functions called for you by something else that can’t be controlled. This can be achieved with either an anonymous function or by storing it in a constant and passing the pointer to the function.

In the above code shown, we are passing a pointer to a function to another function, which makes it a value for a parameter of the addEventListener function.

I hope you will learn one or two tips from this article.

Enjoy.

CSS Grid? the Nitty gritty?

kamaldeen olaide, LAWAL. — Tue, 25 Jan 2022 08:54:14 +0000

      **INTRODUCTION TO CSS GRID**

CSS grid is a two dimensional layout style that afford us the ability to create grid and place them on a webpage, it also give to us the ability to insert an element inside the grid and place the element as we wish. It has a two directions with columns coming down and rows going across.
The easiest way to make a complex web design with different columns and multiple row is the css flex grid. It is superior to css flexbox but both can be used on same web design project.

        **Grid Container**

The first thing is to take a div or an element and display grid, by displaying grid that open the ability to use grid on the div or the element.

         **Display Grid **

To make the above markup a grid, you add display grid to the div with class of container, this won’t change the layout of the element on the webpage.

     **Grid-Template-Columns**

To specify the number of columns needed inside a grid is very easy to achieve; you can decide to have one, two, three or four column.

The above code shows that the container has 4 column grid of 200px each; we can as well make each column a different width.
To make the code in above snippet to look more enticing as we have repeated the use of 200px 4 times, we can set our grid-template-columns to the code below using a repeat function.

The first parameter inside the repeat function defines the number of repetition, while the second represent what to repeat; but to design your website to be responsive which is a core part of designing, instead of specifying the column in pixel or in percentage, there is a responsive unit in css grid which is fr.
The fractional unit calculates the available space in the grid container.

As you can see from the result, the first, third and fourth column has 1fr has value, while 2fr was set as value for the second column; we can as well use the repeat function on the fr unit.

      **Grid-Template-Rows**

Similar to grid-template-columns, we have grid-template-rows which is primarily used to define the height and the number of rows in our grid container.

           **Grid-Auto-Rows**

The grid property, grid-auto-rows affects rows when the size is not set initially.

Like I said earlier, the grid-auto-rows will only affects the grid container if the row was not initially set, but it won’t have any effect if the row is set.

setting the grid-auto-rows as above means content inside the element is prone to overflow because we have set the fixed height; to prevent this occurrence, there is a feature that is known as minmax().

                **Minmax().**

The minmax function embedded in css grid enable us to set the value of both our columns and rows as we desired. This function as you can deduce from its name takes two values the minimum and the maximum values.

The above code shows that the grid-template -rows was set with minmax() that set its minimum row value to 100px and set the maximum value auto.

                    ** Gap.**

We can add gap or space between our column and rows in css grid using gap.

With gap property set to 10px, both the column and the rows will have a spacing of 10px.

With css grid, it is possible to change the position of an items to any rows or columns as you deem fit; this to me is why grid outperform flexbox as you can literally change your layout as you wish.

          ** Grid-column**

Grid-column is used to span the item along the column axis; with this property, you can conveniently place your items anywhere you want in the grid.

As you can see from the above code, the grid-column property set to .b0x-1 was set to start from line 1 and end at line 7 of the 6 column grid.

             **Grid-rows**

This property is similar to grid-column, but instead of working on columns, the grid property grid-row works on rows.
It is used to place the items in any rows within the layout.

The code above will place the .box-1 to start at row 1 and end at line 4.

       ** Grid-Templates-Areas**

This is one of the most interesting property in css grid, with this property you can literally configure and reconfigure your layout by giving specific names to the area on your grid.

The above results shows that grid-template-areas was set on the grid container, with each row defined by an apostrophe (‘ ’) or quotation mark (“ “).

           **Grid-Area**

Based on the above code, after the grid-template-areas has been set, the next step is to procced to the grid item in this case than main, section, aside and footer tags and set the grid area as appropriate.
See below for the code that produced above result.

         **Justify-items**

This is use to align items in a grid along the row axis; the justify-items has a default value of stretch, but it does have three other values like start, end and center.

           **align-items**

Similar to justify-items but, it is use to align items in a grid along the column axis; the justify-items has a default value of stretch, but it does have three other values like start, end and center.

        **Justify-content**

Justify-content is used mainly when the grid size is smaller than the grid container, hence the property will be used to place grid content on row axis.
This property has a default value of start, but it has stretch, center, end, space-around, space-between, and space-evenly.

         **align-content**

Just like justify-content, align-content is used mainly when the grid container has a fixed height, hence the property will be used to place grid content on column axis.
This property has a default value of stretch, but it has start, center, end, space-around, space-between, and space-evenly.

         **align-self**

Align-self is used on the grid children itself, as it used to align the items along the column axis.

       **justify-self**

Justify-self is used on the grid children itself, as it used to align the items along the row axis.

     **Conclussion**

This is a quick round down of the popular css grid, and i hope you will find this article helpful.

Quick Introduction to CSS Flexbox.

kamaldeen olaide, LAWAL. — Thu, 20 Jan 2022 22:17:00 +0000

This is a quick introduction to one of the most popular CSS concepts; which is CSS flexBox.
In this short write-up, I will introduce you to this popular CSS concepts.
What is Flexbox?
This is a one dimensional layout model that make it easy to design efficient and flexible layout, control page alignment, and distribute spaces among items.
Before the advent of flexbox, there are many methods to layout model in web development which includes;
• Block
• Table (For two-dimensional table data).
• Inline (Explicitly for test)
• Positioning

WHY FLEXBOX? With flexbox, items can be arranged as you want with enough flexibility, and it is one of the core concepts for front-end web developer.

To get a proper grasp of flexbox and how it works, we have to understand its core concepts.
Main axis (Left to right)
Cross axis (Perpendicular to Main axis, i.e from
top to bottom)
Parent Container (Flex Container)
Children Element (Flex Item)

Main Axis: Main axis flows from left to right by default, while main end is at the right, main start is the left of the main axis.

Cross Axis: Cross axis flows from top to down by default, while cross start is at the top, cross end is the bottom of the cross axis.

Parent Container (Flex Container): this container accepts various properties that are listed below.
 Display
 Flex-Direction
 Flex-Wrap
 Flex-Flow
 Justify-content
 Align-items
 Align-contents
Let us start by analyzing the above listed properties one after the other and knows the actual work they are meant for.

Display: You will recall, display is one of flexbox container properties, let me share a snippet of code before and after I added a display property to the code.

Before adding the display property

This is the result gotten from my the code below;

Notice the code above? We have a div with a container class; that div serve as the parent container, while the remaining nine div are the child elements, as rightly explained above.
In my CSS file (file not shared here), I added a border to the parent container, I gave the child-item element padding and align the text to center, while each of the boxes were given a unique background color.

After adding the display property.

The code that did the trick above is below.

What you need to do is simple and straightforward, locate your class of container in your CSS code, and input this DISPLAY:FLEX;.
NOTE: There is an inline-flex property as well, but rarely use.

Flex-Direction: This is an important property of the flex container as it establishes the main axis, which in turn decides how the flex-items are placed inside the flex container.
The default setting of the main axis is to flow from left to right, but we can however change how the flex-items are placed in the flex container by changing the direction of the flex-direction.

Let us go back to our CSS file to make the effect on our layout, the flex-direction can accept four value to change the direction of the flex-items, they are as follows.

           _Flex-Direction: row;_

By setting the flex-direction to row; the layout won’t be changed, as row is the default value for the flex-direction.

      _Flex-Direction: row-reverse;_

With this selection, our layout will change from the initial setup, it will change the flex-items in the reverse order, see snippet for proper understanding.

         The code

         _Flex-Direction: column:_

With flex-direction set to column, the direction of the main axis changes from top to bottom, which means the items are now stacked on each other. See code and result for more.

     _Flex-Direction: column-reverse:_

This property set the direction of the main-axis from top to bottom in the reverse direction.

Flex-Wrap: Another important property of the parent container is the flex-wrap property. By default, all the flex-items in a container will try to fit into a single line, and where there is limited space, the flex-items will overflow to another line. With flex-rap, three distinct property can be set on the flex-warp property.

        _Flex-Wrap: nowrap:_

Nowrap is the default value of flex-warp, and it will display as the initial layout, snippet of code for more illustration.

           _Flex-Wrap: wrap:_

With the value of the flex-wrap set to wrap, the flex-items will be wrapped within the flex container. See code for more illustration.

Wrapping takes place as at when needed, as you can see, as there is not enough space for box 7 and box 8 they moved down to row below.

      _Flex-Wrap: wrap-reverse:_

The main distinct between wrap-reverse and wrap is instead of the item's to move to row below as in the case of war, it in turn moves to row above because of the wrap reverse, see code snippet and output for illustration.

Flex-Flow: Another property of the parent container is the flex-flow property. It is straightforward, as it is the shorthand for flex-direction and flex-wrap.
Flex-flow is set to flex-direction = row and flex-wrap = nowrap by default because that is the default value for flex-direction and flex-wrap property.

While setting the values for flex-flow property, be minded that the first values is for the flex-direction while the second value is for the flex-flow property.

We can set all values for flex-direction (row, column, column-reverse and row-reverse) and values for flex-wrap (wrap, nowrap, wrap-reverse) on flex-flow.

Justify-Content: This is an alignment property provided by flexbox on flex container; Justify-content defines the alignment along the main axis, recalled that main axis flows from left to right.

  _ Justify-content: flex-start:_

The above is the code and result when the justify-content value is set to start. Here the items will be aligned to the left which is the start of the main axis.

    __Justify-content: flex-end:_

As the name implies, setting justify-content value to end will align the items to the right of the main axis which is the end of the main axis.

     _Justify-content: center:_

By setting the value for the justify-content to center, you have aligned the items in the flex container to be at the center of the main axis.

    _Justify-content: space-between:_

With space between, the extra spaces between the items are evenly split and added in between the flex items.

    _Justify-content: space-around:_

You might desire that there should be spaces at both beginning and end of your item, the value to set your justify-content to be space around, but note the spaces between the flex items is twice more than the space at the start and end of the items.

      _Justify-content: space-evenly:_

To get the remaining spaces evenly distributed in the container, set the value of the justify-content to space evenly.

One important point you should keep in mind while working with justify content is that, it align the items based on the main axis. It works directly with the direction set by flex-direction.
If the flex-direction is set to column, then, the justify-content will deal with vertical alignment.

Align-items: This is an alignment property provided by flexbox on flex container; Align-items defines the default behavior of how flex items are laid out along the cross axis of the container.
It works like justify-content but in the perpendicular direction.
Align-Item: Stretch:

Above is the snippet of cod and result when the align-items value is set to stretch.
This is also the default value of the align-items property.

       _Align-Item: Flex-Start:_

All the items are pushed to the cross start, we should remember that cross axis flow from top to bottom.

    _ Align-Item: Flex-End:_

In the above code, all items are pushed to the cross end.

        _Align-Item: Center:_

The code above centered along the cross axis.

Children Elements (Flex Items): this container accept various properties that are listed below.
 Order
 Flex-grow
 Flex-Shrink
 Flex-Basis
 Flex
 Align-self

Order: The items in a flex container are laid out in the order in which they appear in the source code. We can only change this order in flex by using the order property.

By giving the items an order higher than 0, the item will be pushed all the way to the end; this is because by default all items have a default order of 0.

Flex-Grow: The next property that can be applied on a flex items is the flex grow property; this property specifies the amount of spaces inside the flex container the item should take up.
The flex-grow property is relative to the size of other items in the container.

Flex-grow default value is 0 and if you want to effect change, you will set values greater than 0.

Flex-Shrink: This property specifies the amount of spaces inside the flex container the item should shrink if necessary, but unlike flex-grow, the default value for flex-shrink is 1.
The flex-shrink property is relative to the size of other items in the container.

Flex-Basis: The next property is the flex-basis, which specifies the initial space of a flex item, before the distribution of extra spaces in the container. This is used in place of with ion flex layout.

Flex: Flex is the short hand for flex-grow/flex-shrink and flex-basis.
Although, we can set the value individually, but the recommended way is to use the flex property.
We can set the values like code below i.e three values separated by space.

The first value represent the flex-grow, second value represent the flex-shrink while the third value represent the flex-basis.
N.B the default value for flex-grow, flex-shrink is 0 and 1 respectively.

Align-Self: Align-self is used to control the alignment of the individual flex-items along the cross sectional axis.

** I hope with this short but precise write-up about the popular css flexbox you will be able to understand it well.
Thanks for your time.**

DEV Community: kamaldeen olaide, LAWAL.

Why are Feature Flags Important for Your Deployment Strategy?

Understanding Deployment Strategy

The difference between a conventional and “Modern” method of Deployment Strategies

Conventional or Traditional Deployment Strategies.

Modern Method of Deployment Strategies

Importance of Features Flags in Deployment Strategies

Feature Flag in Deployment Strategy as a Risk Mitigation Tool

Feature flags help to serve as a mitigation tool in several ways

Feature Flags in Deployment Strategy for User Personalization

Feature flags help with User Personalization in Several Ways

Feature Flags in Deployment Strategy for Parallel Development

Feature flags help for Parallel Development in Several Ways

Feature Flags in Deployment Strategy for Continuous Integration and Continuous Development (CI/CD)

Feature flags help for Continuous Integration and Continuous Development in Several Ways

Feature Flags in Deployment Strategy for Emergency Response

Feature flags help in Deployment Strategy for Emergency Response in Various Ways

Features Flags for Dark Launching

Pros of Dark Launching with Feature Flags

Features Flags for Canary Release

Feature Flags with Canary Release

Pros of Canary Release with Feature Flags

Features Flags for New Features

Pros of New Feature with Feature Flags

Conclusion

Beginner's Guide To Array In JavaScript.

Ultimate Guide To Array In JavaScript

Beginner’s guide to JavaScript DOM

Beginner’s guide to JavaScript DOM

Functions in JavaScript.

How to create functions

** Function Declaration**

Function expressions

Anonymous Function

Arrow function

Calling the defined functions

Function Hoisting

The difference between functions and methods

Rest Parameters

Functions inside of functions

**Parameters and arguments

Understanding callback functions

CSS Grid? the Nitty gritty?

Quick Introduction to CSS Flexbox.

Function Declaration