teleren/devto huggingface dataset:
Mithril, unsual use...follow
Tags: mithril
Published: 2020-08-06 08:47:14

Following my previous post, a better sample 

```js
/* @jsx m */

const stream  = window.m.stream
const user = stream()
const started = stream(false)
started.map(x => x && m.redraw())

async  function fetchUser () {
  const data = await m.request("https://randomuser.me/api/")
  user(data.results[0])
  started(true)
}

function viewUser () {
  const ruser = user() 
  return (
    <div>
      <img src = {ruser.picture.medium} />           
      <h4>Hy {ruser.name.first}</h4>   
    </div>
  )
}

function Comp () {
  return (
    <div oninit = {fetchUser}> {
      started() ? viewUser() : <h4>fetching...</h4> }   
    </div>
  ) 
}

m.mount(document.body, { view : Comp })
```
You can test it here : [MithtrilExp](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4A9ACoABAAF+ADylYpEsQB00GoXGJSdAJxjYpUgLxSA7hDQATWhfxZ8Bo1i30dUgK5wY+s3rEhtgAFACU7mieOhj6jDYBLqFgGFC+EVHEsfGOGAAOIYqmAHxSigBk5Ur4hjb6GBbhGRoYcACeaNQmYF6dxBD0UmAwxNSEAKq+-uFSwBom2ro2GFkBDRgQuk6GAI5e8MQhaiAkxHlwiGJi9ba0WD5+jjBi+RDqIBkmD-ohy1k18C8UGIcGQAAYALqfQLZGA2EJBfYZVgaDQ9PoDNBSABuEBgFkmfikMzmWKkiyk+m+AW+M3mlJGXn0WKOZJMAB4bBBscV6SYORAsABzPT6LrmYBUqb4PIQajEJkwJ5crxYVhSMSlfna-l8-nswgAFmKAAk2rMpY9MDh8JB9DpWOyxEatVI9U6uTz6cjUWh0fLMVIAMJ3PLEsKzemGBXM4nuz1SejWTYBYDDUYTKasUqknUwuJwmYAfhxeIJUxmiCkBuN6bG1iF+CbTpdUnVJndYk9vLJPs0aCcWFovUOdmoqpE+AARrQbG0KLNS-ipFWQ1gw6wwpQaKHoH48FOMFOYOQqL5YAGPHgwYgwQBaADMAEZEA+AJxsDgga3cAjUOACDuwjMDwbAQlQUDWAA1ggKCcDgeBYJshD6NA25MuQPCnOclxiL0eRQY2dBYGISHECh0AyAATPgYL4IapHIahUCONY+D8NuxBtHkv5wNQqF5KI7Dwb+ZEUVAd5JFg6H6JhJzEGcFxXPhhH4MRjHkcxklBK41G0bRYhSexgFcTxeB8QJQngd+XB4AAskx0AAKLyHkbBAA)
React context to replace Redux?
Published: 2020-08-06 08:37:17

React context is being used extensively for sharing state between React components. If you want proof, just go to facebook.com and open the React developer tools to see for yourself.

So if Facebook is using it so much - it must be a good way to manage state, right? Well, it turns out that React Context has its drawbacks that even Facebook developers are aware of.

The main 2 challenges are:
1. Performance - unnecessary re-renders
2. Flexibility - coupling state with the component tree

## Performance
The first main challenge is performance. React Context doesn't allow us to use selectors and bailout of rendering. This makes it hard to reduce unnecessary renders and forces you to bend the architecture and reshape the providers all the time.

## Flexibility
Context Providers are tied to components on the tree. This means that having dependencies between them forces you to carefully design the order of providers. Also, you cannot shape them as a tree of dependencies, since they are all on the same lineage.

## The benefits
The main benefits of context are that it's a built-in mechanism inside React, which means it will naturally support concurrent mode and other changes by the React team. Also, since the state is eventually just a local component state (where the provider resides) - then you can manage it using hooks as you do for the local component state.

## Are selectors coming to Context?
The second characteristic is built-in to Context, but there is a light at the end of the tunnel for selectors.
There is currently an open RFC for Context selectors, and we can all hope that it gets accepted sometime soon:
https://github.com/reactjs/rfcs/pull/119

Found mistakes? Think otherwise? Please let me know in the comments section below.
Learn Javascript By Building Projects (for free!)
Tags: javascript, html, css, projects
Published: 2020-08-06 08:37:08

This week, I have just released a *free*, project based Javascript course.

[Fun Javascript Projects.com!](https://fun-javascript-projects.com)

The course is aimed at beginners, and currently included 6 projects to see how HTML, CSS and Javascript all fit together.

Although I do explain as we go, the intention is to just jump in and build things, to give beginners a portfolio of projects they can use, modify and reference in the future.

What will you build? Let's take a look.

### Project 1- Quick Tip (tip calculator)

![tip calculator image](https://dev-to-uploads.s3.amazonaws.com/i/3pwy7vg6afdibcm7a5dh.jpg)

<https://quick-tip.netlify.app/>

### Project 2- Running Tracker App

![running tracker project](https://dev-to-uploads.s3.amazonaws.com/i/nmtruvi27kiqoyvtrc5z.jpg)

<https://running-tracker.netlify.app/>

### Project 3- Guess The Number Game

![Guess the number game image](https://dev-to-uploads.s3.amazonaws.com/i/hoauahufabmyk7kbpgzp.jpg)

<https://guess-the-number-project.netlify.app/>

### Project 4- Number Match Game

![Number match game](https://dev-to-uploads.s3.amazonaws.com/i/mjhqmm7xfb2hwgpuobsd.jpg)

<https://number-match-game.netlify.app/>

### Project 5- Photo Effects App

![Photo effects image](https://dev-to-uploads.s3.amazonaws.com/i/2mo4u8yulpa6jkcndtdh.jpg)

<https://photo-effects-application.netlify.app/>

### Project 6- Music Player App

![Music player image](https://dev-to-uploads.s3.amazonaws.com/i/36h2qd6s5z8psjs0hzi8.jpg)

<https://music-player-project.netlify.app/>

This course is completely free, and the project can be taken at your own pace, in any order.

Hope you enjoy!
Bootstrap's media object, but collapsing
Tags: bootstrap4, mediaobject
Published: 2020-08-06 08:28:34

---
title: Bootstrap's media object, but collapsing
published: true
description: Combining media object with Bootstrap 4's display classes, to allow media object to collapse at smaller breakpoints.
tags: Bootstrap4, MediaObject
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/u0dodeeh59ng21juo48m.jpg
---

<small>Image above by <a href="https://www.instagram.com/theautismcafe/">Eileen Lamb</a></small>

I love [Nicole Sullivan's Media Object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) (ten years old this year - happy birthday, Media Object!). It's changed a lot since then and on my current sites, I'm using [the variant from Bootstrap 4](https://getbootstrap.com/docs/4.0/layout/media-object/).

However, Media Object has a problem: it doesn't care if you have enough space to display the image and the `media-body` next to each other or not. If the display gets really, wee, it's just going to crush everything up.

Today I realised that [Bootstrap 4's display classes](https://getbootstrap.com/docs/4.0/utilities/display/) are the solution. Lemmy take you through it.

By default, Media Object in Bootstrap 4 required the following structure:

```html
<div class="media">
  <p class="mr-2"><img src="myimage.jpg" alt=""></p>
  <div class="media-body">
    <h2>Heading</h2>
    <p>Copy</p>
  </div>
</div>
```

This particular version of Media Object uses `flex` for layout, which gives us all kinds of possibilities for positioning the blocks next to each other, or even swapping the order. However, this is all dependent on the `.media` element having the declaration `display: flex`.

## You want the `d`

Bootstrap's `d` classes allow you to switch the `display` property of an element by breakpoint, starting at the smallest and cascading to the largest breakpoint. For example:

```html
<p class="d-none">
  This won't display at all
</p>
<p class="d-none d-sm-block">
  This appears at <code>sm</code> and larger
</p>
<p class="d-none d-md-block">
  This appears at <code>md</code> and larger
</p>
<p class="d-none d-lg-block">
  This appears at <code>lg</code> and larger
</p>
```

But it doesn't just switch between `block` and `none`. Here's the other values you can apply:

- `none`
- `inline`
- `inline-block`
- `block`
- `table`
- `table-cell`
- `table-row`
- `flex` <-- <small>foreshadowing</small>
- `inline-flex`

Given that, here's how I'm using the `d` classes in conjunction with Media Object, so it collapses on smaller breakpoints (look at the classes on the `.media` element):

```html
<div class="media d-block d-md-flex">
  <p class="mr-2"><img src="myimage.jpg" alt=""></p>
  <div class="media-body">
    <h2>Heading</h2>
    <p>Copy</p>
  </div>
</div>
```

At smaller breakpoints, none of the flexbox rules applied to the children of `media` work, because their parent is `display: block`. However, flexbox kicks in again at the medium (and above) breakpoint.

Hopefully this pattern is useful to someone.
TIL Tuples vs Arrays in Crystal
Tags: crystal, todayilearned, beginners
Published: 2020-08-06 08:26:25

Today I played around with Crystal... the programming language (🥁 _ba-dum-tss_).

Coming from Ruby, Crystal isn't a mystery in many cases, but in the end, I don't know much about it at all.

However, I learned something about Tuples and Arrays today.

---

It starts simple with a class that takes a `String` as an argument.

```crystal
class TupleVsArray
  def initialize(@text : String)
    puts "Text: #{@text}"
  end
end
```

---

Now let's decomposit an array into two variables, and then pass the first variable, `foo`, into the class:

```crystal
foo, bar = ["foo", "bar"]
TupleVsArray.new(foo)     # Text: foo
```

This works fine.
All elements in the array are of type `String`.
It compiles, it runs!

---

Let's change the second element in the array into a `Symbol`:

```crystal
foo, bar = ["foo", :bar]
TupleVsArray.new(foo)
```

This fails during compiling with this error:

```
Error: no overload matches 'TupleVsArray.new' with type (String | Symbol)
```

To me, having little to 0 experience with type checking, this is fascinating... and confusing, because `foo` is allegedly _never_ going to be a `Symbol`. Allegedly...

Then I realized that the array _could_ be changed in the meantime, for example:

```crystal
row = ["foo", :bar]
row[0] = :foo
foo, bar = row
TupleVsArray.new(foo)

# Error: no overload matches 'TupleVsArray.new' with type (String | Symbol)
```

This time, the error makes absolutely sense.

---

Then I also learned, that in Crystal we cannot change an array's element to an _not-yet-existing type_:

```crystal
row = ["foo", :bar]
row[0] = 42
Error: no overload matches 'Array(String | Symbol)#[]=' with types Int32, Int32
```

If we want to change any element in `row`, we must only use `String` or `Symbol`.

---

So, in order to resolve the original problem, we need to use a [Tuple](https://crystal-lang.org/api/Tuple.html), which is a

> [...] fixed-size, immutable, stack-allocated sequence of values of **possibly different types**.

```crystal
foo, bar = {"foo", :bar}
TupleVsArray.new(foo)     # Text: foo
```

Alright, got it. 😊

(Photo by [Cristofer Jeschke](https://unsplash.com/@cristofer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/forest-fog?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText))
Support for multiple URLs in Webhook Notification Channel
Tags: webhook, productivity, monitoring
Published: 2020-08-06 08:15:18

Hi, I'm Valerio CTO at Inspector.

As integration becomes increasingly central to the way that our customers automate their internal process, we have recently released a new feature for our Webhook Notification Channel.

## Before

Before this product upgrade you could configure the URL of the external system to which you wanted to send the notifications.

![Standard webhook](https://dev-to-uploads.s3.amazonaws.com/i/yx27vlndvr7u1xlharkf.png)

The URL will receive notification in form of an http POST request with a specific headers and body based on the type of event detected.

## What you can do now

Now you can assign multiple URLs to the same Webhook Channel, as shown in the image below:

![Inspector webhook](https://dev-to-uploads.s3.amazonaws.com/i/xtf6tqhia2xv2qxcydrz.png)

Inspector will send the same http POST request to all external URLs attached to the channel.

## Try it now

We hope you enjoy using Webhook Channel and save some precious time that you can spend on debugging or writing new code. You can check out our docs to learn more about our [Notification Channel](https://docs.inspector.dev/notifications).
The Techno Grind - Newsletter June 2020
Tags: newsletter, queppelin, technews, latestnews
Published: 2020-08-06 08:14:14

At Queppelin, we have a vision that the lack of frequent meetings should not be an obstacle for businesses. Our GatherInVR is a platform for VR meetings and conferences that can be customised for any business or company very easily. Download Now: https://queppelin.com/wp-content/uploads/2020/08/queppelin-newsletter-june-2020.pdf
How to Use Puppeteer to Extract Code Coverage Data From Chrome Dev Tools
Tags: node, css, question
Published: 2020-08-06 07:42:21

Hello,

I was referring to https://www.philkrie.me/2018/07/04/extracting-coverage.html

This tutorial seems working fine, indeed the only tutorial I found working as per my requirement.

I guess this post is a little outdated; I am sorry if it is not.

I am trying to generate unused CSS for my WordPress website that using builder tools like Elementor or Divi.

Currently, the output is minimal and breaking my website styles.

Do we have any way to open the GUI of the browser, and then I interact with the pages like scrolling, opening the pop-up, and adjusting the viewport so that we can let the coverage tool make it more accurate?

Then the Node script do rest of the things?

If yes, please help me with updated code.

If that is not possible or not an easier solution, I wish to know a working way to convert/parse the Coverage-xxxxx.json file to CSS file where it only holds used CSS. I tried most of the available threads and forums, but no luck.

Thank you so much.
My Second Brain (Zettelkasten) - Foam vs Obsidian
Tags: webdev, productivity, vscode, writing
Published: 2020-08-06 08:13:28

---
title: My Second Brain (Zettelkasten) - Foam vs Obsidian
published: true
description: 
tags: webdev, productivity, vscode, writing 
canonical_url: https://lbry.tv/@spences10:8/My-Second-Brain-(Zettelkasten)---Foam-vs-Obsidian:c
#cover_image: https://dev-to-uploads.s3.amazonaws.com/i/16z2ix8ynw8wpa4r1vou.png
---

Discussing how I take my notes and answering some questions relating to why I prefer using VSCode with extensions over a dedicated app like Obsidian.

Foam: https://foambubble.github.io/foam/

Obsidian: https://obsidian.md

---
Follow me on:

📃 Website: https://scottspence.com
🐦 Twitter: https://twitter.com/spences10
💼 LinkedIn: https://linkedin.com/in/spences10
🐙 GitHub: https://github.com/spences10
👨‍💻 Dev.to: https://dev.to/spences10
They're still talking COBOL
Tags: cobol, legacy
Published: 2020-08-06 08:09:18

[COBOL Language: Call It A Comeback?](https://www.forbes.com/sites/tomtaulli/2020/07/13/cobol-language-call-it-a-comeback/#4df9760c7d0f) written by Tom Taulli at Forbes.com.

> OK then, so might there be a boom in COBOL hiring? It does seem likely. And it could last awhile. 

And a recent release from FairCom, [COBOL modernization is real and it works](https://www.faircom.com/insights/cobol-modernization-is-real-and-it-works). This refers to "[Survey Results Illustrate Modernization as the Preferred Method of Digital Transformation and COBOL’s Enduring Value Among Organizations](https://www.microfocus.com/en-us/press-room/press-releases/2020/micro-focus-survey-finds-cobol-modernization-at-center-of-strategic-business-change)" from MicroFocus.
Mithril, an unusual use ...
Tags: mithril
Published: 2020-08-06 08:08:24

In this sample, just for experiment, i have include in the mix :
 
 - streams
 - jsx
 - pure functional component

```js
/* @jsx m */
const stream  = window.m.stream

const started = stream(false)
started.map(x => x && m.redraw())

async function sleep(ms) {
   await new Promise(function(resolve) {
    setTimeout(resolve, ms)
  })
}

async  function fetchApi () {
  await sleep(2000)
  started(true)
}

function Comp () {
  return (
    <div oninit = {fetchApi}> {
      started() ? <h2>App started</h2> : <h4>waiting..</h4> }
    </div>
  )
}

m.mount(document.body, { view : Comp })
```
You can test it here : [MithrilExp](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4A9ACoABAAF+ADylYpEsQB00QuMSnaATjGxSpAXikB3CGgAmtc-iz59hrBo1ad2jHsbXTu4gNsAAowDCg4GABKDS8fGGsHDAAHYMUTAD4pRQAyHKV8A2s9DHNgqJi0DQw4AE9NKTAAV01iCHpdWBhUrDgoqWANYylSjAgdNBhzKQAFPVosCEjQluo2+mCDOFooADdogaHhyOIAFQgcWibiTfgd-YolPqPWStY3TDqGxtX1tEaYMRqIQAILJCBScqHf4jcxjTxdVIAJgADGjKsY4r5goEmtENO8qmhmq12v8AMILZKQ-qDGEGYhNPT-YJHYwAHmsEF2UnoVnGJmAYEBwLBEFYWTpw2OxG82P6AH4pOzCEiMmDqViEuyxKqsohlYQACwZOHjKwAc3w+B1xqyhOlOq5uwyRzeH0cWCuDGCtmoTRwDHwACNaNZao9gFJdhAplIDZSsNTXpQaFToDA9HhgxhgzByFRIrA1mSEDwkQBWRAAZhRbA4IEwODw+GocAEaeEzB4bAAulQoFYANZl1CNrh4RbEQh6aCppnkHgkYjJOCIMRiFrJIdWuhYMRTmfQGRI-Ao-BGg-jI9QBxWfD8VPEWrJbggODUWfJUTsTjNniHrOUAALTONg856IuIDLqu66bmg267gsV7TkBoGBC4J5nmeYhgY4j5UM+r54B+X4-v247-iAACy15AQAovIyRsEAA)
React Native - The Setup 
Tags: reactnative, setup
Published: 2020-08-06 08:06:59

#Setting up react native
I'll save the explanation for every tiny detail in the setup.
Here is the link to the doc for the setting up:
[React Native Environment Setup](https://reactnative.dev/docs/environment-setup)

##Questions, Difficulties && Tips during the setup
### **1. What is the difference between EXPO CLI & React Native CLI? Problems I had with Expo.**

A CLI(command line interface)is a command-line program that accepts text input to execute operating system functions.

Expo is faster to setup and easier to share amongst people.
The downside is that expo is not able to use some native modules or APIs.

I started off with Expo, but when I was trying to use the vector Icons, I had to add some code in a file in the android folder which the project created via expo did not contain.

Apparently, modules that use react-native link is unavailable on an expo created project.
 
##### Reference [StackOverflow](https://stackoverflow.com/questions/54862388/what-is-the-difference-between-expo-cli-and-react-native-cli ) && [Documentation](https://docs.expo.io/introduction/why-not-expo/)

### **2. The environmental variable - Android_Home**

For anyone out there that doesn't know where to find the sdk file on a windows device (Shamefully raising my hand)
Here's how:
1. Go to your C disk and click on the Users folder and open your user folder.
2. According to the react-native doc we need to look for the AppData folder. Someone suggested changing the option for the window to show hidden files, but the easiest method is to click the navigation bar two times and add a "/AppData" so it should look something like this "C:\Users\[yourUser]\AppData".
3. Continue down to ".\Local\Android" and there you have it.

After adding the variable, you can use:
"Get-ChildItem -Path Env:\" 
in the PowerShell to check whether it has been successfully added.

### 3. **React Bootstrap is unusable**
I wasted the biggest chunk of my time trying to figure out how to get React Bootstrap to work in the native app. Because of using react-bootstrap for almost two months, I was hoping to be able to use it but sadly, I was unable to make it work. 
Although bootstrap is unavailable, react-native has components that we can use that are similar to react-bootstrap. [Native Base](https://docs.nativebase.io/docs/GetStarted.html) is what I continued to work with. After playing around with Native Base, I found that [React-native](https://reactnative.dev/docs/components-and-apis) itself also had interesting components too. 

### **Next Blog: After I finish up the project**
What is Your Expectation for an IDE? 
Published: 2020-08-06 08:06:48



The integrated development environment (IDE) software plays an important role in embedded development, it can reduce repetitive work, minimize the difficulty of project development, improve work efficiency both in speed and quality, and accelerate the overall product development process.

What are your requirements for an IDE? 

Please share your ideas of IDE or your expectation for an IDE on this post.
Updating your LinkedIn part2
Published: 2020-08-06 07:57:35

  In this article Im going to present tips about how to present some of the important parts of your LinkedIn profile (for the general tips on how to edit your whole profile please read my previous article [Updating your LinkedIn part1](https://dev.to/olenadrugalya/updating-your-linkedin-ok4)).

##HEADLINE
Here is some strategy you can follow while writing your Headline:
- you are going after job role you want or already have
- use your market analyses keywords (to get keywords, you need to analyse 5-10 similar positions and write down 10-20 frequently used words - that's how i did that :)
- make it eye-catching and intriguing
- should be no more than 120 characters

Headline Formula could be like this (example):
1. Desired role or title:
   - Frontend Developer
2. What you will do in keywords:
  - CSS, HTML, JavaScript, React, Angular
3. What are you looking for:
  - Seeking entry level position in Boston
4. Optional
  - use compelling numbers (ex. generated over $100m with my 
    software)

##SUMMARY
Here is some strategy you can follow while writing your Summary:
- update with your resume
- should be no more than 75 characters
- add symbols (you can find comprehensive list of symbols to copy and paste anywhere in your profile - use them!)
- add media (to profile, experience, education)

#EDUCATION
- bootcamps/ courses/ other:
  * write summary
  * mention skills learned
  * add links to projects

##SKILLS
- its important to have skills listed (pick up top 3)
- ask people to endorse your skills at least at the beginning
- good to have 10-15 skills listed

#ADD MORE
Always add more to your profile! :
- languages
- certifications
- accomplishments
- volunteer work etc.
Get involved in Open Source - interview with WordPress
Tags: github, opensource, wordpress
Published: 2020-08-06 07:55:35

You might have seen our [GitHub Twitch channel](https://twitch.tv/GitHub) has been a lot more active. We've been running a bunch of fun sessions and you won't want to miss out. Recently, we spoke to Gary Pendergast from WordPress. Here's a peak at what we chatted about.

## WordPress and React

Gary has been working on WordPress for years as one of their core contributors and maintainers. We wanted to chat with Gary to find out more in particular about [Gutenberg](https://github.com/WordPress/gutenberg). It's the WordPress block-based editor. And it's been powering WordPress' post editor since WordPress 5.0. That's since 2018! Gutenberg is built on top of React, which is built on Facebook's React library. So everything you read here is open source. Which makes it awesome!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xgo2d7rjjphsjecagwwg.jpg)
<figcaption>Image: Blog Pros</figcaption>

## Interview with Gary

When we spoke with Gary we wanted to find out what it takes to get contributors to a project. If you have a new open source project, how do you attract good developers and great talent? Gary talked us through the WordPress Foundation and some of the projects on WordPress Foundation.

We had the chance to chat about streaming, and a new type of working from home. One of our favourite comments from the interview was around looking good. Gary says he will "wear a suit to look good, not as a daily uniform". Working from home means you can wear whatever you like! LEGO even gets a mention in the interview and lots of other amazing content.

## Don't miss out on the next live stream

If you missed the interview, keep an eye out on [GitHub's YouTube Channel](https://www.youtube.com/c/GitHub/). Be sure not to miss out on the next Open Source Friday stream. We'll be live on the [GitHub Twitch channel](https://twitch.tv/GitHub). Streams run 2pm Friday AEST for the APAC viewers and 9.30am Friday PT for those in the States.