teleren/devto huggingface dataset:
How to support Apple's dynamic type in your web content with CSS
Tags: css, ios, a11y, webdev
Published: 2019-08-19 02:32:36

_UPDATE: December 2020_

_Now that Apple have rolled out these features to MacOS in Big Sur, think whether dynamic type is something you want on larger displays before applying the tricks below. A `@media` query may help to only qualify smaller displays, if you want to limit the trick to iPhones)_

_Original article..._

iOS has a great accessibility feature for scaling the device's text up (or down), but we usually only see it being used for native app content and interface elements.

However, there's actually a way to apply these user-defined font sizes to your web content too!

To get started, set your `html` element's `font` property to Apple's system font:

```css
html {
  font: -apple-system-body;
}
```

On its own, this snippet of CSS will enable dynamic text sizing, **but** it also enforces Apple's system font family too, which you may not want (and non-Apple devices will end up using a default serif font, unless you specify fallbacks in your font stack).

Thankfully, there's a way to use _just_ the dynamic text sizing feature, without overriding whatever font family you want to use on all devices.

First, we're gonna wrap that earlier example in a CSS [`@supports`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) conditional block, so it only targets Apple devices:

```css
@supports (font: -apple-system-body) {
  html {
    font: -apple-system-body;
  }
}
```

<p><small><em>If you've never seen <code>@supports</code> before, it's a feature supported in modern browsers that allows you to write conditional CSS, based on the browser's support for specific declarations (in this case, <code>font: -apple-system-body</code>).</em></small></p>

Then, you're free to specify your own `font-family`s and `rem`-based relative `font-size`s on descendant elements.


```css
body {
  font-family: Lobsters;
  /* or Papyrus / "Comic Sans MS" / any other objectively great font */
}

p {
  font-size: 1.25rem;
}
```

That's it! You should now be able to write more accessible websites for Apple devices, without degrading the appearance on other platforms.


Note: If you've already set a custom `rem` size in `px` on your `html` element, and want to maintain that on non-Apple devices, the `font` definition must be `!important`:

```css
body {
  font-size: 20px;
}

@supports (font: -apple-system-body) {
  html {
    font: -apple-system-body !important;
  }
}
```
NA to Amsterdam fo Cheap
Tags: airline, developer, travel
Published: 2019-08-19 02:13:06

---
title: NA to Amsterdam fo Cheap
published: true
description: Travel to Amsterdam for hella cheap
tags: airline, developer, travel
---
I'm travelling to Amsterdam and wanted to find the best flight for my wife and son to join me. What I found was pretty bonkers.

Round trip tickets for $625.00. I typically google the crap out of my potential conference trip time periods and try to find good deals up front and well in advanced.

For these tickets I knew that Iceland was a potential great layover geo wise. I got pretty lucky finding roundtrip ticket with IcelandAir from both Chicago and San Francisco.

Does anyone else have any amazingly cheap travel tips?
Best VS Code Python Extensions?
Tags: discuss, help
Published: 2019-08-19 00:49:37

---
title: Best VS Code Python Extensions?
published: true
description: What extensions do you use for VS Code and Python.
tags: #discuss, #help
---
Hi,
since doing my summer internship I've been converted from atom to VS Code for web dev. This newfound appreciation has led me to want to try to use VS Code for more than just HTML, CSS and JavaScript. Prior to this point I'd used Atom for web dev, Pycharm for Python, IntelliJ for Java and Visual Studio for any .net stuff.

I've recently been trying to use VS Code for Python, I have installed the official Microsoft Python extension but honestly I've found the bare-bones features lacking, one annoyance is that you don't appear to be able to call functions in the python terminal like you can in Pycharm, another is lack of live error checking. Also, the experience has been quite buggy thus far (running python file in terminal often doesn't work). What extensions/tips can those of you that use VS Code for Python suggest to improve my experience?
Thanks :grin:.
Creating a new library with Angular 6+
Tags: angular
Published: 2019-08-19 00:34:58

The directory structure for an Angular project changed in v6, so here's the process for creating a new library for Angular 6+:

    ~/Code$ ng new my-angular-library --create-application false

When creating a new Angular project this way, the Angular CLI will *not* generate any application files, just the base project workspace.

Then you do this:

    ~/Code$ cd my-angular-library
    ~/Code$ ng g library my-lib


The root directory, `my-angular-library`, can contain many projects which will be in the `projects` directory. The path to your new library will be `projects/my-lib`.

You can build the library by running `ng build` in the top-level workspace directory or in the `projects/my-lib` directory.
Get along with fzf for Terminal
Tags: productivity, terminal
Published: 2019-08-19 00:01:22

This is for my next Git post.
I started playing with `.gitconfig` and got known a great tool, fzf.
`fzf` can make things easy!!!

>fzf
fzf is a general-purpose command-line fuzzy finder. 
https://github.com/junegunn/fzf

In this post, I will show what we can do, how to install and a couple of usages.


## What We Can Do with fzf
In the following gif, I tried `history` first then I used `h | fzf` (`h` is an alias of `history`). As you can see, you can find out the command you want to see easily with fzf.
fzf allows us to use `git checkout` interactively like below.
In addition, you can customize commands with fzf and many people write scripts. In the bottom of this post, I put the link which is very useful for people who want to try `fzf`. You can also set shortcut keys.
  
![fzf](https://thepracticaldev.s3.amazonaws.com/i/cz7ei3oi68gisszlcdbk.gif)



![git_with_fzf](https://thepracticaldev.s3.amazonaws.com/i/03ha9cqhizgr7wdrx5x0.gif)


## Install
This post supports MacOS and Ubuntu since I have used both of them.

```zsh
# MacOS
$ brew install fzf

# Ubuntu
$ sudo apt-get install fzf
```

If you are using Windows, I highly recommend you to start using chocolatey(https://chocolatey.org/) which is a package manager software.


## Simple Usage

#### File search
I did this command in my Gatsby site folder and searched my components.
```
$ fzf
$ fzf --reverse
```
![file_search](https://thepracticaldev.s3.amazonaws.com/i/7nsi2kb26hdyu46n1qic.png)

#### History search
This is very useful to me since I usualy do `h | grep 'something'` for checking commands I typed before.
```
$ history | fzf
$ history | fzf --reverse
```
![history_search](https://thepracticaldev.s3.amazonaws.com/i/no9tmv6dyevociljunlw.png)

If you add `--reverse` you can change the layout like this(maybe better)
![history_reverse](https://thepracticaldev.s3.amazonaws.com/i/1pnu1wvagtxdcmuknp6x.png)

#### Open file with fzf
```
$ open $(fzf)
```
![open_file](https://thepracticaldev.s3.amazonaws.com/i/cv0oojr8xnlx1ikp0vpa.gif)

#### Update package with fzf
Sometimes I do typo then get an install error lol
```
$ brew upgrade $(brew outdated | fzf)
# Then choose a package. Probably user --multi.
```
![update_package](https://thepracticaldev.s3.amazonaws.com/i/xfcpm92tsz7nlyb0j6dz.png)

#### jq with API
This is not helpful, but if we need to check a big json return from API with `curl` command, this might be good ???
By the way, for `jq` you need to instal jq.
```
$ curl https://samples.openweathermap.org/data/2.5/weather\?lat\=35\&lon\=139\&appid\=b6907d289e10d714a6e88b30761fae22 | jq | fzf --reverse
```
![with_jq](https://thepracticaldev.s3.amazonaws.com/i/3e0nvv84o4447q7e3703.png)

## More Information
##### Examples
You can see more information here (https://github.com/junegunn/fzf/wiki/examples).


##### Key bindings for command-line
Suggestion from @vonheikemen
https://github.com/junegunn/fzf#key-bindings-for-command-line
11ty Markdown Attributes
Tags: eleventy, 11ty, jamstack, javascript
Published: 2019-10-05 08:17:57

---
title: 11ty Markdown Attributes
published: true
date: 2019-08-19 00:00:00 UTC
tags: eleventy, 11ty, jamstack, javascript 
canonical_url: 
---

I searched for a way to try and add attributes, such as class or id to markdown for a while. Using [11ty](https://www.11ty.io/) as my static site generator I've been using Nunjucks for templating and was able to add attributes in the that way. I was sure there must be a way of doing the same thing in Markdown. Luckily 11ty comes with a way of adding your own [library instance](https://www.11ty.io/docs/languages/markdown/#optional%3A-set-your-own-library-instance) to Markdown. The example show's how to use emoji plugin but I found [markdown-it-attrs](https://www.npmjs.com/package/markdown-it-attrs) plugin which suited my purpose. This is basically how I went about adding it to my project.

**Install libraries**

```
npm install --save-dev markdown-it markdown-it-attrs
```

These will give the required libraries for adding to the project and add them to the package.json

**Setup library instance** {.article-heading}  
Now we want to add the libraries for 11ty to pickup

_.eleventy.js_

```
module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("css");

  / ****************Markdown Plugins******************** /
  let markdownIt = require("markdown-it");
  var markdownItAttrs = require('markdown-it-attrs');
  let options = {
    html: true,
    breaks: true,
    linkify: true
  };
  let markdownLib = markdownIt(options).use(markdownItAttrs);
  eleventyConfig.setLibrary("md", markdownLib);

  return {
    passthroughFileCopy: true,
    dir: {
      input: ".",
      includes: "_includes",
      data: "_data",
      output: "_site"
    }

  };
  / ****************END Markdown Plugins******************** /
  return {
    passthroughFileCopy: true,
    dir: {
      input: ".",
      includes: "_includes",
      data: "_data",
      output: "_site"
    }

  };
};
```

**Example of Usage**

_[example.md](http://example.md/)_

```
---
title: Template
layout: layouts/base.njk
tags:
    - post    
navtitle: Template
date: 2019-09-05
---
# header {.style-me}
paragraph {data-toggle=modal}

another bit of data {.class #identifier attr=value attr2="spaced value"}
```
Meetups as a tool to break a creative block
Tags: community, node, javascript, writing
Published: 2019-08-19 14:39:55

---
title: Meetups as a tool to break a creative block
published: true
tags: Community, node, javascript, writing
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rvnywrobvtx6wtatltti.jpg
canonical_url: https://yiddish.ninja/meetups-as-a-tool-to-break-a-block/
---

This weekend I went to the [NodeSchool Seattle](https://nodeschool.io/seattle/) meetup. Did I need to learn Node.js? No. I’m not an expert, but I’m good enough for most tasks. Why I went was because I was blocked on what to do on weeks 4 and 5 of my Node class for kids at Seattle CoderDojo, where we’ll be building an interactive website. I needed to break out of my block.

I love conferences and meetups because I leave them energized. Being around a group of other devs who are all geeking out on the same topic somehow aligns the neurons of my brain in the right direction.

The main point of a Nodeschool meetup is for developers who are learning or leveling up on Node to be able to come together, work on any project from the Nodeschool menu, and have experienced developers on hand to help them get started and over hurdles… much like the “Hacker Room” at Seattle CoderDojo in recent years.

We started with a speaker on GraphQL, but that was elective. There were definitely some people who were into it, like my tablemate. But though the speaker had been part of the draw for me, that afternoon I just felt myself drawn to the testing lesson on the Nodeschool menu. So I followed it.

Now you might think that I was then inspired to create a testing section for my Node class. No. It wasn’t what I was studying, but the places it took me and the energy of the room. I started thinking about expanding the message wall we’d build with [Gravatars](https://www.gravatar.com) (because of Gravatars on some of the pages I went to looking for reference on the Nodeschool topic) and simple message threading (based on the snippets of discussion about GraphQL – though I won’t get *that* advanced with the kids).

Could I have done a Nodeschool lesson at home? Yes. Would it have put me in a room full of people trying to write code and build skills, in a room where someone was talking about the uses of GraphQL? Would working at home have put me in the same headspace? No.

Right now I’m in my home office, my 10 year old son reading on the couch, my dog napping at his feet, and my mechanical keyboard’s clacky clicks punctuating Paolo Conte’s gravel voice. But sometimes it’s good to go out and listen to a talk, be in an atmosphere of learning and exchanging ideas, change up the energy and the inputs, and see where it takes you.

And that’s just one of the many reasons I love meetups and conferences.
Rubber cable protector
Published: 2019-08-18 23:35:01

These heavy cable protectors not only are suitable for constructions areas or industries they also can be used in parking lots, warehouses, offices, houses, and more, they come in different reflective colors for you to choose from, they can also protect a hose if you work as a pool cleaner so you can work without worrying if someone has an accident or steps on your hoses. They also can protect pipes, in case they cannot go under the ground.
Meet The Board: Kyle Shevlin
Published: 2019-08-18 22:41:40

---
title: Meet The Board: Kyle Shevlin
published: true
description: 
tags: 
---

Kyle is a senior software engineer at Webflow, working to democratize software engineering through visual & no code development. He's the host of the [Second Career Devs](https://secondcareerdevs.com), a podcast devoted to telling the stories of people who switched careers to web development and the lessons they've learned along the way. He's also an instructor for [egghead.io](https://egghead.io) with courses ranging from Data Structures and Algorithms to Functional Programming in JavaScript. When he's not working, you can probably find him on the golf course, playing some video games, or enjoying some local craft beers in Portland, OR. You can find him on Twitter at [@kyleshevlin](https://twitter.com/kyleshevlin).


Kyle helps us at Vets Who Code with curriculum building and outreach into the javascript dev community. One of his first actions with us was sending a tweet that helped a veteran get a job in less than two weeks. Glad to have im on the team, even though his facial hair is no where close to military regulations.
React Bootstrap 4 Tutorial – Getting Started Reactstrap with React
Tags: bootstraptutorials, react, reactbootstrap, bootstrap4
Published: 2020-01-31 21:35:30

---
title: React Bootstrap 4 Tutorial – Getting Started Reactstrap with React
published: true
tags: Bootstrap Tutorials,React JS,React ,React Bootstrap , Bootstrap 4
canonical_url: https://www.positronx.io/react-bootstrap-tutorial-getting-started-reactstrap-with-react/
---

The post [React Bootstrap 4 Tutorial – Getting Started Reactstrap with React](https://www.positronx.io/react-bootstrap-tutorial-getting-started-reactstrap-with-react/) appeared first on [positronX.io](https://www.positronx.io).

In this **React Bootstrap tutorial** , we are going to look at **how to integrate Bootstrap 4 with React JS**. Bootstrap is a front-end UI framework, and It makes React developers life easy by offering a powerful grid (container, row and col) system and ready-made UI components to create beautiful user interfaces in less time.

[Click here to read more](https://www.positronx.io/react-bootstrap-tutorial-getting-started-reactstrap-with-react/)
Writing a simple Brainfuck interpreter in C#
Tags: csharp, brainfuck, interpreter
Published: 2019-08-18 21:11:17

---
title: Writing a simple Brainfuck interpreter in C#
published: true
description: This is still working in process :)
tags: csharp, brainfuck, interpreter
---

[GitHub](https://github.com/tingwei628/bfcs)

I heard [Brainfuck](https://en.wikipedia.org/wiki/Brainfuck) so many times, and decided to spend some time to work on a simple interpreter in C# . If you want to see how Brainfuck works, check out [brainfuck visualizer @fatiherikli](http://fatiherikli.github.io/brainfuck-visualizer). 

~~Here's one point to mention. When I tried to work on `Nested loop`, I used `Stack` (FILO) to memorize the position of bracket. It helped to order the bracket and navigate the exact position of bracket. Because I only tested the basic case like "Hello World" which was written in Brainfuck, I need to cover more test cases.~~


Next, I would try to validate the Brainfuck files. :)
Using strace for debugging, part 2
Tags: strace, debugging, linux
Published: 2021-01-02 21:49:57

---
title: Using strace for debugging, part 2
published: true
date: 2019-08-18 21:00:00 UTC
tags: [strace, debugging, linux]
canonical_url: https://ddanilov.me/using-strace-for-debugging-part-2/
---

This is the second post about debugging with strace.

In our solution, we have a process that runs another process.
The parent communicates with the child process via TCP socket.
In order to know whether the child is ready for communication the parent reads
its stdout and looks for the readiness indication string, e.g. "I'm ready".
Everything worked fine but suddenly my colleague and I started observing a strange behavior:
the child process was stuck after a while.

So I ran `strace -p 1666`, where 1666 is the child' id.
strace output:
<pre>
$sudo strace -p 25485
strace: Process 25485 attached
write(1, "Some important information...."..., 101
</pre>

The child process was trying to write something to
stdout(1 is the file descriptor of stdout) but was unable to do it!
I tried to reproduce the issue by running the process manually.
And to our surprise, the issue did not reproduce! So I started looking at the way our application was starting the process:

```python
cmd = ['./child.py']
handle = subprocess.Popen( cmd, stdout=subprocess.PIPE,
                           stderr = subprocess.STDOUT,
                           close_fds=True, shell=True)
wait_for_child_readiness(handle)
#do_some_real_work()
handle.wait()
```

It looked quite normal: Start a process and then forward stdout to stderr
and pipe both to the parent process. And then the parent process reads the output:

```python
def wait_for_child_readiness(proc_handle):
        last_stdout = ""
        while "CHILD IS READY" not in last_stdout :
                last_stdout = proc_handle.stdout.read(512)
                sys.stdout.write(last_stdout)
                sys.stdout.flush()
        sys.stdout.write("\nParent detected child's readiness!\n")
```

Then we read the output until we find the indication string.
But wait! The child process continues writing to stdout/stderr and the pipe continues sending
the output to the parent process. But the parent process does not read it.
And then pipe overflow happens and the child process cannot write anything to stdout!

The solution was to continue reading the output of the child process.
Hence once you start reading child process output don't stop doing that!;)

P.S. The way to know the pipe size on Linux is to check:
<pre>
$cat /proc/sys/fs/pipe-max-size
1048576
</pre>
The default value for this file is 1048576 (1 MiB)

<http://man7.org/linux/man-pages/man7/pipe.7.html>
Creating a basic console coin toss in C++ 
Published: 2019-08-18 20:54:28

This is a small program that will simulate a coin toss for however many times specified by the user. It randomly generates the numbers one and two. When the number generated is one it will display 'heads', and when the number generated is two it will display 'tails. Pretty simple. The expected output should look something like this:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/t1u7acr9mcm4d379qqrz.png)

First, let's ask the user how many coin tosses the user wants.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/f2cxebozxv6465r24w7r.png)


Now that we have a number, we know where to stop our loop! For each iteration, we're going to simulate a coin toss and log the result into the console. Let's make another function called coinToss that would 'toss the coin' to make our code a little neater.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7m5gqrmlicjwii4hkcxh.png)

This is where all the real action takes place. In the coinToss function, we're going to need a number that's either 1 or 2, so we're going to use rand() which will randomly generates a number for us. Set the range of the random numbers to only be between the 1 and 2. Don't forget that in order to use rand(), you'll also need to use srand(time(NULL)). Once we have a random number, we need to make sure that 1 will give us 'heads' and 2 will give us 'tails'.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mu27dhb56dukat7bf29m.png)

The program should randomly return a string of 'heads' or 'tails' until the number of coin tosses the user specified is reached. And that's all! You've just created a coin toss simulator. The whole program that was used looks like this:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hvfsfy1q0rt9ku2gnlav.png)
converting from decimals to binary in Python
Tags: python
Published: 2019-08-18 20:43:23

---
title: converting from decimals to binary in Python
published: true
description: 
tags: python
---

I started listening to this podcast

https://www.codenewbie.org/basecs/3

Which so far seems like a good podcast to listen to if you are starting to learn about Computer Science. Or just want a refresh.

While listening to the first episode I wondered ...

In Python how do you convert into hex or binary from a decimal number?

```python
a = 43
print(a)
# now binary
print(bin(a))
# now hex
print(hex(a))
```

The functions bin and hex will convert a number into a string representation for binary and hexadecimal.