teleren/devto huggingface dataset:
Flipped out over Flipper?!
Tags: flipper, canvas, components, zimjs
Published: 2020-12-15 20:52:38

A Flipper is a handy component!  You can try it out here: https://codepen.io/zimjs/pen/LYRxprK

Basically, it has a back and a front that can be any display object.  You press it and it flips.  The flip() method allows you to programmatically flip it or pass in true or false to flip on or off.  A flipped property tells you if it is flipped.  There is a "flip" event for when it starts to flip and a "flipped" event for when it is done flipping.

```javascript
STYLE = {borderColor:dark, borderWidth:2};
var front = frame.makeIcon().sca(2.5);
var back = new Page(front.width, front.height, blue, green, 1);
new Label("ZIM Flipper").center(back);
var card = new Flipper(front, back).center();
```

Here is a classic memory game done with a Flipper - it is inside the e-learning quiz app at https://zimjs.com/elearning/quiz.html

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cvhhmjnzyjg5nk60ixu3.jpg)

---

If you have not checked out the Canvas recently - you simply must!  Here is the [ZIM&nbsp;Dev&nbsp;Site](https://dev.zimjs.com) and some [In-depth&nbsp;Guides](https://drabstract.medium.com/) by Dr&nbsp;Abstract including [Your Guide to Coding Creativity on the Canvas](https://drabstract.medium.com/your-guide-to-coding-creativity-on-the-canvas-ada0996298f6).
From the editorial scrap heap
Tags: personal, writing, chaosengineering, disasterplanning
Published: 2021-01-08 23:22:45

---
title: From the editorial scrap heap
published: true
date: 2020-12-15 20:47:20 UTC
tags: Personal,Writing,chaosengineering,disasterplanning
canonical_url: https://heidiwaterhouse.com/2020/12/15/from-the-editorial-scrap-heap/?utm_source=rss&utm_medium=rss&utm_campaign=from-the-editorial-scrap-heap
---

Roughly a hundred years ago, I worked at a newspaper in my teens. It was a small-town paper, with a strangely hybrid tech stack. You typed your story into an Apple computer that had a monitor set on end, to be more vertical than horizontal. You printed the story out, then ran the print-out through a waxing machine, and used the physical paper to do the page layout, a process called [paste-up](https://creativepro.com/scanning-around-gene-throwing-away-pasteup-books/). I’ll write more about how that changed my writing in a bit, but I remember that there was always a drift of sticky scraps of paper, rejected words, on the floor.

 ![Monochrome image of someone's hands laying decorative tape between paste-up elements on a newspaper advertising page](https://heidiwaterhouse.com/wp-content/uploads/2020/12/pasteup-300x239.jpg)

Paste-up was its own art form

I’m writing an article for a magazine (I may have mentioned), and I wrote this paragraph in response to a question from the editor, but I marked it as “way too political” and then wrote a second, less-inflammatory paragraph for inclusion. But I liked this one, so here is a little scrap that smells of cheap paper and hot wax.

> In 2020, we got some excellent examples of how different approaches to planning, capacity management, and emergency response can make a real difference between a public-health problem and a slow-motion mass-casualty event. Countries that instituted early and rigorous lockdowns, quarantines, and payments have had lower Covid-19 transmission rates and deaths. Countries that had a scattered and laissez-faire response are still in an escalating crisis. Every country has been exposed to a novel virus with pandemic transmission, there has been no way to prevent that. However, the differences in responses have led very clearly to differences in outcomes. We also see that when it is crucial for the world to get a useful vaccine, it’s safer and more effective to invest in multiple branches of investigation in parallel than to put all our efforts into one attempt after another, serially. Pandemic is inevitable, responses to it change the fate of nations.
Is GraphQL a REST API?
Tags: discuss, webdev, graphql, rest
Published: 2020-12-15 20:42:19

Is it right to consider GraphQL API a specific form of a REST API?  What I read [here](https://www.rubrik.com/en/blog/technology/19/11/graphql-vs-rest-apis) and know about REST makes me think, yes, but I'd love to hear others' views on the topic.  This is not a query for is-one-better-than-the-other arguments.
Announcements from Werner Vogels Keynote at re:Invent 2020
Published: 2020-12-15 20:34:07

**AWS CloudShell** - Command line access to AWS resources and tools directly from a browser

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c9gfw8dg9u37wdz5m338.JPG)

https://aws.amazon.com/cloudshell/

https://aws.amazon.com/blogs/aws/aws-cloudshell-command-line-access-to-aws-resources/

**AWS Fault Injection Simulator** - Improve resiliency and performance with controlled chaos engineering

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4y7sfnyb0j5h2fleleda.JPG)

https://aws.amazon.com/fis/

https://aws.amazon.com/fis/features/

**Amazon Managed Service for Grafana** - Powerful, interactive data visualizations for builders, operators, and business leaders

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/matjksoar7dftorjdilw.JPG)

https://aws.amazon.com/grafana/

https://aws.amazon.com/about-aws/whats-new/2020/12/aws-announces-amazon-managed-service-for-grafana-in-preview/

https://aws.amazon.com/blogs/aws/announcing-amazon-managed-grafana-service-in-preview/

**Amazon Managed Service for Prometheus** - Highly available, secure, and managed monitoring for your containers

https://aws.amazon.com/prometheus/

https://aws.amazon.com/blogs/aws/join-the-preview-amazon-managed-service-for-prometheus-amp/

**AWS Distro for OpenTelemetry** - Secure, production-ready open source distribution with predictable performance

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nkt21db2m8brq065lhe5.JPG)

https://aws.amazon.com/otel/

https://aws.amazon.com/otel/faqs/

Werner Vogels quotes:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/99ll57ahhzqx283mbms3.JPG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/svzrox1dvp6g6r8rqhxc.JPG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r87lw6v3x7tawur8vem3.JPG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/za4546m7w0rv9vlx8l2f.JPG)
A tool to build, deploy, and release any environment using System Containers
Tags: showdev, devops, opensource
Published: 2020-12-15 20:32:51

Hi everyone - we've been using LXD system containers to ship applications and manage internal compute infrastructure since circa 2015. Over the last 12ish months, a couple of us on the team have put together a CLI tool to help us automate most of the build and deploy lifecycle and we've recently made it open source. We hope that the community finds it useful!

Code: https://github.com/bravetools/bravetools
Docs: https://bravetools.github.io/bravetools/
Live on Twitch: Q&A - How is Traffic Made? 12/15 @ 12pm PT
Tags: webdev, datascience, womenintech, wecoded
Published: 2020-12-15 20:18:13

Visit https://www.twitch.tv/tomtomdevs to learn all about how traffic is made! In this Q&A, we'll be discussing the inner workings of traffic, and how traffic data can help developers build innovative projects.

If you're a dev working with location tech or want to learn more about traffic data and how you can use it in your web or mobile apps, join us here! https://twitch.tv/tomtomdevs

Dev advocate Olivia Vahsen wrote a nifty recap here on DEV – check out it here: https://dev.to/tomtomdevs/twitch-recap-q-a-on-how-traffic-is-made-2fpm
Perfect guide React js learning path for 2021 
Published: 2020-12-15 20:09:29


Hello guys , in this post we are going to discuss about a very useful topic what is the perfect React js learning path in 2020. If you are a beginner are just going to start journey with a trending JavaScript Library called as React js, then it is the right place.

Topics going to cover
Let’s see what are the topics that we are going to cover in this post. First we will see what is React js. Then we will see what is the perfect roadmap to learn React efficiently.

What is React js
React js is a JavaScript library introduce by the facebook . ReactJS ia an open source JavaScript library used to develop User Interfaces. React JS is concerned with the component that utilizes the JavaScript with a HTML like syntax called JSX. It is a component based JavaScript library.

To learn more about React js checkout my previous post – Introduction to React

React js learning path
We are divided the roadmap or learning path in three sub-path. In first part we discuss the topics from where we will start our journey with React.js. Then we will see the Advance topics and last , we will discuss some eco systems of React js.

Fundamentals
To master the fundamentals , we should learn following topics –

*How to create a React app or How to initialize a React Project.
*What is a Component.
*Types of component such as – Functional Component and Class based component.
*JSX
*Props and State
*Conditional rendering
*List and key
*Lifecycle Methods
*Building some simple Forms

Advance
After complete above fundamentals topics, we should start learning these topics-
*Context API
*Higher Ordered Component
*Rendering Props
*Refs
*Error boundaries
*Making HTTP Request
*Some Hooks such as – useEffect , UseState , useRef , useMemo ,
Custom Hooks

EcoSystem
After complete above Advance topics, we should start learning these topics-
*State management – Redux or Mobx
*Styling – Styled component / Material UI /Tailwind CSS or *Reactstrap
*Routing – React Router
*Form – Formik
*Testing – JEST or React testing Library

Next Step
After completing above topics properly you can start learning these technologies-
*Gatsby
*Next.js
*React Native

Conclusion
So finally we have seen a complete learning path for React js. I hope now will master the React js.

Thank you.

Keep Coding , Keep Learning.
Made Windows QR Code Generator
Tags: python, devops, opensource, github
Published: 2020-12-15 19:56:18

Made Desktop QR Generator using Python Tkinter. It is using simple Tkinter, PIL, image-resize python libraries.

Any addition is always WELCOME!!

<a href="https://github.com/gauravsingh9356/python-applications" target="_blank">Link to Github</a>
SortArrayObjects() JS Function
Tags: codepen
Published: 2020-12-15 19:43:37

{% codepen https://codepen.io/orvilleChomer/pen/yLaMvLr %}

Add code to sort an array of objects sorting on 1 or more property values in ascending and/or descending order.

The code you need to add to perform your sort is as little as 1 line!
How to fix "macOS: xcrun: error: invalid active developer path, missing xcrun" error?
Tags: macos, terminal, commandlinetools
Published: 2020-12-15 19:17:36

---
title: How to fix "macOS: xcrun: error: invalid active developer path, missing xcrun" error?
published: true
description: 
tags: macOS, terminal, commandlinetools,
//cover_image: https://o9uz.dev/images/macos-xcrun-error-invalid-active-developer-path-missing-xcrun.jpg
canonical_url: https://o9uz.dev/posts/macos-xcrun-error-invalid-active-developer-path-missing-xcrun/
---
![macos-xcrun-error-invalid-active-developer-path-missing-xcrun](https://o9uz.dev/images/macos-xcrun-error-invalid-active-developer-path-missing-xcrun.jpg)

I ran into this error when I tried any `brew` operation (like `brew update` and `brew upgrade`) on a Mac. I had just upgraded to macOS Big Sur 11.1 and suddenly brew broke!

```bash
$ brew update

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools),
missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
```

The fix, luckily, is pretty straight forward. Install the Xcode toolkit! Even if you had it installed before, you might have to re-register it or update it to the latest version.

```bash
$ xcode-select --install
```

If that doesn’t work, force it to reset. You’ll need `sudo` access for this one.

```bash
$ sudo xcode-select --reset
```

If even that fails, go to the [Apple developer download section](https://developer.apple.com/download/more/) and download Xcode manually.
Day 14 of JavaScriptmas - Maximal Adjacent Difference Solution
Tags: 24daysofjavascriptmas, scrimba, javascript
Published: 2020-12-15 19:12:08

Day 14 is finding the highest adjacent difference.

If a given array `[2,4,1,0]` will has the highest adjacent difference is `3`.
If a given array `[2,9,1,0]` will has the highest adjacent difference is `8`

This is JavaScript solution
```javascript
function arrayMaximalAdjacentDifference(nums) {
    return Math.max(...nums.map((a,b) => Math.abs(a-b)));
}
```
Day 13 of JavaScriptmas - Extract Each Kth Solution
Tags: javascript, scrimba, 24daysofjavascriptmas
Published: 2020-12-15 19:10:01

Day 13 is removing the every Kth value from an array.

If an array with value `[1,2,3,4,5,6,7,8,9,10]` and the k is `3`.
It means when an array found a number 3 or the multiplication of 3 (such as 6), remove it from the array.
The result should be `[1,2,4,5,7,8,10]`.

This is the JavaScript solution
```javascript 
function extractEachKth(nums, index) {
   return nums.filter(num => num % index != 0);
}
```
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-12-15 18:55:44

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round-up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Tuesday, we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

### An IDE that opens up within a few seconds

@shahinsha shared a great Linux tutorial that utilizes Vim (in all its customizable glory) to build an IDE. If you need that extra push to try out Vim, this post will serve that up for you!

{% link https://dev.to/shahinsha/how-to-make-vim-a-python-ide-best-ide-for-python-23e1 %} 

### Make the web less dizzying

@eevajonnapanula shares how developers and designers can make the web more accessible for people who live with vertigo 

{% link https://dev.to/eevajonnapanula/you-make-my-head-spin-reducing-the-motion-on-web-328b %} 

### Want to move to TypeScript? Here's a solution.

@llldar explains how to migrate large projects to TypeScript in a way that doesn’t require you to rewrite everything in a short time.

{% link https://dev.to/llldar/migrate-to-typescript-the-advance-guide-1df6 %}

### Cheers to broadening your network ☕️  

@zahrakhadijha is kicking off an incredible journey: they plan to have a _virtual_ coffee with 52 people to help them broaden their horizons and find inspiration for their own path. Super cool!

{% link https://dev.to/zahrakhadijha/52-virtual-cups-of-coffee-a-developers-journey-for-navigating-uncertainties-2j01 %}

### Demystifying DOM

Understanding the Document Object Model (DOM) (a programming interface for HTML and XML documents) with @joshcarvel

{% link https://dev.to/joshcarvel/properly-understanding-the-dom-2cg0 %}

### AirDropping knowledge
@abdisalan_js breaks down a project by Robin Linus that impressed them, line-by-line: SnapDrop.net, which allows you to directly share files between any device with a browser. 

{% link https://dev.to/abdisalan_js/how-one-developer-recreated-airdrop-using-just-javascript-2403 %}

### Talk to yourself

@brendamichellle has some quick tips that will help you avoid the often futile process of memorizing information when you should be aiming for a more balanced and lasting approach.

{% link https://dev.to/brendamichellle/stop-memorizing-the-1-advice-i-wish-someone-would-have-told-me-5cnj %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
Day 12 of JavaScriptmas - Valid Time Solution
Tags: scrimba, 24daysofjavascriptmas, javascript
Published: 2020-12-15 19:07:42

Day 12 is checking the value of time. 

If the given value is `13:58` will gives `true` value as a valid time.
If the given value is `25:51` will gives `false` value as a not valid time.
If the given value is `02:76` will gives `false` value as a not valid time.

This is the JavaScript solution
```javascript
function validTime(str) {
    let [hour, min] = str.split(':').map(val => parseInt(val));
    let hoursMark = false, minsMark = false;
    
    if(hour >= 0 && hour < 24){
        hoursMark = true;
    } 
    if (min >= 0 && min < 60) {
        minsMark = true;
    }
    
    if(hoursMark && minsMark === true) {
        return true;
    } 
    else {
        return false;
    }
    
}

```
Day 11 of JavaScriptmas - Avoid Obstacles Solution
Tags: scrimba, javascript, 24daysofjavascriptmas
Published: 2020-12-15 19:05:48

Day 11 is finding the minimum missing number from the sequence of number

For instance, an array with `[5,3,6,7,9]`. 
So, the minimum missing number will be `4`.

This is JavaScript solution
```javascript
function avoidObstacles(nums) {
    
    // sorted input
    let sortedNums = nums.sort();
    
    // create sequence number from sortedNums value (min to max)
    let sequenceNum = [];
    for(let i = sortedNums[0]; i <= sortedNums[sortedNums.length - 1]; i++) {
        sequenceNum.push(i);
    }
    
    // find intersection that returns unmatch number between 2 arrays
    let intersection = sequenceNum.filter(el => sortedNums.indexOf(el) == -1);
    
    // find the minimum value of intersection
    let min = Math.min(...intersection);
    
    return min;
}
```
Day 10 of JavaScriptmas - Adjacent Elements Product Solution
Tags: scrimba, 24daysofjavascriptmas, javascript
Published: 2020-12-15 19:03:27

Day 10 is finding the biggest adjacent element of product in an array. 

For example an array `[3,6,-2,-5,7,3]` the output should be `21` because `7*3=21` is the biggest adjcent product in an array.

This is JavaScript solution
```javascript
function adjacentElementsProduct(nums) {
    
    let biggest = 0;
    
    for (let i = 0; i < nums.length; i++) {
        if(biggest < nums[i]*nums[i+1]) {
            biggest = nums[i]*nums[i+1];
        }        
    }

    return biggest;
}
```
Why You Don't Want to Use the S3 Referer Only Policy
Tags: aws, security
Published: 2020-12-15 19:02:50

When you have an S3 bucket configured as a static web site, S3 allows you to restrict access to the objects in the bucket only when the requests came from a particular referrer, using [a condition in the bucket policy](https://docs.aws.amazon.com/AmazonS3/latest/dev/example-bucket-policies.html#example-bucket-policies-use-case-4). For instance, in cases where you want visitors to get to some images only via links on your own web site.

Well, the problem is, the "referrer" comes in the HTTP request header, so a client can fake any referrer and easily bypass this condition.  For example, with curl, it's as easy as `--referer http://url.to.the.referer.page`.

I wish AWS would at least put up a warning next to the sample policy (linked to above), because it really just adds some false sense of security.
Day 9 of JavaScriptmas - Sum Odd Fibonacci Numbers Solution
Tags: scrimba, 24daysofjavascriptmas, javascript
Published: 2020-12-15 19:01:25

Day 9 is calculate the sum odd fibonacci number.

For instance, the fibonacci number of 10 will has a sequence of number from 1 to 10: `1,1,2,3,5,8`

But I want to calculate the odd number only: `1,1,3,5` the result will be `10`.

This is the JavaScript solution
```javascript
function sumOddFibonacciNumbers(num) {
     let limit = num,
        prev = 0, 
        current = 1, 
        next = 0, 
        totalOddNumber = 0;
        
    while(current <= limit) {
        next = prev + current;
        
        if(current % 2 === 1) {
            totalOddNumber += current;
        }
        
        prev = current;
        current = next;
    }
    
    return totalOddNumber;
}

```
Reuse Javascript code in Rails 6
Tags: rails, webpack, webdev, javascript
Published: 2020-12-15 18:58:43

DRY(Don't Repeat Yourself) is a basic principle in programming. This article provides a very trivial but useful way for rails developers to reuse their javascript code in multiple files.
The usual folder structure in a rails 6 app looks like
```
-app/
 |-assets/
 |-channels/
 |-controllers/
 |-helpers/
 |-javascript/
   |-packs/
     |-application.js
 |-...(and other folders)
```
If you have multiple javascript files in the `app/javascript/` folder and you want to reuse the code between these files
```
-app/
 |-javascript/
   |-packs/
     |-application.js
     |-first.js
     |-second.js
```
Consider
```javascript
// app/javascript/packs/first.js

const calculateArea = (params_here) => {
  // calculate and return area
}

const calculateVolume = (params_here) => {
  // calculate and return volume
}
```
now if you want to use the function `calculateArea` and `calculateVolume` in your `second.js` you can `export` these functions from `first.js` and then `import` them in `second.js`.
```javascript
// app/javascript/packs/first.js

const calculateArea = (params_here) => {
  // calculate and return area
}

const calculateVolume = (params_here) => {
  // calculate and return volume
}

export { calculateArea, calculateVolume };
```
and `import` them for re-use
```javascript
// app/javascript/packs/second.js

import { calculateArea, calculateVolume } from './first';
// now you can use the imported consts/variables/functions in this file
```
### Bonus
To include your custom javascript code into `application.js` pack, considering you've `app/javascript/packs/first.js` and `app/javascript/packs/second.js`, do this

```javascript
// app/javascript/packs/application.js

import 'packs/first'
import 'packs/second'
```
Cover Image credits <span><a href="https://unsplash.com/@clemono?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Clem Onojeghuo</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>