teleren/devto huggingface dataset:
CS Series 👩‍🚀 #3 : How computers stores information : Deep Dive Part 2 ⚡

Tags: computerscience, programming
Published: 2021-06-04 13:54:10

# How computers stores information : Deep Dive Part 2 ⚡

![image](https://user-images.githubusercontent.com/50620277/120702472-c7ce1680-c4bc-11eb-95c6-f79732bc484c.png)

- types of data in the real world
    - Text
    - Numbers
    - Video
    - Audio
    - Image
- We understand now how computers store information in the form of binary digits, but how we map an image or any type of data to a binary digit ?

## Number Systems

- humans invented a system to represent quantity of things based on symbols, and these symbols are numerical symbols (0, 1,2,3...). The most common number systems are: Base 10 and Base 2
- In the human world we use base 10 to describe day to day numerical needs, and it's base 10 because we have 10 possible values 0-9 , why only base 10 not 12 or 13 ? most likely because we have 10 fingers ! so we started to count things based on our fingers.
- but in the computer world we don't have 10 possible values. remember , we only have 0s and 1s . So  the second most common number system is base 2, which only holds to possible values 0 or 1
- So any type of data, either it's an image , text, number or anything will be converted to binaries , and from binaries we could store that binary, process it, and convert it back to original human readable form whether it's audio or any other types of data
- In this illustration we can see how we represent numbers in both system (Base 10, and base 2)

![04](https://user-images.githubusercontent.com/50620277/120701876-17f8a900-c4bc-11eb-8e18-ba38fd74ac8d.png)

### Text
- a text is just a collection of characters, and representing characters in computers happens in 2 steps
    - A way to map a character to a number
        - We use [ASCCI](http://www.asciitable.com/) for able
        - Also we use [Unicode](https://home.unicode.org/) table for representing all languages and and their symbols
    - convert the number to a binary

### Images
- Images are collection of colors, and representing colors in a computer happens in 2 steps
    - A system to map a color to number
        - Most common system is RGB
    - converting the number to  binary digits

### Video
- A Video is a collection of images

Extra resources : 

- [Introduction to number systems and binary (video) | Khan Academy](https://www.khanacademy.org/math/algebra-home/alg-intro-to-algebra/algebra-alternate-number-bases/v/number-systems-introduction)
- [Decimal to Binary Converter](https://www.rapidtables.com/convert/number/decimal-to-binary.html)
- [CS50: Lecture 0](https://cs50.harvard.edu/college/2021/spring/notes/0/#:~:text=multiple%20times%20a%20second%20to%20give%20us%20the%20appearance%20of%20motion)
JavaScript Quick Tip: The Nullish Coalescing Operator
Tags: javascript, typescript
Published: 2021-06-04 13:53:31

Have you ever written code like this?

```JavaScript
const result = a || b;
```

It works pretty well until it doesn't.

Using the logical OR to get a value or a fallback works 90% of the time you use it. But the other 10% are actually when you hit falsy values, which might otherwise be perfectly valid.

One point you can usually see such code at is the beginning of functions that don't use default parameters, like seen here:

```JavaScript
const myFunction = (parameter) => {
  const cleanedParameter = parameter || 'a default value';
// ... more code ...
}
```

If you call it like this:

```JavaScript
myFunction();
```

or like this:

```JavaScript
myFunction(null);
```

it works perfectly fine.

But what if the following call was actually a valid one?

```JavaScript
myFunction('');
```

Well, the empty string is a falsy value and will thus be replaced with the default value. And this is where you hit the 10% where the logical OR doesn't help you anymore.

## Enter The Nullish Coalescing Operator

The nullish coalescing operator works nearly identical to the logical OR, but it only reacts to null and undefined. Instead of two pipes, you place two question marks, and it looks like below:

```JavaScript
const result = a ?? b;
```

If you now replace the logical OR in your function with the nullish coalescing operator like this:

```JavaScript
const myFunction = (parameter) => {
  const cleanedParameter = parameter ?? 'a default value';
// ... more code ...
}
```

making the same call with the empty string as before:

```JavaScript
myFunction('');
```

will lead to the empty string being treated as a valid value again.

No matter what falsy value you pass from now on, be it the empty string, the number 0, or else, only null and undefined will be treated.

## The Whole Tip As An Image

If you like visual content more, or if you want to store it for later, I put all this into one single image for you. I hope you like it!

![A picture showcasing the above code](https://cdn.hashnode.com/res/hashnode/image/upload/v1622813860857/QrltN9Mn3.png)

## Before You Leave

If you would love to read even more content like this, feel free to visit me on [Twitter](https://twitter.com/intent/follow?screen_name=oliverjumpertz) or [LinkedIn](https://www.linkedin.com/in/oliverjumpertz/).

I'd love to count you as my ever-growing group of awesome friends!
Introduction
Published: 2021-06-04 13:50:20

This is a Full Stack Blockchain Engineer for over 8 years, and proactively working on DEFI, DEX, NFT projects so far. Build Smart Contracts using Solidity and deploy them to Ethereum and other networks using HardHat and Truffle, and interact Smart Contracts and more using Web3.js/Ethers.js with the industry standards.

I’m full-time available and able to commit the work immediately.
A nice default button CSS animation
Tags: css, button
Published: 2021-06-04 13:45:40

---
title: A nice default button CSS animation
published: true
tags: css, button
canonical_url: https://webdevchallenges.com/a-nice-default-button-css-animation
---

Whenever I create a new project and I want to keep it lightweight without adding any component libraries and so on, I just fiddle together some styles for a button but I rarely take the time to make it look really nice and responsive.

So I spent 15 minutes in creating a button style which looks nice in my opinion. If you like it too, feel free to use it in your project! This is how it looks like:

![image](https://webdevchallenges.com/uploads/file_upload/image/21/output.gif)

```
<style>
  button {
    background-color: rgb(37, 99, 235);
    font-weight: bold;
    color: white;
    padding: 10px 16px;
    font-size: 1rem;
    border-radius: .5rem;
    transition: all .15s cubic-bezier(0.4,0,0.2,1);
    border: none;
    cursor: pointer;
  }

  button:hover {
    background-color: rgb(29,78,216);
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }

  button:active {
    position: relative;
    top: 1px;
    right: 1px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  }
</style>

<div style="margin: 6rem;">
  <button>Click me</button>
</div>

```

First some general rules, deep blue background, white bold font, padding, rounded corners, no border and pointer cursor.

Next a hover effect which makes the background color a little darker and adds a box shadow which makes it look like the button elevates up a little bit.

Lastly an active state that does two things in order to make it look like you actually press that button down:

1. It changes the position slightly towards the bottom left
2. It reduces the box shadow we set earlier in the hover effect

That way it looks like it is less elevated i.e. pressed down.
CS Series 👩‍🚀 : What is a Computer ? 🤔
Tags: computerscience
Published: 2021-06-04 13:44:11

- It's your laptop or your mobile device. Or your Microwave! but let's have a concise definition of what a computer is : *any device that receives, stores, and process information*
- We have:
    - Different types of computers: desktops, servers, embedded systems
    - Different uses of computers: automobiles, graphics, finance, gaming
    - Different Manufactures of computers : Intel, Apple, Microsoft, IBM
    - Different underlying technologies and different costs

A computer consist of 💻: 

- Software
    - Operating System
    - Compilers
    - End user programs : Web Browsers, Email, Video Game
- Hardware
    - CPU, Main storage (DRAM,SRAM), secondary storage (Hard Drive, CD), Cache
    - I/O Devices : Keyboard, Monitor, Printer
- data : numbers, text, audio, video, images... (eventually it will be represented as binaries)

## Van Neuman Architecture

- So any computer may have all these things above or some of them. but we can summarize the underlying architecture as the **Von Neuman Architecture** which represent the components of any modern computer:
    - Input/output devices
        - Inputs : Keyboard, Microphone, Mouse
        - Outputs : Monitor, Printer
    - CPU : the brains of the computer, responsible of controlling the internal working of the memory.
    - Memory : stores instructions and data 
   
![van-01](https://user-images.githubusercontent.com/50620277/120696595-68203d00-c4b5-11eb-9d16-9f914d98bae9.png)

### Additional research and references
[Von Neumann Architecture - Computerphile
](https://www.youtube.com/watch?v=Ml3-kVYLNr8&t=70s&ab_channel=Computerphile)
No Thanks, I Don't Want to Build A Billion-Dollar Company
Published: 2021-06-04 13:44:02

When I started to build out my SAAS app Proxies API, I didn’t want a billion-dollar company or even a million-dollar company. Those are weird goals and don’t have any power behind them. The why of doing a startup should be so powerful it drives you every morning and every hour on its own. For that, it has to be natural. Lying in reality. A lot of gurus advocate having a strong why to their students. To find you are why they say. Find it SO that you can build a company. The irony and dishonesty of this approach are lost on them. It’s like saying, go find a disease you have so I can cure it. It’s never worked that way. Because you can’t trick yourself. Then why should it be obvious? If it is not, then you can’t wear a psychological version of VR goggles to psyche yourself that there is a why. Here is a strange thought — if you can’t find a way to start a company, then don’t. If you don’t have the motivation to do a startup, then why do you want to do it.

I think of it this way- If I know there is a tsunami coming my way in 6 months, and I am on an island, and I have no way to get out, it’s natural for me to plan and do everything in my power to deal with the upcoming threat. I don’t need to find me why. It is natural, and the goal of building a strong tower tall enough to survive the tsunami is not arbitrary. The fear fuels the work that’s needed and the research that’s required.

For me, I had to quit my day job because of the way my personal life was structured. Terrible things would happen, or at least had a high chance of happening if I didn’t become location independent. I can’t share more than this in a public forum, but all you need to know is why I was looking large in front of me, and I had anywhere between a year to 18 months to get independent.

After this threat, my calculations are modest. All I needed was to be able to pay rent and sustain living expenses. Period No other jazz was necessary. Figures like a million dollars or think big was laughable guru speak who didn’t have the sense of reality or urgency about my situation. You see, beyond the exact number needed to sustain me a month on month and free from having to work a job, the extra money meant nothing to me.

A focus like this is based on fear, a fear that is natural and real. It’s impersonal, and it has great power. It doesn’t stress you out like a personal fear like the fear of humiliation, which is your very own. This is my power. And this made sure I left no stone unturned to get to my goal. Everyday scenarios would play out in my head as to how else I could fail. Failing was not an option, so it fuelled me. I wanted it.

A potential billion-dollar company ‘someday’ when my personal life is in tatters is of no use to me. Just earning 2.5 k per month meant everything to me. It’s my dream come true, and possibly a nightmare averted.

The author is the founder of Proxies API, a proxy rotation API service.
It Is Ok To Build Your Startup Where There Is Competition
Published: 2021-06-04 13:43:34

It sounds counterintuitive and unnecessarily aggressive, but it is ok. It sort of is frowned upon but not illegal.

Look at these guys:

That guy on the left came back one afternoon after a fight with his missus, and this guy had popped up. Then he had another fight with his missus that night. Plus, it probably will turn out that that new guy was his spiteful brother, making you feel worse for this unknown (Chinese?) guy. Poor guy.

So what happens now are they both gonna have to get good at their business and can’t just be fighting their misuses no more.

And they all get a piece of the pie, which they can hide somewhere and eat.

I built a Proxies API like that. Right next to my competition. Right after a fight.

And I don’t need much from it. Some crumbs here and there, and I will do just fine.

Plus, I get to learn from the bunch of the guys before me. That’s where their 80/20 rule comes in. It should be renamed the ‘here’s how the pioneers wasted most of their effort finding the way (the 80%) and here is what finally worked (the 20%), so just copy this’ rule.

Using the 80/20 rule and some real personal smarts, I was able to work out.

1. The kind of places they got traffic from, it is hilarious to see the stunts they tried before they realized the now obvious. One guy even started a Facebook group! What DUDE! Developers HATE talking work on Facebook. I could have told you that then.

2. I know what kind of content works, so I just write those but way better. Use their complete exhaustion to my advantage 😈

3. The type of ads they have put up. You can see the evolution of their ads using SpyFu.

4. The kind of website copy they used. You can use the Way back Machines to see their journey from humble beginnings to sophisticated war mongering beasts that they have become, and you know, learn from that.

5. Learn the amount of work they put in. I just need to put in a couple of hours more than them, to be honest, and I will be well & truly ahead. But seriously, how the hell do you know what it takes to do anything? It turns out it is not much in my case, but how DO you know that?

6. The kind of money they make. Let us face it, and everyone loves to be on podcasts where they like to vomit out every personal struggle and detail about themselves, their pets, and their businesses. Good for them.

7. I am glad I came in late. In fact, I would have been well advised to probably wait another year.

8. They don’t write half as funny as me. Which means. I have a better Rotating Proxies Service, AND I can make you laugh. That’s something you always look for in a Rotating Proxies API Service.

9. And lastly, never, ever get on a podcast. No, thank you.

The author is the founder of Proxies API, a proxy rotation API service.
Python requests_html is throwing error There is no current event loop in thread 'ThreadPoolExecutor-0_0'
Tags: python, django
Published: 2021-06-04 13:40:20

I am trying to run a `JS script` using **python requests_html module** for a given url but was getting few errors. 

**Can some please help me out where I am doing wrong?**

**Code** :- 

    from requests_html import HTMLSession
    def rrr(request):
        session = HTMLSession()
        url = 'https://careers.microsoft.com/'
        response = session.get(url)
        script = """
                    () => {
                        return {
                            ans: window.location.href,
                        }
                    }
                """
        ans = response.html.render(script=script)
        return JsonResponse(ans, safe=False)

**Error :-**



      File "/home/mahesh/anaconda3/lib/python3.7/site-packages/rest_framework/views.py", line 476, in raise_uncaught_exception
        raise exc
      File "/home/mahesh/anaconda3/lib/python3.7/site-packages/rest_framework/views.py", line 502, in dispatch
        response = handler(request, *args, **kwargs)
      File "/home/mahesh/anaconda3/lib/python3.7/site-packages/rest_framework/decorators.py", line 50, in handler
        return func(*args, **kwargs)
      File "/home/mahesh/Documents/dojo/dojo/dojo/tenants/api.py", line 242, in rrr
        ans = response.html.render(script=script)
      File "/home/mahesh/anaconda3/lib/python3.7/site-packages/requests_html.py", line 586, in render
        self.browser = self.session.browser  # Automatically create a event loop and browser
      File "/home/mahesh/anaconda3/lib/python3.7/site-packages/requests_html.py", line 727, in browser
        self.loop = asyncio.get_event_loop()
      File "/home/mahesh/anaconda3/lib/python3.7/asyncio/events.py", line 644, in get_event_loop
        % threading.current_thread().name)
    RuntimeError: There is no current event loop in thread 'ThreadPoolExecutor-0_0'.

**When ran in terminal, it worked fine as follows**

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/gb1M3.png
My first Open Source Contribution – GirlScript Summer of Code✌🤩🎉
Tags: opensource, github, webdev, javascript
Published: 2021-06-04 13:23:34

Three months back in March, I made my first **Open Source** contribution in **Girlscript Summer of Code.** My journey has been a truly wholesome one since then. 

*You may ask,* **What is girlscript summer of code?🤔**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osw31mm9jlwhfbmjtt6v.png)


GirlScript Summer of Code is a three-month long open source programme run by the GirlScript Foundation. Its goal is to assist newcomers get started with open source development while also encouraging diversity. The participants work on a variety of projects during the programme, under the guidance of experienced mentors.

**How did I get to know about GSSOC 21?**
I got to know about this program via LinkedIn post. You have to fill an application form for registration and will be notified about your selection through email.
![Srishti_blog1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m34liryfwikz8f817w96.jpg)
 
**How to start contributing?✍**
There are over hundreds of projects to choose from according your interests and tech stacks. Once you find a project that meets your expectations, you will have to explore it and look for bugs or enhancements. 

I made 10+ pull requests and contributed primarily to 3 projects.
Here are some of my mini-projects that got merged in [Awesome-JavaScript-Projects](https://github.com/Vishal-raj-1/Awesome-JavaScript-Projects)✨ 
![srishti_blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2rwdegrt4b9zqmcv3ss.jpg)

**My takeaways from this program📈💯**
I learned tremendously in the span of these 3 months which includes git, python, data structures, HTML, CSS, and JavaScript. I got practical experience working on real-world projects. I've become so much more confident about my skills✌😇

**Come, be a part of my tech journey!💖**
✅[LinkedIn](https://www.linkedin.com/in/srishti-arya-049b80192/)
✅[Twitter](https://twitter.com/Srishti_Arya_)
✅[Github](https://github.com/SrishtiArya07)
if... then... elif.. else - Adventures in WSL2 Scripting #1
Tags: wsl2, bash, windows, linux
Published: 2021-06-04 13:22:48

First up some basics

> WSL2 with ubuntu 20.04

A lot of the logic in the scripts I write rely on bash's `if.. then.. else`. The basic syntax of the statement is as follows:

> <figure>
<pre> 
    if [ {statement} {operator} {value} ]
    then
        # do something here
    elif [ {statement} {operator} {value} ]
        # else if do something
    else
        # do something else
    fi # this is just if spelled backwards.

</pre>
<figcaption>The syntax. </figcaption>
</figure>

## Why the square brackets?

`[...]` tells bash to evaluate the command and return 0 or 1 for the conditional expression inside the square brackets.

> <figure>
<pre>
    test and [ evaluate conditional expressions using a set of 
    rules based on the number of arguments.
</pre>
<figcaption>source: `man test`. </figcaption>
</figure>

**tldr;** ensure things evaluate correctly.

## Muting the output
`>` is used to redirect the output of a command somewhere.

> <figure>
```bash
   dev@Dark-Matter:~$ cp file1 file2
   cp: cannot stat 'file1': No such file or directory
   dev@Dark-Matter:~$ cp file1 file2 >&- 2>&-
   dev@Dark-Matter:~$
```
<figcaption>Example with and without redirect. </figcaption>
</figure>

## Getting exit code from a command 

`$?` returns the success of the previous command, 0 for success and >= 1 for failure. Lets look at the previous example and see what the output is.

> <figure>
```bash
   dev@Dark-Matter:~$ cp file1 file2 >&- 2>&-
   dev@Dark-Matter:~$ echo $?
   1
```
<figcaption>Getting the exit code from a command. </figcaption>
</figure>

## Simple example
> <figure>
```bash
   #!/bin/bash
   cp file1 file2 >&- 2>&-
   if ["$?" = "1" ]
   then
      touch file1
      cp file1 file2
   else
     echo "File copied to file 2" 
   fi
   
```
<figcaption>Simple example. </figcaption>
</figure>

## Something useful
> <figure>
```bash
#!/bin/bash
# Check we have a parameter

if [ "$1" = "" ]
then
   echo "syntax: old {filename}"
fi

# Copy the file as .old
newFileName="$1.old"
echo $newFileName
cp $1 $newFileName >&- 2>&-

if [ "$?" = "0" ]
then
      echo "File has aged and has had '.old' appended to it"
      exit 0
else
     echo "File has not been born yet or you do not have parental rights to the file."
     exit 1
fi
   
```
<figcaption>Simple example. </figcaption>
</figure>
Top 11 AngularJS Tools You Need To Know In 2021

Tags: angular, software, development
Published: 2021-06-04 13:20:44

AngularJS is the most preferred framework for web developers to design a web app dynamically. It allows you to use HTML as a template language and spread HTML’s syntax to clearly show app components. Developers always search for the best ways to work fast and deliver the project within estimated time. Here comes the AngularJS tools in focus to increase your speed and also improve quality code. Hence we came with the best tools for app developers. Whether you are an angular developer or thinking of using Angular for your next project, knowing these Angularjs tools will help you to develop and deliver the best angular app. Let us see which are those tools.

Also know the amazing new features of Angular 12 at- What’s New In Angular 12?

#Top 11 AngularJS Tools-
**1. Webstorm-**
This tool comes with a smart Angular online editor that provides a great support for Javascript, Node.js, HTML and CSS and also for all their modern successors. It works fine with the latest technologies and hence is loved by the developers community.

**Features-**
* Great customization features to match your coding style.
Intelligent ide
* Git support
* Coding assistance for various Java Script languages, CSS, HTML, and Node.Js
* Highly efficient debugging, testing, tracing, and profiling features
* Can run ESLint, JSCS, TSLint, Stylelint, JSHint or JSLint also

**Pros-**
* In-built spell checker to avoid silly mistakes
* Facilitates cohesive work without need for scrolling
* Intelligent code completion support with both word expansion and structural completion

#2. Karma-
This is one of the best testing frameworks for AngularJS development that provides a perfect testing environment allowing you to test the app on real browsers and real devices like tablets and phones. Karma is used for various testing like unit testing, E2E testing and midway testing. Gitlab, Typeform, Appian are some of the organizations that are using Karma tool

**Features-**
* Offers test coding in various real browsers
* Very easy to integrate with Travis, Jenkins and Semaphore
* Open-source community at GitHub
* Remote Control
* Testing Framework Agnostic
* Open Source
* Easy Debugging
* Continuous Integration

Pros-

Know more at- [https://solaceinfotech.com/blog/top-11-angularjs-tools-you-need-to-know/]