teleren/devto huggingface dataset:
Stacking Context (CSS layouts)
Tags: css, webdev
Published: 2020-08-18 04:11:00

So far we have talked about positioning in the 2D plane. It is also possible to specify coordinates along a 3rd direction - the z-direction- which determines which box will be rendered on top in case of overlap.

And just like formatting context in the x-y plane, we have stacking context along the z-axis which determines the layout in the z-direction.

I mentioned that by default the layout is such that there is no overlap - in the x-y direction. There is, however, an overlap in the z-direction - children are stacked on top of parents

{% codepen https://codepen.io/poulamic/pen/gOPyPGL default-tab=result %}

The deeper the element in the nesting, the higher up it appears.

Positioning & Floats impacts an elements position in the stacking context.

When the z-index property is not declared on any element, elements are stacked in the following order (from bottom to top):
1. The background and borders of the element
2. Descendant non-positioned blocks, in order of appearance in the HTML
3. Descendant positioned elements, in order of appearance in the HTML

A positioned element with a z-index creates a new stacking context.

# z-index
z-index is how we explicitly specify the stacking order of an element. This is another CSS property which seems so simple - elements with a higher z-index value are displayed in front of those with a lower z-index value. That's it.

Well, not actually. The main thing to understand is that **z-index is not a global property - it is scoped within its own stacking context**.

Every stacking context has a single HTML element as its root element. And the z-index of an element confined to a stacking context is set relative to that element.

Elements of 2 different stacking contexts cannot intermix. No matter how high the z-index an element cannot be placed on top of an element whose containing stacking order is higher.

That sounds too complex- we will consider with a different example. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bpqsrwml4sy446yyddc9.jpg)
For analogy, consider this organization of books in a shelf - we can re-organize the books in each drawer, but never can a book in the blue layer appear above books in the orange layer, or below books in the pink layer. We need to change the order of the drawers in order to do that.

# Watch out for

- **Position:** z-index only works on positioned elements (i.e. non-static elements)
- **Stacking context created:** New stacking contexts are created by opacity, transforms, filters
- **Pseudo elements:** Pseudo-elements are treated as descendants of their associated element. To position a pseudo-element below its parent, you have to create a new stacking context to change the default stacking order.
What is static web hosting?
Tags: tutorial, webdev, jamstack
Published: 2020-08-19 12:07:11

---
title: What is static web hosting?
description: "Jamstack 101"
published: true
date: 2020-08-18 02:00:00 UTC
tags: tutorial,webdev,jamstack
canonical_url: https://katiekodes.com/what-is-static-web-hosting/
---

Long before becoming a programmer, I had a personal web site. I was definitely already a _nerd_.

Let’s say it was at `http://www.BestKatie.com`.

I didn’t make it with a site builder like Squarespace or Wix.

## How it worked then

Instead, a family member owned a computer connected to the internet 24/7. This computer continuously ran software that transformed it into a “web server.”

My relative put a folder called “`katie`” onto the computer and configured the computer to associate files in folder with the domain `BestKatie.com`.

> He told me to create more folders inside `katie` and and to upload `.html`-typed files into them so as to **make them visible over the internet**.

Each `.html` became a “web page” with its own [URL](https://en.wikipedia.org/wiki/URL). For example:

- `/katie/index.html` became `http://www.BestKatie.com`
- `/katie/bio/index.html` became `http://www.BestKatie.com/bio`

## How it works today

[Static web hosting](https://en.wikipedia.org/wiki/Static_web_page) is surprisingly familiar to that basement-closet web server.

The file-uploading protocol has changed a bit – now it’s [Git](https://dev.to/katiekodes/git-brain-dump-nlc)-based.

What’s [**really** changed](https://stackingthebricks.com/how-blogs-broke-the-web/) is the elimination of the need to hand-write each `.html` file like I used to do with `BestKatie.com`.

Never again, please!

Static sites are typically recognized to be a lot faster and more secure than [dynamic sites](https://en.wikipedia.org/wiki/Dynamic_web_page), so I still want all those advantages.

## Next steps

[Read my next post about how I used a **static site generator** to build **KatieKodes**.com more efficiently](https://dev.to/katiekodes/what-is-a-static-site-generator-350o).

{% link https://dev.to/katiekodes/what-is-a-static-site-generator-350o %}

## Additional resources

- Jason Lengstorf and Bryan Robinson give a great “TL;DR” about static sites “[from 13:33 to 17:39 of the Create a Plugin for 11ty](https://www.youtube.com/watch?v=aO-NFFKjnnE&start=813)” episode of Learn With Jason.  _(If you prefer to read it, expand “Read the transcript” on the [episode page](https://www.learnwithjason.dev/create-a-plugin-for-11ty) and from “let’s talk a little bit about what static site generators are in the abstract” through “This is where you and I diverge.”)_
Formatting Context (CSS layouts)
Tags: css, webdev
Published: 2020-08-18 03:59:32

We have talked about how some elements are removed from the normal flow due to absolute positioning, floats, etc. What happens to the flow of their nested/ descendant elements?


Well, the out-of-flow elements establishes a new flow for the layout of its child elements. That establishes a new independent **formatting context** - a formatting context is an area in which descendant boxes are laid out according to specific rules.

Everything on a page is **part of a formatting context**. The root element establishes a block formatting context where boxes are laid out according to the block-and-inline layout rules. Out-of-flow elements creates a new formatting context.

# Watch out for:

- **New formatting context creation:** Overflow anything other than visible, elements with display: inline-block, grid items create new block formatting context

- **Margin-collapsing:** margins do not collapse across formatting context boundaries

- **Floats:** An element that establishes a new block formatting context will contain internal floats and exclude external floats.

{% codepen https://codepen.io/poulamic/pen/VweNvoJ default-tab=result %}
Access DOM element in a child component in React
Tags: react, dom, javascript
Published: 2020-08-18 03:56:26

Sometimes we need access to a DOM element which is contained by another React component. If we try to just use [ref](https://reactjs.org/docs/refs-and-the-dom.html) and pass it to the child component, we get an error.

```jsx
function ChildComponent(props) {
  return <div ref={props.ref}>Hello there!</div>
}

export default function App() {
  const childRef = React.useRef()

  return (
    <div className="App">
      <ChildComponent ref={childRef} />
    </div>
  )
}
```

![Ref error](https://dev-to-uploads.s3.amazonaws.com/i/46btntzs74ujxneji314.png)

This is because ref is a reserved prop name so you can't pass it to a child component. Instead, we can use forwardRef when defining the child component.

```jsx
const ChildComponent = React.forwardRef((props, ref) => {
  return <div ref={ref}>Hello there!</div>
})

export default function App() {
  const childRef = React.useRef()

  useEffect(() => {
    console.log(childRef)
  }, [childRef])

  return (
    <div className="App">
      <ChildComponent ref={childRef} />
    </div>
  )
}
```

This is pretty nice, and if you're building a component library, probably the best way to allow your users to access DOM elements of the components.

There is also another way to solve the problem. We can just use a prop name which isn't reserved!

```jsx
function ChildComponent(props) {
  return <div ref={props.innerRef}>Hello there!</div>
}

export default function App() {
  const childRef = React.useRef()

  return (
    <div className="App">
      <ChildComponent innerRef={childRef} />
    </div>
  )
}
```

This works perfectly fine!

If you want to maintain a consistent API or you're developing a component library you probably should use [forwardRef](https://reactjs.org/docs/forwarding-refs.html) but if you're developing an app you could also just use another prop name.

Thanks for reading! :)
I made a spotify jukebox replica
Tags: webdev, 100daysofcode
Published: 2020-08-18 03:54:21

https://mofiy.herokuapp.com




1. Enter a song name into the search box and the app will generate songs that match the exact same beat tempo and pitch, even energy levels. 

2. Hit 'save playlist' this will import the playlist into your spotify account. 

3. Enjoy!
Containing Box (CSS layouts)
Tags: css, webdev
Published: 2020-08-18 03:52:35

In CSS, when we use percentages to specify sizes or positions are calculated based on the containing block of the element. By default (and in most cases), it is the element's parent element. It may change based on a few factors:
- For boxes with position: static, relative, static, the containing block is formed by the **content edge of the nearest block container ancestor** box.
- For boxes with position : absolute, the containing block is formed by the edge of the **padding box of the nearest ancestor element that has a position value other than static** (fixed, absolute, relative, or sticky)
- If the element has 'position: fixed', the containing block is established by the viewport

# Watch out for

- **Percentage base:** Percentage values are calculated based on containing block, NOT the element.
Margin, padding (horizontal & vertical) percentages are wrt width of containing block.
Top,bottom properties compute percentage values from the height of the containing block; left, right properties compute percentage values from the height of the containing block
{% codepen https://codepen.io/twhite96/pen/RwrOWxO default-tab=result %}

- For **absolute or fixed positioned elements**, the containing block may also be formed by the nearest ancestor element that has the following:
  1. A transform or perspective value other than none
  2. A will-change value of transform or perspective
  3. A filter value other than none or a will-change value of filter (only works on Firefox)
  4. A contain value of paint (e.g. contain: paint;)

  In this cases, the containing block is formed by **the edge of the padding box**.
Angular 10 Button Click Event Example
Published: 2020-08-19 10:16:29

---
title: Angular 10 Button Click Event Example
published: true
date: 2020-08-18 03:44:46 UTC
tags: 
canonical_url: https://www.itsolutionstuff.com/post/angular-10-call-component-function-on-button-click-exampleexample.html
---

In this quick example lets see angular 10 button call component function step by step explain angular 10 call component function on button click if you have question about angular 10 click event example then i will give simple example with solution youll learn angular 10 click event example y
Paralised
Published: 2020-08-18 03:42:43

Debugging Xcode! Hell over earth and a main threat to progress (with interesting discoveries in the end).

It took  a week to return and write after three days head breaking attempts to eliminate all xcode bugs.

Went down from 9000 errors to only 26, but it seems that we have basic fail that is out of reach.

For some reason the program is writing in c99 - I was happy to find out that is a twenty years old code language that apparently makes a lot of problems.

I already updated my iOS version to the max, which did not helped a lot.

Erased many unexpected and mostly unusual appearances of the word “Void”.

Auf Wiedersehen! (today’s goodbye is in German… you can guess why…)
Angular 10 Routing and Nested Routing Tutorial
Published: 2020-08-19 10:17:16

---
title: Angular 10 Routing and Nested Routing Tutorial
published: true
date: 2020-08-18 03:30:39 UTC
tags: 
canonical_url: https://www.itsolutionstuff.com/post/angular-10-router-and-nested-routes-tutorial-with-exampleexample.html
---

In this quick example lets see angular 10 routing example you will learn angular 10 nested route example This post will give you simple example of angular 10 routing example this example will help you nested routing in angular 10 So lets follow few step to create example of nested router out
Another way to inspect global variables
Tags: javascript, webdev, abtesting
Published: 2020-08-18 03:24:43

As a follow up to my earlier post on <a href="https://dev.to/cilly_boloe/how-to-inspect-unique-globals-js-bits-2i7i" target="_blank">how to inspect unique global vars</a>, this is another method I use when I want to search for existing code on a site.

```js
// First remove iframes to prevent cross-origin access errors
document.querySelectorAll('iframe').forEach(iframe => iframe.remove());

// Create cache array to save existing keys
let cache = [];

// Use JSON.stringify replacer fn to allowlist non-circular props
const globals = JSON.stringify(window, (key, value) => {

  if (typeof value === 'object' && value !== null) {
   
    // If circular reference found, discard key
    if (cache.indexOf(value) !== -1) return;

    // Store value in our collection
    cache.push(value);
  }

  return value;
});

// Collect garbage
cache = null; 

console.log(globals);
copy(globals); // Chrome's built-in method to add to clipboard
```

This code allows us to construct a stringified JSON map of all of the window's properties and subproperties. If using Chrome's console, the built-in <code>copy()</code> method will copy the stringified object to your clipboard. From here, I usually paste the code into <a href="https://beautifier.io/" target="_blank">beautifier.io</a> to make it easier to read:

<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1600924034/JS%20Bits/beautifier.io__1_wi2loj.png">

From there, I'll copy that beautified code into a normal text editor so that I can "Cmd/Ctrl + F" for values easier. The advantage of this method over the iframe way mentioned in my previous article is that this gives you an "at a glance" view of all the window's properties and so you can skim the list without having to toggle each object open in the console (the downside is that the window object might be huge depending on the site/page). You can also search for substring matches if you have an idea of what you're looking for with your code editor's search feature. 

<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1600924032/JS%20Bits/dev_to_output_1_irmyby.jpg">

Perusing the output on dev.to, I noticed something interesting. Apparently there's a <code>window.currentUser</code> object which includes my followed tags as a string and apparently JavaScript has a <b>hotness_score</b> of 9940541 🔥. It's over <i><b>9 million</b></i>! (<i>*breaks power scouter*</i>) 💥

----------
Check out more #JSBits at my blog, [jsbits-yo.com](http://jsbits-yo.com/). Or follow me on [Twitter](https://twitter.com/JS_Bits_Bill)!
Announcing async-raft v0.5.0: Rebased onto Tokio & Renamed to `async-raft`
Tags: rust, raft, distributedsystems
Published: 2020-08-18 03:07:53

---
title: Announcing async-raft v0.5.0: Rebased onto Tokio & Renamed to `async-raft`
published: true
description: 
tags: #rust, #rustlang, #raft, #distributedSystems
---

I am pleased to announce the release of `async-raft` `v0.5.0`.

The TLDR:
* Everything Is Now Based on Tokio
* Singular & Well Defined API (thanks to async/await, async_trait & tokio)
* Automatic Log Compaction
* Joint Consensus Overhaul
* Project Renamed to `async-raft` (was previously actix-raft)

For more info, here are the release notes https://github.com/async-raft/async-raft/releases/tag/v0.5.0
Accessibility Interview questions part 2
Tags: a11y, html, web, javascript
Published: 2020-08-18 02:58:39

---
title: Accessibility Interview questions part 2
published: true
description: This is a small guide for the accessibility interview
tags: a11y, html, web, javascript
//cover_image: https://direct_url_to_image.jpg
---

# Q1. What are the major screenreaders there are to test?
A: There are a few major screenreaders:

1) MAC OS - Voiceover (best with Safari)
2) Windows - JAWS, Narrator, NVDA,
3) LINUX - ORCA 
4) Chromevox - Chrome Browser


# Q2. We want to hide content from the screen readers how you will do?
A: There are a few ways through which we can hide the content from the screen readers:

1) Hiding images: aria-hidden="true" and `role="presentation"`.
2) To completely hide from the screen readers use `display:none`


# Q3. Is infinite scrolling accessibility friendly?
A: No, it is not accessible at all. We should have the data loading only on-demand such as on click of the button


# Q4. What is the shortcut key to activate and deactivate the screenreader (Voice over) on Mac

A: `fn + cmmd + F5` : To toggle the Voiceover

# Q5. What are the benefits of having regions or landmarks in your code?
A: VoiceOver users can navigate a page via Aria landmarks by choosing Landmarks in the Rotor. 

Such as headings, header, footer, main, etc.

For Mac here is the shortcut key to activate the Rotor:

`Control + Alt + U`

To Navigate the list of Landmarks:

`Left/Right Arrow`

To Navigate through the list of Landmarks:

`Up/Down Arrow`

Happy learning!!
A workaround for an RDP screen glitch issue on Parallels Desktop 16
Tags: vm, parallels, rdp, windows10
Published: 2020-08-18 02:46:13

I recently switched from VMWare Fusion to Parallels Desktop for running my Windows and Linux VMs.
VMWare Fusion was unstable - it runs VMs basically fine but often crashed while I was sleeping for some reason. It happened on both Windows and Linux VMs, which looked hard to solve.
So, I tried a free trial of Parallels Desktop and found that it works smoothly without any issue.

But I encountered a strange bug when connected to the Windows VM with Remote Desktop from my laptop.
As you can see above, the screen is glitched, seemed like a GPU issue which makes RDP practically useless.
It turns out that it is a bug introduced in Parallels Desktop 16.

* [Parallels 16 - Strange Graphic Problems with RDP on Win10 | Parallels Forums](https://forum.parallels.com/threads/parallels-16-strange-graphic-problems-with-rdp-on-win10.350565/)

A workaround is to add `video.metal=0` to the boot flag like so:

![Boot flag](https://dev-to-uploads.s3.amazonaws.com/i/16q50ugeq3ynx4hz6j9p.png)

But obviously, it disables the graphic hardware acceleration with macOS' Metal API.
Hope it will be soon fixed.

Anyway, Parallels Desktop is working very well on my mac.
Git remote? What is that?
Tags: git
Published: 2020-08-18 02:23:51

  Hi guys! This is my first one article (and I hope that this could be the first one of a series) about my dev trajectory.
Well, today I want to share with you something that I passed through and even after some time using git, I've never stopped to think about it: git remote.
Due to this quarantine time, I've got more free time and decided to put into practice an old desire: learning React. So, I followed the [tutorial](https://reactjs.org/tutorial/tutorial.html)  (which is very helpful for who wants to start) and didn't follow the good practices by doing all the tutorials without making anyone commit.
So here begins the start of my saga: I create the repository on GitHub and follow all steps to push my code, but in a moment of distraction did a mistyping and add a ~ in the end of the link and try to push... and get an error. Tried again, and got the same error. Omg, what I could've done to get this error? Search on the web and nothing seems to be the solution to my error. Fortunately, I talked to a friend and she told me: well, you can show me the git remote of this repo? Even without understanding very well, search the command to do this 
 `$ git remote -v` and finally could see: a simple hookie mistake, but get me so frustrated, almost giving up on pushing the code. So, after seeing the mistake, hit another command to fix the connection to the real repo: `$ git remote set-url origin git@hostname:USERNAME/REPOSITORY.git` and could push my code to GitHub.
Well, I hope that my mistake could help some new devs who are starting to learn about code versioning. So, maybe I come back here to share new stories. See ya!
Pixel Board - Change pixels using Github Issues!
Tags: actionshackathon, typescript, javascript, webdev
Published: 2020-08-18 02:11:09

This is my progress with my submission for the Github actions hackathon!

[LINK TO PIXEL BOARD](https://pixelboard.netlify.app/)

Feel free to click on a pixel and update its colour! At the moment the way of doing so isn't the greatest but I hope to have a colour picker or something similar to make it easier todo soon :)

---

### Background/Idea
Based around the infamous [r/place](https://en.wikipedia.org/wiki/Place_(Reddit)) from april fools a while back. Where users could click on pixels and choose to colour them however they liked. I wondered if I could achieve something similar using just GitHub actions along with some free hosting of some sort.

As you may of guessed this is one of the **Wacky Wildcards** submissions!

---

### What I've got so far:
- Pixel board responding to Issues
- A Pixel board site that can be rendered without any API requests and even without javascript enabled! (although it is a little slow)
- Clicking on the pixel board to raise an issue to change the colour of a pixel
- Seeing who was the last to modify a given pixel by hovering over them (Only when JS is enabled)

I've got a few more things I'd like to do but I thought this was a good chance to share my progress and get other people to play around with it!

Currently there is a very pristine looking DEV logo so go ahead and mess with it! Keep in mind it may take a minute or two from submitting the issue for your pixel to appear!
Python Zero to Hero - Ep.19 - Python type hinting
Tags: python, beginners, tutorial, type
Published: 2020-08-18 01:31:27

---
title:  Python Zero to Hero - Ep.19 - Python type hinting
published: true
description: Python is dynamically typed, which makes it very easy to learn for beginners. However, there are many reasons why we would like to annotate the type of variables in our code. In this episode, we will explore those scenarios and look at how type hinting works in Python.
tags: python, beginner, tutorial, type
---
Python is dynamically typed, which makes it very easy to learn for beginners. However, there are many reasons why we would like to annotate the type of variables in our code. In this episode, we will explore those scenarios and look at how type hinting works in Python. If you have any questions or any suggestions about which Python topics to cover, please leave your comment at my [Twitch channel](https://www.twitch.tv/cheukting_ho)

You can get the slide deck [here](https://slides.com/cheukting_ho) and the example code and homework form [GitHub here](https://github.com/Cheukting/python02hero). Ask questions at my [Twitch channel](https://www.twitch.tv/cheukting_ho)