I always love looking through the UI trends that are going to be widely used each year. Last year we had Glassmorphism which had an interesting design. It was inspired by glass, where UI blocks had the look of glass. This year the new design that is popping up is Claymorphism. Read through this article to learn more about this UI trend and also implement it using HTML and CSS.

Last year we saw a lot of 3D images being used in UI designs on websites and applications. 3D designs are soft, have neat shadow details and a lot of depth to them. They are not flat but are rounded, light, and have a playful and friendly feel to them. 
Claymorphism includes all these properties. A claymorphic element has inner and outer shadows which give it a light and fluffy look like a cloud. Also, it has softer rounded edges which make the block look inflated.

## Main elements of claymorphic design

- Big rounded edges.
- First inner shadow has a slightly dull color tone that covers the top and left inner sides of a block.
- Second inner shadow has a color a little darker than the first inner shadow. This is placed at the bottom and right inner sides of the block.
- Outer shadow for the block gives a nice effect that will lift up the design. Outer shadow is more spread out and is given the same `x` and `y` values. 
- To give it an inflated look, the edges are rounded and the sides of the block are puffed out like a dome. 

Below is a pictorial representation 

![Claymorphism explained](https://cdn.hashnode.com/res/hashnode/image/upload/v1648647381652/BoZzYtIp0.png)

## Code
Let us now look into the building the UI element using CSS

- `border-radius` : This property is used to round the edges of the element. Give a value that is slightly larger, the element needs to look light and soft.
- `background` : Choose the right color for the background of the element.
- `box-shadow` : This is the most important property of the UI element. Two types of shadows are needed which are inner and outer shadows. To give the element an inner shadow specify the keyword `inset` . 

Now that we understand the CSS properties needed to build the element, let us look at the code.

```
.block{
  background:#fff;
  border-radius: 25% ;
  box-shadow: 20px 20px 16px 5px rgba(0, 21, 16,0.2), 
inset 12px 8px 16px 5px rgba(60, 165, 92,0.2), 
inset -12px -8px 16px 5px rgba(60, 165, 92,0.4);
}
```

## Points to note
- Choose the right background. The best suited are bright colors that are soft and playful. As the claymorphic element has shadows that elevate its features, choosing the right background which compliments the shadows is vital. Solid color, gradients, and images are usually used as backgrounds.
- Right colors for the block which have a claymorphic look are also important. Light colors are most widely used. They are pleasant to the eye and also suit the playful, fluffy look that is needed for such an element.
- Give appropriate depth and spread for the inner and outer shadows. Also, note that the color for the shadows must match and compliment that of the element.
- Rounded edges are key to making the element look fluffy and light. So do not restrict yourself to giving smaller rounded edges. 
- Give no borders for the elements.

We have successfully built an element that follows the design concepts of claymosrphism. After building the sample, I wondered about the different ways it can be used in building websites. Here are a few ideas :
- UI cards
- Button elements
- 3D illustrations and icons 
- As an element to hold form elements

I have built two different types of UI elements using claymorphism. Take a look at this codepen demo to get an idea of using this new UI trend.

[Codepen link](https://codepen.io/omeal/pen/oNGVyXv?editors=1100)

Let me know your thoughts about this article!! I write blogs about Frontend and also tweet often. 
[Follow me on twitter](https://twitter.com/s_omeal)

Cheers 🎊

How to build claymorphic UI using HTML and CSS?! Learn more about this amazing 2022 UI trend.

Claymorphism - 2022 UI trend


Visual Studio Code is a powerful tool that developers like us use on a daily basis for hours. It also is a favorite for a few of us as well. As we spend most of the time typing code, there are a few keyboard shortcuts that help in writing code faster. 
In this article, I will be sharing 10 keyboard shortcuts that I use in Visual Studio Code to code faster and get by without using the mouse.

**1. Cut, Copy and Paste**

There are a ton of times when we use Cut, Copy and Paste while coding. 

- Cut : Command (or Cmd) ⌘ + X
- Copy : Command (or Cmd) ⌘ + C
- Paste : Command (or Cmd) ⌘ + V

![cut and paste.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1642245021857/S3O1qA7KK.gif)

**2. Cursor to Start/End of line**

Use this command when you want to move the cursor to the start/end of the line

- Cursor to start of the line: Command (or Cmd) ⌘ + ←
- Cursor to end of the line: Command (or Cmd) ⌘ + →


![cursor to start or end.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1642246383285/EqLJ5ScET.gif)

**3. Move line**

This command is used to move the whole line up or down.

- Move line up : Option (or Alt) ⌥ + ↑ 
- Move line down : Option (or Alt) ⌥ + ↓

![move line.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1642245672652/wyq91U87z.gif)

**4. Add line comment**

I have used this shortcut a lot of times. With the press of just two keys, I can cut down so much work 😁

- Add line comment : Command (or Cmd) ⌘ + /

![line comment.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1642247312945/hHYiQsIaM.gif)

**5. Select a line**

This command is used to select the complete line. After the line is selected, we can use other shortcuts like Copy / Cut.

- Select a line: Command (or Cmd) ⌘ + L

![select a line.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1642247948588/gC6IA9YG4.gif)

**6. Copy line up/down **

Use this shortcut to copy the whole like and paste it up/down

- Copy line up: Shift ⇧ + Option (or Alt) ⌥ + ↑ 
- Copy line down : Shift ⇧ + Option (or Alt) ⌥ + ↓

![copy line.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1642253511845/GwHMHS_Cf.gif)

**7. Move word by word**

At times to reach a point in between a word, we find ourselves using to move to navigate to that point and placing our cursor. We can avoid this by using a shortcut that moves the cursor word by word.

- Move the cursor to right:  Option (or Alt) ⌥ + →
- Move the cursor to left:  Option (or Alt) ⌥ + ←

![move cursor by word.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1642247672467/w3KbcTJau.gif)

**8. Select a word**

This command is used to select a word. Further, this command can be combined with Cut/Delete or any other commands.

- Select a word: Command (or Cmd) ⌘ + D

![select a word.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1642248224954/-pLPkfDXi.gif)

**9. Multiline cursor**

This is my favorite shortcut!! I was so glad when I figured out this shortcut existed, it reduced my time to edit code considerably. Using this shortcut you can place the cursor simultaneously at different places in the editor.
Here is how you use it - Press the Option key and with the mouse, click at various places where you want the cursor to be present.

- Multiline cursor:  Option (or Alt) ⌥  + click

![multiline cursor.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1642248796537/xlAqr1MRy.gif)

**10. Insert cursor above / below**

This is similar to the multiline cursor shortcut. Here we do not use the mouse to click, but we use the arrow keys. Although, this is not as flexible as the click because the cursor moves up/down in a line.

- Insert cursor above : Option (or Alt) ⌥  + Command (or Cmd) ⌘ + ↑ 
- Insert cursor below : Option (or Alt) ⌥  + Command (or Cmd) ⌘ + ↓

![insert cursor.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1642252944769/2K8NEVedy.gif)

Those are the shortcuts I usually use while I type away on my Visual Studio code editor. When starting to use shortcuts, you might feel confused or it might take a little time to get a hang of it. But once you practice and are used to using shortcuts, you will observe that editing code now takes much less time!! 😇

Let me know the shortcuts you use in the comments below!! 

Also, find me on  **[Twitter](https://twitter.com/s_omeal)**  !!

Find out the 10 keyboard shortcuts that will help you edit code faster in Visual Studio Code. 

10 Visual Studio Code editing shortcuts


I have been working on Front-end development for a while now. It's exciting to build beautiful websites that showcase content that has great business value. The main motive behind building a website/application is to showcase your content online to customers and viewers. You would like to make the content of your website available and accessible on the internet so as to get more business.

One way people look for content they need is by using Search. The results that pop up are the highest ranked and most relevant to the search query. The results we see may differ from one search engine to another. There are many search engines that crawl the web finding new domains and indexing the contents of the web page. 

So how do we make sure our webpage is indexed properly and is searchable? The concept which is most important here is Search Engine Optimization (SEO). In this blog post, let us explore ways we can improve SEO by using the right HTML elements.


![strip SEO.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622289213764/mnILEtp97.png)

## 1. Title

The ```<title>``` tag is an HTML element that specifies the title of the webpage. The title tells the search engine and the users about the content of the webpage. The ```<title>``` tag must be placed inside the ```<head>``` at all times.

The content of the title appears in the first line when searched on an engine. The title appears in the search page listings, on the title bar of the browser, and also on social media networks. When the link is shared on social media, it appears as a card that has the title shown. 

- Keep the title within 50 to 60 characters. 
- Use the product/company's name in the title. 
- Keep it precise and add in details of discounts/offerings or important services you provide. 
- Avoid using all capital letters. 
- Put important keywords first which will help in SEO. Make sure to not overuse them in the title.
- Give unique titles for every page on your website.

## 2. Meta tag

Meta tags are elements that provide information about the HTML page. The data inside meta tags are called metadata and are not visible on the UI of the webpage, but the data can be read by search engines and web crawlers. Search engines use metadata to get more information about the page, for ranking purposes, and also, the data can be displayed in search results.

### 2.1 Meta description tag

Google displays meta description tags in the search results under the title of the webpage. Hence this has a massive effect on SEO. 

```
<head>
    <title>Omeal's Cake Shop - Order online | Designer cakes </title>
    <meta name="description" content="Order customer made designer 
    cakes with popular flavours online. Free delivery available in New York City. " />
</head>

```
Best practices :
- Keep the length within 130-160 characters.
- Add Call to Action words like GET|ORDER|FREE|READ|How To|Easy|Now, etc.
- Include important keywords related to your webpage content. Users usually search keywords hence using keywords will help a great deal.
- Invest time and come up with a unique and best-fitted description as this will be displayed on the search engine.
- Do not stuff the description with a lot of keywords and CTA. Keep it simple and to the point.

![Google search result.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622212751367/fRiN0FmFl.png)

### 2.2 Robots
Robots meta tag is used to give instructions to the web crawlers on how to crawl and index the contents of the webpage. A number of parameters can be assigned to the robots tag based on which the web crawler will know how to index the web page. 

```
<meta name="robots" content="nofollow, noindex" />

```
Some parameters are :
- `nofollow`: The crawler will not follow any links on the page.
- `follow`:The crawler should follow all the links on a page and pass equity to the linked pages.
- `noindex`: Tells the search engine not to index the page.
- `index`: Tells a search engine to index a page. This is a default meta tag. If no meta tag related to robots is specified, this is used by default.

Let's talk about robots.txt file. Search engines follow links to get from one site to another, this is called spidering. When a crawler reaches a webpage, it checks for a robots.txt file. This file contains instructions about how to crawl the website. If the robots.txt file does not contain any directives that disallow a user-agent’s activity, it will proceed to crawl other information on the site. 

![Robots text.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622268598143/F5SJ40Qnn.png)

Best practices:
- Robots.txt file must be placed at the top-level directory. The file must be named 'robots.txt' as it is case-sensitive.
- Every subdomain uses a separate robots.txt file.
- All meta tags (robots or otherwise) are discovered when a URL is crawled. This means that if a robots.txt file disallows the URL from crawling, any meta tag on a page will not be seen and will be ignored.

### 2.3 Social media tags

Websites of products and services are shared on social media all the time. Thus social media contributes to search a great deal. People click and view the links they stumble upon on Social media sites. In HTML, Open Graph protocol that is a part of  Facebook is used to optimize how websites that are shared on social media platforms are displayed. Here is the  [official documentation ](https://developers.facebook.com/docs/sharing/webmasters/)

Open graph tags are placed inside the meta tags. You can specify title, description, URL, image, and others using this tag. Below is an example.

```
<head>
    <meta property="og:title" content="Order the best designer cakes online" />
    <meta property="og:description" content="Order customer made designer cakes 
    with popular flavours online. Free delivery available in New York City." />
    <meta property="og:url" content:"https://omealcakes.com/order" />
    <meta property="og:image" content="https://omealcakes.com/uploads/109091.jpg" />
    <meta property="og:type" content="website" />
</head>
<body>
```

Below is an example from [Neil Patel's](https://neilpatel.com/blog/open-graph-meta-tags/) OG article.


![Open graph.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622286102660/tSCEtDmmG.png)


## 3. Structured data / Schema Markup
Schema Markup is used to describe the content of the webpage to the search engine. Consider an example of 'Orange'. This can mean the color, fruit, and also a company's name. Such content can be misunderstanding sometimes to the search engine. Hence structured data which is written in the format of  [JSON-LD](https://www.practicalecommerce.com/To-Grow-Search-Traffic-Add-JSON-LD) is used inside the ```<head>``` tag under a ```<script>``` tag.

Below is an example :

```
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
  "url": "https://omealcakes.com",
  "name": "Omeal's Cake shop.",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-XXX-XXX-XXXX",
    "contactType": "Customer service"
  }
}
</script>

```
## 4. Heading Tags
It is easy for search engines to read and index a well-structured webpage. By using heading tags it is easier to tell the search engine the main contents of our webpage. You can match the title of your page with the heading tags as well. Adjust the structure of the webpage elements if needed, but include headings at relevant and at the right places.
Do not overuse the heading tags in your content. Be mindful of using keywords for the headings.

```
<h1> Order cakes online </h1>
```

## 5. Alt tags for images 
The alt attribute for the image tag is used to give the image context. In case the image itself is not rendered, the alt tag will appear on the webpage and thus the user can understand what the image means. Also, in the case of users who are visually impaired the alt attribute is very useful.
Apart from these uses, alt attribute for images also helps in SEO. Web crawlers use the tag to understand image content thus helping in SEO. Also, it is vital if we are looking to rank the Image itself. 

```
<img src="https://omealcakes.com/uploads/109091.jpg" alt="One tier Chocolate Cake"/>
```

## 6. Canonical Link
The rel=canonical element, often called the “canonical link,” is an HTML element that helps webmasters prevent duplicate content issues. It is a way of telling search engines that a specific URL represents the master copy of a page. 

``` 
<link rel="canonical" href="https://omealcakes.com" />
```

Consider this example :
- `http://omealcakes.com`
- `https://omealcakes.com`
- `http://www.omealcakes.com`
- `http://omealcakes.com/index.php`

All these links look the same to a person but, to a web crawler, all these links are unique. Many search engines crawl thousands of URLs with similar content every day. Due to duplicate content, the search engine can pick an unimportant URL as the main URL. Thus it is important to specify the canonical link in web pages. 

Best practices :
- Pick the main URL and include it as the canonical URL for your web pages.
- It is a good idea to put a canonical tag on the homepage of the website.
- Consider two pages with the same content, but one among them is the main page that you need search engines to recognize and showcase on the search page. Keep in mind that canonicalization will prevent the non-canonical sites from ranking, so make sure this use matches your business case.

## That's a wrap!!
There might be other factors that prove helpful for SEO in HTML which I might have missed in this article. Do let me know your thoughts in the comments 😊 

I had a great time writing it. Well, I hope that the content was helpful. 😇 

Reach me out on  [Twitter.](https://twitter.com/s_omeal) 

How to make sure web crawlers index your website the right way? Discover how you can improve SEO by including the right HTML tags.

SEO using HTML


As a big-time technology enthusiast and a woman, writing this article has been an awesome source of encouragement to pursue a career in tech and also inspirational to get as many women to follow on the same path.

From barely being discussed to becoming one of the most exposed and talked about topics in the current tech industry is the title of this blog post. Women in technology have gained the spotlight from a lot of people and many tech communities have come up all around the world focusing on bringing more women in the technology industry. But why?!

![christina-wocintechchat-com-faEfWCdOKIg-unsplash.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1614785711742/bA6lDtlQ3.jpeg)

To understand why thousands of women and men are working towards bringing more women in tech, first, let's talk numbers!

- Statistics show that 34% of India’s workforce is female. When compared to that of the US which stands at 23%, this percentage when compared seems rosier. Also, 57% of high-performing women study STEM fields in college. Here is the catch: 50% of these high-performing women drop their jobs at junior to mid-level of their career. This sharp drop-off is unique across Asia. After quitting they settle for jobs in marketing, consulting, and product management. Among the remaining percentage of women in core tech, only 1% of women reach high-level positions in their companies. Just 1%!! ONE!!

- Diversity at work place has contributed to the success of the companies. Here is an interesting research( https://www.mckinsey.com/business-functions/organization/our-insights/why-diversity-matters) that speaks about how having a balanced gender diversity at companies effects gaining financial returns above their national industry medians.

**Here is my take on the problems women face in tech :**

- Exposure/ Self doubt : How many women reading this have spent hours during childhood at cyber cafe’s playing games or working on a computer? It's likely you aren’t nodding your head now. Growing up we have not interacted with tech as much as men have. How many of you chose a career in tech willingly? A few of you say yes, some had no other choice, others were forced to do this by parents. Willingly working on something that interests and challenges you keeps you going and improves you a lot. Let's do a small exercise. What is the first thing that comes to your mind when I ask you to imagine an engineer? Here are the top answers: A man on a desk with a laptop, a building builder…etc. But how many of you saw yourself? Not many!!

- Work-life balance: In this expanding and fast-growing environment of tech, finding the perfect work-life balance is difficult for women. Factors like marriage, pregnancy, family responsibilities make it difficult for women to find the best balance to excel and sustain in their career.

- Unconscious bias: Most of the women working in tech have this as a major problem. To explain, consider this example: Mathew is a manager and is assigned to send a person off-site for 2 months. Alvin and Jenifer work under Mathew. Alvin is single and has a good reputation at work. Jenifer is married with a child and is exceptional at work. Now Mathew chooses Alvin unconsciously assuming that Jenifer would have dependencies as she is married and has a child. If he had consulted/asked Jenifer he would have had a chance to do a better decision. This situation happens most of the time. Assuming unconsciously that a female employee cannot work overtime/handle pressure etc, their capability is overseen.


![cover strip image wiT.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614844923215/AKWJOk-DX.png)

**How can we get more women in technology?**

- Awareness and self motivation. You know you want a career in technology, to each high-level and build amazing solutions. Motivate yourselves and the women around you. Educate them about the importance of women in tech. Work hard and make compromises.

- One thing that has helped me is tech communities. Find a tech community around you and become a member. Events, workshops, meetups are a great boost. You learn interesting new technologies, make connections with fellow technology enthusiasts. I am a co-organizer of the local tech community:  [Google developers group Hubli](https://gdg.community.dev/gdg-hubli/) and Women Techmakers Hubli, and I can vouch that participating in communities will change you as a person.

- Women are interested in fast-paced work life, they love to solve interesting problems and look for opportunities to grow. They feel their company does not invest much to provide them with these needs. But many companies have identified this problem and are amending rules and providing additional facilities for women to help improve sustainability and career growth. Workshops, training, certifications, medical policies, counseling are a few examples. This makes women feel important and safe. At Sony, where I work, we have a community for women called WiT[Women in Tech] that focuses on arranging workshops, meetups, fun activities to encourage women to come forward and express themselves.

This article is not focused only on women. Here is a personal story I would like to share. I am a developer. Bringing beautiful UI/UX alive is what I do best. Like most people, I joined engineering as I didn't know what else I wanted to do. Later I met two amazing people who changed everything. One among them was a man. He taught me everything I know in frontend development. Made me discover new options, got me interested in developing products and that is what I am passionate about now!! The other person was a woman, a fellow techie. She made me express myself better, got me interested in writing blog posts and we learn and explore so many things together!!

Helping others and growing together is the best way of learning. Men can be more caring, helpful to fellow female colleagues and other tech enthusiasts in their circle. Motivate and encourage them to better themselves. Teach and impart knowledge considering us as equals. Women can do the same. Tag along with a friend when going for conferences. Discuss advancements in technology often. Keep yourself in the known.

> Here is a start!! My name is Supriya Shashivasan and I would love to get together and discuss technology with you any day!! Here is my twitter handle :  *[Follow me on Twitter.](https://twitter.com/s_omeal) *

International Women's Day is nearing !! There are a number of communities hosting amazing tech events to empower, inspire and encourage women to pursue a career in tech! Be a part of these events and celebrate Women in tech! 
Check out this amazing  [IWD 2021 event by Women Techmakers India](https://iwdindia.in/)  celebrating **#CourageToCreate**

There!! I had been wanting to write on this topic for so long. Finally managed to do so!! I hope this was an interesting read!

Why is there a need to empower women in technology? What are the problems women face in tech? Learn more!!

Women in technology


I have always loved working on UI. It is so much fun building creative and attractive UI for websites to make them pleasant and appealing to the users. This is a how-to blog post on building a curved header for a website. You might have come across this design on a few websites out there. It's very simple, neat and attractive.

![Cover image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616324600338/KBMJNkN_w.png)

In this blog post let us explore various ways we can build a Curved UI header.

## Approach 1 : Using SVG

SVG is used to define vector-based graphics for the Web in an XML format. It is a W3C recommendation and is an open standard. We can create circles, ellipse, rectangles, and also complicated shapes like a bunny, a star, etc with SVG using the right commands and parameters.

For the curved header, we will be using SVG Path. The ``` <path>``` element in the SVG library can be used to create lines, curves, arcs, and also more complex shapes combining lines or curved lines. There various line commands that can be used to create a path. 

#### Line commands 
The first one we will be using is the "Move To" or ```M```. It takes two parameters coordinate (x) and coordinate (y). So, if our motive is to move to a point (30,10) the command used is ```M 30 10``` . 

The next command is ```L``` or the "Line To" command, which takes in x and y coordinates as parameters. Its function is to draw a line from the current position to the next position. We also have ```H``` and ```V``` which are used to draw Horizontal and Vertical lines respectively. 

The last line command is ```Z``` or "Close Path". This command draws a  straight line to close the path. A line from the current position to the first position which closes the whole path is drawn using. This command does not take any parameters.

#### Curve commands 
Now let us see options for creating a curve. To draw the curved header, in this article we will be using Bézier curves. There are many other ways to do this as well by using ellipse, circle etc. 

We will be using a type of Bézier curve, the quadratic curve called with ```Q```. We can also use a Cubic curve, but I find it easier to use a quadratic curve as it only uses one control point whereas a Cubic curve uses two control points. 

Refer to the image below for a pictorial idea of how paths can be created using all the commands discussed above.

![SVG path basics.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616087065855/35HmBuTf0.png)

For the curved header, we will use Move To, Line To, Quadratic curve and Close To commands. Below is the SVG code for creating the header.

```
<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="600" viewBox="0 0 1500 600" preserveAspectRatio="none">
<defs>
    <linearGradient id="myGradient" gradientTransform="rotate(45)">
      <stop offset="5%"  stop-color="#fc6767" />
      <stop offset="95%" stop-color="#ec008c" />
    </linearGradient>
  </defs>
  <path d="M 0,0
         L 0,300
         Q 750,600 1500,300
         L 1500, 0
         Z" fill="url('#myGradient')" />
</svg>

```

We start with ```M 0 0``` as the starting point. A vertical line is drawn from point (0,0) to (0,300) using the "Line To" command. We now draw the curve using Bézier quadratic curve ```Q```. The curve starts from the current position (0,300) and ends at (1500,300) having the control point at (750,600). We then draw a straight vertical path from the current position to the top of the window. Then close the path with the command ```Z```.

A live demo using the above SVG commands is here in this code pen.

%[https://codepen.io/omeal/pen/XWjvWQg?editors=1100]

## Approach 2 : Using CSS property ```border-radius```

```border-radius``` is a CSS property that is used to round corners of a block. We can give a single radius to circle the edges. Also, we have the option to give two radii, by which we can have elliptical corners.

Below are a few examples of how we can use ```border-radius``` by providing different values as parameters.

```
/* Radius is set for all 4 sides */
border-radius : 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 50%;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 0 2px 3px 4px;

/* horizontal radius/ vertical radius*/
border-radius: 10px / 20px;

```
We will be using ```border-radius``` here to create an elliptical curve. We use the slash ("/") between two values to create an elliptical curve. The first radius acts as the horizontal radius whereas the second set of the radius that follows the "/" acts as the vertical radius.


![border-radius.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1616315914887/OqRiQ96Ly.png)

A block is placed at the start of the window with a bright gradient as the background. For the bottom right and the bottom left, we will be giving border-radius values to make it look like an elliptical curve. Later we will use the ```transform``` property to scale the shape.

```
.holder:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background: #ec008c;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #fc6767, #ec008c);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #fc6767, #ec008c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius:0 0 50% 50%/0 0 100% 100%;
  transform:scaleX(1.5);
}

```

 Below is the codepen embed of a curved UI header using ```border-radius```

%[https://codepen.io/omeal/pen/wvzLeaR]

## Approach 3: Using an image as the background

Another method is to use an image of a curved header for the background. This is a bit difficult to manage as it is not responsive, also finding an image that fits exactly to our needs is a challenge. We can give CSS background properties to manage it better. Below is a codepen embed of the same.

%[https://codepen.io/omeal/pen/PobYRdB]

## That's a wrap!
 In this blog post, we saw 3 simple ways to build a Curved UI header. There are other different ideas and ways we can build this, but these 3 are the ones I have tried out. Hope this was a good read!!
Follow me on  [Twitter](https://twitter.com/s_omeal)  for more such articles. 

A how to blog post on different was we can build a fancy attractive curved UI header.

How to build - Curved UI Header?


Hey there! Let me start off by wishing you a very happy new year!! 🎊

With the onset of new year, the urge to do new and better things to improve oneself sets in as well. Plans to write articles more often tops my list for this new year. The aim is to write good articles and create quality content. Also, another important thought is to be consistent, planned, and well-executed. To help me be prepared and achieve the goal I have set, I built an Article Planner using Notion. When I gave it a trial run, it helped tremendously. So here I am sharing my experience using the template.

![Cover image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609988749839/4BeRRLb8H.png)

I have been using Notion for a while now and it has been very easy to manage tasks and be planned. The various components that can be imported and used to create custom workspace is amazing. I have been working on the article planner template for over a week and have tailored it to be minimalistic, accessible, and easy to use. Below is a screenshot of the Article planner.

![Notion article planner.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610027749758/-4em4tEbt.png)

As you can see, it is very to the point, clean and simple. Let's dive into the details bit a more and check out each page and the reason behind creating them.

## Upcoming Article List

This space is designated for the thoughts and ideas you have for an upcoming article. You are at a stage where you are collecting data, doing research, deciding ways to write the article, and gathering your thoughts. There are two sections on this page. The first is where you have decided on an idea and are in the process of jotting down important links, writing small drafts, keeping notes, etc. The other section of the page is for random thoughts wherein you can keep a note of interesting things that can potentially turn into an article. 

- **Pages**: Separate pages for article ideas that must be worked on in the near future. These pages are given tags so as to easily identify and access them. You can keep a note of the tentative publish date of the article which will help you to stick to a proper schedule and be prepared. Inside the page, I have made some bullet points about the article structure and kept a list of references that are useful.

![Notion article planner upcoming articles page screenshot.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610030547594/PUhhRxyCz.png)
That was a glimpse of the upcoming articles page.

## Ongoing Articles

In the present when you are working on an article that has to published in a few days, giving them more focus is vital. Hence, a table that lists all the ongoing articles is best because you can see them as soon as you open the planner. The table has columns that can be used to put in important details that will be needed at first sight like publish date, status, notes, etc. Each ongoing article can be created as a page and placed in the rows of the table.

Inside a page that is designated for an article, I have used two components that have helped me the most to be planned and organized. Timelines and Kanban boards to save the day!! You can easily segregate tasks into sections : *Yet to start*, *Todo, In-Progress, and Done*. This way you can make sure you do not miss anything. Coming to timelines, I have assigned specific days for specific tasks. This helped me a great deal to be organized and stick to plan. Have a look at the page of an ongoing article below.

You can also create tasks on Kanban board as pages. I have done this for social media tasks to keep a note of the tweet content, mentions, tags, and other related details. You can also add in images as assets.

![Notion article planner ongoing articles page screenshot.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610030532517/f4lBrHysJ.png)

## Published Articles

This is the section where I store details of the articles after it has been published. Details like publishing platform, the link of the article, stats of the performance, etc. 
One detail that has helped me here are the notes that I have written for myself. I observed how the article was accepted. Looked at the comments I received, noted details on things I had missed out, few things I had done wrong, etc. This helped a great deal in improving articles that were upcoming. Also, I noted a few positive comments that made me feel happy to boost motivation.

## Article Planner Notion Template for you!! 

The article planner has helped me improve and also build skills in article writing. I am more planned and disciplined now. I have a routine and all my articles are structured and well organized. So I am ready to take this year by storm!! 😎

I have made the template public. You can duplicate and use it for your articles. Please feel free to try it out. You can also modify a few things after you duplicate it so that it suits your needs well.

 [Click here to view the Article Planner](https://www.notion.so/supriya/Article-Planner-5ad69319f6d444d4b8faef0b53bc7abb) 

## That's a wrap !!

Hope you had a good time going through the article. Do let me know your thoughts on the Notion planner. Any suggestion on making it better is most welcome!! 

You can connect with me on  [Twitter](https://twitter.com/s_omeal)  | [LinkedIn](https://www.linkedin.com/in/supriya-shashivasan-886908148) 

That's all for this time. I will catch you all in the next article. Have a great new year y'all 🍻

How and why I built my personal article planner template using Notion. You can use it too :) 

Article Planner using Notion


![app scripts.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609050986580/7Ic_l4CMR.png)

Have you heard of [Google Apps Script](https://developers.google.com/apps-script/)? I was introduced to it for the first time at a [Google Developer Group](https://gdg.community.dev/gdg-hubli/) meetup.

Apps Script helps you use Google’s G Suite products, by running a script similar to JavaScript. With just a few lines of code, users can get things done at a click of a button, which would otherwise take much more time.

Google Apps Scripts is very easy to pick up, and helps you to build complex systems by making use of G Suite. Users can publish web apps, and build custom functions for Google Slides, Sheets, and Forms.

In this article, I will walk you through building a small app that uses Google Sheets, Google Slides, and Google Translate.

I built this app for travelers. When we visit foreign countries, communication becomes a problem due to language barriers. People often take flashcards with them to help communicate with locals.

We are going to build exactly this. Questions and phrases are put up in Google Sheets. Then, a script translates the lines and writes them on to Google Slides. There!! Translated flashcards are ready to use.

Now, _READY.SET.CODE_


![app scripts gif.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1609051136962/tY6pC5VXa.gif)

## Storing data

Data here are sentences/words you want to translate. They are stored in the rows of the Google sheet.

So the structure of the spreadsheet will be:

*   Each row will be filled with sentences that you want to be translated.
*   The second column will hold the value to tell us the language the sentences must be translated to. The value here is the [Google translate language code](https://ctrlq.org/code/19899-google-translate-languages). If I want the sentences translated into Spanish, the code will be “es”.

![app scripts google sheets.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609051199482/Zf17w-mBrX.png)

Filled Google Sheet

## Accessing script editor

The script to complete the desired task is written in the Script Editor. To access this, go to **Tools > Script Editor.** Another way to access the Script Editor is to visit the [App Scripts dashboard](https://script.google.com/home) and create a new Apps script. All the scripts users write can be managed by this dashboard.

The script editor contains an empty file called **Code.gs**. We will write the code here in just one script.

## Main function

We write a main function `sheetToSlide()` in which the active sheet and slide are initialized. Another function `translate()` is called in the main function. It is here that the actual logic takes place.


```
function sheetToSlide() {
  var sheet =   SpreadsheetApp.getActiveSheet();
  var slide = SlidesApp.create('TranslateApp');
  var data = sheet.getDataRange().getValues();
  var lan= data[0][1];
  Logger.log(lan);
  for (var i=0; i<data.length; i++){
     translate(i,data[i][0],lan,slide);
  }
}
```


In the variable `data`, the contents of the spreadsheet are stored as a multi-dimensional array. These values can be accessed by `data[Row][Column]`.

They are passed on to the `translate` function for further processing, along with the `slide` variable and `language` in which translation is required.

`Logger` is a class used to write text to the logging console. This helps a lot in the process of developing a code. The output of the code can be printed on to the debugging logs. To have a look at the logs go to **View > Logs** in the script editor window.

## Translate function

In this function, new slides are added to the presentation that contain both the original and the translated sentences. Each sentence is inserted in a new slide in a text box.


```
function translate(num,data,language,slide){
  var translate_lang = LanguageApp.translate(data, 'en', language);
  var card= slide.insertSlide(num);
  var shapeEnglish = card.insertShape(SlidesApp.ShapeType.TEXT_BOX, 150,100,300,60);
  var textEnglish = shapeEnglish.getText();

  textEnglish.setText(data);
  textEnglish.getTextStyle().setBold(true);
  card.insertLine(SlidesApp.LineCategory.STRAIGHT, 200,175,300,175)

  var shapeTranslated = card.insertShape(SlidesApp.ShapeType.TEXT_BOX, 150,200,300,60);
  var textTranslated = shapeTranslated.getText();
  textTranslated.setText(translate_lang);
  textTranslated.getTextStyle().setBold(true);
}
```


The sentence obtained is first translated using Google Translate which is a part of G Suite.

A new slide is inserted to hold the sentences. In the slide a text box is placed at a particular position. You can alter it by going through the docs [here](https://developers.google.com/apps-script/reference/slides/).

The text that must be displayed in the text box is done using the `getText()` and `setText()` methods. These are all properties of the Google Slides that you can manipulate and customize according to your wishes.

The design here is made very simple. A horizontal line is placed in the middle using `insertLine()` method to split the original and translated text. The properties and variables of all these methods used are given in detail in the docs provided by Google.


![app scripts google ppt.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609051327588/pTVjvXJLc.png)

To run the script, click on the run button beside the time icon. The script will prompt up a window that will ask for permission to access the Sheets and Slides, simply allow it. Next, go to your drive and a new presentation will be ready which will have translated sentences in the cards.

That’s how helpful and easy Apps Script is. You can also fill up a Firebase Realtime database by just using Google Sheets. By just writing simple scripts in few lines, you can automate a lot of things and also build web apps that can be hosted.

App Scripts is really powerful and aims highly at letting users make their services automated. Next time you want to send an email to a bunch of people, try using App Scripts. Once you get the hang of it, you can build wondrous things, like Sheets to a website, your own blog, Sheets to Slides, and many more.

That's all folks!! I hope you enjoyed this article.

You can feel free to reach out to me! [Twitter](https://twitter.com/@s_omeal)

Apps Script is a powerful scripting platfrom from Google. Learn how you can use this tool to automate tasks in GSuite. 

Hack GSuite using Apps Scripts


I recently stumbled upon a design on Dribbble and learned about this new UI trend that has caught a lot of attention. Read through to find out about Glassmorphism and how you can implement it using HTML and CSS.

The name itself is a giveaway - **Glassmorphism**. This UI element is designed to resemble the feature of smooth glass. The basic idea is to blur the background of the element to give a transparent glassy look. 

Before we dive into some code, let us look at some examples. 

- MacOS Big Sur

![MacOS Big Sur window.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1607772852755/xu_iiWNk-.png)

- Windows Vista

![Windows Vista.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1607772501076/crqULnJVN.png)

- Dribbble design by  [Praveen Raj](https://dribbble.com/pravin_rj) 

![Dribbble design by Praveen Raj.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1607775824075/mfY0Qkt4T.png)

### Design features of Glassmorphism
Here are a few features of the design that contributes to building a crisp neat glass look.
- Transparency: Setting a light transparent background for the element is important.

- Blur background: Making the background blur gives a layered effect. You can give a frosted glass feel by increasing the blur effect, giving it more depth.

- Choosing the right background: A colorful vibrant background for the parent is ideal for glassmorphism. A bright gradient of colors that work well with each other is a good choice. You can also choose a background that has good edges and features like circles/blob details. Using such images work well because, when you place the glass element with a slight blur effect on top of it, the edges in the background add a good look and depth.  
- Border: Add a small border of 1px or 2px to the element to give it a clean glass edge detail. You can also choose not to add a border, although I prefer the border as it gives a good look.

Great!! We now know the design aspects we need to make a good UI with glassmorphism. We will now use HTML and CSS to build a basic implementation of this new UI trend. 

### Code 

Let us break down the HTML elements first. We only have two elements. A `<body>` which is a parent and another `<div>` which is the glass. Simple right?! 

CSS is next!! Important things to remember are transparency, blur effect, and good background. We are set.

Check out the two CSS properties we will be using 

- `background`: Using this property, we will be adding transparency to the element. Color white will be given using rgba format. We will be increasing the "alpha" value to give a transparent background.

- `backdrop-filter`: This property is used to add a blur effect. It can do changes to contrast, brightness, and perform color shifting. These changes are applied to everything behind the element. For this effect to work, one important detail is the transparent background of the element. The value is given in `px` values. The higher the value, the greater is the blur effect. You can make the glass feel like frosted glass by increasing the value of blur. Let's look at browser compatibility: It works on Chrome, Edge, Firefox, Opera, and Safari. It is not compatible with Internet Explorer and Firefox for Android.  Link to [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) 

- `background-clip`: This CSS property is related to the background of the element. With this, you can decide if the background of the element extends underneath its border-box, padding-box, or content-box. Since we will be giving a slightly different border color to get the 3D effect of glass, the proper value to be used is `padding-box`. Coming to browser compatibility, it works on all the different browsers available. Link to [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip) 

Here is the CSS for the glass element :
```
      color: #ecf0f1;
      border-radius: 8px;
      padding: 20px;
      background: rgba( 255, 255, 255, 0.2 );
      border: solid 1px rgba(255,255,255,0.3);
      backgroud-clip: padding-box;
      backdrop-filter: blur(10px );
```
Have a look at this codepen for a simple implementation of Glassmorphism:

%[https://codepen.io/omeal/pen/VwKKgjG]

After I built a basic implementation of glassmorphism, I kept wondering how to actually make use of it in a webpage. While building a webpage that uses glassmorphism I had a few learnings that I would like to share with you.

- Glassmorphism is basically a decoration for an element. So the best ways to use it are for cards, notification bars, or any block that holds the integral elements of the UI. Do not use it for CTA elements, as they don't pop! 

- When you are thinking of layering the glass elements, make sure to change transparency and blur values to give a multi-layered effect.

- Choose a background that is colorful. A simple or dull background will not bring out the effect of glass on the UI. Look at the example of Big Sur and Windows Vista, they have a vibrant background that brings out the glass details of the element on top of it.

Alright! With that done, do check out this webpage that I built that uses this new UI trend [here](https://supriya-shashivasan.github.io).

The code is hosted on my [Github](https://github.com/Supriya-shashivasan/Supriya-shashivasan.github.io). Below is a screenshot of the webpage. 

![Glassmorphism UI use case.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1607864112290/SGAO1yWma.png)

Illustration from Freepik. Credit to [macrovector](https://www.freepik.com/macrovector).

### That's a wrap!!

That was my take on Glassmorphism. We discussed what makes this style distinct and also looked at ways to re-create the effect using HTML and CSS. We cannot yet tell if this is going to be the next big thing in UI, as it has a few limitations and works well only in certain cases. But like all new UI trends, it has taken the interest of designers. You can take a look at a few cool designs on Dribble, Behance to get inspiration and build one of your own! 

Hope you enjoyed this article.
For more articles like this, follow me on [Twitter](https://twitter.com/s_omeal). Until next time ^_^

Learn about Glassmosphism, a UI design that is stirring up a lot of interest. In this blog we will build this with HTML and CSS

Glassmorphism upcoming UI trend


You have the best landing page if the below questions of a customer who has stumbled upon your landing page are answered within a minute!! You have sold your product/service and your beautiful landing page is a HIT!!
## *“Oh I see you!! Do you have what I want? Why should I choose you? “*

![coverpage](https://cdn-images-1.medium.com/max/2048/1*8aYoisdOoH4P65yTcWuhEg.png)

In this article, I will share my learning on how to create a bang on landing page. I learnt a great deal when I had to study and build a landing page for Certhive!! An e-certificate design and distribution platform for all events, workshops and fests you conduct.

### What is a landing page and why do you need it?!

Landing page is a web page designed and fine-tuned to bring in leads for the product/service and also to serve as a marketing platform. A landing page is designed to throw all light to the Call To Action(CTA) which grabs all attention of the customer and compels them to click hence converting them to leads.

Google search is what every person does when he/she wants to search for anything. Keywords are searched and the page that has the highest ranking comes up. This page is the landing page which is obtained by organic search traffic. So it is very important to improve your SEO for the page by researching on Google trends, Google Adwords and include the best and relevant keywords throughout your website to make your landing page pop up on top in Google Search.

### Why use a landing page?

Landing page markets your offering to your customers. It is focused on conveying what you are selling, how it benefits the customer and why they must choose you over others.

If your motive is just to bring subscribers the design and content of your page changes accordingly and now the focus of your page will be to get subscribers/get emails.

If you have to promote a sale or limited period offers, then again your landing page has a different motive which is to make sales. The content must again be tailored to serve this motive and CTA must be placed rightly.

### Must have on your landing page

1. **A punch headline**

This is very important as your customer looks at this first and it has to be bold, strong and must be in line with your product/service. It should grab the reader’s attention. A headline never goes beyond 10–15 words!!

The heading does not have to always be upfront and straight. There can be a little hint of pun in it or a straight out fact. If you are focusing on a sale you can include that in the heading as well. Also, you could give stats like: “2* thousand products sold. Buy yours now!”*

Let's take a look at some of the examples!!

1. [Canva](https://www.canva.com/)

![Canva landing page](https://cdn-images-1.medium.com/max/2676/1*0M3Z4pvhTOIkpT5pxftZIQ.png)

2. [Moz](https://moz.com/)

![Moz landing page](https://cdn-images-1.medium.com/max/2614/1*MSFdwZEAsKXwMZ2iWY2bxQ.png)

3. [Mailchimp](https://mailchimp.com/)

![Mailchimp landing page](https://cdn-images-1.medium.com/max/2582/1*W0YB1tTYAGOpbd_ghRHVsA.png)

**2. A precise and well-formed subheading**

Positioned right below the heading is a subheading which will dive deeper into giving details about the product. It must be persuasive and to the point.

Time for examples!!

1. [Slack](https://slack.com/)

![Slack landing page](https://cdn-images-1.medium.com/max/2484/1*BVeF7BUe7dw8czk5YV_sXg.png)

2. [Hashnode](https://hashnode.com/)

![Hashnode landing page](https://cdn-images-1.medium.com/max/2320/1*ynU-yHJUgfG4DjXzASfdFg.png)

**3. Complementing image**

High-quality relevant images are important. Just text seems very boring. Also, remember that the attention span of the reader will not be long. You must make a strong impact within minutes. Images, pictures, and videos are a great way to do that. It is a known fact that humans perceive pictures sooner than text so here we use it to our advantage. A bold image of the product you are selling must and should be on the page.

These days illustrations are largely used as they have a comic touch which many people like and the colors used grabs attention soon. Also, many companies showcase the dashboards and functionality used as it gives the element of trust on the product.

A few companies also add video clips explaining their product or just a walk through of their dashboard. This is a great approach.

How about some examples then?

1. [Asana](https://asana.com/)

![Asana Landing page](https://cdn-images-1.medium.com/max/2704/1*06-gkftfzIViIUWqYc0Jlw.png)

2. [Figma](https://www.figma.com/)

![Figma landing page](https://cdn-images-1.medium.com/max/2672/1*a1VpcvNPRQ8R3fp7MTZWgQ.png)

3. [Airtable](https://airtable.com/)

![Airtable landing page](https://cdn-images-1.medium.com/max/2656/1*14gWGonqOcb58P96I8hXRw.png)

**4. Call to action(CTA)**

A call to action is a prompt on a website that compels a user to click on it. On a landing page, CTA is usually as such “Sign up for free”, “Subscribe to our mailing list”. This is the most important part of the landing page. It tells readers about their next steps. Without proper CTA users will be left in confusion and might leave your page.

A page can have multiple CTAs. As this is a main component of the page it must pop on the page. It is advised to use contrast colors for these buttons and make the size larger so as to make it more visible on the page. Set a motive for the CTA, do you want email's? Do you want them to subscribe for your product? Would you like them to sign up? Use proper text inside the buttons.

Here are some examples

1. [Dropbox](https://dropbox.com/)

1. [Netflix](https://netflix.com/)

**5. Benefits and Features**

List out the best benefits of your product. On point facts that users understand and relate to. It must address the solution for the pains that a user would go through earlier to get the job done. The points must also make users happy. Through this, you have an emotional connection with your readers as they have experienced those pains and they will read through to find out what your solution is.

Features of your product/service are what explains to the readers what different you have over other such products out there. Include images if you think they showcase your features better. Give a brief about best and standout features on your platform and do stress on them.

1. [Instapage](https://instapage.com)

1. [Shopify](https://shopify.in/)

1. [Webflow](https://webflow.com/)

**6. Testimonials**

Good reviews of your product on your site showcase trust. Reviews are what users look for before using a product. The experience that others have had using your product provides an inner view, a story the readers can relate to and gives them an idea as to what to expect.

1. [Zendesk](https://zendesk.com)

1. [mHelpDesk](https://mhelpdesk.com/)

**7. Contact details**

Give your contact details and social media links on your page. Some of the best landing pages have multiple contact points for readers to reach out whenever they have a question. Also, it makes your business legit and trustworthy. Few websites have pop-ups providing customer service making a connection with the reader, while others have automated chat bots.

**8. Forms**

Crisp and short forms where the users fill in their details are also necessary. You can contact them from the information they have given you and maybe somehow use it for your advantage. Also forms are a great way to collect customer data, in case you need to contact them when a new feature is added or when you have an offer on your product.

These are just points that can be included in your landing page to get more conversions. Added to this, do make sure the page is designed, organised and developed well. The content on the page must be spaced perfectly and there must be a proper flow to the elements present on the page. Look into the latest trends in UI/UX to make it look appealing and also to stay up with the designing trends of 2019. Be clear with your motive of the landing page and structure the content of the page accordingly.

Hope this article was helpful. I had a great time writing this!!

For more articles like this, follow me on [twitter](https://twitter.com/s_omeal) .

Landing page is a web page designed and fine-tuned to bring in leads for the product/service and also to serve as a marketing platform. In this blog post, learn tips on building a great landing page.

omeal.me

All my blog posts