Forem: Stella Mwanahamuntu

Input field validation for forms: A checklist from a designer to a dev with love

Stella Mwanahamuntu — Tue, 23 Apr 2024 00:00:35 +0000

FORM VALIDATION IS TAKEN FOR GRANTED AND YET IT COULD MAKE OR BREAK THE QUALITY OF WORK YOU PUSH TO STAGING OR PRODUCTION.
I have created a quick checklist to help your form validation be as sleek as Kim Kardashian's bun.

Start here

Identify Required Fields: Clearly mark all mandatory fields (asterisk, bold text)
Define Validation Rules: Document specific requirements for each field (length, format, etc.)

*Validation Checks *

Length: Minimum and maximum characters allowed (e.g., username 6-20 characters)
Data Type: Numbers only, letters only, email format, etc. (use regular expressions if needed)
Range: For numbers (e.g., age between 18-65)
Selection: Ensure dropdowns or radio buttons have a valid selection

*Error Messages *

Clarity: Use clear and concise language (e.g., "Username must be 6-20 characters")
Specificity: Indicate the exact error (e.g., "Invalid email format").
User-friendliness: Avoid technical jargon (e.g., "Please enter a valid email" instead of "Invalid email syntax").
Placement: Display error messages near the associated field.

Additional Tips

Real-time feedback: Consider inline validation as users type (e.g., color change for invalid input).
Positive reinforcement: Acknowledge successful validation (e.g., green checkmark).
Testing: Thoroughly test all validation scenarios.

YOU ARE WELCOME 😘😘😘

Show and Hide Element using CSS with/without JavaScript

Stella Mwanahamuntu — Sun, 09 Feb 2020 15:05:04 +0000

You can control layout by showing and hiding them declaratively in the HTML markup or modifying the objects' CSS properties, sometimes using Javascript.

The Display Property

The display property specifies if and how an element is displayed.
The display property accepts three possible values;

inline: browser displays the item and elements only takes up as much space as necessary. Examples of inline elements are the span, a and img tags.
block: stretches out to and as far as it can. Examples of the block elements are li, div, h1 - h6, p, form, header, footer and section tags.
none: browser hides the item.
inherit: inherits property from parent element.

The Visibilty Property

The Visibility specifies whether or not an element should be visible.
The visibility property accepts four possible values;

visible: visible to show elements
hidden: hides elements
collapse: collapses elements where applicable, such as a table row
inherit: inherits the values of the visibility property from the parent

I hope this codepen does some justice

The Language of Your Dreams.

Stella Mwanahamuntu — Wed, 05 Feb 2020 20:33:22 +0000

If you had to choose a programming language, which you would know 100% percent and really be good at, forget the student loans, sleepless nights or experience,
Which Language would you choose? And Why?

Apply styling to HTML elements programmatically: Apply a Transform

Stella Mwanahamuntu — Tue, 04 Feb 2020 08:05:12 +0000

I was excited to remember transforms from my high-school mathematics.

Transforms in programming make it possible for you to make an element to grow, shrink and basically move in any direction you program it to.

The CSS syntax for applying transforms to an element

transform: none
           transform-function
           initial /* sets element to it's initial value */
           inherit /* specifies that a property should inherit its value from its parent element */

Transforms can be applied using CSS and/or JavaScript and in this post I will try to illustrate as many ways possible.

The Rotate Method

The rotate method defines a 2D (the angle is specified in the parameter) and 3D(along the x,y,z angles). Rotate clockwise is represented by positive angles and rotation in the anticlockwise direction is represented by negative angles.

The Translate Method

The translate method allows you to move an HTML element by changing it's X and/or Y position on the page.

The Skew Method

Skewing slants or places an element on a page in such a way that is not parallel to the horizontal or vertical axis of the screen - omg, I don't know if that explanation makes sense.

The Scale Method

The scale method resizes elements by specific ratios. The scale method takes one parameter, a decimal value that represents the % to scale.
Values greater than 1 make the image image bigger and values less than 1 but greater than 0, - 0 > let x=value < 1, make the image smaller.

Note:The transform property can apply a 2D or 3D transformation to an element in both CSS and Javascript.

Thank you for reading, comments and links to more resources are welcome.

How to Embed CodePens into your dev.to posts - It's easy.

Stella Mwanahamuntu — Fri, 31 Jan 2020 14:28:06 +0000

Hey Devs,

So I recently started writing blog series to share and help me keep track of some courses I have been taking. The only challenge I had was trying to figure out how to display and demonstrate the way code works on the dev.to platform itself. I literally tweeted asking someone to do a tutorial.

Turns out it is really as simple as typing

{% codepen https://codepen.io/cassidoo/pen/MyaWzp %}

just make sure to avoid putting the back ticks that cause the black background.

So if it is done correctly,

this should happen.
Ps. I used one of Cassidy's codepens.

Yep so IT IS really simple.
I am happy to answer any questions or demonstrate in any other way possible.

Thank you for reading.

Positioning and Changing the location of an Element.

Stella Mwanahamuntu — Wed, 29 Jan 2020 21:14:33 +0000

Unless otherwise, HTML elements flow statically from the left to the right in the same order they are declared in your HTML code.
CSS code comes in to provide a mechanism to specify some advanced options in the position of an element. The position property specifies the type of positioning method used for an element.
There are five different position values: static, relative, fixed, absolute, sticky.

Static Positioning

This is the default for every single page element in HTML. Different elements don't have different default values for positioning, they all start out as static.
A valid reason for static positioning is to forcefully remove positioning that got applied to an element outside of your control, maybe when using a css framework.

<html>
<head>
<div class="staticdiv">
  This div element has position: static;
</div>
</head>
</html>

<style>
.staticdiv {
  position: static;
  border: 3px solid #000456;
}
</style>

Absolute Positioning

Absolute positioning allows an element to be placed in an exact location specified, relative to its parent or container's border.
You can apply properties individually; left, right, top, bottom. The absolute position takes a distance parameter that specifies the relative distance of the object from a reference point based on the positioning attribute specified.

<body>
  <div class="relativediv">This div element has position: relative;
  <div class="absolutediv">This div element has position: absolute;</div>
</div>

</body>

<style>
.relativediv {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73ff57;
} 

.absolutediv {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #69DA21;
}
</style>

Relative Positioning

With relative positioning, the element is positioned relative to it's immediate left sibling's coordinates.

Fixed Positioning

Fixed positioning is rarely used. A fixed position element is positioned relative to the viewport or browser window. An element with position:fixed will stay right where it is when the page is scrolled.

The top, right, bottom, and left properties are used to position the element.

<body>
<div class="fixeddiv">
This div element has position: fixed;
</div>
</body>

<style>
.fixeddiv {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>

Sticky Positioning

The position sticky allows an element to be positioned based on the user's scroll position.
Sticky element toggles between relative and fixed positioning, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in a specified place.

<body>
<div class="stickydiv">I am sticky!</div>
</body>

<style>
.stickydiv {
  position: -webkit-sticky; /*for safari browsers*/
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>

Yep, that is what I have got on the five positioning values.
Please feel free to drop your comments and anything additional on positioning and location of elements.

Creating the Document Structure Using HTML

Stella Mwanahamuntu — Sun, 12 Jan 2020 06:53:20 +0000

OBJECTIVE : Structure the UI by using semantic markup, including markup for search engines and screen readers, such as Section, Article, Nav, Header, Footer, and Aside; create a layout container in HTML.

Semantic Elements clearly describe their meaning to both the browser and the developer.

Some and I think all the new HTML semantic elements include:

<article> - Defines self contained areas on a page.
<aside> - Like a sidebar, it defines smaller content areas outside the normal layout of the webpage.
<details> - Defines additional details that the user can choose to view or hide.
<figcaption> - Defines the caption of a figure eg. an image.
<figure> - Groups together an image and caption
<footer> - Defines the footer section of a document or section in the document
<header> - Defines the header section of the document or a section in the document
<main> - Specifies the main content of a document.
<mark> - Defines marked or highlighted text
<nav> - Defines navigation links
<progress> - Represents the progress of an objective or task.
<section> - Defines a section in the document
<summary> - Defines a visible heading for <details>
<time> - Defines date and time

Yep that is about it on Creating the document structure. The next post will be on Writing Code that Interacts with UI Controls and hopefully I will have learned how to embed code snippets and images.

Thank you and comments and discussions are welcome.

Preparing for my Microsoft Exam 70-480

Stella Mwanahamuntu — Sat, 11 Jan 2020 19:29:44 +0000

Hey Devs,
I am junior and self taught developer, most of my experience being with WordPress. I love working in the frontend.

I was fortunate enough to be hired way before I had ever written a line of code but unfortanately, in my country certifications kind of truimph experience so in the event that I lose my job, it would mean I stay jobless.

This story's happy ending starts before the actual end. MY BOSS IS PAYING FOR MY MICROSOFT CERTIFICATION!!! so yeah, I will be documenting everything I learn and I hope this series will serve as a helpful resource for anyone else pursuing the course in the future.

I will try to upload posts consistently, atleast once a week. Most of what I will be sharing will probably be from freecodecamp and w3schools but more curated and edited to my own understanding.

Let's get started with what the topics I will be covering in this series.

Implement and Manipulate Document Structures and Objects

Create the Document Structure by using HTML
Write Code that Interacts with UI Controls
Apply Styling to HTML Elements Programmatically
Implement HTML5 APIs
Establish the Scope of Objects and Variables
Create and Implement Objects and Methods

Building with React, WordPress and GraphQL

Stella Mwanahamuntu — Thu, 31 Oct 2019 06:09:13 +0000

I am currently working on a project that needs me to work with WordPress, Graphql, and React.

I downloaded WPGraphQL plugin and found that WPGraphQl may have some limitations. I haven't been able to create an endpoint to communicate between WordPress and another external Database that belongs to another Micro-service. If I am not mistaken I have to write a PHP function of some sort.

Any advice and tips??

Thank you.

Which Language to learn: 5 reasons to Choose Javascript + resources.

Stella Mwanahamuntu — Sun, 25 Aug 2019 11:13:26 +0000

Programming skills are in high demand at least in my country Zambia, we are in the information age and people who can code generally earn higher salaries. It is not set in stone which is the best programming language because technology and functionality are ever-changing. The best programming language to learn depends on why you want to learn to code, your interests or for career goals.

"Software ate the world, the web ate software, and Javascript ate the web."

In this article, my first of many code related articles to come, I explore some reasons why Javascript is a good programming language to learn. I also include a couple of resources to help you learn Javascript.

1. JavaScript runs the Web.

Aside from the fact that all code in the browser runs in javascript, with a few exceptions, JavaScript teaches you programming concepts that apply to many other languages.

2. Getting started with JavaScript is easy.

Some programming languages such as Java and .NET languages need you to have proprietary tools or install extra files. In Chrome, you can ‘right click’ on any page, click inspect and you get a console in which you can run JavaScript. There is literally no reason or excuse not to get started with JavaScript.

3. JavaScript is ubiquitous.

Alongside HTML and CSS, you can use JavaScript to create any kind of website or web application. Thanks to the many available libraries and frameworks such as React and Electron, javascript can be used to build mobile apps for iOS and Android, desktop apps, smart TVs and IoT devices found in smart homes. Javascript can also be used for server-side programming thanks to Node.js

Virtually everyone who has an internet-connected device with a screen can use apps written in JavaScript

4. JavaScript has a forgiving Syntax.

When you are learning a new language there are rules on how to speak or write the language. If you break these rules, the message you are trying to communicate completely changes or in the case of computer programming becomes invalid.

Javascript’s forgiving syntax makes it really easy to learn the language. However, it’s important to explore best practices as you get better at the language for your own good, that of someone who might need to use your code and to keep away bugs.

5. JavaScript will get you paid easily and well.

Allow me to briefly talk about the Javascript Library called React. It was created by Jordan Walke a Software Engineer at Facebook. This framework has been used to build user interfaces for some of the most popular everyday apps we use on our phones such as Facebook, Instagram, SoundCloud, etc. Apps built with React are also cost-effective and are characterized by high performance.

Combining the speed of JavaScript with simplicity and improved performance, you can significantly optimize efforts of building an app, saving the employers’ time and money, and offer smart solutions to businesses.

If you are a looking for a software development job in Zambia or anywhere else in the world, having Javascript as one of your skills would give you an advantage over other developers.

Recommended Read: How Popular is JavaScript in 2019

Some resources for beginners learning Javascript:

Mozilla JavaScript (free)
freeCodeCamp (free)
JavaScript Info (free)
Codecademy
Frontend Masters
egghead.io
Eloquent Javascript

I wish you all the best and success in your coding journey.

I originally published os on my blog Flora’s Girl but I thought to share it with my dev community too.