DEV Community: Syed Mohsin Raza

Free Open-Source Portfolio Template for Developers⚡🚀

Syed Mohsin Raza — Tue, 13 Jun 2023 15:21:13 +0000

A beautiful, minimal and accessible portfolio template for Developers ✨ which is completely free and Open Source. Anyone can use this as a template for making their own portfolio and can customize it the way they want.

Give it a star 🌟 on Github if you find it useful.

GitHub Repo Link →
Check out the live demo here →

Features

Clean, Simple and Modern UI Design ✨.
Uses No CSS or JavaScript Frameworks or libraries as dependencies.
Built with only HTML, CSS and JavaScript 🔨.
Supports light/dark theme .
Well Organized Documentation.
Built with a11y in mind ♿.
Fully Responsive.
Sleek animations.
SEO-optimized.
Loads fast ⚡.

My GitHub. If you have something to say or have any question, feel free to drop a comment below.

22 Useful CSS Tips and Tricks Every Developer Should Know

Syed Mohsin Raza — Sun, 26 Feb 2023 21:18:57 +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 🌟

1. Docs Layout

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

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

2. The Custom Cursors

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

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

3. Fill Text With Images

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

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.

4. 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;
}

5. 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;
}

6. 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: "⏰";
}

7. 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;
}

8. 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);
}

9. 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.

<h1>Cakes & Bakes</h1>

/* 💡 specifies the text layout direction to sideways-lr  */

h1 {
  writing-mode: sideways-lr;
}

10. 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);
  }
}

11. 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.

12. 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);
 }

13. 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;
}

14. 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%);
}

15. 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;
  }

}

16. 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;
  }

}

17. 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);
}

18. 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;
}

19. Word Spacing Property

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

p {
  word-spacing: 1.245rem;
}

20. 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;
}

21. Change Caption Side

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

22. 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;
}

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 ❤️

JavaScript tips and tricks.

Syed Mohsin Raza — Thu, 08 Sep 2022 11:16:33 +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.

<h1>Cakes & Bakes 🧁</h1>

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.

CSS tips and tricks.

Syed Mohsin Raza — Sun, 10 Apr 2022 17:12:43 +0000

As we are done with HTML and JavaScript tricks now its time to cover CSS Tips and Tricks 💖✨

The `print media queries`

You can style the printable version of your sites using print media queries.

@media print {

  * {
    background-color: transparent;
    color: #000 ;
    box-shadow: none;
    text-shadow: none;
  }

}

The `gradient text`

h1{
  background-image: linear-gradient(to right, #C6FFDD, #FBD786, #f7797d);
  background-clip: text;
  color: transparent;
}

Improve `media defaults`

When writing css reset add these properties to improve media defaults.

img, picture, video, svg {
  max-width: 100%;
  object-fit: contain;  /* preserve a nice aspect-ratio */
}

Centering with `positioning`

In case you don't know grid or flex this is the way to center a div vertically and horizontally.

div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

The `comma separated list`

This is the code required to craft a comma separated list.

li:not(:last-child)::after{
  content: ',';
}

The `smooth scrolling`

You are just one line away from smooth scrolling.

 html {
  scroll-behavior: smooth;
}

The `hyphens`

Set hyphens property on your text content to make it hyphenated when text wraps across multiple lines.

The `first letter`

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

 h1::first-letter{
   color:#ff8A00;
}

The `accent color`

Instead of using builtin default colors customize your form controls colors using accent color this has builtin color contrast accessibility features.

The `Image filled text`

h1{
  background-image: url('illustration.webp');
  background-clip: text;
  color: transparent;
}

The `placeholder pseudo-element`

Use placeholder pseudo-element to style placeholders.

::placeholder{
  font-size:1.5em;
  letter-spacing:2px;
  color:green;
  text-shadow:1px 1px 1px black;
}

The `colors animation`

Change elements colors with hue-rotate filter.


button{
  animation: colors 1s linear infinite;
}

@keyframes colors {
  0%{
    filter: hue-rotate(0deg);
  }
  100%{
    filter: hue-rotate(360deg);
  }
}

Centering with `margin`

.parent{
  display: flex;  /* display: grid; also works */
}

.child{
  margin: auto;
}

The `clamp function`

Use clamp function for responsive and fluid typography.

h1{
  font-size: clamp(5.25rem,8vw,8rem);
}

The `selection pseudo element`

Set styles on content selection.

::selection{
  color:coral;
}

The `decimal leading zero`

Set list style type to decimal leading zero to append leading zero to your ordered list items.

li{
  list-style-type:decimal-leading-zero;
}

Centering with `flex`

.parent{
  display: flex;
  justify-content: center;
  align-items: center;
}

The `caret color`

You can customize your text input cursor color using caret color property.

input{
  caret-color:coral;
}

The `resize property`

Set resize property to none to avoid the resizing of textarea

textarea{
  resize:none;
}

The `only child`

Only child pseudo-class selects an element if it is only child of its parent.

li:only-child{
  color:lightgrey;
}

The `text indent`

Text indent property allows us to indent the first line of text we can also use negative values.

p{
  text-indent:5.275rem;
}

The `list style type`

You can set a emoji as a list style type.

li{
  list-style-type:'🟧';
}

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

Happy Coding 📕✨

HTML tips and tricks.

Syed Mohsin Raza — Mon, 28 Feb 2022 11:24:45 +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>

The `contenteditable attribute`

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



 <p contenteditable="true">It Can be something about you.</p>

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>

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.



<img src='image.jpg' loading='lazy' alt='Alternative text'>

The `kbd tag`

Use kbd tag when presenting keyboard inputs.



<p>Press <kbd>alt</kbd> & <kbd>tab</kbd> to change window</p>

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>

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.



<p dir="rtl">Awesome!</p>

The `spellcheck attribute`

Use spellcheck attribute to check for spelling errors.



<input type="email" spellcheck="true">

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.



<meta name="description" content="Gitpod streamlines developer workflows by providing prebuilt, collaborative developer environments in your browser - powered by VS Code.">

The `abbr tag`

Abbreviate your content using abbr tag.



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

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>

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.



<video src="video.mp4" poster="flowers.jpg"></video>

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>

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.

Syed Mohsin Raza — Tue, 01 Feb 2022 11:56:38 +0000

The `!! operator`

To check either a value is truthy or falsey use !! operator you can call this double not or not not operator you can also go with Boolean function here.

console.log(!! 0)             // output: false
console.log(!! 1)            // output: true

console.log(Boolean(1))     // output: true
console.log(Boolean(0))    // output: false

Convert `string → number`

Convert string into a number

const string = '101'

console.log(+string)          // output: 101
console.log(Number(string))   // output: 101

The `reverse method`

Use reverse method to reverse the order of array items notice that reverse method mutates the original array.

const numbers = ['1', '2', '3']

console.log(numbers.reverse())   // output: [ "3", "2", "1" ]

The `Math.min & max`

Find minimum or maximum values from an array using Math.min & Math.max function.

const numbers = [1, 2 ,3, 4, 5]

console.log(Math.min(...numbers)) // output: 1

console.log(Math.max(...numbers)) // output: 5

Merge `Arrays`

Use spread operator to merge arrays.

const fruits = ['🍎', '🍌']

const vegetables = ['🥔', '🥕']

const food = [...fruits, ...vegetables]

console.log(food) // output: [ "🍎", "🍌" , "🥔", "🥕" ]

The `falsey values`

In javascript there are nine falsey values.

undefined , null , NaN , 0 , 0n (BigInt 0), -0 ""(empty string),false,document.all

The `ternary operator`

Ternary operator allows you to write if...else statement in a more compact.

let number = 1

if (number == 1) {
  console.log('number is one')
} else {
  console.log('number is not one')
}

// Syntax: condition ? exprIfTrue : exprIfFalse  (MDN)

console.log(number === 1 ? "number is one" : "number is not one");

Remove `duplicates from array`

const fruits = ['🍎', '🍊', '🍎', '🍊']

// Method 1:
const filteredFruits = Array.from(new Set(fruits))
console.log(filteredFruits) // output: Array [ "🍎", "🍊" ]

// Method 2:
const filteredFruits = [...new Set(fruits)]  
console.log(filteredFruits) // output: Array [ "🍎", "🍊" ]

The `map method`

Try using map method if you want to manipulate array items map method executes the given function on each element of array and return a new array based on the original array

const numbers = [1, 2, 3, 4, 5]

const mapedNumbers = numbers.map(element => element + 1) 

console.log(mapedNumbers) // output: [2, 3, 4, 5, 6]

The `includes method`

To check that an array contains a certain value or not use includes method.

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

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

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

The `filter method`

filter arrays based on conditions filter method takes a function as an argument and executes that function on each element of array and returns new array.

const numbers = [1, 5, 6, 7, 4]

const filteredArray = numbers.filter(element => element > 4)

console.log(filteredArray)  // output: [ 5, 6, 7 ]

Scroll to top `button`

const button  = document.querySelector('button')

button.addEventListener('click', function () {
  window.scrollTo(0,0)
})

Happy Coding 😊

JavaScript Default Function Parameters.

Syed Mohsin Raza — Tue, 30 Nov 2021 14:13:16 +0000

In JavaScript when we call a function which expects some data to be passed in if you call that without passing in that data JavaScript will use undefined.

Let's understand this practically ⚙️

What the following function does is that it takes a name as an input and console logs it.

function printName(name) {
  console.log(name);
}

Now if we call the printName function by passing in a name as shown below:

printName("frontendenthusiast");

We'll get the following output.

frontendenthusiast

Now lets call the same function without passing anything in

printName();

We will get undefined as the output in the console.

undefined

undefined isn't that useful in most situations what if we can use a fallback if no name is passed into the function. Well for that we can use the || operator in JavaScript as shown below:

function printName(name) {
  name = name || `Anonymous`;
  console.log(name);
}

The Logical OR (||) operator returns the very first truthy value and undefined is a falsy value so in the printName function it will return Anonymous which is a truthy value.

Now with the above addition of || operator if we call the function by passing in no value as shown:

printName();

We will get Anonymous as the output.

Anonymous

In ES6 we have a more compact way of doing the above which is to set up default parameters directly using the assignment operator = as shown:

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

this returns default value we set using = operator in case no value was passed in.

function printName(name = `frontendenthusiast`) {
  console.log(name);
}

printName(undefined);

The output of the above function will be frontendenthusiast

Happy coding! 🥰

DEV Community: Syed Mohsin Raza

Free Open-Source Portfolio Template for Developers⚡🚀

Features

22 Useful CSS Tips and Tricks Every Developer Should Know

1. Docs Layout

2. The Custom Cursors

3. Fill Text With Images

4. Adding Stroke to Text

5. Paused Pseudo Class

6. Emphasing Text

7. Style Drop Caps

8. Fallback values for Variables

9. Change Writing Mode

10. Rainbow Animation

11. Master Web Development

12. Zooming on Hover

13. Attribute Selector

14. Clipping Elements

15. Detect Properties Support

16. CSS Nesting

17. The Clamp Function

18. Styling Optional Fields

19. Word Spacing Property

20. Create Gradient Shadows

21. Change Caption Side

22. Creating Text Columns

JavaScript tips and tricks.

location.reload()

JavaScript styles

Type coercion

Active element

Primitives

Remainder operator

Design mode

Contains method

Var hoisting

Remove method

Eval method

Typeof operator

Replace method

Default parameters

Document url

Strings index

Includes method

CSS tips and tricks.

The print media queries

The gradient text

Improve media defaults

Centering with positioning

The comma separated list

The smooth scrolling

The hyphens

The first letter

The accent color

The Image filled text

The placeholder pseudo-element

The colors animation

Centering with margin

The clamp function

The selection pseudo element

The decimal leading zero

Centering with flex

The caret color

The resize property

The only child

The text indent

The list style type

HTML tips and tricks.

The start attribute

The contenteditable attribute

The required attribute

The mark tag

The lazy loading attribute

The kbd tag

The Details & Summary tag

The accept attribute

The favicon

The picture tag

The dir attribute

The spellcheck attribute

The `print media queries`

The `gradient text`

Improve `media defaults`

Centering with `positioning`

The `comma separated list`

The `smooth scrolling`

The `hyphens`

The `first letter`

The `accent color`

The `Image filled text`

The `placeholder pseudo-element`

The `colors animation`

Centering with `margin`

The `clamp function`

The `selection pseudo element`

The `decimal leading zero`

Centering with `flex`

The `caret color`

The `resize property`

The `only child`

The `text indent`

The `list style type`

The `start attribute`

The `contenteditable attribute`

The `required attribute`

The `mark tag`

The `lazy loading attribute`

The `kbd tag`

The `Details & Summary tag`

The `accept attribute`

The `favicon`

The `picture tag`

The `dir attribute`

The `spellcheck attribute`

The `meta description`

The `abbr tag`

The `disabled attribute`

The `poster attribute`

The `reversed attribute`

The `!! operator`

Convert `string → number`

The `reverse method`

The `Math.min & max`

Merge `Arrays`

The `falsey values`

The `ternary operator`

Remove `duplicates from array`

The `map method`

The `includes method`

The `filter method`

Scroll to top `button`