DEV Community: sharath mohan

Why CSS Still Rocks in 2024

sharath mohan — Tue, 10 Dec 2024 18:28:24 +0000

Love it or hate it, CSS continues to prove its worth. The past year has been a rollercoaster in the world of software engineering, with AI seemingly poised to take over our jobs. Yet, despite the rise of automation, CSS remains an essential skill that evolves alongside technology.

Remember when we used to joke about AI being "too dumb to center a div"? Well, times have changed—and so has CSS. Let’s explore some exciting new features that make CSS more powerful than ever.

1. Align Content: Centering Made Easy

Gone are the days when you had to rely on Flexbox or Grid to center a div. With the align-content property, CSS now offers a simpler and more direct way to handle alignment.

📖 Learn more about align-content

2. @property: Dynamic Custom Properties

CSS variables introduced us to reusable variable names, but the @property feature takes this a step further. It allows developers to define custom properties with explicit rules, making animations and theming more predictable and flexible.

📖 Learn more about @property

3. @starting-style: Simplifying Transitions

Transitioning from display: block to display: none while maintaining animations used to be a headache. Enter @starting-style—a new feature that makes it easier to define styles at the start of a transition.

📖 Learn more about @starting-style

4. Light-Dark Function: Native Theme Switching

Many developers use JavaScript to manage light and dark modes, but CSS now offers a built-in light-dark function. This simplifies theme management, reducing reliance on external scripts.

📖 Learn more about light-dark

Honoring Rebecca Purple: A Tribute to CSS History

One of the most exciting updates this year isn’t a feature—it’s a tribute. The CSS logo has adopted the color Rebecca Purple (#663399) to honor Rebecca Alison Meyer, daughter of CSS pioneer Eric Meyer. This thoughtful change celebrates the human stories behind the technology we use every day.

CSS continues to evolve, introducing features that make our lives easier while honoring its rich history. Whether you're a fan or a skeptic, one thing is clear: CSS still rocks!

Setup Prettier with Vite & VS Code

sharath mohan — Tue, 01 Nov 2022 06:11:30 +0000

Lets face it code formatting is real pain, specially when working on shared projects. Fortunately we have got prettier to solve this problem. This is article is a short guide for setting up prettier in Visual Studio Code, But IDE would do.

What's Prettier?

Prettier is an opinionated code formatter, for many languages,like Javacript, CSS, JSX.. (mostly all client side tools) and also can be extended to other languages with community plugins

Time to setup

I will scaffold a quick react typescript project using vite.

npm create vite@latest

Install prettier

Install prettier as a dev dependency, this helps us to configure prettier on a per page project

npm install --save-dev --save-exact prettier

Create file name .prettierrc.json

This will act as the configuration file for prettier. It can be configured using json, YAML or javascript I will be using json

{

    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "arrowParens": "avoid"
}

This would format the code by using a tab space of 2, adding semi colons at the end of all line endings, using single quotes instead of double, and omits parathesis in arrow functions whenever possible

More rules can be found Rules

now you can run prettier using

npx prettier --write .

Great!, but can still do better, instead of manually running the configuration we can setup our IDE/Text Editor to help us out.

I am giving the guide for VS Code

Install the prettier extension

VS code extension

Open Settings

You can quickly configure the settings by using settings.json file

Press CMD+OPTION+P or CTRL+ALT+P and type in open settings json

{

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,

}

This will use the formatting option as prettier and follow the configuration set in the configuration file created earlier and also apply formatting when you save or paste a code.

Bam !!

But what if you need to ignore certain files from formatting say the package-lock.json or the dist/build files. That where .prettierignore comes into play

Create a file called .prettierignore. This works similar to .gitignore and you can follow the same setup

Hope you guys loved it. This is the first part of setting up a good DX using Vite and React. eventually reaching https://github.com/sharath-mohan/react-dx-template this template.

If you liked this article, a star on the github repo would be awesome

File Upload in React

sharath mohan — Thu, 11 Aug 2022 15:56:43 +0000

Working with file upload is one of those things you somehow wind up doing. Here is a small article on doing the same in React
First of all, we need to understand on how refs work in React. Ref's act as pointers on DOM elements, like how you would be selecting an element using say

and the useContext Hook to manage those ref's

In this example, I have created a ref called inputRef that is connected to the input element, each element connected to the ref can a current property on which you can use all the properties supported by that element, in this case value

lets add the FileType, FormData and fetch API

Chrome Extensions to make your life with css easy

sharath mohan — Mon, 04 Jul 2022 10:41:39 +0000

Working with CSS can be a brain-drainer, and it is not a hidden fact. Here are few chrome extensions that can make life easy when working and debugging css

1. Whatfont
Ever wondered what is that awesome font that you find on a site that you just visited, whatfont can help you find it in a giffy

2. Visbug
Visbug is what I could call the swiss amry knife of a web developer, it providers easy inspection, modification of a web page

3. CSS peeper
CSS peeper helps you to look into the web pages assets and styles without ever opening up your inspector

4. Emmet re:view
Emmet Re:view,is the easiest way to check the responsiveness of a website

Happy Coding!!

Make your Git Commit Messages better

sharath mohan — Tue, 28 Jun 2022 06:21:04 +0000

Have you wondered how the make awesome commit messages in open source projects?. Here’s how you can also make your git commit messages better
I am huge fan of Angular and digging through the contribution guidelines of the project I found a specific pattern, and after a brief search I came across this guideline called conventional commits, they say

A specification for adding human and machine readable meaning to commit messages

so whats special here?

The idea is to organize your commit messages, by using a standard specification, and your commit message would look somewhat like this

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

The commit contains the following structural elements, to communicate intent to the consumers of your library:

fix: a commit of the type fix patches a bug in your codebase (this correlates with PATCH in Semantic Versioning).
feat: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in Semantic Versioning).
BREAKING CHANGE: a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in Semantic Versioning). A BREAKING CHANGE can be part of commits of any type.
types other than fix: and feat: are allowed, for example @commitlint/config-conventional (based on the the Angular convention) recommends build:, chore:, ci:, docs:, style:, refactor:, perf:, test:, and others.
footers other than BREAKING CHANGE: may be provided and follow a convention similar to git trailer format.
Additional types are not mandated by the Conventional Commits specification, and have no implicit effect in Semantic Versioning (unless they include a BREAKING CHANGE). A scope may be provided to a commit’s type, to provide additional contextual information and is contained within parenthesis, e.g., feat(parser): add ability to parse arrays.

Now why should I use this? …

Automatically generating CHANGELOGs.
Automatically determining a semantic version bump (based on the types of commits landed).
Communicating the nature of changes to teammates, the public, and other stakeholders.
Triggering build and publish processes.
Making it easier for people to contribute to your projects, by allowing them to explore a more structured commit history.

It sure has made my life easy while merging code, and boarding new people to the team.

Happy Coding!!

Nginx configuration for Angular2+ Deployment

sharath mohan — Wed, 06 May 2020 11:08:57 +0000

Quick note

Nginx is a high performance web server with some additional capabilities such as load-balancing and reverse-proxy.
Angular is one of the most popular framework for building single page applications.
Angular apps can be connected to a Node js server and deployed but in most cases deployment with a simple web server would be suffice.

Angular can use either of the two routing strategies:

Hash Routing
Path Routing (default for Angular)

Path Routing utilizes the new HTML 5 push state API for routing. Therefore we need a web server capable of working with the HTML 5 push state API.Well most web servers don’t work this way out of the box. In these cases the hash routing strategy can be used, but tends to make the URL look messy. Nginx can be configured to deploy any Angular App with HTML 5 push state API.
Build your Angular app by using the command

ng build --prod

Create a new folder under /var/www , usually the domain name of your app, let us assume to be example.com

sudo mkdir /var/www/example.com

copy the contents /dist/appname to /var/www/example.com

Nginx utilizes server blocks to host multiple domains on an single server, you to need to make certain changes to the configuration file

sudo nano /etc/nginx/sites-enabled/default

Add the configuration

server{
    listen 80;
    listen [::] 80;
    server_name www.example.com example.com;
    root /var/www/example.com;
    index index.html;
    location / {
        try_files $uri$args $uri$args/ /index.html;
    }
}

The configurations are:

Nginx listens on port 80
server name is the domain name with www and without it
root points to location of the app
index points to initial page to be loaded
location refers path that should be pointed to on the url patterns, all routes will point to index.html, if this is not added, on refreshing the page Nginx throws a 404 error.
Note: Use wildcard route pattern in angular to catch 404 errors

const routes: Routes = [
{path:"**",component: PagenotfoundComponent}
];

Restart Nginx

sudo service nginx restart

Happy coding !!