DEV Community: Firas Lajmi

Some UX Design Principles Everyone Should Know ✨

Firas Lajmi — Thu, 20 Jun 2024 01:17:27 +0000

Hitting the ground running with a new app idea is tough. There are a million things to do and no time to do them. You’ve gone through the “justification” phase, explaining to everyone and their mom why the world needs your application. You’ve documented every single forecast and business plan. Now it’s time to start thinking about actually executing your vision. It all begins with User Experience. Great UX design isn't an afterthought or a “nice to have”; it's an absolute necessity for any application aiming to stand out and thrive. That said, let's dive into some UX design principles that everyone should know.

User-Centered Design🗣️

First things first: always put your users at the center of your design process. This means understanding their needs, behaviors, and pain points. It's not about what you think looks good; it's about making sure your users can accomplish the goal you’ve set out for them with the least amount of resistance.

Conduct User Research: Surveys, interviews, and usability tests are your best friends here.
Create Personas: Develop detailed profiles of your target users to guide your design decisions.
User Journey Mapping: Map out the steps users take to complete tasks within your application, to identify opportunities for improvement. **

Simplicity and Clarity🧘

Less is more. Seriously. Don't overload your users with information or options. Keep your design clean, straightforward, and intuitive. As users flock to your application, you’ll be able to take their feedback and make well educated, data-driven decisions about what to improve.

Clear Navigation: Make sure users can easily find what they need without getting lost. Don’t hide primary actions behind layers of interaction.
Minimalist Design: Remove any unnecessary elements that don't add value. Truly ask yourself why something exists, and how it aids in users accomplishing their goals.
Readable Content: Use clear, concise language and break up text with headings, bullet points, or some very cool emojis if you’re hip 😎. **

Consistency

Like all things, consistency is key. Especially when it comes to creating a seamless user experience. This means maintaining uniformity in your design elements across your website or app.

Design System: I love design systems. There’s nothing better than an organized style guide that includes typography, color schemes, button styles, and all the little components that make your application unique.
Consistent Interactions: Make sure similar actions produce similar results throughout your site. Don’t have twelve different variations of that modal. People notice, and it makes you look silly.
Branding: Keep your branding elements consistent to build trust and foster that brand recognition. **

Accessibility

Accessibility needs to be top of mind at the outset of any project. Baking accessibility best practices into the UX and design phase of your application will ensure you’re providing an equitable experience for each and every one of your users, regardless of how they interact with the web. Make sure you’re at a minimum making these considerations:

Alt Text for Images: This is too easy not to be doing. Provide descriptive text for images to assist screen readers.
Keyboard Navigation: Not everyone browses the web with a mouse or a $130 Apple trackpad. Make considerations for those who navigate with a keyboard.
Contrast Ratios: I’m old and this one bothers me more and more. Do a quick check to make your text has at least a AA contrast ratio. There are several tools for this. Pick one. **

Feedback and Responsiveness

In our wild world of JavaScript applications, ensuring that a user knows that something is happening, has become more important than in the past. Our applications connect to more third-party services these days, and our users must know that an action they’ve taken is processing. We use these strategies to help with that;

Loading Indicators / Skeletons 💀: Skeleton loaders not only sound cool, they also provide anticipatory design elements that give users a sense of what will be on the page, before the data has fully loaded.
Error Messages: Provide clear, helpful error messages when something goes wrong. There’s nothing worse than a user seeing Uncaught - - ReferenceError: Invalid left-hand side in assignment or some other nonsense. Give them plain English feedback instead! Performance Optimization: This is becoming more and more tricky. The more services we integrate, the more complex a database becomes the more creative you have to get to ensure an application is performant. **

Emotional Design

This is such a cool concept to us. Emotional design focuses more on creating experiences that evoke a particular feeling from your users. As cliche, as it may sound, this creates a unique connection and keeps your users feeling positive about the service you’re providing them. This can be done in a few ways;

Storytelling: Visual storytelling on the web is an art form. We love expressing our creativity through creating a full-fledged digital experience.
Micro-Interactions: Small, thoughtful animations and interactions tend to put you in a position to entertain and engage your users and drive them to keep coming back.
Human Touch: Incorporate human elements, like friendly language, relatable imagery, or exceptionally witty content, like the content you’re reading right this second. **

Iterative Design

Everything is iterative. After you build an MVP, it’s back to the drawing board. Starting the process over and continuously iterating is the only way to keep pace with the multi-billion dollar applications that exist in our world. Stay engaged with your user base, listen to their feedback, and they’ll remain loyal to you.

Usability Testing: Regularly test your designs with real users. This is and always will be something that the tech giants miss out on. Don’t miss the mark here.
A/B Testing: Get super granular with this. A/B test simple language, or small components, and use that information to inform the larger design.
Analytics: Use data to inform all of your decisions. There needs to be a why, and data will uncover it. **

Focus on Business Goals

**While user satisfaction is paramount, your application should align with your business objectives. All that work you did at the inception of your idea shouldn’t go to waste. The forecasts and the documentation are invaluable, but balance user needs with your goals. No bullet points here, those business goals are yours to define. We’ll be here to help you refine and execute them.

Keep testing, collaborating, learning, and evolving.

HTML tips and tricks.

Firas Lajmi — Wed, 19 Jun 2024 19:54:48 +0000

In my very last article I shared some JavaScript tips and tricks In this article I will be covering HTML tips and tricks ✨.

The start attribute
Start attribute allows you to specify starting number for your list items.

 <ol start="20">
       <li>Pineapple🍍</li>
       <li>Apple🍎</li>
       <li>Greenapple 🍏</li>
 </ol>

3 items of fruits starting from 20 20 is specified using the start attribute3 items of fruits

The contenteditable attribute
Set contenteditable attribute to true and your content will be editable.

It Can be something about you.

GIFillustration of editable paragraph achived using contenteditable attribute

The required attribute
Set required attribute on input fields that are mandatory to be filled.

<input type="password" required>

The mark tag
Use mark instead of styling spans to highlight text.

 <p>This is <mark>important</mark> </p>

highlighted text achieved with mark tag

The lazy loading attribute
Add lazy loading attribute on media elements this will enhance page performance by defer the loading of media elements until the user scrolls to them.

The kbd tag
Use kbd tag when presenting keyboard inputs.

Press alt & tab to change window

illustration for kbd tag

The Details & Summary tag
You can craft nice looking accordions using details and summary elements this has built built in keyboard accessibility features.

   <details>
      <summary>Can i save and love ❤️ this article?</summary>
      <p>Follow on twitter for more stuff.</p>
      <p>Save for updates.</p>
  </details>

GIFaccordion with question and answer

The accept attribute
Accept attributes allows us to specify which types of files user can upload.

<input type="file" accept=".jpg, .pdf">

The favicon
Set link rel to icon to define favicon

<link rel="icon" href="logo.webp">

The picture tag
Picture tag allows you to present images of different aspect ratios based on screen sizes picture tag is awesome for implementing reponsive web design.

<picture>
    <source srcset="large.webp" media="(min-width: 1200px)">
    <source srcset="medium.webp" media="(min-width: 800px)">
    <img src="regular.jpg" />
</picture>

The dir attribute
You can set your text direction from right to left or left to right using direction set dir to auto this will automatically change text direction based on language.

Awesome!

some text written from right to left

The spellcheck attribute
Use spellcheck attribute to check for spelling errors.

The meta description
Add meta descriptions in the head of your Html to have an indirect impact on search engine optimization meta description represents the text that appears beneath the site name on search engine result page.

Gitpod.io url with output of meta description

The abbr tag
Abbreviate your content using abbr tag.

<abbr title="National Aeronautics and Space Administration">NASA 🚀</abbr>

GIFAbbreviation of word showing on hover over the word

The disabled attribute
Use disabled attribute for options element to disable a item from dropdown.

 <select>
   <option>HTML</option>
   <option>CSS</option>
   <option disabled>REACT</option>
 </select>

GIFUnable to select a option from list because of disabled attribute

The poster attribute
Poster attributes allows you to specify a image to be displayed while the video is downloading or until the user hits the play button.

The reversed attribute
Using reversed attribute you can reverse the order of list numbers.

  <ol reversed>
        <li>Pineapple🍍</li>
        <li>Apple🍎</li>
        <li>Greenapple 🍏</li>
  </ol>

list numbers starting in reversed order starting from 3 and ending at 1 instead of 1 to 3

Hope you enjoyed reading this article! if you have something to say or have any questions feel 💯 free to comment below.

Happy Coding ✨❤️

JavaScript tips and tricks.

Firas Lajmi — Wed, 19 Jun 2024 19:52:35 +0000

In this article we will look at some useful JavaScript tips and tricks.

location.reload()
This reloads the current document and works same as the reload button in your browser.This can be really handy when implementing a refresh button in the user interfaces.

const btnRefresh = document.querySelector('button')

btnRefresh.addEventListener('click',() => {
  location.reload()
})

JavaScript styles
CSS styles applied using javascript are applied as inline styles.

Cakes & Bakes 🧁

document.querySelector('h1').style.color = "coral"

<h1 style="color: coral;">  // HTML Element

Type coercion
Implicit conversion of values from one data type to another data type is named as type coercion i.e strings to numbers.

In case of plus operator values are concatenated and converted into strings.

console.log("2" * 10)  // output: 20
console.log(10 - '2')  // output: 8
console.log(2 + '2')   // output: '22'

Active element
if you are having hard time figuring out which element is currently being focused use document.activeElement it returns the current focused element.

console.log(document.activeElement)

Primitives
In JavaScript there are seven primitive data types.
number, string, boolean, undefined, null, BigInt, Symbol
Remainder operator
Remainder operator % simply returns the remainder of a division i.e 5 % 2 = 1.You can use remainder operator to check either a number is even or odd

const number = 10

console.log(number % 2 === 0 ? 'Even ❤️' : 'Odd 🧡') 
// output: Even ❤️

Design mode
Set document.designMode to on to make your webpage content editable.
document.designMode = "on"
Contains method
To check either a HTML element contains a specific class or not.

<h1 class="title">Page title</h1>
document.querySelector('h1').classList.contains('title')
document.querySelector('h1').classList.contains('subtitle')

// output: true
// output: false 
Var hoisting
Variables declared with var are hoisted but returns undefined.
console.log(a)
var a = 10;

// output: undefined
Remove method
Remove methods allows you to remove an HTML from the document.
<h1>Page title ⚙️</h1> 
const pageTitle = document.querySelector('h1')
pageTitle.remove()
Eval method
Eval is a builtin Javascript function which allows you to evaluate the given values i.e strings, numbers.This can be used to build a simple calculator like this.
eval(2 * '5')  
// output: 10

eval(12 / '2')  
// output: 6 
Typeof operator
The typeof operator allows you to check type of a value.
console.log(typeof 42);
// output: "number"

console.log(typeof 'markdown ⚡');
// output: "string"

console.log(typeof true);
// output: "boolean"

Replace method
The replace method allows you to replace the very first instance of a string entity with the specified entity likewise replace we also have replaceAll that replaces all the instances.
const string = 'cake'
string.replace('c','b')

// output: 'bake'

Default parameters
Set default parameters for functions using assignment operator in case no argument is passed the function will return the default values.

I wrote this article to cover this topic in detail.

 function printName(name = "Anonymous"){
  console.log(name)
 }

 printName()  // output: "Anonymous"
Document url
The document.URL returns the document URL/location as a string.
console.log(document.URL)

// output: "https://developer.mozilla.org/en-US/"
Strings index
Likewise arrays string indexes also start with 0.

let string = 'cake'
string[0]  // output: 'c'
string[1]  // output: 'a'

Includes method
To check either a string or array contains a specific value or not. The method returns a boolean.

const string = 'JavaScript'

string.includes('J')  // output: true

const hearts = ['🧡', '💙', '🤍']

console.log(hearts.includes('🧡'))  // output: true

console.log(hearts.includes('❤️'))  // output: false

Hope you enjoyed reading this article! if you have something to say or have any questions feel 💯 free to comment below.

22 Useful CSS Tips and Tricks Every Developer Should Know

Firas Lajmi — Wed, 19 Jun 2024 19:49:28 +0000

🚨🚨 Note: All the tips, tricks shared in this article are part of GitHub repository css tips tricks A handmade collection of pro css tips tricks for developers. Please checkout the repositiory and Give it a star if you find it useful 🌟

Docs Layout Create a responsive documentation-styled layout with only two lines of CSS.

.parent{
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

The Custom Cursors Checkout the github repository css tips tricks to learn more about it.

html{
  cursor:url('no.png'), auto;
}

GIFimage with custom cursor

Fill Text With Images

h1{
  background-image: url('images/flower.jpg');
  background-clip: text;
  color: transparent;
  background-color: white;
}

Air max

Note: Always specify background-color when using this technique as this will be used as a fallback value in case the image does not load for some reason.

Adding Stroke to Text Make text more legible and visible using text-stroke property it adds a stroke or outline to text. /* 🎨 Apply a 5px wide crimson text stroke to h1 elements */

h1 {
  -webkit-text-stroke: 5px crimson;
  text-stroke: 5px crimson;
}

NETLIFY

Paused Pseudo Class Use :paused selector to style media elements when in paused state likewise :paused we also have :playing. /* 📢 currently, only supported in Safari */

video:paused {
  opacity: 0.6;
}

GIFplam tree on river

Emphasing Text Use text-emphasis property to apply emphasis marks to text elements.You can specify any string including emojis as its value.

h1 {
  text-emphasis: "⏰";
}

Time is a healer

Style Drop Caps Avoid unnecessary spans and use pseudo elements instead to style your content likewise first-letter pseudo-element we also have first-line

pseudo-element.
 h1::first-letter{
  font-size: 2rem;
  color:#ff8A00;
}

Gitpod.io

Fallback values for Variables /* 🎨 crimson color will be applied as var(--black) is not defined */

:root {
  --orange: orange;
  --coral: coral;
}

h1 {
  color: var(--black, crimson);
}

crimson colored text

Change Writing Mode You can use writing mode property to specify how text should be laid out on your website i.e vertically or horizontally.
Cakes & Bakes
/* 💡 specifies the text layout direction to sideways-lr */

h1 {
  writing-mode: sideways-lr;
}

text starting from

Rainbow Animation Creates a continuously looping color animation for elements to grab user attention. Give a read to css tips tricks repository to learn when to use prefer-reduced-motion media feature

button{
  animation: rainbow-animation 200ms linear infinite;
}
@keyframes rainbow-animation {
  to{
    filter: hue-rotate(0deg);
  }
 from{
    filter: hue-rotate(360deg);
  }
}

GIFshop now button changing its color contineously

Master Web Development Subscribe to our YouTube channel to take your web-development skills to the next level. One of the recent video series goes over creating the following open source portfolio template.

Imon

Zooming on Hover /* 📷 Define the height and width of the image container & hide overflow */

.img-container {
  height: 250px; width: 250px; overflow: hidden;
 }

/* 🖼️ Make the image inside the container fill the container */

.img-container img {
  height: 100%; width: 100%; object-fit: cover; 
  transition: transform 200m ease-in;
 }

 img:hover{
  transform: scale(1.2);
 }

GIFcrimson colored shopping bag laying on grey tiles

Attribute Selector Select HTML elements based on attributes using the attribute selector.

<a href="">HTML</a>
<a>CSS</a>
<a href="">JavaScript</a>

/* 🔗 targets all a elements that have a href attribute */

a[href] {
  color: crimson;
}

HTML CSS JavaScript

Clipping Elements Use the clip-path property, to create interesting visual effects, such as clipping an element to a custom shape like a triangle or hexagon.

div {
  height: 150px;
  width: 150px;
  background-color: crimson;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

triangle

Detect Properties Support Use CSS @support rule to detect support for CSS features directly in your CSS. Checkout the css tips tricks repository to learn more about feature queries.

@supports (accent-color: #74992e) {
/* code that will run if the property is supported */
  blockquote {
    color: crimson;
  }

}

Never break your promise.(Hazrat Ali A.S)

CSS Nesting The CSS working group has been working on figuring out how to add nesting to CSS. With nesting, you'll be able to write CSS that is more intuitive, more organized, and more efficient.

<header class="header">
  <p class="text">Lorem ipsum, dolor</p>
</header>
/* 🎉 You can try CSS nesting now in Safari Technology Preview*/

.header{

  background-color: salmon;

  .text{
    font-size: 18px;
  }

}

The Clamp Function Use the clamp()function for responsive and fluid typography. /* Syntax: clamp(minimum, preferred, maximum) */

h1{
  font-size: clamp(2.25rem,6vw,4rem);
}

GIFgif font size changing based on screen size

Styling Optional Fields You can style form fields like input, select and textarea that dose not have a required attribute on them using the :optional pseudo class. /* Selects all optional form fields on the page */

*:optional{
  background-color: green;
}

Word Spacing Property Use word-spacing property to specify length of white space between words.

p {
  word-spacing: 1.245rem;
}

Create Gradient Shadows This is how you can create gradient shadows for an exclusive user experience.

:root{
  --gradient: linear-gradient(to bottom right, crimson, coral);
}

div {
  height: 200px;
  width: 200px;
  background-image: var(--gradient);
  border-radius: 1rem;
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gradient);
  border-radius: inherit;
  filter: blur(25px) brightness(1.5);
  transform: translateY(15%) scale(0.95);
  z-index: -1;
}

box with gradient shadow

Change Caption Side Use the caption-side property to place the table caption (table title) on a specified side of the table.

GIFChanging the tables caption side from top to bottom

Creating Text Columns Craft nice column layouts for text elements using column properties. /* 🏛️ divide the content of the "p" element into 3 columns */

p{
  column-count: 3;
  column-gap: 4.45rem;          
  column-rule: 2px dotted crimson;
}

css tips and tricks poem

I hope you enjoyed reading this article. Please checkout the GitHub repository css tips tricks to learn more professional css tips, tricks and don't forget to give the repository a star⭐ This will help other peoples find this repository.

You can show your support by following me on my GitHub account. Thanks and Happy coding ❤️