teleren/devto huggingface dataset:
Convertible Objects
Tags: ruby, hash, array, documentation
Published: 2020-04-19 17:24:30

---
title: Convertible Objects
published: true
description: 
tags: ruby, hash, array, documentation
---
Little-known fact:  Many Ruby methods accept as arguments not only an instance of a class (e.g., Array object), but also an object that can be converted to that class (e.g., Array-convertible object).

This is true of a dozen or so methods in Hash, and of scores of methods in Array.  How many others?  I don't know (yet).

There are even a few methods that accept a convertible object as a block return value.  Check out method [Array#max](https://github.com/BurdetteLamar/AboutRuby/blob/master/core/Array/api/markdown.md#max).

Obscure, I know, but interesting.

Read all about it:  [Class-Convertible Objects](https://github.com/BurdetteLamar/AboutRuby/blob/master/doc/convertibles.md#class-convertible-objects).
Global Object Reflect In JavaScript
Tags: javascript
Published: 2020-04-19 17:23:55

---
title: Global Object Reflect In JavaScript
published: true
description: Reflect  
tags: JS
---

As I was reading Axel's book on Generator functions I came across a new Global Object in Javascript that I never even knew existed!
Reflect

```
22.1.3 Use case: implementing iterables #
The objects returned by generators are iterable; each yield contributes to the sequence of iterated values. Therefore, you can use generators to implement iterables, which can be consumed by various ES6 language mechanisms: for-of loop, spread operator (...), etc.

The following function returns an iterable over the properties of an object, one [key, value] pair per property:

function* objectEntries(obj) {
    const propKeys = Reflect.ownKeys(obj);

    for (const propKey of propKeys) {
        // `yield` returns a value and then pauses
        // the generator. Later, execution continues
        // where it was previously paused.
        yield [propKey, obj[propKey]];
    }
}
```

This was interesting to me that there was this object available so I decided to start to research this more.

You can learn more about Reflect here.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect
Book review: Just Enough Software Architecture
Tags: books, architecture
Published: 2020-04-19 17:15:44

Last year I attended the first edition of the [GSAS](https://gsas.io/) conference. The [speaker roster](https://gsas.io/2019/#gsasspeakers) was impressive and included George Fairbanks. Was because of it that I decided to read *Just Enough Software Architecture, a risk-driven approach*. 


The outcome of the conference didn't live up to my expectations. The tone felt distant and somehow settling a differentiation between architects and developers, some kind of elitist barrier (and here for sure I am failing to describe precisely my impressions due to lack of English vocabulary). That was weird because most of the talks, the one from Fairbanks included, were not explicitly suggesting it at all.

Turns out I got a similar impression from the book. There is valuable information on it, that's for sure, but the tone and a big part of it feel distant, maybe too academic, despite of Fairbanks efforts to provide meaningful examples and an informal tone.

The book is structured in two main blocks. The first one introduces Risk-Driven Software Architecture, its main highlight and indeed an interesting approach. How you should architect your application based on the risks and quality attributes you know it requires, doing the right trade-offs to find a balance between deliverability and engineering. For instance, do not build an astonishingly scalable system if none of your quality attributes is performance. The way Fairbanks introduces this technique is enjoyable and well-illustrated, with solid examples for all of the standpoints.

The second block, though, is composed of thoroug descriptions of ways of representing models of the architecture, at different levels and with different techniques. This translates to, and I know I am oversimplifying here, diagrams.

Almost two-thirds of the book revolves around levels of detail, types of architecture representations, and the relations between them. The amount of theory and detail is noticeable and it is hard to relate big chunks of content to what I currently need as a software developer ( which might mean this disappointment is caused by a mix of expectations and momentum in my career). It took me a lot of time to finish the book because of the low engagement with this second block, especially after a first one way more practical and concise.

Coming back to the conference perception, there is good stuff in the book and some things I will definitely take into account in my current and future projects. But at the same time, there is something hard to describe about it that made the reading not satisfactory. A contradiction between an approach to architecture encouraging doing just the necessary, and a tour about theoretical aspects of model representations that feel like way more than the necessary.

A first part that relates to software developers and a second part that relates to architects.
About Ruby Hash#clear
Tags: ruby, hash, documentation
Published: 2020-04-19 17:12:24

---
title: About Ruby Hash#clear
published: true
description: 
tags: ruby, hash, documentation
---

Get more information and more examples at my AboutRuby project:
* [AboutRuby project](https://github.com/BurdetteLamar/AboutRuby/blob/master/core/Hash/api/markdown.md#clear)

Here's the write-up over at the Ruby project:
* [Ruby project](https://ruby-doc.org/core-2.7.0/Hash.html#method-i-clear)

My main page is [here](https://github.com/BurdetteLamar/AboutRuby#about-ruby).

TL;DR

I've been working on enhancements to the documentation for the Ruby project.  Getting these enhancements posted to the Ruby project has been very slow.  They're not actually meeting resistance;  I know because my many PRs for enhancing class ENV were accepted (though not rapidly).  It's just that everyone is busy.

Anyhow, I'm stashing all this stuff on in my own project, called AboutRuby.  The piecemeal migration from there to the Ruby project is not going to be completed in my lifetime (I'm 77 years old).

So:  I'm going to blow my own horn here on DEV, to encourage you to use the enhanced documentation.
Keyboard Shortcuts: React in VS Code
Tags: vscode, react, javascript, beginners
Published: 2020-04-19 16:59:05

Honestly, much of what I've learned about programming in general seems like magic. I mean, how many times have you watched a code along video and seen the speaker make something happen instantly without ever explaining how they did it?

Often, it's simply a keyboard shortcut they've become so accustomed to using it doesn't even cross their mind to take a moment to explain it. While in reality, this is some of the most useful information to share during a working example!

Here are a few useful shortcuts:

1) option + up or down arrow
   (windows: shift + up or down arrow)
   Allows you to move a line of code up or down the page

2) command + /
   (windows: control + / )
   Comments out highlighted code

3) command + option + j
   (windows: control + shift + j)
   Opens the Chrome DevTools console



4) option + shift + F
   (windows: alt + shift + F)
   Instantly formats your code
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aqd5q3mn75ocfb4hsw1p.png)
This is the fastest way to perfectly indent your code and break out long lines into multiple short phrases.

5) rcc + tab 
   (Provided by the JS JSX Snippets Extension in VS Code)
   Creates a React Class Component based on the file name
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/la376ek9ftvmbk2fng3l.png)
A quick and easy way to to build a component from scratch without logging your train of thought.

6) (hold down) option + multiple clicks
   (windows: alt + multiple clicks) 
   Creates multiple cursors
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/288db5ee2vqts3x2ssi3.png)
Useful when you need to edit the same word in many places on  a page.


Yes, it is important to learn syntax and naming conventions, but once you've got it down you'll start to prioritize speed over practicing your typing skills. 

For more keyboard shortcuts, visit the VS Code Docs: https://code.visualstudio.com/docs/getstarted/tips-and-tricks
Should I always verify JSON Web Tokens?
Tags: json, jwt, zerotrust, security
Published: 2020-04-19 16:52:25

I like one of the answers in this [Reddit post](https://www.reddit.com/r/aws/comments/fzo9b6/should_i_always_verify_json_web_tokens_that_get/).

---

### Allow or deny at entrance

![Verify ticket at the entrance](https://dev-to-uploads.s3.amazonaws.com/i/uba055wi26ubp3hmz6l2.jpg)

*"Imagine you run a theme park with a whole bunch of rides. People pay once at the entrance gate and can go on any rides they want, so you assume that anyone who gets into the park must have paid their way in, so you don't think you need to check if people have paid before they get on the rides."*

- This is the analogy of the traditional VPN.

---

### Check presence of ticket for every rides

![Verify ticket for every rides](https://dev-to-uploads.s3.amazonaws.com/i/2vng3dvqhnkuthsx2xs3.jpg)

*"You realise that some people are climbing over the fence and getting on all the rides for free. You decide to issue everyone who comes through the entrance with a ticket, and instruct your ride operators to check that people have tickets before letting them on the ride."*

- This is the analogy of the zero-trust model.

---

### Verify the validity of the tickets

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

*"This works for a while, but soon you realise that people are buying one ticket then climbing over the fence on their subsequent visit, only paying once instead of twice. Even worse, some people bought one ticket and are now giving away photocopies of it for free. To fix this you get your salesperson to write the date when the ticket was issued on the ticket and sign it. You then tell the ride operators to make sure that the ticket is in date and the signature matches. Now you know that a ticket came from your salesperson, and it can only be used once."*

---

### Lessons

- If you don't check your JWTs at all, literally anyone could get data from your API. 
- If you check for the presence of a JWT but don't verify it, people can present whatever JWT they want and get the API to think that they're anyone.
- Your API is only secure if you verify that you trust it before using it.
Build an Accessible React Component: The Live Series
Tags: a11y, livecode, webdev, react
Published: 2020-04-19 16:35:02

---
title: Build an Accessible React Component: The Live Series
published: true
description: Join me every Tuesday as I add to my accessible React component library!
tags: a11y, livecode, webdev, react
series: Build an Accessible React Component
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/01ezxyfitq5a51i4jvsb.png
---

# Thank you!! 🎉

[Last Tuesday's stream](https://dev.to/ashleemboyer/live-tonight-build-a-react-firebase-blog-site-pp8) was fantastic! I now have two posts to add to my ["Build a React & Firebase Blog Site" Series](https://dev.to/ashleemboyer/build-a-react-firebase-blog-site-part-1-4gn0) and am considering packaging the series up in an ebook format!

# What's this about? 🤔

In the meantime, I've been thinking about topics for upcoming Tuesdays and have decided to make a whole series about building accessible React components. I have [an `a11y-components` repository](https://gitlab.com/ashleemboyer/a11y-components) with a couple of things in it already, but needed a break from all things outside of work for a while. What better way to pick things back up than with a live series to add to the repository?

# Neat! How's it going to work? ✨

Here's the idea: we'll pick a random widget from the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices) with an on-screen wheel, then build it in React! If a really complex component is chosen, it might take an extra stream to finish it, but we'll walk through the whole thing from start to finish!

# Let's gooo! 🏃‍♀️

To get notified when I go live on stream, you can [follow me on Twitch](https://twitch.tv/ashleemboyer). If you can't catch the stream live, it'll still be available afterwards to re-watch! I also plan on uploading my videos to YouTube really soon since they don't stay on Twitch forever.

---

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to [https://ashleemboyer.com/newsletter](https://ashleemboyer.com/newsletter).
What It's Like to be a 31-Year Old College Student.
Published: 2020-04-19 16:03:12

**It's tiring.**
At my ripe 31 years, I need 8 - 9 hours to thrive. But, these days? I'm doing 5 - 7 hours to survive. And boy, am I *tired*.

Sure, 21 year-old me could pull all-nighters any day of the week. But, 31 year-old me? *Aw hell to the nah.* 

As such, going to school and working full-time means constantly guzzling caffeine and sneaking in naps whenever I can. There's no such thing as beauty sleep anymore - I am the Walking Dead.

**It's tough.**
I don't care if you've been coding since you were a fetus - *computer science is hard.* Want to know why I'm losing sleep? Because I only have one week at a time to learn key concepts from two sets of classes.

Right now, Discrete Mathematics is kicking my ass. And I used to be good at math! Between sequences, set theory, and proofs/disproofs, it's taking all of my brain power to stay afloat.

**It's nerve-wracking.**
Listen, $30K is a lot of money. And, as someone who already went into debt for Degree 1.0, I can't help but wonder, *What if I don't get a job?*

Sure, software engineering is hot right now. But, will it last forever? And if software engineering is such a hot job market, why are so many people unable to land their first gig? 

And, as a black woman, can I convince a tech company to give me a chance?

#But, on the other hand...
**Being a college student is inspiring.**
Thanks to the program, I've joined a community of students that span a ton of different backgrounds and ages. We're all career switchers, so it's really cool when someone announces a new job or internship.

Right now, I'm in love with the #rejections thread in our community slack. The idea behind it is this: you're going to face a ton of rejections before you land your perfect gig. So, instead of mourning the process, why not celebrate it?

And that's what we do! 

When someone posts a rejection, we give them a virtual high-five. The spirit of #rejections has inspired me to be more bold in my aspirations.
 
Each rejection means I'm one step closer to an awesome opportunity.
Quick reference to Create and publish your first NPM package 
Tags: npm, typescript, angular, node
Published: 2020-04-19 15:57:40

1- first step if you don't have an npm registry account, you can sign up from : https://www.npmjs.com/signup or use command: npm adduser 

(note: it's better to signup using the site url in order to solve errors of available usernames, password complexity ..etc)

2- verify the account

3- npm login 

4- fill in the conditionals

5- mkdir "package-name"

6- cd "package-name"

7- npm init
(note: if you want to make it scoped to specific organization or user account (private packages) you should use this init command with the scope flag (eg: npm init --scope=@user-name) and this feature for paid accounts only)

8- now you can test the package locally by running command : npm i "package-name"

9- npm publish 
(note: you may have to change the package name if you get publishing error because of name duplication)
Customize .sort() method in JS
Tags: javascript, tutorial, webdev, vue
Published: 2020-04-19 15:52:00

Sort method by default sorts elements alphabetically:
![alt text](https://miro.medium.com/max/1400/1*3B2bVHpbuXiZNI_sMETppg.png "CodePic1")
But you can add a new method which handles Sorting.
for example:
![alt text](https://miro.medium.com/max/1400/1*GU9bwVuCv6qhKGJQ7WRqcw.png "CodePic2")
Now, imagine we want to sort this object that contains models of Ford car :
![alt text](https://miro.medium.com/max/1400/1*OAgkGlHMsGPJj9g_N4F_hQ.png "CodePic3")
___

- Sort by cars __name__:
![alt text](https://miro.medium.com/max/1400/1*kIhzNuHfmhaoo2gx_IDilA.png "CodePic4")
output:
![alt text](https://miro.medium.com/max/1400/1*sYdWjOgK7IMKBYI6WdFy2w.png "CodePic5")
___

- Sort by cars __price__:
![alt text](https://miro.medium.com/max/1400/1*8MTwrOCtlXfAMQFNAi27bw.png "CodePic6")
output:
![alt text](https://miro.medium.com/max/1400/1*KnzlgYixmChw7CE5PYn_ew.png "CodePic7")
___

- Sort by cars __Delivery Date__:
![alt text](https://miro.medium.com/max/1400/1*8h13MM__hOc2nwUd-ZJAFA.png "CodePic8")
output:
![alt text](https://miro.medium.com/max/1400/1*mqJYZ9S3GR0xBsVJ1jg0gQ.png "CodePic9")

>If you found it useful, you can follow me and also visit my [website](http://mohsenfallah.ir), because there are more ways to connect with me. I hope this would help you to improve your coding skills. Thank you for your attention.
___
_This article was originally published on The [Dev.to](https://dev.to/mohsenfallahnjd) on April 19, 2020 and was written by **Mohsen Fallahnejad**._
CSS Grid Clock (Animated)
Tags: codepen, grid, css, html
Published: 2020-04-19 15:41:53

---
title: CSS Grid Clock (Animated)
published: true
tags: codepen, grid, css, HTML
---

<p>Css Clock made with Grid Layout</p>

<p>Design based on:
- <a href="https://dribbble.com/shots/4779256-Hickery-Dickery-Clock" target="_blank">https://dribbble.com/shots/4779256-Hickery-Dickery-Clock</a></p>

{% codepen https://codepen.io/flavio_amaral/pen/NWGromV %}
FFMPEG - Who even needs a GUI video editor
Tags: linux, productivity, ffmpeg, media
Published: 2020-04-19 15:08:53

{% youtube simSapaQOCE %}

So I've been messing around with FFMPEG alot to see how much video editing I can do without using an actual GUI video editor, so far it turns out that the answer is quite a bit.

I go over three main common tasks I've needed to do recently with only FFMPEG:

* Cutting out a section of a video into its own file
  * The main benefit of this is that this process does not cause a re-encode, which saves an amazing amount of time. When I did the same thing in Davinci Resolve, it took 15ish minutes to render out the clip. FFMPEG took a whole 20 seconds.

* Cleaning up a video clip by removing "frozen frames", using the FFMPEG filter called **mpdecimate** (Frozen frames are sections of a video where there appears to be nothing happening, hence it looks frozen)
  * This is really useful for making time lapses of processes, as you remove all the dead frames and you get only 100% action going on.

* Taking the *decimated* video and creating a time lapse of any duration in seconds by calculating the value needed to adjust the presentation timestamps to get the desired duration.
  * This one has been really handy for making time lapses of my wife's design work. I've used it so far to make versions for Instagram and Tiktok.

Enjoy the video
April 19 — Daily CodeNewbie Check-in Thread
Tags: codenewbie, checkin, beginners, discuss
Published: 2020-04-19 14:55:33

---
title: April 19 — Daily CodeNewbie Check-in Thread
published: true
description: A daily thread to ask questions, share progress, and stay accountable!
tags: codenewbie, checkin, beginners, discuss
series: Daily Checkin
---

You are encouraged to use this daily thread to:
- Ask for help (all questions encouraged)
- Explore topics you’re curious about
- Share something you’ve written or read
- Celebrate your wins
- Stay accountable to your goals
- Support your fellow programmers

Happy Coding!

---

_Interested in joining the twice-weekly live [#CodeNewbie Twitter chats](https://twitter.com/search?q=codenewbie)?  You can find us [on Twitter](https://twitter.com/search?q=codenewbie) each Wednesday at 9pm ET (1am GMT on Thursday) and Sunday at 2pm ET (6pm GMT)!_
Why functions in Javascript are called as First Class Objects?
Tags: javascript, webdev
Published: 2020-04-19 14:44:03

Hey guys,

This is by far one of the most basic question that creates confusion amongst many javascript developers.

Here we go..

"A function is said to be the first class citizens or objects in javascript when they have all the capabilities that an object has."

1. Functions can be assigned to variables and properties like any other 
   object in javascript.

2. Functions can be passed as an arguments into any other functions.

3. An objects property can be a function (methods) or an array of 
   functions.

4. Functions can also be returned from another functions (closures).

In javascript, we can construct new functions during execution of a program, storing them in data structures, passing them as arguments to other functions and returning them as a value of other functions.

Thanks. :)
Extending markdown with template engine, and security?
Tags: help, webdev, markdown, security
Published: 2020-04-19 14:43:25

I am currently getting interested in LiquidJS, actually. Used to use Handlebars.

My concern is rendering IFrame which only allowed for specific liquid tags, for example `{% youtube XXXX %}`. Which markdown engine / template engine would be considered safe? Do I need / how do I use [DOMPurify](https://github.com/cure53/DOMPurify)?
go-testdeep v1.4.0 released
Tags: go, testing, framework
Published: 2020-04-19 14:43:11


As a powerful and two-year-old testing framework, [go-testdeep](https://go-testdeep.zetta.rocks/) allows you to deeply test any golang data structure. It is fully integrated with testing standard package.

```go
import (
  "testing"
  "github.com/maxatome/go-testdeep/td"
)

func TestLoadPerson(t *testing.T) {
  // LoadPerson() (Person, error)
  person, err := LoadPerson()
  if td.CmpNoError(t, err) {
    // person has to match exactly
    td.Cmp(t, person, Person{Name: "Bob", Age: 24})
  }
}
```

But many testing frameworks allow you to do this kind of comparison, no need for a new one!

As go-testdeep uses its own function to deeply compare structures, it allows you to use [60 operators](https://go-testdeep.zetta.rocks/operators/) for more flexibility.

Take the [Bag](https://go-testdeep.zetta.rocks/operators/bag/) operator as an example:

```go
import (
  "testing"
  "github.com/maxatome/go-testdeep/td"
)

func TestLoadPersons(t *testing.T) {
  // LoadPersons(string) ([]Person, error)
  persons, err := LoadPersons("B*")
  if td.CmpNoError(t, err) {
    // persons slice has to contains these 4 persons
    // in whatever order
    td.Cmp(t, persons,
      td.Bag(
        Person{Name: "Bob", Age: 24},
        Person{Name: "Britt", Age: 29},
        Person{Name: "Barbara", Age: 35},
        Person{Name: "Brian", Age: 21},
      ))
  }
}
```
It is just an example, as the tests can be much more complex. See:
- the [synopsis](https://go-testdeep.zetta.rocks/introduction/);
- [an example](https://go-testdeep.zetta.rocks/example/using-testing/) from classic approach to the go-testdeep ones;
- the [FAQ](https://go-testdeep.zetta.rocks/faq/), it contains some examples too.

The [tdhttp helper package](https://pkg.go.dev/github.com/maxatome/go-testdeep/helpers/tdhttp?tab=doc) allows you to easily test your HTTP API using these operators.
See the example of a simple JSON/XML HTTP API tested using go-testdeep and its tdhttp package under the Go Play Space: https://goplay.space/#xrGKu2cNQFr

It reports colored error messages when something goes wrong, here used with another operator, [Between](https://go-testdeep.zetta.rocks/operators/between/):

![Example of error](https://go-testdeep.zetta.rocks/images/colored-output.svg)

All the functions and methods are fully documented, each operator comes with its examples, and last but not least the [test code coverage is close to 100%](https://coveralls.io/github/maxatome/go-testdeep?branch=master).

Do not hesitate to comment, file an issue or a PR. I would be happy to help you or simply discuss.

Enjoy!

[home](https://go-testdeep.zetta.rocks/) — [godoc](https://pkg.go.dev/github.com/maxatome/go-testdeep/td)

{% github maxatome/go-testdeep %}