DEV Community: Melanie Eureka Ngome

What’s Your Go-To Method for Defining Colors in CSS?🤔

Melanie Eureka Ngome — Mon, 30 Oct 2023 15:13:34 +0000

Selecting the right colors in CSS is fundamental to web design. Do you have a preferred method for defining colors in your projects? Whether you're a seasoned developer or just starting out, choosing colors can be a creative process. Some swear by hexadecimal values, others opt for RGB or HSL.

As for me, I’ve always used hex codes. Well, at some point, I’ve tried out RGB and RGBA values. I’d always thought the others were “complex.” Digging deeper, it all came down to personal preference, and most times, project requirements.
I delved into the four most popular methods of defining colors in CSS in this article:
4 Ways to Define Colors in CSS

Pointers in C Programming: How Hard?🤔

Melanie Eureka Ngome — Mon, 02 Oct 2023 12:13:37 +0000

While learning C programming, I could easily grasp the basics but when I got the pointers bit, I got stuck.
I couldn't quite understand the memory aspect and how it all worked until I took time out to really understand it.
So I decided to share what I'd learned as simply as possible.
If you need a refresher on C pointers or want to understand it better, you should definitely give this a read:
An Essential Guide to Pointers in C Programming

A Beginner's Guide to HTML Input Types

Melanie Eureka Ngome — Wed, 15 Feb 2023 17:06:28 +0000

Many websites and apps need to collect user data directly, and they do so by using form pages; the sign-in or login page is one such example. Input fields are the bedrock of forms, from texts to checkboxes and so many more. Ultimately, knowing the various types of input tags and their usage is a handy essential for developers and designers. By the end of this article, you should be familiar with the number of HTML input types available and their functions.

What is an input element?

An input element is an HTML element that provides a field for data insertion. It is a self-closing tag with quite a few attributes associated with it. Currently, there are 23 input types available with different functions. It is usually always identified with the label element, as they go hand in hand in form pages.

Additionally, like every element without direct-text content, the input element defaults to a preset type: text.

Input Types

As mentioned earlier, there are currently 22 input types, each with a different function and use case. In no particular order, they are:

Text

Reiterating from above, this is the default attribute value for the input element. It defines a single-line text field, that is, one without line breaks. Therefore, the text will continue in one line to any length unless there is a maximum value established. Below is a typical example of one of the components of a sign-up page.

Submit

The submit type is self-explanatory as it simply displays a button specifically for submission. It is usually enabled after a user has filled the other input types with relevant data. Additionally, the text displayed on the button for providing context on the form's purpose is customizable with the "value" attribute, like so:

<input type="submit" value="Sign Up">

Its default value is "submit."

Password

The password input type creates a password field where sensitive information, such as a password, can be entered securely. The characters entered into this field will be masked with asterisks or dots, hiding the actual password entered by the user. Consequently, it helps prevent prying eyes from seeing the password, providing an added layer of security.

Email

The Email input type creates a field specifically for entering an Email address. This input type is often validated to ensure the entered Email is in the correct format. Without added attributes, it could easily pass for text type input.

Number

The number input type defines a field, particularly for entering a numerical value. Up and down arrows to increase or decrease the value follow after the data field. It is displayed below by the "Age" label.

CheckBox

The checkbox input type displays a toggleable on/off control for a single option in a form. Occasionally, it represents multiple options where the user can select one or more options. An example of its use case is in a "terms and conditions" acceptance section of a form, like so:

Telephone

With this input type, users can enter the telephone number. Upon selection, it displays a numeric keyboard for ease of input. It is similar to the text input type, as according to W3C, "Unlike the URL and Email types, the telephone type does not enforce a particular syntax. This is intentional; in practice, telephone number fields tend to be free-form fields, because there are a wide variety of valid phone numbers."

Radio

The radio input type defines a toggleable on/off control for a group of mutually exclusive options in a form. Only one option in the group can be selected at a time, but not by default. Although, for the radios to function as a group, they all have to contain a name attribute and share the same value. Like so:

Date

The date input type defines a field for selecting a date (year, month, and day). Depending on the user's device and browser, a date picker calendar will be displayed, making it easier for the user to choose a date. Additionally, the format of the date returned is controllable using the "min" and "max" attributes.

Search

The search input type establishes a search field. At a glance, it functions the same way as the "text" input type, upon usage, users can input a search query. The appearance of the search field may vary depending on the user's device and browser, but it typically includes styling to indicate that it is a search field, such as a magnifying glass icon.

Time

This input type provides a field that only accepts time values. It presents the user with a time picker interface to make selecting a time easier. The format of the time returned can be controlled using the "step" attribute.

URL

The URL input type specifies a field for inputting a URL. Like the search attribute, it is similar to the text input type on minimal inspection. Some devices and browsers may include additional validation to ensure that the inputted value is a valid URL.

Image

The image input type creates an image as a submit button. When the user clicks on the image, the form it is associated with is submitted. The source of the image is specified using the "src" attribute.

DateTime

The datetime input type creates a field for selecting both a date and time value. It presents the user with a date and time picker interface to make selecting both values easier. The format of the date and time returned is based on the UTC ( Universal Time Coordinated ) time zone.

DateTime-Local

Similar to the datetime input, datetime-local defines a field used for selecting both a date and time value, but with the time value being specific to the user's local time zone. It presents the user with a date and time picker interface to make selecting both values easier. The format of the date and time returned can be controlled using the "min" and "max" attributes.

Month

The month input type is used for selecting a month and year value. It presents the user with a month picker interface to make selection easier.

Week

As you may have guessed, the week input type defines a field for selecting a week and year value. It provides a week picker interface for selection.

Button

The button type creates a clickable button on a form. It is different from the submit type in the case of automatic form submission, but it can work hand in hand with JavaScript to create dynamic behavior. The text displayed on the button can be customized using the "value" attribute.

Color

The color type creates a color picker control on a form, which allows users to select a color. This type is supported in modern browsers and provides a graphical interface for color selection. The default value is #000000, a hex code for the color black.

File

The file type creates a file input control on a form, allowing users to select a file for upload. The form performs specific actions, i.e., sending the file to a server, with the selected file information. The file type also allows multiple files selection at once by setting the "multiple" attribute.

Hidden

The hidden type creates a form field that is not visible to the user but recognized by the form. This type is useful for storing information that needs to be processed by the form but does not require visibility.

Range

The range type creates a sliding control on a form that allows the user to select a value within a defined range of values. The "min" and "max" attributes define it, and you can set its default value using the "value" attribute.

Reset

The reset type creates a button that resets all form fields to their default values when clicked. The text displayed on the button can be customized using the "value" attribute.

Conclusion

The input types in HTML provide a way to create and present different types of form fields to users. Each input type serves a specific purpose and offers a unique user experience. By utilizing these input types in your forms, you can ensure that users can input the correct data type, leading to more accurate and efficient data collection.

A guide to getting unstuck as a developer

Melanie Eureka Ngome — Mon, 29 Aug 2022 22:46:40 +0000

Introduction

image from unsplash.com by Nubelson Fernandes

Did you know it's normal to get stuck as a developer?, even experienced developers do too. Writing code or programs is one thing, errors arising is another.

From a simple omission of one character or even misspelling of words, your code will indicate an error. This goes to show that errors can stem from the tiniest bit of mistake.

So what should you do when you get stuck? in this article we will cover:

Types of errors
Debugging and steps to debugging
Helpful online communities to check out
Tips to try when you get stuck

By the end of this article you should be able to:

Identify errors
explain and execute debugging

Let's get into it

Identifying errors

Error prompts are ways in which an integrated development environment (IDE) can display errors. The types of errors that can occur include:

Logic errors: In this type of error, your code or program will run but displays a wrong/unexpected output.

Syntax errors: This error occurs when your code doesn't follow the correct syntax or sequence of the programming language.

Runtime error: As the name implies, this error occurs during execution or running of your code/program.

What is debugging?

In simple terms it means getting rid of errors/bugs in a code/program. It involves identifying and fixing the error/bug. Usually IDEs e.g. VScode, come equipped with tools for debugging.

Steps to debugging

Identify the error : Logically this should be the first thing to do - you can't solve a problem you can't find. There are several ways of identifying the error including:

Using the error prompt provided
Using the console log by pulling up developer tools on the browser

Locate the error : After identifying the error you can locate it's position. The location of the error is usually stated on the error prompt.

Devise a means to fix the error : This is where the real work comes in. Syntax errors are easier to fix. So what do you do when you can't think of anything?:

Do a google search, you can copy the error prompt into the search bar. Chances are someone has encountered that issue before or there are similar issues already fixed. A guide to searching effectively on google.
Post the questions on online Q&A communities like StackOverflow- the most popular, Quora, Reddit, StackExchange, and more. Be sure to follow their guidelines for posting questions and also be polite.
For helpful contents you can also check Freecodecamp, MDN Docs, W3School, Netninja, and more.
Reach out to a senior developer or anybody more knowledgeable about the subject. Be polite, clear and concise with your approach.

Apply the solution : If you've figured out a solution, you can apply it. Then test the code/program out to be sure your solution works.

Tips to try when you're stuck

Take a break, do something else to clear your head, listen to music or whatever helps you relax.
Reevaluate your goals, remind yourself about what you aim to achieve.
Say your affirmations, if you don't have any then chant about your strengths and how you will overcome the problem

all these tips are garnered from developers who have been stuck too, it's worked for them and can be helpful to you too.

Conclusion

You've learnt how to debug and what to do when you're stuck. You've also learnt about helpful communities to check out. Remember that you're not alone and it's an opportunity to learn more and grow.

When next you're stuck on a project be sure to use the steps and tips.

if you have contributions to share please do so in the comments
all illustrations from Undraw.co

What Made Me Want To Be A Developer

Melanie Eureka Ngome — Mon, 22 Aug 2022 20:08:41 +0000

Introduction

Hi, I'm Melanie and I'm going to share my tech story with you.

Currently I'm taking a bootcamp course on web development, on Udemy by Angela Yu. How did i get here?, how did i make the decision?, has it been worth it?, i'll answer all these 😌.

In the beginning

Making a decision was only the beginning of things. When someone makes a decision, he is really diving into a strong current that will carry him to places he had never dreamed of when he first made the decision.

-Paulo Coelho

Growing up I fancied a quiet, uneventful life when I made banking my career choice. In another phase I noticed the creativity in architecture and decided I wanted to be an architect. Then another phase when I gave up deciding and went with the flow - wherever it could lead.

I could sing, write and daydream, then it dawned on me that creativity was my strong suit. I took up writing (poetry) and sang for my ears only.

August 2018, my school got an opportunity from an NGO library - keeping it real (KIR) foundation - to sponsor some students in learning web development basics. I was in grade 11 and was pretty confident in my math skills, my teachers were too because they nominated me for the sponsorship entrance test.

Out of 6 students from my school, 3 of us passed. I had no idea what I was tested for (we weren't told) till they congratulated me.

School let out for the holidays and we started lessons. I remember feeling excited at the prospects of being productive for the holidays. The first session, we learned about the web and how it came about. I was in awe because I had never thought about the creation of the internet - considering I spent a lot of time on it.

We followed a roadmap from HTML to PHP , along the way I met CSS and it was love at first curly bracket 😁. The fact that a string of text could turn into a beautiful sight was appealing to me. Then and there I resolved that I had found what I wanted to do with my life.

After the training I'd been born anew and had a better bearing of my career choice.

Since my discovery

Whenever you want to achieve something, keep your eyes open, concentrate and make sure you know exactly what it is you want. No one can hit their target with their eyes closed.

-Paulo Coelho

I did not immediately delve into web development until early 2022. I had been having challenges with starting out on my own. It seemed fate was on my side when I stumbled on an email on International Women's day. It was about a community for women starting out in tech, She Code Africa (SCA) community. I immediately applied to join the community seeing the opportunities they offered.

I joined their YouTube live event tagged #SCAIWD2022 and won a course scholarship. I used it to purchase a boot camp course on Udemy.

Elated at the idea of everything, I resolved to do my best. I didn't own a laptop but it didn't stop me, I used the resources I had and have been going strong ever since.

My knowledge on web development went from 0 to something and it kept me going, knowing my goals were attainable.

What spurred me to pursue web development

A number of things contributed to my decision to become a web developer including:

The desire to create
My love for CSS
Solving problems
Limitless possibilities
My passion for design

What keeps me going

Never give up. When your heart becomes tired, just walk with your legs - but move on.

-Paulo Coelho

As any developer can attest to, it's not easy but putting one foot in front of the other will lead you anywhere. So here's a list of what drives me;

Aiming to be better
My big and little wins
My improvements and noticeable progress
My love for problem solving

Presently

I've learnt a lot so far, including putting out mini-projects. I'm proficient in HTML and have a good grasp of CSS , I've done a number of mini-projects with responsive design. I'm still following the boot camp course. I push all of my projects to Github so it's accessible.

Conclusion

And when you want something, all the universe conspires in helping you to achieve it.

-Paulo Coelho

I wanted to be a web developer because of the challenges I could conquer with coding and my love for CSS - even if I'm not an expert yet 😁.

It's been a rollercoaster but the journey has been worth it. Anybody can do anything as long as it's learnable. If I'm doing it, you can too, because it's ...learnable.

I'm hoping my story - even though it's unfinished - has inspired you.

first and second image from unsplash.com by Lee Campbell and Brett Jordan respectively

subsequent images from undraw.co

CSS Flexbox

Melanie Eureka Ngome — Sun, 14 Aug 2022 10:09:53 +0000

Is Flexbox complicated? Many would say it is but, it is actually really easy to implement. This is part 1 of a 3-part series on CSS flexbox. By the end of this article you should know;

Flexbox definition
When flexbox was introduced
When to use flexbox
All about the flexbox box model

CSS is beautiful but can get frustrating at times, especially positioning elements. When Flexbox was introduced it became the holy grail for elements layout and also an added bonus, responsiveness.

Let's dive into it then.

What is Flexbox?

Flexible box module , generally referred to as Flexbox, is a CSS3 layout model. A CSS layout model is a method of positioning elements in a webpage relative to:

Their default position in normal layout flow
Their parent container
Other elements around them
Device viewport

Flexbox is used to layout contents in one-dimension i.e. either row or column.

A brief Timeline of CSS Flexbox

Flexbox underwent series of changes, starting out with 9 properties and now totalling 12 properties.

July 23, 2009

The first working draft published on the World wide web consortium (W3C) was on July 23, 2009.

In its early stages, Flexbox had display: box; . With a total of eight properties, each having the prefix box. The term "box elements" referred to the container while "children of box elements" referred to its content.

March 22, 2011

There were improvements including,

display: flexbox | inline-flexbox;
four properties, each with a prefix flex
Introduction to properties, flex-direction and flex-order.
flex-order having an initial value of 1
Container now renamed flex box and its content, flexbox items.

November 29, 2011

There were modifications and further improvements including,

Introduction of the Flexbox Box Model
Replacement of flex-direction with flex-flow, which became a shorthand for flex-direction and wrapping
flex-order property initial value becomes 0
Properties now totaling 5

March 22, 2012

Contunued improvement and further modifications including,

Introduction of an illustration for the Flexbox Box Model
Reintroduction of flex-direction with modifications to it's values
new properties, flex wrap and flex.
Flex flow became the official shorthand for the individual properties, flex-direction and flex-wrap.
Properties summed up to 9

June 12, 2012

Flexbox now had 12 properties and it now became . A lot of changes took place during this period. They were as follows:

Renaming of some properties, while others retained the 'flex' prefix:
flex became the shorthand for new properties flex-grow, flex-shrink and flex basis in that order.
flex container replaced flexbox for the parent container.
flex item replaced flexbox item for child elements in the container.

W3C Candidate Recommendation (September 18, 2012)

There were no further major changes apart from fine tuning each property. Satisfying the criteria for W3C recommendation track process, Flexbox attained W3C candidate recommendation status.

W3C last call working draft (March 25, 2014 - May 14, 2015)

During this period the document underwent further review to determine if it was fit for advancement in the recommendation track process.

W3C candidate recommendation (March 1, 2016 - November 19, 2018)

The document reattained W3C recommendation candidate status, finally fulfilling all criteria. Amounting to 12 properties for the container and flex items. It hasnt made any advancement in the recommendation track process ever since.

When to use flexbox?

Flexbox is used to achieve responsiveness on web or app development without difficulty. Practical examples of Flexbox usage include:

Centering items in a container
Aligning contents
Navbar creation
Space distribution among contents within a container e.t.c.

Flexbox box Model

From the illustration above,there are two flex items and a flex container. There are also labels for other important aspects of flexbox. These are basic and important term we'll use in the course of this tutorial.

Flex container:

This is any element having a display property of flex or inline-flex display: flex | inline-flex. From the illustration it is the white backdrop holding the flex items.

Flex item:

These are direct children of the flex container. From the illustration they are aligned from left to right. Note that flex items of a container can also become flex containers to elements within them.

Main axis:

This is the principal axis along which items are positioned. It is dependent on the flex-direction property ( it would become clearer in the next part of this series). Note that the main axis should not be confused with being horizontal.

Main start and end:

From the illustration, observe how the items are laid out from one point to the other on the main axis. The beginning is known as the main start while the other end is known as the main end.

Note that apart from direction dependency, writing mode should also be taken into account. For example, English is written from left-to-right, while Hebrew is written from right-to-left, when flex-direction: row;.

Therefore, the main start to main end runs from left to right for English, while the reverse is the case for Hebrew.

Main size:

This represents the size of the flex container or items along the main axis. It could either be width or height relative to the direction.

Cross axis:

This axis is always perpendicular to the main axis. It is also dependent on flex-direction.

Cross start and end:

From the cross axis, cross start is the beginning of the container or item, while cross end is the end. There aren't many languages that are written from bottom-to-top but Hanun'o ( Indigenous to Filipinos) is one of a few. Therefore the cross start to cross end will be from bottom-to-top if flex-direction: row;.

Cross size:

Like Main size, it is the size of the element (flex container or items) along the cross axis. It could also be width or height depending on direction.

Wrapping up

If you made it to this point i bet you let out a "phew" 😁, it might seem hard to remember, it'll become a lot clear when we utilize it in the next part. We've covered:

Flexbox as a CSS3 layout model
A brief history on Flexbox
Flexbox basic Terminologies

Flex container

Flex items

Main axis, main start and end, and main size

Cross axis, cross start and end, and cross size

Now that you know the basics, next we'll get into the fun part😏, Flexbox display properties and how to use them.

If you found this helpful like and comment 🙂, also if you have any additions feel free to put them in the comments.

Web design vs UI and UX design

Melanie Eureka Ngome — Sun, 31 Jul 2022 12:12:25 +0000

Job description these days lists out skills under one design field for another. Clients expect a designer in one field to have experience in another, when the job title states otherwise. This causes misunderstanding in job applications.

Design is a term web design and UI/UX design have in common, as a result they are easily confused. Under observation they overlap, but within the design umbrella, they play different roles. UI means User interface, while UX means User experience.

This article covers simplified definitions of each field, their required skill sets, and their differences.

What is UX design?

In simple terms, UX design is a process of designing from the user's perspective. It takes the needs and objectives of the end-user into account by offering great experiences with products, either digital or physical.

UX design is not limited to websites only contrary to web design. As the term implies, it centers around experience which can apply to physical products.

The design process is not limited to but follow this pattern:

Research: This includes understanding the user with respect to their emotions and behaviors. Research in User personas and creating solutions to typical issues users would experience with the product.
Brainstorming: This is where user flow ( steps users take in performing tasks with the product) and wireframing comes in. It aims to provide easy usability with the product.
Implementation : At this stage UI design takes place. Notice how UI design becomes a subset of UX design?, well this is the case in hierarchy. It involves putting the research and brainstorming to work.
Reporting: Analytics happen at this stage, including data on task performance duration, tests on accessibility and more.

It doesn't end at reporting, after the analysis, more work goes into making the experience better. Brainstorming, implementation and reporting becomes a cycle when new ways to improve experience are discovered.

Technical skills necessary for UX design:

Prototyping and Wireframing
Information architecture
Basic Knowledge of HTML, CSS and Javascript
UX writing
User Research and usability testing
Visual design
Knowledge of Design Software

What is User Interface (UI) design?

UI design is the process of designing the appearance and accessibility of a digital product. These digital products include websites, software programs, mobile applications, and other interactive platforms.

Like UX design, it involves designs with the end-users in mind. It focuses on the user's visual experience and interactivity with the product. It implements the information and research garnered in UX design. By using colors, illustrations, images and more to create. It's responsible for bringing the UX design to life.

It follows a different approach to UX. Starting with sketching and ending with prototyping.

Listed below are UI design formats:

Technical Skills necessary for UI design:

Branding, Typography and Color theory
Interaction Design Principles
User research and peronas
Wireframing and Prototyping
Style guides

What is UI/UX design?

This is the best of both worlds for the user-centric aspect of design. UI/UX design is the combination of User interface and experience design. Equal knowledge of usability, interactivity and aesthetics.

Where UI design focuses on the look of a product, UX design focuses on the feel of the product, when combined then they focus on the experience and interface.

When it comes to design, UI and UX are often placed together even though both can exist apart. When a role requires both skill sets, then "UI/UX design" title is preferable.

As expected the tech skills necessary would be a combination of UI and UX design skills.

What is Web design?

Web design is the process of planning and designing the elements of a website. These elements are the visual and interactive features on the website. Visual features include images, typography, colors, and more.

Web design usually follows more of an aesthetic approach than accessibility. With web design, the color of a button matters more than how it's located. It also focuses on information layout and web page flow.

UI/UX design can be found under Web design, it might be an umbrella containing UI/UX design but only when it comes to websites and apps.

Technical Skills necessary for web design:

Strong grasp of Design principles
Typography
Color Theory
Design Softwares expertise
Responsive design Knowledge (HTML, CSS, and Javascript)

Differences between Web and UI/UX design

Application: The first noticeable difference is the area of application for the design methods. Web design is only applied to websites and apps. While UX design applies to digital and physical products, UI design focuses on digital products alone.
Skill set: Web design requires proficiency in responsive layout using HTML, CSS and JavaScript. While UI/UX design will do with just basic knowledge.
Goals: Web design focuses on aesthetics and interactivity of a website or app, while UI/UX design focuses on aesthetics, functionality, and accessibility of a brand or product.
Information level: Web design requires information about the brand and company/client, while UI/UX design requires information about the brand, client/company and target user.

Conclusion

Web design and UI/UX design have a lot in common, so much that they're seen in the same light. From definition to required skill sets, no matter how subtle, the differences exist.

When all has been said its important to note that there is much to design than the different labels. As observed, web design and ui/ux design are more diverse than they seem. The key takeaway is all designs have equal end goals but each applies different routes to achieving these goals.

DEV Community: Melanie Eureka Ngome

What’s Your Go-To Method for Defining Colors in CSS?🤔

Pointers in C Programming: How Hard?🤔

A Beginner's Guide to HTML Input Types

What is an input element?

Input Types

Text

Submit

Password

Email

Number

CheckBox

Telephone

Radio

Date

Search

Time

URL

Image

DateTime

DateTime-Local

Month

Week

Button

Color

File

Hidden

Range

Reset

Conclusion

A guide to getting unstuck as a developer

Introduction

Identifying errors

What is debugging?

Steps to debugging

Tips to try when you're stuck

Conclusion

What Made Me Want To Be A Developer

Introduction

In the beginning

Since my discovery

What spurred me to pursue web development

What keeps me going

Presently

Conclusion

CSS Flexbox

What is Flexbox?

A brief Timeline of CSS Flexbox

Working Draft (23 July 2009 - 12 June 2012)

July 23, 2009

March 22, 2011

November 29, 2011

March 22, 2012

June 12, 2012

W3C Candidate Recommendation (September 18, 2012)

W3C last call working draft (March 25, 2014 - May 14, 2015)

W3C candidate recommendation (March 1, 2016 - November 19, 2018)

When to use flexbox?

Flexbox box Model

Flex container:

Flex item:

Main axis:

Main start and end:

Main size:

Cross axis:

Cross start and end:

Cross size:

Wrapping up

Web design vs UI and UX design

What is UX design?

The design process is not limited to but follow this pattern:

Technical skills necessary for UX design:

What is User Interface (UI) design?

Listed below are UI design formats:

Technical Skills necessary for UI design:

What is UI/UX design?

What is Web design?

Technical Skills necessary for web design:

Differences between Web and UI/UX design

Conclusion