teleren/devto huggingface dataset:
Surprising Facts about  How Browsers Interpret CSS
Tags: webdev, css
Published: 2020-08-30 06:34:54

First, Let me get straight to the point, browsers match css selectors from right to left. If you already know, you don't need to keep reading. If not, please go ahead. 

## Wrong Idea

```css
.sample table td {
  color: red;
}
```

When you see the above code, browsers interpret abd execute it in the following order.

1. Find the sample class
2. Find the table element of descendants of 1.
3. Find the td elements of descendants of 2.
4. Make the text color red.

If you don't think this order seems wrong, maybe you should keep reading this.

## Correct Idea

```css
.sample table td {
  color: red;
}
```

When you see the above code, browsers interpret and execute it in the following order.

1. Find all td elements
2. Check if the table element is present in the ancestor element of 1.
3. Check if the sample class exists in the ancestor element of the table element in 2.
4. Make the text color red.

CSS selectors are collated from right to left like the above order.
The rightmost selector is called "key selector".
This means that if you specify a selector with a large range of applicability for the key selector, it will likely take a long time to match it.

## What's the Problem

Let's say you wrote the code below. 

It will first find all td elements in the DOM, and then it will try to confirm the existence of the table element and the sample class.
Since the text color of the table under the sample2 class remains black, there is no need to find the td elements under the sample2 class.
This is an obvious **waste of cost**.
If the number of td elements under the sample2 class increases, it may lead to **performance problems**.

```html
<html>
    <body>
        <div class="sample">
          <table>
            <tr>
              <td>Red</td>
              <td>red</td>
            </tr>
            <tr>
              <td>Red</td>
              <td>red</td>
            </tr>
          </table>
        </div>

        <div class="sample2">
          <table>
            <tr>
              <td>Black</td>
              <td>black</td>
            </tr>
            <tr>
              <td>Balck</td>
              <td>black</td>
            </tr>
          </table>
        </div>
    </body>
<html>

<style> 
    .sample table td {
      color: red;
    }
</style>
```

So, in this case, it's better to give a red class only to the cells where you want the text color to be red like below.

```html
<html>
    <body>
        <div class="sample">
          <table>
            <tr>
              <td class="red">Red</td>
              <td class="red">red</td>
            </tr>
            <tr>
              <td class="red">Red</td>
              <td class="red">red</td>
            </tr>
          </table>
        </div>

        <div class="sample2">
          <table>
            <tr>
              <td>Black</td>
              <td>black</td>
            </tr>
            <tr>
              <td>Black</td>
              <td>black</td>
            </tr>
          </table>
        </div>
    </body>
<html>

<style> 
    .red {
      color: red;
    }
</style>
```
Chrome copy all CSS for an element
Tags: chrome, devtools
Published: 2020-08-30 06:01:39

In modern-day `CSS` the styles are divided between many selectors, even tools like Tailwind make this happen.

But what if we want to get all `CSS` styles for one element?

Chrome dev tools, has a fantastic feature build in.

This is how it works:

![chrome-copy-styles-min.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1598716163403/DUJbwp6r4.gif)

## Chrome Dev tools Copy CSS Styles

To use it:

- Open dev tools
- Right-click an element in the `Elements` panel
- Copy > Copy styles
- Paste them where needed

Amazing and easy right, you won't know the number of times this can be useful!

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Three Number Sum (2 Pointer) in Python
Tags: algorithms, python, 2pointer
Published: 2020-08-30 05:41:26

Three Number Sum is a popular problem found on leetcode where you are given an array *nums* of *n* integers, are there elements *a, b, c* in *nums* such that *a + b + c = 0*? Find all unique triplets in the array which gives the sum of zero.

Link to problem at leetcode: [here](https://leetcode.com/problems/3sum/)

Full Python Solution Here:
```python
def threeNumberSum(array, targetSum):
    array.sort()
    result = []
    for i in range(len(array) - 2):
        left = i + 1
        right = len(array) - 1
        while left < right:
        currSum = array[i] + array[left] + array[right]
        if currSum == targetSum:
             res.append([array[i], array[left], array[right]])
             left += 1
             right -= 1
        elif currSum < targetSum:
             left += 1
        elif currSum > targetSum:
             right -= 1
    return result
```
Part 1. Docker Containers for AWS development - Elastic Beanstalk development environment
Published: 2020-08-30 05:28:45

AWS developers need to install many tools like `awscli`, `eb cli`, `ecs-cli`, `sam` etc. Workstations become overloaded, and sometimes there are version conflicts. To keep workstations clean, we decided to use Docker containers for different tools.

I hear you say, how about running
`eb local run`

And here is how we will do that:

1. Download Dockerfile from VirtIOGroove [repository](https://github.com/virtiogroove/aws-helper-scripts/blob/master/Docker%20Beanstalk)
2. From a folder containing Dockerfile run the following:

`docker build -t ubuntu:ebcli`. 
3. Start the container 

`docker run -v /var/run/docker.sock:/var/run/docker.sock -it ubuntu:ebcli`

Now you are in the container. 

Let us quick create an Elastic Beanstalk Application from AWS provided examples, by executing the following commands:

`mkdir testdocker`
`cd testdocker`
`wget https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/samples/docker.zip`
`unzip docker.zip`
`eb init` *#select Docker platform*
`eb local run &` *#pushing it to background to get shell*

And here is the magic - the new Docker Container starts from your developer Docker Container - but it runs on the host. 

If you run
`docker container ps` from your container or from the host -you will see the same container - this is the result of attaching a Docker daemon socket from the host to the container Docker daemon.
More options for starting container can be found in VirtIOGroove [repository](https://github.com/virtiogroove/aws-helper-scripts/blob/master/Docker%20Beanstalk/run%20docker)

Note: Do not run the container with  `--privileged=true` 
Read this [blog post](https://jpetazzo.github.io/2015/09/03/do-not-use-docker-in-docker-for-ci/) from the author of the feature - to understand implications. That is why we are starting container the way recommended in blog post.
Basics of the terminal, git
Published: 2020-08-30 05:19:33

I am just going to share some basics off using git. I thought It would be a helpful reminder for new programmers playing around with the terminal. 
Let get started.
To save your code on the file do "git add."
to Save it officially do "git commit -m"your special message here"" after you did git add .
And to push to its specific source, do "git push".
If you need to go into a file do, "cd "file name"", and if you need to return backwards into the main folder or file do "cd ..".
Thats really all you need to know.
#100DaysOfCloud | Day 5
Tags: docker, linux, 100daysofcloud
Published: 2020-08-30 05:15:20

What Did I learn -

Oh wow, okay, so today I learned about viewing image history, saving and loading images, this is especially useful when utilizing artifactory for storing your image and then distributing your docker server using Jenkins. As well as the different ways to use tagging, and I learned more about Docker Swarm and that is cool, but I was very happy playing around with Portainer to manage Docker. So for this I first created a volume for my portainer data, then I ran: 
`docker container run -d --name portainer -p 8080:9000 \
--restart=always \
-v /var/run/docker.sock:/var/run/docker.sock \
-v portainer_data:/data portainer/portainer`
After this, I went to my IPAddress at port `8080` and generated a login and got to play around with the Portainer console and I have to say, it was a blast! This may be because I have been so deep in the console the past couple days with little sleep but this was such fun!

What Did I Do -

We finally got to play around with Docker Swarm, yeah!!!!! So, we played around with the network settings, so to do this we created an overlay network with docker network create -d overlay <NAME> and then we created a service with our overlay network this was accomplished with: 
`docker service create -d --name <NAME> \
--network <NETWORK> \
-p <HOST_PORT>:<CONTAINER_PORT> \
--replicas <REPLICAS> \
<IMAGE> <CMD>`
Then we just add the service to a network with `docker service update --network-add <NETWORK> <SERVICE>`
But yes, before we can play around with networks in docker swarm we wanted to make our testbed of servers, so we made some worker nodes, then we had to get our worker nodes ready, to do this we pulled the docker repo for our workers:
`sudo yum install -y yum-utils \
  device-mapper-persistent-data \
  lvm2
made sure the repo was stable:
sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo`

Then we install Docker on our workers:
`sudo yum -y install docker-ce
Enabled start:
sudo systemctl start docker && sudo systemctl enable docker
Added our User to the docker group:
sudo usermod -aG docker <USERNAME>`
Once this is complete on the Master Swarm server we initialized swarm manager:
`docker swarm init \
--advertise-addr <Server's Private IP>`
From hereafter it initializes your CLI should generate a prompt that you can input into all your worker nodes, it looks like this:
`docker swarm join --token <TOKEN> \
<PRIVATE_IP>:<PORT>`
This was by far one of the coolest dives I have done with docker and I think this is really fun to do for anyone interested and wants to spin up some test servers to play with.

For tomorrow -

What is on the menu for tomorrow? I am not sure, I actually just purchased The Phoenix Project audio book, so I will definately be "cracking that open" sort of speak. Aside from that as promised we are back to the AWS console and on our journey to gain the AWS Dev Associate (This is before we go for the AWS Solutions Architect Professional or the AWS Security Specialty.)
Open source software to track user feedback. What do you think about it?
Tags: opensource, feedback, softwaredevelopment
Published: 2020-08-30 04:34:17

LogChimp is an open source free self-host-able software for products makers to get feedback from their users and start building better version of your product.

A preview of product I'm trying to build, and the code is [open source on GitHub](https://github.com/logchimp/logchimp).

![LogChimp product development roadmap](https://dev-to-uploads.s3.amazonaws.com/i/da8oore6svvzmq94ecuw.png)

> **NOTE:** The product image you see above is a product roadmap.

With the goal set in mind, I was able to build the MVP _(v0.1.0)_. Here's a gif of the working LogChimp app.

{% youtube pLyhiydf88E %}

Hope that gif have pinged your interest. I would love to hear your feedback and suggestions.

Please give the LogChimp MVP a try on your local machine.

{% github logchimp/logchimp %}

In case of any question you can drop them in comment section below or DM me on Discord `ヤシュ ミッタル#1475`.

### Community

Stay up to date on the development of LogChimp or reach out to the community with these helpful resources.

* Follow [@logchimp](https://twitter.com/logchimp) on Twitter
* Join our [LogChimp Discord server](https://discord.gg/REFVy9E)

Thanks
Yashu Mittal

✌️
React JS - Bootstrap Starter kit
Tags: react, beginners, javascript, webdev
Published: 2020-08-30 04:13:02

## A quick and easy template for React JS with Bootstrap.

[Link to Repository](https://github.com/SoorajSNBlaze333/react-javascript-bootstrap-starter)
Please star the repo if you find it useful :)

## Setting up and Installation
1. If you want to use this template, just click on the `Use this template` and continue the steps.
2. Or you can clone the repo manually using,
```
git clone https://github.com/SoorajSNBlaze333/react-javascript-bootstrap-starter
cd react-javascript-bootstrap-starter
npm i
npm start
```

## Live Version [here](https://modest-mahavira-99d25a.netlify.app)
See the big picture
Tags: career, beginners
Published: 2020-08-30 03:55:25

Depending on where you are at in your career, you may have heard of the term get the **big picture** or see the full picture.

Typically (not always) folks with less experience do not grasp this. This is not a bad thing. It is something that comes with experience and having a **deeper understanding of the system** you are working in. This is why more experienced co-workers are there to help and guide you.

I'll tell you a funny story that relates to my profile picture. I use this as my profile picture on DEV, GitHub and all social media.

![My profile picture on DEV and social media](https://dev-to-uploads.s3.amazonaws.com/i/bfqdjky9qbahxaxseb29.jpeg)

I'm sporting my DEV shirt looking up slightly into the sky as if I'm trying to look tough or looking at some imaginary DEV flag that I should be saluting to. What you don't see in this picture is that I am in extreme pain. My feet are killing me and I have blisters on several toes on each foot.

I can't remember why I decided that day to take this photo and make it my profile photo, but I did.

At this point you might start asking questions like why is he in so much pain? Where did the blisters come from? Was it from a long run? An accident?

WAIT FOR IT...

WAIT FOR IT...

WAIT FOR IT...

Here is the original uncropped photo. You probably now know why my feet were in the state they were that day.

![Me on my deck in high heel shoes after doing the Walk a Mile in Her Shoes fundraiser](https://dev-to-uploads.s3.amazonaws.com/i/213g7cp65ube3nkam9gn.JPG)

I participated in a great local fundraiser for a women's shelter called "Walk a Mile in Her Shoes" in which you literally walk a mile in high heel shoes. So what does this all have to do with software?

If you are given a feature and asked to implement it, don't just jump in and start coding that feature. **Ask questions!** Spend some time really **thinking** about the feature outside the specs that were given to you.

- Does this feature affect other features or other parts of the codebase? If so, is this a big deal? A welcomed change? Is it destructive?
- This feature is the basis for some very near future feature work (Not [YAGNI](https://www.martinfowler.com/bliki/Yagni.html), "You Ain't Gonna Need It"). We should take that into account instead of doing the quick and dirty way to ship this.
- This feature needs to make database changes. Will this cause downtime?

All hypothetical questions and thoughts about some imaginary feature, but the point is to think outside the bubble of a feature or bug fix. **Think about the system as a whole and how your changes will affect it.**

That's all for now folks, but I'll leave you with a fun action shot at the end of a very painful one mile walk.

{%instagram Bz9EApcpBGm %}
Flexbox for CSS
Tags: css, flexbox, scss
Published: 2020-08-30 03:54:24

I have been using libraries like Bootstrap and Bootswatch for all my CSS since the bootcamp. I understand very its pros and cons of using libraries as a beginner and not understand CSS throughly, because eventhough the libraries work just fine, many are flaws and duplicated and unecessary codes and logic happens. I'm quite happy to know that in my internship, we will be working with pure CSS, or just SASS. Although, we're still using a design library: Ant Design.

The first thing about pure CSS that I was instructed to learn, is the flexbox concept. Mind you, it's nothing new and fancy. I've heard about it many times but never really truly spend time to understand it. A quick note here from [CSS tricks] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) actually did not helped me much. I've tried using the Row and Column properties on my libraries, and they caused a lot of troubles, even when they're working. Every time I get a bug, I would just google a quick fix. Partly because the time was tense and I got no reason to dig deeper since things are working. For a long time, I couldn't tell the difference between justity-content and align-items properties. I can do CSS, but I am not confident in it as I don't know why, when, and how sometimes my CSS doesn't work the way it supposed to be. Not just I understand clearly how and when to use justify-content vs. align-items vs. self-align vs. flex-direction vs. flex-flow, I can always go back to the game, which is really simple and will get the complicated concept right away, instead of reading bare text which doesn't make sense to me.

Now that I only spent 15 minutes playing this [Flexbox game](https://flexboxfroggy.com/), I regret not knowing this sooner, and very much appreciate that my internship introduced me to learn about Flex box more throughly. As I am feeling more confident about CSS after this small game, I really encourage everyone to try it, the sooner you understand flexbox, the easier for you to code and debug CSS, because, you know, sometimes Google and Stack Over Flow gives you a shallow solutions but not teaching you the core issues that might cause more troubles as you go on :)
SameSite Cookie Header and Google Login
Published: 2020-08-30 03:29:08

---
title: SameSite Cookie Header and Google Login
published: true
description: Question about Login with Google and upcoming cookie changes in Chrome
tags: 
//cover_image: https://direct_url_to_image.jpg
---
I was recently experimenting with Login with Google for my own websites I develop, and came across this error (and change in the way Chrome handles cookies):

https://github.com/google/google-api-javascript-client/issues/561

From what I gather, soon Chrome will no longer accept cookies without this SameSite header. However, unless you disable this (via chrome://flags) in Chrome, right now, Login with Google doesn't seem to work.  

So, is Chrome configured by default to block cookies without that header, and Google's "Login with Google" API isn't sending them with this header?  Is that correct?  If so, what do developers need to do, if anything, or is this something only Google needs to change?

Thanks.  Been wondering about this for a few days now, and it's not 100% clear what's going on.
Fiber: a Super Minimal Hugo Blog Theme
Tags: showdev, hugo, theme
Published: 2020-08-30 02:03:21

---
title: "Fiber: a Super Minimal Hugo Blog Theme"
published: true
description: a hugo theme for the minimalists. apart from a nice blog section, it also supports a 'notes' section with all those bells and whistles
tags: showdev, hugo, theme, hugo
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/s4x2ylzqj05ban7flobm.png
---

Hello DEV community! I am here to brag about my recently launched Hugo theme!

In short, **Fiber** is a Hugo theme for the Minimalists. It features a Clean and Simple UI™. It also has a 'Notes' section so that you won't have to ditch nicely written notes from your personal website. It's your choice anyway.

## Features

1. Simple and Clean UI™
2. Shortcodes - Currently, it has two custom shortcodes. Both embed ASCIINema Casts and CanIUse data respectively into the page. (Of course, I plan to add more)
3. Code Highlighting
4. Click-to-copy Codes (maintains indentations)
5. Notes - Uses [rough-notations](https://roughnotation.com/) to spice things up
6. Most importantly; this theme just works, without throwing any errors!!!

## Screenshots

Check out some screenshots! Or you can check this [theme in action here](https://abdus.xyz)

![hugo theme fiber](https://dev-to-uploads.s3.amazonaws.com/i/0u3xptnvm96yhz2qwzpq.png)
![hugo theme fiber](https://dev-to-uploads.s3.amazonaws.com/i/6a83nfsuy6k1dujlds5l.png)
![hugo theme fiber](https://dev-to-uploads.s3.amazonaws.com/i/2asl8vhxt1y3h311350b.png)
![hugo theme fiber](https://dev-to-uploads.s3.amazonaws.com/i/8it9m85hup0g8loxawt3.png)
![hugo theme fiber](https://dev-to-uploads.s3.amazonaws.com/i/x2vgr8mn6sk72fgtlfov.png)
![hugo theme fiber](https://dev-to-uploads.s3.amazonaws.com/i/41i6gg2kpxujxuhzg9hh.png)

(_ignore those red lines at the bottom. they are coming from window manager_)

## How to Use

Since you made it up to here, I would assume you are interested in trying this theme out! Installation and Usage are documented in [Readme](https://github.com/abdus/hugo-theme-fiber).

It would be great if you **Star this [project on Github](https://github.com/abdus/hugo-theme-fiber)**. This step is completely optional though ;)

Have a good day!
A saga dos testes - parte 1
Published: 2020-08-30 02:51:54

Testes nunca foi algo do cotidiano de um programador e não faz muito tempo que começou a ser implementado, sempre foi da metodologia "roda e vê se funciona", mas imagina ter que testar um sistema longo, como um formulário? como por exemplo esse:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ndx88y6ajwldne2c3ftw.png)
Resources for learning about CRDT for realtime collaboration
Tags: crdt, systems, productivity
Published: 2020-08-30 02:32:40

---
title: Resources for learning about CRDT for realtime collaboration
published: true
description: Rather than try to replicate this tremendous content and sift it down to my own interpretation, here are some wonderfully written resources already out there
tags: [crdt,systems,productivity]
//cover_image: https://direct_url_to_image.jpg
---

I've been working on an article to help understand how CRDTs work in realtime collaborative editors. Unfortunately, this knowledge base is quite large and it would be far too much to try to sift down to a small blog post. Instead, I've compiled a few resources I've found to be quite helpful in learning more about CRDT and how to build realtime collaborative editors with this concept. I'm still working on that article and I'm working on making sure to combine that with my series on [Writing a Canvas Markdown Editor](https://dev.to/nyxtom/how-to-write-a-basic-markdown-editor-with-canvas-and-vanilla-javascript-5h95).

* [Data Laced With History](http://archagon.net/blog/2018/03/24/data-laced-with-history/)
* [Understanding Lamport Timestamps](https://towardsdatascience.com/understanding-lamport-timestamps-with-pythons-multiprocessing-library-12a6427881c6)
* [YJS: P2P Shared Data Types](https://github.com/yjs/yjs#Getting-Started)
* [Time, Clocks, and the Ordering of Events in Distributed Systems](https://lamport.azurewebsites.net/pubs/time-clocks.pdf)
* [Introduction to Conflict-Free Replicated Data Types](https://lars.hupel.info/topics/crdt/01-intro/)

Feel free to share additional resources!

Cheers 🍻