DEV Community: Manaswini

Let's talk about bits

Manaswini — Fri, 23 Oct 2020 04:14:17 +0000

A bit is a unit used in computations. It is short for Binary Digit. It can take two values, either 0 or 1. All of what is done by computers has to do with manipulating these bits. All the arithmetic, execution of instructions, data transfer and storage etc... narrows down to either a 0 or a 1.

Today, in this post we'll try to understand what bits are, some terms related to them and conversion of a decimal number to a binary number and vice-versa.

Some terms

First let's familiarize ourselves with a few terms that you will find when you start to consume literature related to bits.

1) Byte : A byte is basically a collection of 8 bits. For example, 01100000 is a byte, 10100100 is also a byte. A byte can be used to represent any number between 0 and 255, both included. I'll explain more about that later in the post.

2) Word : A series of bits grouped to represent a number.

3) Binary number : A number expressed using bits.

4) ^ : This is a notation that I'll be using in this article to mean "to the power of". So for example, 3^2 means 3*3 = 9

How to represent a number using bits ?

In the definitions for a byte and a binary number, I spoke about how bits can be used to represent any number ( between 0 and 255, both included ). I'll explain how this is done now.

Binary number to a decimal number

A binary number is expressed in the base 2 numeral system. When we work normally with everyday numbers, we use the decimal system, which is a base 10 numeral system.

That is to say, if we have a number let's say, 183, we can express it in decimal system as 100 + 80 + 3 = (1*100) + (8*10) + (3*1). If we had 7706, we could express it as (7*1000) + (7*100) + (0*10) + (6*1). Notice the numbers in bold. Let's call them multipliers.

For 183, the multipliers were 100, 10 and 1

For 7706 the multipliers were 1000, 100, 10 and 1.

You might have observed the following for these multipliers.

Any given multiplier is ten times the multiplier next to it in the decimal system. In other words, when we go from the right most multiplier to the left most one, we iterate through the powers of 10.

This is what we mean by a base 10 numeral system, which is our everyday decimal system. The binary number system, like I said before, is a base 2 numeral system.

This should mean that every multiplier to be used in the binary system should be two times the next multiplier. In other words, when we go from the right most multiplier to the left most one, we iterate through the powers of 2.

So if I choose a random number in the binary system, say, 0110111, then to express it in our everyday number system, we need to multiply each bit in it by a multiplier and then add the result of all these multiplications to get that final decimal number.

The multipliers are 64, 32, 16, 8, 4, 2 and 1. (64 is two times 32, 32 is two times 16 and so on...)

=> 0110111 = (0*64) + (1*32) + (1*16) + (0*8) + (1*4) + (1*2) + (1*1) = 0+32+16+0+4+2+1 = 55

i.e. 0110111 in binary system is equivalent to 55 in the decimal system.

Decimal number to a binary number

Now if we want to go from decimal to binary, we need to work our way backwards. Hold on! Don't worry. I'll give you an example that will make this clear.

Let's choose 74.

Here are the powers of 2 up till 2^7

The power of 2 that is immediately smaller than 74 is 64. We need to write 74 in terms of addition of powers of 2 starting from 64 and going down till 1.

74 = 64 + 8 + 2 = (1*64) + (0*32) + (0*16) + (1*8) + (0*4) + (1*2) + (0*1)

This looks similar to the form we saw in the example of converting a binary to a decimal number. Let's write both the forms together and try to correlate them

First example :

0110111 = (0*64) + (1*32) + (1*16) + (0*8) + (1*4) + (1*2) + (1*1) = 55

Second example (present) :

74 = (1*64) + (0*32) + (0*16) + (1*8) + (0*4) + (1*2) + (0*1) = ?

Don't they look almost alike? By comparison, we get that for the second example the binary form should be 1001010.

Therefore 74 in the decimal system is equivalent to 1001010 in the binary form.

So we learnt how to convert a decimal number to a binary number and vice-versa. What next?

Remember, in the definition of a byte, I told you that a byte can be used to represent any number between 0 and 255. All the explanation till now was to prove that.

A byte, if you recall is basically a combination of 8 bits. It can be any combination of 0s and 1s as far as the total number of bits in it are 8.

So the smallest combination (in terms of value) is eight 0s placed back to back i.e. 00000000 and the largest number is eight 1s placed back to back i.e. 11111111. If we apply the techniques we learnt before and try to convert 00000000 and 11111111 to the decimal system, guess what we'll get.

000000000 in binary is equivalent to 0 in decimal system.

11111111 in binary is equivalent to 255 in decimal system.

That means we can represent any number between 0 and 255, both included using 8 bits i.e. using one byte.

Today we learnt
1) What a bit, byte, word and a binary number are

2) We learnt about how we can convert a binary number into a decimal number and vice-versa

3) At last we proved how we can represent any number between 0 and 255 (both included) using one byte ( i.e. using 8 bits )

Next Steps
In the next article, I'll talk about how we can perform simple logical operations using bits and learn about logical gates.

Things I'd do differently if I had to start with programming all over again!

Manaswini — Sat, 15 Aug 2020 02:50:06 +0000

Regrets!! These are the things that we wish we would have done. I too have some of them when it comes to learning programming and also Web development. I'd like to share these experiences here so that anyone who is reading this can prevent these or stop making these mistakes if you are making them already.
This is actually a reiteration of my first meet-up talk where I talked about things I'd do differently if I had to start again.

Don't be afraid to ask for help

My work would have been much better, I'm sure, if only I had taken the initiative to ask for help. This was hard especially since I easily got anxious to talk to others. Also, I thought googling for answers would not make me a good developer. So I restrained myself from doing so, which posed as one of the biggest hurdles to my growth.

Breaks are very important

I was filled with a guilt that I wasn't doing enough when I got away from my laptop. So I didn't take proper breaks and that almost led to a burnout. Now I've realized how powerful breaks can be! In fact they can make us more productive, unless you use this as an excuse to stay on your couch all day doing nothing 😂😂 Just kidding. If you fancy doing that, you are free to do so!!!

Pursue something other than coding

Hobbies are what make us different. Don't let that uniqueness get lost in the noise of deadlines. I know it can be hard to cater time since you might have much more important work to do. But keeping that spark inside you alive is as important as anything else if not more! Think about it😊

Don't stress yourself out too much looking at other people's work

This is something that I've dealt with and keep dealing with frequently. The strategy that I use to deal with this is to look at the opposite person's work as something to learn from and not as competition. This way we fill two needs with one deed. We learn to abandon that negative emotion and also learn something new!!

Don't confuse gratitude with debt

Looking at all the awesome people of the DEV community on Twitter share many helpful resources to get into programming pushed me into a feeling of not giving enough to the community. I agree this can help us push ourselves to do better and give back to others. But there is a fine line between pushing yourself to give back and pushing yourself to burn yourself out! If you are in a similar situation, it might be helpful to remind yourself that you have to be grateful but don't confuse that with debt. You don't owe anything to a lot of people you come across. But this is not to say that you shouldn't help others. Do that. But even if you don't, you are still good. Don't worry!!

Collaborate with other developers 🤝

You might have already heard about this before. So there's not much to add to this from my side. I just want to say that the knowledge transfer that happens on collaboration can be very useful in the long run, as it can make you a better developer and also a better communicator🔊

It is OK to do imperfect work

I wish I had known that it was OK to show my imperfect work to others. Recently I did that and I had many developers reach out to me with feedback on my code and they sent me links to their GitHub repos that they thought might help me. So I can't stress this enough!! I want to repeat one of the sentences from my first blog post : "Don't let your works die in anonymity! Give them their much deserved space in this world. You will not regret it ---- Manaswini🤭"
For the keen observers among you: I didn't put any image for this section as I couldn't conclude upon what to put! Does it make this article imperfect? Maybe!!! But I'm still proud of it🤭

Last but not the least : Enjoy!!!🎉💃

At the end of my talk at the meet-up, I was asked to chill out and not think so much about these things and I couldn't help but include this here. After all this is a journey to be cherished! Why not make the best use of our time here?😊

Some concluding words:

I'd love to hear from you. Did this article help you deal with any of your problems? Did it give you a new perspective of looking at things? You found it to be too preachy? Found too many emojis? Anything will do. You can find me dwelling in my corner @thisismanaswini in the Twitterverse!

Also, I did something interesting in this article. All the images that I've included are my very own CSS illustrations with some references coming from Pinterest!! I'd love to know how you found them!!!

That's it from my side!! I'm happy that you found this post worthy enough that you read it till the end!! Thanks a lot😊

Decoding CSS art (🎨+💻)

Manaswini — Wed, 29 Jul 2020 11:56:33 +0000

Backstory alert!!

When I joined Twitter, I came across people who were posting CSS illustrations and I was extremely intrigued and confused at the same time. It was not until a month later that I took a deep dive into CSS and started experimenting, that I actually felt like I had achieved a good enough understanding of CSS art. In this post, I've tried to list out all the important things that I've learnt and also some resources that I use frequently.

What is CSS art anyways? 🤔

Making CSS art boils down to manipulating the shapes of HTML elements ( mostly divs or spans ) using CSS properties and getting them to look the way you want by gluing them together using CSS positioning.

With me till now? Great, now let's have a look at some CSS properties that I use the MOST while making CSS art and also some resources that will hopefully help you better visualize them.

Border radius

This property helps us round the corners of an otherwise rectangular-shaped div or span. I've tried to give you an overview of how this property works in the following image.

Through these numbers, we tell CSS how much of each side it should take to round a given corner.

Here's a tool that helps in visualizing how border-radius works : 8 point border radius

Flexbox

I use flexbox heavily to center elements and for easy positioning of elements. In the following image, I applied a display of flex, flex-direction of column, justify-content center and align-items center to the container on the right side. On doing so, I could skip the extra positioning that I would have to do if I hadn't used Flexbox, like in the left container.

Personally, I learnt flex box from the Freecodecamp curriculum. Here are some other tools that are very useful to help gain a better grip on Flexbox:
1) Flexbox visualizer by Paul Trone
2) Flexbox froggy

Clip-path

Clip-path helps us create almost any polygon that we want. Using this, we can specify a given area on the div or span that we want to show rather than showing its entire rectangular shape.
Bennett Feely's clip path maker is an extremely handy tool that I use frequently to visualize and work with this property.

View port dimensions

Something that I realized recently is to use view port dimensions ( vw, vh, vmin, vmax ) to make the illustrations responsive. View port dimensions help us declare lengths in terms of the view port width or height. The most important among these, at least in the context of CSS art, is the vmin unit.
It helps us declare the widths and heights of our HTML elements in terms of the minimum value among the view port width and the view port height. This way we can ensure that no matter what device you view the illustration on, it looks exactly the same.

Relative and absolute positioning

When we give a relative position to an HTML element, we move it with respect to itself. But when we talk about absolute positioning, we position the element with respect to its parent. In this case the parent should have relative positioning.
The following image illustrates what I'm talking about.
If I add right:10px; to the inner box in the CSS stylesheet, here is how the result would differ based on whether the inner box is positioned relatively or absolutely.

Pseudo elements

These refer to the ::before and ::after elements. Don't worry if you haven't heard of them or haven't used them before. Here is a series on YouTube by Kevin Powell, that does an amazing job at explaining the ins and outs of pseudo elements.
Part one, Part two and Part three.

Extras ✨

Some other CSS properties that you could use to add depth and definition to your illustrations :

Box-shadow

Here is an article from CSS Tricks which when read along with the MDN docs on box-shadow can help clear up a lot things about how box-shadows work.
You can use this Box shadow generator to visualize how these work.

Gradients ( linear and radial )

Here's one of my favorite articles on CSS gradients from CSS tricks.

Brag alert⤵️⤵️⤵️😂😅

Here is a small collection of illustrations that I made using CSS.

That's it folks! Thank you for reading till the end🎉🎉 I really hope you had something to take way. If this helped you in any way, I'd love to hear🔊 from you. You can catch me on Twitter or Codepen 😊

Have a great day( or night )!!👋👋

How I began my journey into Webdev and some lessons that I learnt

Manaswini — Thu, 04 Jun 2020 11:31:41 +0000

Let me start my first ever post here by introducing myself. I'm Manaswini. I am from Hyderabad, India. I recently created a brand new Portfolio website for myself and launched it onto the World Wide Web just a few hours ago. You can find it here https://manaswiniportfolio.netlify.app
How did I get here? What made me go with Web development and eventually Web design? Read on to know more...
It would not be an exaggeration to say that I never thought I could come this far in Web development. Why? Because I never thought, even in my wildest dreams, that I could be a programmer or a developer or anything software-related. Why? Because I thought it was only for people with a solid technical background who dream code, eat code and drink code! All blame on the movies for portraying programmers as some kind of an alien species who input endless jargon into systems and lock themselves up in their rooms in front of their computers for eternity. Although I think the latter sentence is true. OK anyways now I know that anybody can code with a good amount of practice and dedication.
Did I catch you asking "OK I've heard all that before but how exactly did you get here? What was your journey exactly like?" Don't worry. I've got you covered! It all started in June 2019 when I started contemplating Freelancing to earn some quick bucks as a first year Engineering undergrad.Quickly googled 'Freelance' and a ton of buzz words got thrown at me. Content writing. Copy writing.WEB DEVELOPMENT.Sounds familiar. I had my friend tell me about it a few days ago. I browse further. I find an advertisement about the best Web development course on Udemy with a 95% discount!! I was in!
That was how I started learning Web development in June 2019, learnt for about a week and forgot about its existence until April 2020 when I got back and officially began the 100 days of code challenge on Twitter to help me stay accountable on this journey. Thanks to the lock down, I now had plenty of time to give to this mysterious and scary sounding thing- Web development.
Until I took this leap of faith, I always viewed myself as a novice who didn't understand computers or software or technology and just wasn't interested in the whole programming thing. But now I know better. OK enough about myself, let's actually dive into the lessons that I learnt. Shall we?

What I have learnt so far

Right now I'm on Day 40 of the 100 days of code challenge and there's a pretty good number of things I've learnt till now. I'm not going to talk about any tech-related stuff here, just some general lessons that I learnt along the way.This is more like what I would tell myself 3 months ago when I still was completely new to this field.

Forget about all the bizarre myths you've heard about web development or programming in general and just get in there. If you are not sure whether tech is right for you, try checking out platforms like Free code camp or try youtube tutorials to get a hang of it and then decide. Do whatever, but take that first step. Even if you do not continue with a career in tech, you will still learn some valuable lessons.
One of the most valuable lessons you will learn is discipline and dedication. Because to be honest, I had never done anything close to this 100 days of code thing where I challenged myself to learn something completely new to me for a straight up 100 days.
Another important thing - Have something to fall back on. I mean get involved in a community where the participants will help you stay accountable. Like the Twitter dev community which is by far one of the best communities I've been a part of.
This brings me to the next,probably the most important thing of all. Do not get influenced by the response you get on Social media, twitter included. This was a major challenge I faced and keep facing. Seeing other's work receive a lot of recognition and my works getting lost in the dusty shelves of the internet was so heart breaking. But what helped me was clarifying the WHY. I started focusing on why I was on Twitter. It was not because I wanted followers or likes or comments or retweets. The main reason was to DOCUMENT MY 100 DAYS OF CODE JOURNEY.So why not focus on that?
Next up - Document your journey. Even the bad days. Twitter, Trello board, GitHub repos, Sticky notes...do what you like.But do not forget to document your journey. It will surely serve as an inspiration for others and most importantly to you. I'm 100% sure you will be proud of your self when you look at your tweets or repos and will be surprised by how far you've come.
Last but definitely not the least share your work with the world. Don't tuck your designs and ideas away and leave them to die in anonymity. Give them their much deserved space in this world. You will not regret it :)

So that was it! If you've come this far without getting lost in my sometimes incoherent story telling style, then give yourself a pat on the back. You very much deserve it! And thank you so much for keeping up with me till the end. I appreciate it.
That's all from me today. Looking forward to learn more and progress in this 100 days of code journey and even beyond that. Join me on Twitter at https://twitter.com/thisismanaswini to accompany me on this path.