DEV Community: Odhiambo Ouko

5 Unique Features that Put Goleko Ahead of the Game

Odhiambo Ouko — Fri, 14 Jun 2024 12:45:05 +0000

Project management platforms are requisite tools when it comes to structuring and assigning tasks, promoting collaborations, sharing files, and, of course, boosting productivity. The need for project management solutions is even higher today, given the increasing number of remote and distributed teams around the world. While there are many project management tools to select from, one that stands out is Goleko – an up-and-coming solution with immense capabilities.

Let’s dive into a few features that make Goleko give other project management tools a run for their money.

Automatic Smartboard

One of Goleko’s intriguing features is its cutting-edge smartboard, which delivers easy viewing and flexibility. Thanks to its compelling UI design and one-click functionality, the smartboard allows users to move seamlessly from one part of the platform to another, whether you want to assign tasks, check tasks in progress, or locate important files. These smartboard attributes enhance user experience and retention – ultimately improving productivity.

Time-Tracking Capability

Not all project management tools have time trackers. Fortunately, Goleko has a time-tracking feature to take project management to the next level. With Goleko’s time-tracking capability, project managers and team members can check how much time was spent completing a project or the time left until specific tasks reach their deadline. As a project manager, you can use the tracking feature to not only evaluate your team members’ effectiveness but also export time logs for invoices.

Permission Granting

Geleko has a permission feature that lets you dictate how other people interact with your projects. You can use the feature to allow select team members to create, edit, or upload a task. The feature also lets you show or hide comments and display potential price quotes to particular clients. Besides promoting collaboration, the permission-granting capability gives managers complete control of their projects for improved management and outcomes.

Screen Recording

Another unique feature Goleko has is a screencast for recording screen videos. By recording your screen, you can explain how to do specific tasks, comment on projects, and provide real-time feedback to your team members. Since videos are easier to follow and understand than written comments and feedback, Goleko’s screen recording feature expedites communication and helps improve project success.

Files Importation

While working on projects, you may sometimes need to use files on other tools on your computer. Goleko was made with this issue in mind, which is why it has an import feature that enables you to extract tasks and projects. The import feature is essential for quickly and efficiently transferring all your work to Goleko for centralized management.

Leverage the Power of Goleko

Goleko has several trailblazing features that make it the go-to project management tool. From its one-click smartboard to file importation capabilities, Goleko is designed to make project management easy and fun. Goleko is available in three packages – including a Free starter pack that has a total capacity of 300 megabytes and accommodates up to 3 users, 3 projects, and 300 tasks.

If, Else, Else If, and Switch JavaScript Conditional Statement

Odhiambo Ouko — Fri, 07 Jun 2024 08:30:59 +0000

In our everyday lives, we always make decisions depending on circumstances. Chew over a daily task, such as making coffee in the morning. If we have coffee beans, we can make coffee; otherwise, we won’t.

In programming, we may need our code to run depending on certain conditions. For instance, you may want your program to assign an A grade to students if they score more than 80 points or program a website to display a checkout tab on a liquor website only if the user is 18 or older. That's where conditional JavaScript statements come in. The conditions specify the code block to be executed if a specified condition is true.

Let's explore if, if…else, else if, and switch statements to understand how they are used in JavaScript.

If Statement

The if statement is the most basic conditional statement in JavaScript. This statement evaluates a condition and executes the code block within its body if the condition is true. If the condition is evaluated as false, then the code block will not run.

If Statement Syntax

if (condition) {
//code block to be executed if the condition is true
}

If Statement in Action

We can use the if statement to execute a given code block provided a given condition is true. For example, we can write our code to send interviewees a congratulations message if they score 75 points or more.

if (score => 75){
console.log(Congratulations! You’re hired)
}

Output

Congratulations! You’re hired

If…Else Statement

What if we want to run a second code if the preset condition returns a false value? In that case, we employ the if…else statement. This statement checks a condition and runs the first code block if the condition evaluates to true. If the condition is false, the second code will execute instead.

If…Else Statement Syntax

if (condition) {
//first code block to be executed if the condition is true
} else {
//second code block to be executed if the condition is false
}

If…Else Statement in Action

We can instruct our program to let users aged 24 and above create a customer account but encourage those below 24 to try the process later.

if (user => 24) {
console.log(Welcome! Proceed to open an account)
} else {
console.log(Age limit not reached. Try again in a few months!)
}

Ternary Operator

Although if…else statements are easy to write, there is a shorter way to write them. The shorthand Is known as a ternary or conditional operator.

Ternary Operator Syntax

Condition? Expression 1 : Expression 2;

The example above represents the syntax of a basic ternary operator. The condition to be evaluated is put before the question mark ?, followed by the statements to be executed. A colon : separates the two expressions. The entire operator ends with a semicolon. In the ternary operator, the first statement will execute if the condition is true. If it's false, the second expression will run.

Ternary Operator in Action

(passMark => 50)? console.log(Pass! Go to the next level) : console.log(Fail! Try again later);

In the above example, the program will print Pass! Go to the next level if the score is 50 or more. It will print Fail! Try again later if the score is below 50.

Else If Statement

We usually use the if…else statement when evaluating one condition. What if we want to add more conditions to our if…else statement? Simple, we use the else if statement! Unlike the if…else statement, the else if statement allows us to have more than two possible outcomes. We can also use it as many times as we want.

Else If Statement Syntax

else if  (condition) {
//Code block to be executed
}

Else If in Action

Let time =  ‘12:00 am’
If (time === '9:00 am') {
Console.log(‘Good Morning! Time to wake up.’)
} else if (time === ‘12:00 am’) {
Console.log(‘Good afternoon! Time for lunch.’)
} else if (time === ‘4:00 am’) {
Console.log(‘Good Afternoon! Time to go to the gym.’)
} else if (time === ‘10:00 pm’) {
Console.log(‘Goodnight! Time to sleep.’)
} else {
Console.log(‘Invalid time!’)
}

In the above example, the program will print Good afternoon! Time for lunch. because the time is set to 12:00 am.

Switch Statement

While the else if statements are incredible for introducing more conditions to our if…else statement, writing many statements can be cumbersome. Moreover, numerous else if statements chained in an if…else statement can be hard to evaluate. As a result, they often have readability issues and are notorious for causing errors.

Luckily, we can take advantage of the switch statement to avoid dealing with multiple if…else and else if statements. A switch statement is not only straightforward to write but also easy to read and maintain.

Switch Statement Syntax

switch(expression) {
case a: 
//code block to be executed 
break;
case b: 
//code block to be executed 
break;
case c: 
//code block to be executed 
break;
default:
//code block to be executed 
}

The example above shows a switch statement. A switch statement begins with a variable called a switch followed by an expression enclosed in parenthesis. Curly brackets encircling case clauses come after the expression. Each case clause ends with a semicolon to tell the JavaScript interpreter to skip to the subsequent clause.

The switch statement evaluates the expression once and compares its value against those in the case clauses. Only the code block in the case clause that matches the expression will be executed. If there is no match, the default code will run.

Switch Statement in Action

let shoeName = ‘adidasSamba’
switch (shoeName) {
case ‘adidasGazelle’: 
console.log(‘Adidas Gazelle costs $49);
break;
case 'adidaSamba':
console.log(‘Adidas Samba costs $99’);
break;
case 'adidasSuperstar'
console.log(‘Adidas Superstar costs $149)
break;
case 'adidasNMD'
console.log(‘Adidas NMD costs $199)
break;
case 'adidasCampus'
console.log(‘Adidas Campus costs $249)
break;
default: 
console.log(Invalid option!);
break;
}

Output

Adidas Samba costs $99

Parting Shot

Throughout this article, we’ve discussed JavaScript if, else, else if, and switch statements. These statements are essential when it comes to executing specific code blocks based on preset conditions. Each of the statements plays a distinctive role and must be used correctly to achieve the desired results. In conclusion, applying best practices and avoiding common pitfalls when using these conditions to unlock their full potential is imperative.

A Comprehensive Guide to Media Queries in CSS

Odhiambo Ouko — Tue, 04 Jun 2024 10:22:11 +0000

Today, people use differently-sized devices, including smartphones, tablets, and laptops to access the internet. Since screen sizes differ from user to user, creating websites that respond to varying screen sizes, no matter the device, is essential. That’s where CSS media queries come in. But what are media queries, and how do they work? The following guide provides a detailed overview of media queries in CSS.

What is a Media Query?

A media query is a CSS feature that allows you to apply certain styles on a website browser depending on your users’ device or viewport. Nevertheless, media queries can target many other things apart from the viewport, including orientation and resolution. According to the Web Design Museum, media queries were first introduced in the 1990s, but they became popular in the late 2000s and 2010s with the increase in mobile phone manufacturing and usage. These days, media queries are vital to creating responsive web designs for excellent appearance and functionality.

Media Query Syntax

@media(media type) operator (media feature) {
/*css styles*/
}

The example above represents a media query. Let’s dissect each part of the query for a better understanding.

@media

The first part of a media query anatomy is the @media keyword, the at-rule. It is a logical operator for defining specific media types and features that must be met for a particular CSS style to run.

Media Type

Media type, which specifies the targeted media, is the second item in a media query. Since various media types exist, media types can define one or more devices. The media type is optional and automatically set to all if not specified. We can combine multiple media types with a comma. Here are the most popular values for media queries:

All: Targets all devices
Screen: Targets devices with a screen
Print: Targets devices with a preview mode
Speech: Targets speech devices

@media all {
/*CSS styles targeting all devices*/
}

@media screen {
/*CSS styles for screen devices*/
}

/*(,) comma combines multiple media types*/
@media print, speech {
/*CSS styles for print and speech devices*/
}

Media Features

After targeting specific media types, you can indicate the media features you want to modify. These media features are the conditions that must be fulfilled to run the CSS code put in the query. The media features can include page characteristics, display quality, user preference, interaction, color, and more. Here are some popular media features:

Height: Defines the height of the viewport
Width: Defines the width of the viewport
Orientation: Defines the viewport’s orientation (landscape or portrait)
Resolution: Defines the number of pixels a device can render

Operator(s)

Media queries accept logical operators, instrumental in creating complex queries and combining several queries into a single rule separated by commas.

and

We can use the operator to include multiple media features in the same query. In addition, we can apply the operator to create a range for our media types.

/*and combines two media queries*/
@media screen (min-width: 280px) and (resolution: 1) {
/*CSS styles run if the media features for both media types are true*/
}

/*and allows us to include a range for our media features*/
@media screen (min-width: 280px) and (max-width: 680px) {
/*CSS styles run if both media features are true*/
}

or

We can use the or operator in a media query if only one of the targeted media features must be met. Contrary to common practice, applying the or operator in media queries involves separating the media features with a comma.

/*or separates two media features*/
@media screen (min-width: 680px) , (orientation: portrait) {
/*CSS styles run if either one of the media features is true*/

not

The not operator negates parts of or an entire media query depending on its position. Since the not operator nullifies everything following it, using a comma-separated list effectively applies it to certain parts of the query.

/*not negates the entire media type*/
@media not screen and (min-resolution: 1) {
/*CSS styles for devices without screens and a minimum resolution of 1*/
}

/*not negates a section of the media type*/
@media (not speech) and (orientation: landscape) {
/*CSS styles for non-speech devices with landscape orientation*/
}

only

Unlike the other operators we’ve discussed, the only operator is unique since it hides the query for legacy user agents. However, the operator does not affect modern browsers.

/*Older browsers don’t understand the only operator, so they ignore it*/
@media only all (min-height: 320px) and (max-height: 1280px), (orientation: landscape) {
/*CSS styles for all devices, except devices with old browsers*/
}

Media Query Best Practices

We can follow various best practices when applying media queries for better results.

1. Employ the mobile-first approach

One valuable best practice when creating media queries is implementing a mobile-first approach. This involves crafting your website to fit small screens first and then scaling up to larger screens. Besides reaching a large audience, a mobile-first approach will ensure your website is accessible on all screen sizes.

2. Prioritize Logical Breakpoints

Using logical breakpoints based on your website’s content instead of applying fixed breakpoints related to standard screen sizes is another good practice. Unlike logical breakpoints, which are natural, fixed breakpoints can change over time.

3. Test and Improve

Don’t forget to test and improve your media queries to ensure your website is accessible on different devices and browsers. After all, refining media queries to optimize performance can render your website superior and user-friendly.

Bottom Line

Media queries are essential in creating responsive web designs for users to access across different screen sizes, devices, and browsers. For that reason, developers should take advantage of media queries to craft dynamic and user-centric products. Thus, a proper understanding of media queries is fundamental to exploring their full potential in web development.

A Walk Through Client-Side Form Validation in HTML

Odhiambo Ouko — Thu, 30 May 2024 16:25:25 +0000

What is Form Validation?

Have you ever encountered a form on a website that returns an error message when you provide the wrong details or don’t input some information? The error messages can include:

Username not found
Incorrect password. Try again!
Please fill in this field
Your passcode should have eight characters

When you key in data into a form, the browser or website will check the provided information to see if it matches the required format. The application will accept the input and continue running if the data is correct and in the proper format. On the other hand, the application will cease running and return an error message if the details are incorrect. This process is known as form validation.

Types of Form Validation

There are two types of form validation: server-side form validation and client-side form validation.

Server-Side Validation

Server-side validation occurs when data is sent to a server from the browser for validation. A perfect scenario of server-side validation is a credit card form that accepts user input and then sends the data to a server to confirm the card is valid and has enough balance to make a particular transaction.

Pros of Server-Side Validation

Dynamic Validation – Server-side validation is more flexible because it can access databases and conduct complex validations.
Consistent and Compatible Validation – Unlike client-side validation, server-side validation works properly across different devices, browsers, and sites.
Increased Security – Server-side validation is more secure because it prevents invalid data or malicious input from entering a database.

Cons of Server-Side Validation

Reduced Response Time – The Request and response processes between the browser and server reduce the response time in server-side validation.
Poor User Experience – Poor response time and users’ inability to immediately determine the valid options negatively affect user experience.

Client-Side Validation

On the other hand, client-side validation involves checking data on the browser before sending it to the server. This type of validation is essential in ensuring the data a user submits conforms to all the requirements stipulated by various form controls. A good example is a registration form requiring users to enter their details and a short bio.

Pros of Client-Side Validation

Quick Feedback – Since client-side validation happens on the user’s computer, it quickly provides feedback to the user without reloading the page.
Data Accuracy – By detecting wrong inputs and alerting the users, client-side validation ensures the data collected is accurate.
Improved User Experience – Giving users instant feedback when using a form enhances user experience.
Reduced server load and bandwidth – Client-side validation only accepts valid data, therefore decreasing a browser’s server load and bandwidth.

Cons of Client-Side Validation

Security Concerns – Client-side form validation is less secure since it can’t process an application from attacks in a database or server.
Easy to Dodge – Users can bypass client-side validation by disabling JavaScript or manipulating the document object model (DOM).

HTML Built-In Form Controls

Client-side form validation can be achieved using HTML or JavaScript. HTML makes use of several form controls to help you implement effective client-side validation for your users.

Requiring an Input

When a specific field must be filled before submitting a form, we can use the required attribute in the input element. This attribute doesn’t need a value like other built-in form controls.

<form>
<label for="name">Name<label>
<input id="name" required>
</form>

Specifying Minimum and Maximum Values

Another built-in form control we can use is the minimum or maximum attributes in a number field. The attributes specify the minimum and maximum numerical values a user can select or enter in a form.

<form>
<label for ="guests">Number of guests</label>
<input id="guests" min="2" max="10" required> 
</form>

Indicating Type

This form control specifies the data type a user needs to input, whether an email address, a number, a text, or any other type. We use the type attribute and set its value to number, text, email, or password.

<form>
<label for ="age">Age</label>
<input id="age" type="number" required>
</form>

Constraining Text Length

We can use the minlength and maxlength attributes to set the minimum and maximum characters for a text area.

<form>
<textarea>Introduce yourself in less than 250 characters…</textarea>
<input type="text" minlength="50" maxlength="250" required>
</form>

Matching Text Pattern

Lastly, we can create a regular expression or regex that users must match when entering data. The form can only pass when the user’s input aligns with the preset regex. In this case, we use the pattern attribute and give it a regex.

<form>
<label for = "telephone">Enter your phone number</label>
<input id="telephone" type="number" pattern="[0-9] {10}"/>
</form>

Bottom Line

In this article, we exclusively discussed form validation in HTML. We also shed some light on the difference between server-side and client-side validation and outlined their respective pros and cons. Finally, we covered the most common built-in form controls used to validate forms on the client’s side. Applying server-side validation is significant for ensuring data accuracy, improving security, and improving user experience. You must also validate data on the server side.

An Introduction to Basic JavaScript Loops

Odhiambo Ouko — Wed, 29 May 2024 08:37:41 +0000

Introduction

As a frontend and/or JavaScript developer, there are multiple occasions when we will want our code to conduct repetitive tasks. We can achieve this by writing the code manually a couple of times, but this process can be tedious, especially when we have a handful of code blocks to execute repeatedly. Thankfully, we can use loops in JavaScript to execute a block code several times. In this article, we will discuss the for, do, and while loops, with a focus on their syntax and examples.

What are Loops in JavaScript?

In JavaScript, loops are powerful tools designed to perform repetitive tasks quickly and efficiently. A loop executes a code block several times depending on a specified condition, commonly known as the stopping condition. The code will run over and over again until the condition returns false.

Types of Loops

There are three main types of loops in JavaScript: for, while, and do…while loops. While both loops can iterate a code block several times, the loop types work differently and are suitable for different scenarios.

1. For Loop

The for loop is a control flow statement that examines a condition and executes a code several times as long as the condition is true. We often use the for loop if we need to run a code block a specific number of times. For this reason, the condition in a for loop is usually a counter indicating how many times the loop should run a code. Besides, the for loop is the most common loop in JavaScript and other high-level programming languages.

Figure 1: For loop flowchart

For Loop Syntax

for (initialization; condition; iteration statement) {
//code block to be executed
}

The code above represents the syntax of a basic for loop. It starts with the for keyword, then the initialization, condition, and iteration statements enclosed in parentheses, followed by the code to be executed in curly brackets (loop body). Let us dissect each part in the parentheses to understand what they are and their uses.

Initialization: The initialization, commonly abbreviated as i , initializes a loop and determines how the loop iterates through your logic. It's executed first and once in a loop. Since the initialization expression is a variable, we can use the let or var keyword to declare it.

Condition: A condition is the second recipe in a for-loop statement. The condition is usually a Boolean function that tells the loop how many times it should run a code block. A loop will run if the condition is true and stop when the condition is false.
Iteration Statement: Once the loop has executed a code block, the iteration statement will tell it what to do with the iterator. In most cases, the iteration statement can increase or decrease the iterator.

For Loop in Action

Example 1

for (let i = 1; i < 11; i++) {
console.log(i);
}

Output

Example 2

for (let i = 10; i > 0 ; i--) {
console.log(i);
}

Output

Example 3

const luxuryBrands = ['Chanel', 'Prada', 'Dior', 'Rolex'];
for (let i = 0; i < luxuryBrands.length; i++) {
console.log(luxuryBrands[i]);
}

Output

Chanel
Prada
Dior
Rolex

Example 4

const number = 50;
let totalSum = 0;
for (i = 0; i <= number; i++) {
totalSum = totalSum + i;
}
console.log(totalSum)

Output

2. While Loop

We can use the while loop if we're unsure how many times we should iterate a line of code. Unlike the for loop, the condition for a while loop can be anything other than a counter. A while loop will execute the code in its body repeatedly, provided the condition is true.

Figure 2: While loop flowchart

While Loop Syntax

while (condition) {
//code block to be executed
}

The standard syntax of a while loop is as shown above. It begins with the while statement followed by the condition in parentheses. The code block we want to run comes after the parentheses. In a while loop, the condition is examined before the loop body. As a result, the loop will not run the code block if the condition is false. It will only execute the code if the condition is initially true and terminate when it becomes false. Thus, the while loop is excellent for scenarios where the condition is true at the outset.

While Loop in Action

Example 1

let i = 1;
while (i < 10) {
console.log(i)
i++;
}

Output

3. Do…While Loop

The do…while loop is similar to the while loop since it is effective for running a code if the number of iterations is undefined. Below is a simple syntax of the do…while loop.

Figure 3: Do…While Loop Flowchart

Do...While Loop Syntax

do {
//code block to be executed
} while(condition)

The loop starts with the do keyword, a code block to be executed within curly brackets, the while keyword, and the condition to be evaluated in parenthesis. Since the do keyword comes before the loop body, the code in the curly brackets must run at least once, even if the condition is false. That's because the do…while loop evaluates the condition after the code block, unlike in the while loop.

Do…While Loop in Action

Example 1

let num = 10;
do {
console.log(num);
num++;
} while (num <= 50);

Output

Closing Thoughts

In this article, we've learned that a loop is a powerful JavaScript tool used for iterating through code blocks. Instead of writing repetitive code manually, the for, while, and do…while loops allow you to iterate through a block of code with less effort. Knowing when to use each type of loop and avoid common pitfalls is crucial in maximizing their potential.