DEV Community: Saif Mohamed

What you don't know about sass 🤯

Saif Mohamed — Mon, 22 Jan 2024 16:19:15 +0000

What is sass ?!

SASS is a CSS pre-processor, A pre-processor is scripting languages that extend the default capabilities of CSS, Like adding logic to it as it is programming language and some special features, we'll talk about them in a minute.

Importance and main usages of SASS

One major benefit of using SASS is that it provides developers with a way to organize their stylesheets into individual files and partials, which makes the code easier to read, maintain, and reuse. With Sass, you can break up your stylesheets into smaller components that can be easily imported into other files.

It enables you to handle typography, layouts, variables and grids in one of the best shapes.

SASS vs CSS

First, CSS does not give you the flexibility in managing variables, also one of CSS biggest disadvantages is, when you're doing nesting you should repeat yourself in writing the class names many times, like this:

.parent {
  /* your CSS code */
}

.parent .child {
  /* your CSS code */
}

.prent .child .grandChild {
  /* your CSS code */
}

Main SASS Advantages:

Now let's take a closer look on SASS advantages versus CSS.

Nesting class names

In SASS you're not forced to do these dummy nesting I mentioned previously 👆
You can nest your class names in more elegant way now:

.parent {

  /* CSS code */

  .child {

     /* your CSS code */

     .grandChild {

         /* your CSS code */

    }
  }
}

And also you can benifit from this in the BEM naming technique, Let's see how ?!

If you have the parent div named parent and it's child named parent__child (with double underscore)

You can use it in the sass code like this:

.parent {
  /* parent CSS code */

  &__child {
   /* child CSS code */
 }

}

Maps

Like many programming languages, in SASS you have the ability to create a map where you can set key, value pairs and access them or loop over them.

// color palette
$colors: (
  "primary": #FFFFFF,
  "secondary": #FFFFFF,
  "error": #FFFFFF,
  "info": #FFFFFF,
);

// You can use it like this to get the value of the key `primary`

$primary-color: map-get($colors, "primary");

// OR

.container {
  background-color: map-get($colors, "primary");
}

Loops

In SASS you use @each and @for to make loops over specific number of items and maybe generate some utility classes:

@for $i from 1 through 12 {
  .col-#{$i}-xs {
   box-sizing: border-box;
   flex-grow: 0;
   width: math.div($i * 100%, $grid-columns);
 }
}

This code is going to generate the following classes
.col-1-xs
.col-2-xs
...
.col-12-xs

Conditions

You can use @if statement in your SASS code to conditionally set CSS properties:

@if ($k == "default") {
 .#{$prefix} {
   #{$property}: $v;
 }
} @else {
 .#{$prefix}-#{$k} {
   #{$property}: $v;
 }
}

Functions

In SASS you can use functions to manipulate colors, sizes, or any other css properties and return them.

Here is an example for a function that lighten and reverse specific colors using two methods in sass complement and lighten :

@function light-comp($color) {
  $complement: complement($color);
  $light-complement: lighten($complement, 30%);
  @return $light-complement;
}

Conclusion

SASS is a powerful CSS pre-processor that you can use to build modern themes and layouts, also you can build your own CSS custom library using it, like your own version of Bootstrap, and It can reduce your CSS code much more than you think and make it cleaner and more organized.

Unleashing the Power of React Native

Saif Mohamed — Wed, 19 Apr 2023 21:31:14 +0000

Introduction

React Native is a popular open-source framework for building mobile applications using JavaScript and React. It was created by Facebook in 2015 and has gained a lot of popularity among developers due to its ease of use, flexibility, and performance. In this article, we will explore the reasons why React Native is a good choice for mobile app development, provide some small examples, and highlight the key differences between React Native, Flutter, and native mobile development.

Why React Native is a good choice ?!🤔

1. Cross-platform compatibility
React Native allows developers to build applications that can run on both iOS and Android platforms, saving development time and costs. Instead of writing separate code for each platform, developers can use a single codebase for both platforms.

2. Easy to learn and use
Developers who are familiar with React will find it easy to learn and use React Native. The framework uses a similar syntax and structure to React, making it easy to get started with.

3. Fast development
React Native's hot reloading feature allows developers to see the changes they make in real-time, speeding up the development process. The framework also has a large number of pre-built components, allowing developers to quickly create complex UIs.

4. Performance
React Native uses a bridge to communicate between the JavaScript code and the native platform, allowing for smooth and fast performance. The framework also uses native components, ensuring that the app looks and feels like a native app.

Let's take a look at some small examples ✅

Example 1: Creating a basic Hello World application

import React from 'react';
import { Text, View } from 'react-native';

const App = () => {
  return (
    <View>
      <Text>Hello World!</Text>
    </View>
  );
}

export default App;

Example 2: Creating a button that changes color when pressed

import React, { useState } from 'react';
import { View, Button } from 'react-native';

const App = () => {
  const [color, setColor] = useState('red');

  const changeColor = () => {
    setColor('blue');
  }

  return (
    <View>
      <Button title="Change color" onPress={changeColor} />
      <View style={{ backgroundColor: color, height: 100, marginTop: 20 }}></View>
    </View>
  );
}

export default App;

Key Differences between React Native, Flutter, and Native Mobile Development

1. Language
React Native uses JavaScript, while Flutter uses Dart. Native mobile development uses platform-specific languages like Java or Kotlin for Android and Swift or Objective-C for iOS.

2. Performance
Flutter uses its own rendering engine, which allows for fast and smooth performance. React Native uses a bridge to communicate between the JavaScript code and the native platform, which can sometimes lead to performance issues. Native mobile development offers the best performance since it directly uses the platform-specific APIs.

3. Tooling
Flutter comes with a complete set of development tools, including an integrated

Vite.js: The Speedy Build Tool Revolutionizing JavaScript Development

Saif Mohamed — Mon, 03 Apr 2023 10:00:00 +0000

Vite.js is a modern build tool for JavaScript applications. It was developed by Evan You, the creator of the popular front-end framework Vue.js. Vite.js focuses on speed and developer experience, offering a blazing-fast development server and an optimized build process. In this article, we will explore the good and the bad of Vite.js.

Pros

1- Fast Development Server:

Vite.js comes with a development server that is optimized for speed. It leverages the native ES modules in modern browsers to serve the application without the need for bundling. This makes the development experience much faster than traditional build tools like Webpack.

2- Build Optimizations:

Vite.js uses a highly optimized build process that leverages the latest features of modern browsers. It generates highly optimized code, resulting in faster load times and smaller bundle sizes.

3- Vue.js Integration:

Vite.js was developed by the creator of Vue.js, so it naturally has excellent integration with the Vue.js framework. Vite.js supports Vue.js single-file components out of the box, making it a great choice for Vue.js developers.

4- Plugin System:

Vite.js has a powerful plugin system that allows developers to extend its functionality. There are already many plugins available, including ones for TypeScript, CSS preprocessors, and more.

5- Customizable Configuration:

Vite.js provides a simple and intuitive configuration file that allows developers to customize their build process. This makes it easy to tailor the build process to the needs of the application.

Cons

1- Limited Browser Support:

Vite.js leverages the latest features of modern browsers, so it has limited support for older browsers. This may be a concern for applications that need to support older browsers.

2- Limited Language Support:

Vite.js is primarily designed for JavaScript applications, so it has limited support for other languages like TypeScript, although there are plugins available to address this.

3- Immaturity:

Vite.js is a relatively new build tool, so it may lack some of the features and stability of more established build tools like Webpack. However, it has gained a lot of popularity and momentum in the community.

Conclusion

Vite.js is a modern and fast build tool that offers a great development experience for JavaScript applications. Its focus on speed and developer experience makes it a popular choice for many developers, particularly those using Vue.js. While it may have some limitations, its strengths make it a great choice for modern web development projects.

Do not forget to follow me for more technical post 🥰 ✅