teleren/devto huggingface dataset:
Advanced TypeScript Exercises - Question 4
Tags: typescript, javascript
Published: 2020-02-20 16:41:05

--- series: Advanced TypeScript Exercises ---

For given function type `F`, and any type `A` (any in this context means we don't restrict the type, and I don't have in mind `any` type 😉) create a generic type which will take `F` as first argument, `A` as second and will produce function type `G` which will be the same as `F` but with appended argument `A` as a first one.

```ts
// lets say we have some function type
type SomeF = (a: number, b: string) => number
// and we have our utility type
type AppendArgument<F, A> = ... here your code 💪

type FinalF = AppendArgument<SomeF, boolean> 
// FinalF should be (x: boolean, a: number, b: string) => number
```
Post your answers in comments. Have fun! Answer will be published soon!

**This series is just starting**. If you want to know about new exciting questions from advanced TypeScript please follow me on [dev.to](https://dev.to/macsikora) and [twitter](https://twitter.com/macsikora).
Shel Silverstein's Everything On It
Tags: codepen, animation
Published: 2020-02-20 16:40:53

Mind. Blown. Coolest thing I've seen on CodePen so far. Coded by:
{% user sarah_edo %}  

<p>Tribute to Shel Silverstein using Greensock's DrawSVG plugin (and SplitText)</p>

{% codepen https://codepen.io/sdras/pen/qEdova %}
Admin Product View Link Magento 2 Extension
Tags: magento, magentoextension, mageento2
Published: 2020-02-20 16:36:26

Admin Product View Link Magento 2 Extension is make it easier and faster to edit and priview front end. <b><a href="https://www.cynoinfotech.com/product/admin-product-view-link-magento-2-extension/">Admin Product View Link Magento 2 Extension</a></b> access the product page in front end and reduse the time of store admin. 

Admin Product View Link Magento 2 Extension adds a preview button in the backend catalog product grid that allows directing access to the product page in the frontend.

<b>Key features:</b>
&#9658; Helps backend product management easier and faster for the admin
&#9658; Admin can edit product, category, and pages by just click on the edit button
&#9658; View product, category, and pages from the backend
&#9658; Enable/Disable from the backend
&#9658; Add preview functionality to check frontend from admin
&#9658; Allows admin to login as customer to boost customer account support and management


Content Source by Cynoinfotech : https://www.cynoinfotech.com/product/admin-product-view-link-magento-2-extension/
MouseEvent in Typescript
Tags: help, typescript
Published: 2020-02-20 16:29:17

I have a question, my code on two env is the same. On Codepen env, it's return exactly what I want, but on localhost it's didn't, the button still display before I hover on it. Thanks to everyone for taking the time to read this article!

Codepen: https://codesandbox.io/s/ecstatic-leakey-roibt

localhost: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9gbdy33sas9a6lggo994.PNG)
Full Screen Overlay Navigation In Bootstrap With Javascript
Tags: tutorial, todayilearned, todayisearched, javascript
Published: 2020-02-20 16:26:33

The navigation menu is the best user-interface on the website for use. So here we designed Full-Screen Overlay Navigation In Bootstrap With Javascript and CSS properties.

In this element, we used javascript function to make our element more attractive for user-experience. Here we used Bootstrap 4 navbar and font awesome icons with some CSS properties. Also, we used the Onclick attribute on HTML objects when you click. We used Overley effects to the left to right and also used close function on close icons. This is a fully responsive Navigation bar with all mobile and tablet views.

Download Sourcecode:-
https://w3hubs.com/full-screen-overlay-navigation-in-bootstrap-with-javascript/
Coding, Concussions, or Country Music?
Tags: football, nfl, music, webdeveloper
Published: 2020-02-20 16:20:54

---
title: Coding, Concussions, or Country Music?
published: true
description: Who makes more a coder or a pro football player?
tags: football, nfl, music, web developer
---

Who makes more money a coder or a professional NFL football player?

This seems like an easy question, and most people would probably say an NFL player, but they would be wrong!

{% youtube 4sXfNUmjaD8 %}

First, let's look at the opportunity. Do you know how many people make it to the NFL? **Only 256 each year.**

Just over 1 Million people play high-school football.
73,557 of those, go on to play NCAA football (divisions I, II & III).
16,346 of those, are draft eligible.
256 are drafted into the NFL. 

In the world of coding, there are projected to be **424,000 new software jobs in 2020.** That's not even close!

Let's talk about $$$.

At the high end, the top-paid athlete in the world, Lionel Messi, earned $127M in 2018. What does a top paid coder earn? Many many times that...just look at Mark Zuckerburg (Facebook) & Jack Dorsey (Twitter/Square).

Then at the other end, a run-of-the-mill athlete either can't break-in or is making a small amount playing semi-professionally. A run-of-the-mill coder is making **$100k, has 4 weeks vacation, and a 401k with employer match.**

The opportunities and incentives are in learning to code!
Mutating objects in javascript
Tags: javascript
Published: 2020-02-20 16:07:19

I'm sorry I can just share the link of my article here because it has a lot of pictures. I'll remove this post if the community wants me to :)

Mutation in javascript is always a very edgy topic for beginners as well as some experienced developers. In this article I try to explain how mutation in javascript works and how you can follow ways to properly work with it. Please give it a read if you want to learn about it!

https://easyontheweb.com/mutating-objects-in-javascript/
Remote work opportunities in Japan
Tags: job, japan, remote
Published: 2020-02-20 16:04:19

---
title: Remote work opportunities in Japan
published: true
description: Tech remote jobs scene in Japan is still growing but it does exist.
tags: job,japan,remote
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vlnreekkedrzf6gzwn12.jpeg
---
<em>Picture by [Sorasak](https://unsplash.com/@boontohhgraphy)</em>


TLDR; Remote job Japan 💻  https://remotework.jp/

### Scene in Japan
Tokyo dominates job opportunities within Japan for web developers. As a Kansai region person (different region of Japan), it’s rather difficult to find a good company within a reasonable distance from home. On top of that, the companies are quite limited.

Big companies exist in Kansai such as Rakuten, Line, Nintendo (gaming developers), etc. However, for someone who prefers smaller companies, it’s a challenge to find proper opportunities within Kansai. So remote seems to be the way to go.

Moreover, remote work is the inevitable future of developers (and other careers). I have seen many people who would be interested in remote work for various reasons.

Just that Japan takes a bit of time to adapt. This what brings us to this announcement.

## Announcement 
https://remotework.jp

I just built a website to collect remote jobs within Japan that have just gone live with multiple Japanese companies offering remote work.

I’d like to thank Kazato Sugimoto and Yohei Yasukawa for the collaboration and getting this to what it is now.

Contribution on [GitHub](https://github.com/remote-jp/remote-in-japan) and spreading the word are much appreciated. 🚀
Style Change in DOM – JavaScript Series – Part 25
Tags: javascript, codenewbie, beginners, tutorial
Published: 2020-02-20 15:32:27

Today we are going to change the style of different elements in the dom using some new technique that we didn’t learned yet.

We are going you use the last day codes.

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

We’ll start by selecting the h1 and then we’ll apply some style with it. See when we use document.querySelector(“h1”).style

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

Now change the background of h1. Using document.querySelector("h1").style.background = "red"

See result –

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

Now lets try to add a class in h1 tag. Let’s write some styles in style.css

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

Using document.querySelector("h1").className = "special-heading"we can change right

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

What are you going to do after this? You have superpower now your hand to change anything in Dom!

Let’s learn something amazing in next one!

Other posts of this series can be found here – https://blog.nerdjfpb.com/tag/javascript/

You can see the graphical version here
{% instagram B8x7hpIgiHN %}

Source Codes - { Check commits }
{% github nerdjfpb/javaScript-Series %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/javascript-part-25/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/)!
IoT Message Broker webinar
Tags: iot, messagebroker, tutorial, webinar
Published: 2020-02-20 14:23:22

---
title: IoT Message Broker webinar
published: True
description: Learn how the MQTT message broker EMQ x is being used around the world to power smart homes, smart cities and connected cars
tags: IoT, Message Broker, tutorial, webinar,
---

EMQ X is massively scalable, highly extensible distributed MQTT message broker written in Erlang/OTP. EMQ X Broker is open source, everyone can use it to build IoT applications. It is currently used by over 5000 enterprise clients, in over 50 countries to connect over 50 million devices. In this webinar, we will explain how EMQ x works, why it is perfect for IoT and demonstrate use cases including smart homes, smart cities and connected cars.

### 3 key takeaways  
EMQ X Broker is one of the best open source MQTT Brokers on the market.

EMQ X can be deployed everywhere for any IoT applications.

EMQ X Enterprise is based on EMQ X Broker, with enterprise features 

 

WEBINAR DATE: Wednesday 26 February 2020 | 18:00 GMT / 19:00 CET

[Register now](www2.erlang-solutions.com/emqxwebinar2 )
Combatting Flashes of Unstyled Content
Tags: webdev, css, html, tutorial
Published: 2020-02-20 14:49:02

I've been noticing issues with flashes of unstyled content lately, and wanted to find a go-to solution to build into all my future sites. 

After some Googling, I found [this article by Stephen Petrey](https://petrey.co/2017/05/the-most-effective-way-to-avoid-the-fouc/) that presents a couple of effective solutions:

### The Javascript Approach

The Javascript-based approach goes something like this:

- Load the page with a `no-js` class on the `<html>` element
 - Use CSS to hide the `<html>` element
- Replace the `no-js` class with a `js` class using Javascript
 - Use CSS to make the `<html>` element visible again once the `js` class is added

The downside, as Stephen mentions, is that if Javascript is disabled, the page will load but be invisible. For many sites, this may be perfectly acceptable, but I don't love the idea of the page being invisible to no-JS visitors. On to the next one!

### The CSS Approach

A clever comment on that article by electrotype provides a CSS-only solution. The gist is:

- Inline CSS styles into the `<head>` to hide the `<html>` element
- Add styles to the end of your last CSS file to reverse those styles and make the `<html>` element visible again

This is much more my style - once all of your CSS styles are parsed, the site will become visible without any flashes, all without Javascript!

However, there's still a weakness - if your CSS fails to load, the site will still be invisible. That's probably pretty unlikely, but it still doesn't sit well for me to depend on that file loading successfully for the site to be visible.

---

# My Modified CSS Approach

My ideal solution combines the CSS-only approach with a fallback in case the stylesheet fails to load.

#### *CSS Animation to the rescue!*

You'll need to add this to the top of the `<head>`:

```html
<style>
    html {
        animation: fouc-fix 5s steps(1);
    }
    @keyframes fouc-fix {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
</style>
```

And this to the end of your final CSS file:

```css
html {
    animation: none !important;
}
```

Let's break that all down:

- Immediately upon loading the `<style>` tag in the `<head>`, the `fouc-fix` animation begins on the `<html>` element, setting its opacity to 0.
- Once the CSS file is fully parsed, the animation is forced to `none`, immediately resetting the opacity to default (1).
- If the CSS file fails to load, the animation will complete itself after 5 seconds, setting the opacity back to 1.
 - *The `step(1)` parameter makes the animation jump straight to the final state, rather than changing gradually.*
 - *You could set the animation time to whatever you want - 5 seconds seemed like a good amount of time to wait for the CSS to load.*

---

Let me know in the comments if there's anything I missed or if you have a solution that works even better!
Naming Conventions: Fix It.
Tags: beginners, webdev, css, javascript
Published: 2020-02-20 14:36:02

<h2>Intro</h2>
Most newer people don't usually think of this often, and for that reason this post is dedicated to newer developers. Even if you are more seasoned, I hope that you are able to take some sort of value from this post, as I have seen some of this around my classes.

I have pulled a lot of this from my journal on my website for your enjoyment here because I believe more people should see it and be helped. Enjoy!
<hr>

There are two things that come to mind when you open your own code after a long period of time.. or that even of another developer:

1. WOW! That is so cool!
2. Oh my goodness, who wrote this?!

We all would like to believe that our code looks like #1 -- but the honest truth if we can be honest with ourselves is: sometimes we'll look at our own stuff and thing about scenario #2. 

I've composed some tips from multiple sources and people as well as myself, and I hope you find this useful! As far as crediting goes, it was people I met on platforms like discord and a few interpreted things off multiple searches on the internet.

<h3>Avoid abbreviation for things that are not commonly known</h3>
Things like "nav" or "hero" is okay because you or someone else nine times out of ten would know what this means.

Things like "blk" or "herr" is not okay because you or someone else will almost never know what this means unless they contributed and can remember what it was supposed to.

<h3>Make re-usable classes and names</h3>
When you type something out, write DRY (Don't Repeat Yourself) code. Make the classes and names re-usable, for example : "flex" could be used to throw flex display on something, but "flext-and-to-the-right" would not be good because now you're being super specific what that CSS class will do. Now if you need something on the left a few times, this will not serve you sell, and you'll end up making a longer** CSS file.

<h3>Try to avoid more than two words for a given name</h3>
Here's an example I found off a website in the past :

.button {
/* OK */
}

.dropdown-button {
/* still OK */
}

.dropdown-button-part-one {
/* Hmm, still ok, but will be unredable when adding children, for ex : */
}

.dropdown-button-part-one__button-admin {
/* Yikes !!! */
}

<h3>Make names reflect functionality</h3>
If your class sets the display to flex, you shouldn't name it: "super-awesome-block-element-thing" or even "hero-banner-box".. you should name it something related to what it does. This applies to all programming languages, and in my opinion, you should always be thinking of this when naming things.


<h2>Conclusion</h2>
These are just my opinion and suggestions to help you out long term, you do NOT have to use them, but take it for what its worth if it's any good to you.
Node.js Restful API template with TypeScript, Fastify and MongoDB
Tags: node, fastify, typescript, mongodb
Published: 2020-02-20 14:27:36

---
published: true
title: 'Node.js Restful API template with TypeScript, Fastify and MongoDB'
cover_image: ''
description: 'Using wp-cli on Bash on Windows 10'
tags: node, fastify, typescript, mongodb
series:
canonical_url: 'https://worldwildweb.dev/node-js-restful-api-template-with-typescript-fastify-and-mongodb'
---

# Why

Have you recently started a new Node.js API project? Did you use some template or started the project from scratch?
I was asking the same questions myself and I was looking for minimal boilerplate for a while. There were so many options that it was hard to pick one.
Most of them are using Express.js, others are using ES5 or lack test setup.
So I decided to spin one on my own and reuse it in the future. Here is [the repo at GitHub](https://github.com/gmarokov/node-fastify-mongo-api).

# How

My setup has the following characteristics:

## API

- Node version 10 or later
- TypeScript for obvious reasons
- Fastify for its asynchronous nature and being faster than Express or Restify
- Nodemon in development for watching for changes and restart the server

## Data

- MongoDB with Mongoose
- Docker for MongoDB service

## Tests

- Jest for being the de facto in Node testing
- In memory Mongod server for easily mock the DB
- Coverall for coverage collector after Jest report is generated

## Code formatting and static analysis

- ESLint config
- Prettier config attached to the linter
- Editor config

## Documentation

- Swagger UI for API documentation
- Postman collections attached from testing the endpoints

## CI

- Continuous integration in Travis CI.
  Steps:

1. Install dependencies
2. Run tests
3. Collect coverage and pass it to Coverall

And thats it! I hope it's minimal enough.
Please share some ideas for improvement. I thought of API versioning but Fastify seems to support that out of the box.
API key authentication was also something I was considering, but there were so many available options of implementations. If you have something in mind would love to discuss it in the comments.
Happy coding!
What being on the sun taught me about becoming a better tech lead.
Published: 2020-02-20 14:09:05

---
title: What being on the sun taught me about becoming a better tech lead.
published: true
description: 
tags: 
---

I’m really bright. 

🍻

[_sorry_](https://twitter.com/simonleggsays/status/1230220815469338625)
How to fix KeyboardAvoidingView in React Native?
Tags: reactnative
Published: 2020-02-20 14:08:49

---
title: How to fix KeyboardAvoidingView in React Native?
published: true
description: KeyboardAvoidingView is kind of difficult to make it right in both ios and android, let's see how we can fix that
tags: react-native
---

Hey 👋

Update: 8th April 2020

If you are using React navigation V5 then use 

```jsx
import { HeaderHeightContext } from "@react-navigation/stack";
<HeaderHeightContext.Consumer>
  {headerHeight => (
     <KeyboardAvoidingView
	{...(Platform.OS === "ios" ? { behavior: "padding" } : {})}
	 // you might need sometimes👇
	contentContainerStyle={{flex: 1}}
	// chances are you might be using react-navigation
	// if so 👇
	keyboardVerticalOffset={headerHeight + 64}
	// You can import Header Component from react-navigation and it has height attached to it
	// 64 is some extra padding, I feel good, feel free to tweak it
>
	{children}
</KeyboardAvoidingView>
   )}
</HeaderHeightContext.Consumer>
```

End of update

Here's how I use KeyboardAvoidingView, this will be the root component for the screen

```jsx
<KeyboardAvoidingView
	{...(Platform.OS === "ios" ? { behavior: "padding" } : {})}
	 // you might need sometimes👇
	contentContainerStyle={{flex: 1}}
	// chances are you might be using react-navigation
	// if so 👇
	keyboardVerticalOffset={Header.HEIGHT + 64}
	// You can import Header Component from react-navigation and it has height attached to it
	// 64 is some extra padding, I feel good, feel free to tweak it
>
	{children}
</KeyboardAvoidingView>
```

If you are still facing problems, try to understand where KeyboardAvoidingView Component is from top of the screen and then adjust keyboardVerticalOffset based on that. That's the key to fix it
how to bypass college/any local(LAN) firewall using VPN
Published: 2020-02-20 14:08:10

Things you Need to have before doing this experiement :
1.Ethernet cable
2.VPN(Proton VPN recommended)
3.college firewall access through student or faculty access


BEGIN here
First go to the browser and enter your college IP(ex:-172.16.0.100) and then enter the credentials and login with your account then open 
https://protonvpn.com/ after Login connect to the fastest server and after that logout you College firewall page otherwise you can check blocked sites they are working or not for me it's working 


The main thing is here rightnow 
after logging out you can see there is ethernet cable logo with on connection with firewall access without entering details about it you can access that thing and becaz of that this can give you peek internet speed of your local area network means College network speed MINE is 15mb/s 

<b>Why this thing happen?</b>
In most cases, a VPN can bypass any firewall – even the ones imposed by governments. Basically, it will create an encrypted tunnel between you and the Internet. Once you connect through said tunnel, all your online traffic will be indecipherable(not trackable by firewall)and that's sait . However, to enjoy this, you need a VPN that uses OpenVPN/ProtonVPN.