DEV Community: Supriya Shashivasan

Claymorphism - 2022 UI trend

Supriya Shashivasan — Thu, 31 Mar 2022 13:18:56 +0000

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

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

Code

Let us now look into 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.

Let me know your thoughts about this article!! I write blogs about Frontend and also tweet often.
Follow me on Twitter

Cheers 🎊

10 Visual Studio Code editing shortcuts

Supriya Shashivasan — Mon, 17 Jan 2022 13:03:38 +0000

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

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) ⌘ + →

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) ⌥ + ↓

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) ⌘ + /

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

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) ⌥ + ↓

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) ⌥ + ←

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

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

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) ⌘ + ↓

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!! 😇

Tip : Incase you forget the shortcut, open the Command Palette and type in the operation you want to perform (eg : Copy, move line). Visual Studio Code shows the shortcut you can use on the righthand side in the dropdown.

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

Also, find me on Twitter !!

Improve SEO using HTML

Supriya Shashivasan — Wed, 09 Jun 2021 06:52:46 +0000

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.

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.

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.

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

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 OG article.

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

How to build a Curved UI header

Supriya Shashivasan — Tue, 23 Mar 2021 07:11:33 +0000

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.

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.

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.

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.

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

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.

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 for more such articles.

Women in Technology

Supriya Shashivasan — Thu, 04 Mar 2021 10:48:06 +0000

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?!

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( mckinsey.com/business-functions/organizatio..) 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.

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 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 fronted development. Made me discover new options, got me interested in developing products and that is what I am passionate about now!![Girish Patil, thank you]. 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!! [Snehal Hosmani, thanks!!]

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.

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 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!

Article Planner template: Notion

Supriya Shashivasan — Fri, 08 Jan 2021 06:34:01 +0000

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.

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.

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.

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.

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

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 | LinkedIn

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

Hack G Suite using Apps Script — in under an hour.

Supriya Shashivasan — Sun, 27 Dec 2020 07:17:43 +0000

Have you heard of Google Apps Script? I was introduced to it for the first time at a Google Developer Group 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

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. If I want the sentences translated into Spanish, the code will be “es”.

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

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.

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

Glassmorphism : Upcoming UI trend

Supriya Shashivasan — Tue, 15 Dec 2020 13:31:18 +0000

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
Windows Vista
Dribbble design by Praveen Raj

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

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 here

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.

The code is hosted on my Github. Below is a screenshot of the webpage.

Illustration from Freepik. Credit to 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. Until next time ^_^

DEV Community: Supriya Shashivasan

Claymorphism - 2022 UI trend

Main elements of claymorphic design

Code

Points to note

10 Visual Studio Code editing shortcuts

Improve SEO using HTML

1. Title

2. Meta tag

2.1 Meta description tag

2.2 Robots

2.3 Social media tags

3. Structured data / Schema Markup

4. Heading Tags

5. Alt tags for images

6. Canonical Link

That's a wrap!!

How to build a Curved UI header

Approach 1 : Using SVG

Line commands

Curve commands

Approach 2 : Using CSS property border-radius

Approach 3: Using an image as the background

That's a wrap!

Women in Technology

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

How can we get more women in technology?

Article Planner template: Notion

Upcoming Article List

Ongoing Articles

Published Articles

Article Planner Notion Template for you!!

That's a wrap !!

Hack G Suite using Apps Script — in under an hour.

Storing data

Accessing script editor

Main function

Translate function

Glassmorphism : Upcoming UI trend

Design features of Glassmorphism

Code

That's a wrap!!

Approach 2 : Using CSS property `border-radius`