teleren/devto huggingface dataset:
Advanced TypeScript Exercises - Answer 6
Tags: typescript, javascript
Published: 2020-03-08 13:14:45

--- series: Advanced TypeScript Exercises ---

### 6.1 Naive version (lower difficulty)
```ts
type NaiveFlat<T extends any[]> = {
  [K in keyof T]: T[K] extends any[] ? T[K][number] : T[K]
}[number];
```
The solution of naive version is mapped type which traverse through type `T` given as argument. Important parts:
- `T[K] extends any[]` - question if value type of property `K` is an array
- `T[K] extends any[] ? T[K][number] : T[K]` - if `T[K]` is an array we get its value type by indexed type `[number]`. `number` is correct key of `T[K]` as `T[K]` was checked before for being an array, and array has number keys
- `[number]` at the end has a purpose of getting all value types of produced type

### 6.2 Deep version (higher difficulty)
```ts
type DeepFlat<T extends any[]> = {
  [K in keyof T]: T[K] extends any[] ? DeepFlat<T[K]> : T[K]
}[number]
```
The solution of deep version is different only in one point, instead of `T[K][number]` we go further and call `DeepFlat<T[K]>` so its recursive type, it calls itself. Thanks to the recursive nature we traverse the object until value type is not an array what is visible in "else" part `: T[K]`

The full code with test suite can be found in [The Playground](https://www.typescriptlang.org/play/index.html?ssl=1&ssc=1&pln=25&pc=73#code/PTAEEEDsGcHcFMBOoBsA6AjAKAC4E8AHeUAOQEMBLAN3gDEAbMnAHgBVR4APHeSAE2igykPAG0AugD5QAXlABvLKFCiA0qAqRQAa3h4A9gDNQrcQC4Ta8R268BQkRNAB+S6vGjIAVwC2AIyRrC1YrLABfT18AxHEAbiwQUB5uUABjMmh4XEJicmpiOVFRAHIyYvEAGhViv2Kq4tTyqpK+crjsolJKGlZ4aBwAJT6vehxZCGhMxBY8mgYmZln4SSqAIjJV0AAfUFW-TZ3V1IPdvlXJWNBE6AALfRG+UACkxC8shLAoOCRUNAAmDrEAAi8HgBHmLHYXB4-EEwjEUnGimUag0Wl0BmMpmCVhsMPs8KcrhBYIhbCs0hx7nCkX8gQ+ST6Y3SmUBoBJBHGRVKTWqtXqjUqKhabWaRRK8Da4ml8XwnQ5vX6Q2gIzGcnAkyQLA5ZI5K12G22u32RqOJ1WZ1N8HOVzAt3u9Eezxwr3eiS8OAo9Ao+FAhn0yB4-U0AHMkjdiIhhqMGT7BJB9GMo4weI8cPpw8QAI5vYP6LQUQT5+h4P0Bxn9UAqn1ZOXEDVTFhKEwYCrN1h-NvKAD6AGEI6ltBhxqxh9C7IIOy4Xm9QBZDGR6Jku6A+wPtH8R5vx7CW9OXbP54vWcpJM25Aul8Qd-Y1-BB8PXJfMnO-cfr7Zd3fB5un+-Xwe8BAA)

**This series will continue**. 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).
Neural Network Basics: The Perceptron
Tags: machinelearning
Published: 2020-03-08 13:09:31

A Neural Network is a machine learning model inspired by the human brain. A neural network learns to perform a task by looking at examples without being explicitly programmed to perform the task. These tasks can vary from predicting sales based on historic data, detecting objects in images, language translation, etc.

### The Perceptron
The Perceptron is the structural building block of a neural network. It is modeled after the neurons inside the brain.

![Perceptron](https://dev-to-uploads.s3.amazonaws.com/i/w69vigc9fk48uigte5hf.png)


Mathematically, this can be represented by the following equation:

![Perceptron Equation](https://dev-to-uploads.s3.amazonaws.com/i/rg05f4z4xuj96h60ub7s.png)

We can explain the working of a single perceptron as follows:
- Each perceptron receives a set of inputs x<sub>1</sub> to x<sub>m</sub>
- Each input has a weight associated with it ie. w<sub>1</sub> to w<sub>m</sub> for x<sub>1</sub> to x<sub>m</sub> respectively.
- Each input is multiplied with its respective weight, added, and passed as input to an activation function.
- A bias term w<sub>0</sub> is also added, which allows us to shift the activation function left or right, irrespective of the inputs.
- An activation function, also called a non-linearity, is a non-linear function that produces the final output of the perceptron.


### Activation Functions
An activation function is a non-linear function. A few common activation functions are the sigmoid function, the hyperbolic tangent (tanh) function, and the rectified linear unit (ReLU) function. The choice of the activation function used depends on the type of output expected from the perceptron. For example, the output of the sigmoid function ranges between 0 and 1. Therefore, it is useful when output is supposed to be a probability.

![Activation Functions](https://dev-to-uploads.s3.amazonaws.com/i/5b9zyiptnqvy5l4yckjf.png)

### Why do we need an Activation Function
Activation functions introduce non-linearity into the network. In real life, almost all of the data is non-linear. Without an activation function, the output will always be linear. Non-linearities, on the other hand, allows us to approximate arbitrarily complex functions.

![Decision Boundaries for Linear vs Non-Linear](https://dev-to-uploads.s3.amazonaws.com/i/57ep9dv940b1ndrm5ngx.png)

### Conclusion
In this post, we learned how a single perceptron works. In the next part, we will see how these perceptrons are connected together to form a neural network and how the network learns to do a task that it was not explicitly programmed to do.

I would love to hear your views and feedback. Feel free to hit me up on [Twitter](https://twitter.com/_akshaym).
Daily Developer Jokes - Sunday, Mar 8, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-03-08 13:00:07

---
title: "Daily Developer Jokes - Sunday, Mar 8, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Mar%208%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12588592f15.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why did the security conscious engineer refuse to pay their dinner bill?

___A:___ Because they could not verify the checksum.
 -->
Let's build: Art Recommending App in Vanilla JS using the Harvard Art API - part 6: Code review & Deployment
Tags: javascript
Published: 2020-03-08 12:42:26

<a href="https://sanderdev.nl/projects/smartart/">View demo</a>
<a href="https://github.com/sanderdebr/smartart">View code</a>

## 9. Code review

### 9.1 Removing empty paintings

In our renderPaintings function we’ll check for each painting if the imgPath is known, if not the painting will be set to display=none. We have to set the other paintings back to display=block:

``` javascript
if(imgPath) {
    elements.paintings[i].style.display = 'block';
    elements.paintingImg[i].src = imgPath;
    elements.paintingImg[i].parentNode.setAttribute('data-year', year);
    elements.paintingImg[i].parentNode.setAttribute('data-desc', desc);
    elements.paintingImg[i].parentNode.setAttribute('data-artist', artist);
    elements.paintingImg[i].parentNode.setAttribute('data-division', division);
    elements.paintingImg[i].parentNode.setAttribute('data-objectnumber', objectnumber);
} else {
    x++;
    elements.paintings[i].style.display = 'none';
    console.log(elements.paintings.length);
    if (x == elements.paintings.length) detailView.noResults();
}
```

### 9.2 Showing painting loader spinner

Add class ‘loading’ to each image in the index.html and we will add a background to this image, so the user will see the loading spinner untill the image is ready and will overlay the background.

``` javascript
.loading {
    background: transparent url('/img/spinner.gif') center no-repeat;
}
```

### 9.3 Showing loading spinner on startup

For this we will add an overlay div on top of everything else, and remove the overlay when the window has loaded fully.

``` javascript
<div class="overlay"><h1>Loading Smartart application</h1></div>
```

``` javascript
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
}
```

At the end of our index file we add:

``` javascript
// Remove layer when all content has loaded
window.addEventListener('load', function() {
    elements.overlay.style.display = "none";
})
```

Done!

## 10. Deployment

Let’s deploy our app to an AWS server with continuous deployment. Meaning every time we commit to our github repository, our live app gets updated as well.

### 10.1 AWS Amplify

AWS amplify makes sure every time you’ll commit to you github repository, the webapp get updated. THis is called continuous deployment.

### 10.2 FTP

Upload all the contents from your /dist folder to your FTP and you are done!
How to Change Button Color on Hover Using CSS
Tags: css, howto
Published: 2020-03-08 08:45:32

Every element on a website is considered to be important in terms of user experience. In addition, website representation is also another kind of factor which has a significant impact on uses. That’s why buttons and other clickable elements should be user friendly and nice looking.

Changing the color of buttons on hover looks quite impressive and feels upmarket rather than single color buttons. So here, we are going to discuss how to change the background color of the button using simple CSS. We should also choose the color of the button related to our website color. Even more, the color should be material, so it looks elegant to our users.

## Change Button Background Color on Hover Using CSS

We have **:hover** attribute to manage hover events of HTML elements via CSS.

**Syntax**

```
.class\_name:hover{
/* CSS lines */
}
```

### Example 1

```
<!DOCTYPE html>
<html>
   <head>
      <title>Change Button Color on Hover Using CSS - errorsea</title>
      <style> .myButton{ padding: 10px 20px; background-color: #1E88E5; border: 0px; color: #fff; } .myButton:hover{ background-color: #fff; border: 1px solid #1E88E5; color: #1E88E5; } </style>
   </head>
   <body> <button class="myButton">Hover Me</button></body>
</html>
```

We can also add some transition effects to make it more fluid and user friendly.

### Example 2

In this example, we have added a little transition effect on hover to make the background color changing process more smooth and meaningful.

```
<!DOCTYPE html>
<html>
   <head>
      <title>Change Button Color on Hover Using CSS - errorsea</title>
      <style> .myButton{ padding: 10px 20px; background-color: #1E88E5; border: 0px; color: #fff; transition: 0.25s linear; } .myButton:hover{ background-color: #fff; border: 1px solid #1E88E5; color: #1E88E5; } </style>
   </head>
   <body> <button class="myButton">Hover Me</button></body>
</html>
```

Enjoy Designing ![🙂](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f642.png)

The post [How to Change Button Color on Hover Using CSS](https://errorsea.com/how-to-change-button-color-on-hover-using-css/) appeared first on [errorsea](https://errorsea.com).
E1: “Should Designers Learn To Code?” Why It's Not A Good Question
Tags: ux, ui, designer, design
Published: 2020-03-08 12:35:04

💪In this video, we will talk about⬇️
- Development fundamentals for UX designers
- Development aspects, technical constraints & collaboration
- Answer the question: "Should designers learn to code?"

👋Hello, I' m Eleftheria, an app developer, master student, freelancer, public speaker, and chocolate lover.

This is a new series on my channel and I'm going to be talking about UX and UI.
This is the 1st episode out of 8.
If you have any feedback, please do share it with me. Thank you.



😎Top 3 list:
- How to stay motivated | A developer's edition | @BatsouElef: https://youtu.be/qMvEtb5OxNo
- How to be a Better Problem Solver | Tips and solutions: https://youtu.be/dELt7yKIxIA
- Simple Tips to Build a Personal Brand as a Developer (+ personal examples): https://youtu.be/7s0o1gi0iP0

🥰If you liked this video please share

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!


**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/eleftheriabatsou/)
CSS Flexbox Cheatsheet VS Code extension hit 10k installs
Tags: vscode, productivity, css
Published: 2020-03-08 12:19:54

This post was originally published on [my blog](https://dzhavat.github.io/2020/03/08/css-flexbox-cheatsheet-vscode-extension-hit-10k-installs.html).

---

A couple of days ago my [CSS Flexbox Cheatsheet](https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet) VS Code extension hit 10k installs! The initial release was exactly six months ago. That means that, on average, it was installed roughly 55 times per day! Pretty wild! So far it’s gotten five reviews, all positive, rating it with five starts.

[![CSS Flexbox Cheatsheet extension](https://dev-to-uploads.s3.amazonaws.com/i/goydhbq1vfmvj5nrtam4.png)](https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet)

This is a huge milestone for me. I had never imagined so many people will want to try it. I’m thankful to every one of them. Hopefully the extension helped them learn something about flexbox and, as a result, had an easier time working with it.

As an extension author, though, I wonder how do people use it? How many times do they open it? Only once and never again? A handful? More? Do they find the illustrations easy to understand? Can I do something to make them even more useful? I miss this kind of feedback and am thinking of ways to start asking for it. So if you use the extension and have some comments about it, please let me know bellow.

### What's next?

I recently came up with the idea of showing the illustration of how a property works already in the hover popup. Something like this:

{% twitter 1230975443370676224 %}

Instead of opening the whole cheatsheet to look for a specific property, you'd be able to see it in the hover. This will bring the cheatsheet even closer to where you actually need it and hopefully make it even more useful. What do you think about it?

I'm currently working on it, polishing some final details. Who knows, it might come out soon 😀
Nevertheless, My Hangman Game Is Live For International Women's Day!
Tags: wecoded, javascript, beginners, react
Published: 2020-03-08 11:55:53

Since my previous post was taken with such a warm welcome, I prettied up the app in time for International Women's Day. I am not claiming it's the most amazing thing you'll ever see but it's the most amazing thing I have ever coded so far. 😄

It's a themed Hangman game for International Women's Day and is available to play both in English and Hungarian [>> HERE <<](https://hangman-iwd2020.netlify.com/).

Any constructive feedback is welcome in the comments. Kindly be gentle with criticism, I am very much at the beginning of my coding journey. I just have started to learn React and definitely not friends with CSS yet. 🙃

The [repo](https://github.com/juditlehoczki/hangman) is public for anyone to look at and use, if anyone wants to contribute to extend it with different languages would be supercool.

Have fun if you give the game a go and here I'm wishing everyone a sunny and happy International Women's Day!

![Hangman Game Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/84jerjnfoblriifwkntc.png)
DAY 2 Conclusion
Tags: programmersstone, reciprocality
Published: 2020-03-08 11:39:13

---
title: DAY 2 Conclusion
published: true
description: Programmer's Stone, Thinking about Programming
tags: #programmersstone, #reciprocality
---

As a lot of the stuff has aged I think I should point out a couple of things in DAY 2 of the course:
The attempt to get to a sufficient level of clean code seems more important now than it was before the clean code principles were put into a coherent picture. It is good to have brief code but not at the expense of readability. While there are differences between the grasp of understanding commanded by the expert and the proficient one needs to strike a balance and the experts should see that what they find readable may not be so for most programmers.
 Brevity is just one in a whole list of goals (readability, beauty, tidiness, maintainability) all of these improve program code. However, they can be at odds with each other so some balance may need to be achieved.
 While clean code is nice and very useful as a standard to assume we should not think we got to the peak of programming, it is more important to be open to more developments and keep experimenting with other techniques like object calisthenics or Holub's ideas or whatever new methods get developed.
✨ Full Tutorial: Professional Navigation Menu With HTML5 & CSS Flexbox ✨
Tags: webdev, tutorial, beginners, css
Published: 2020-03-08 11:33:42

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

In the following video I build out a clone of the navigation menu found on [Dribbble](https://dribbble.com/) using HTML5 & CSS Flexbox. I hope you enjoy!

{% youtube 92qtwZoGpx8 %}

Happy coding!

Full source code: [https://github.com/lucaschen/dribbble-navbar-demo](https://github.com/lucaschen/dribbble-navbar-demo)
Nevertheless, Lisa Venezia Coded
Tags: wecoded
Published: 2020-03-08 11:16:49

## Background
I call myself a software developer, but that's not my current title, and that's not always been my role.  After graduating from college in the year 2000 with a BS in Computer Science but no experience, I found myself in a role where I was running reports and updating spreadsheets, but doing very little coding.  From there, I got myself into a role where I was doing system administrator and configuration management work, but still very little coding.  

When I changed companies and eventually joined Vonage, I started in configuration management and soon moved into a business analyst role.  Getting into all of the areas of the business and learning about their needs and how to document them clearly was very interesting and challenging.  I thought maybe coding wasn't the path my life was meant to take.  But in my personal life, I still liked to set up websites for the musical groups that I was involved in - drum and bugle corps and choruses.

As Vonage grew and morphed into a software company, there was more of a need for people who could both analyze and code.  I knew that I had to sharpen my skills in order to stay ahead of the changes.  So, I completed a frontend development nanodegree through Udacity.  Towards the end of the program, I told some of my co-workers what I had been doing, and one of them agreed to let me work on a project.  Even though I'm working on backend code, which is not what I learned in the program, the act of going through the course got me thinking like a developer again, gave me some experience with Github and helped me figure out how to learn from feedback.

## I continued to code in 2019 because... 
It's something I've always loved to do.  I want to make a difference by creating things.  I'm currently working in backend Java development, and it's very empowering to create capabilities for my team's platform that weren't available before.

## I deserve credit for...
Trying things even when I don't understand everything.  Learning how to ask the right questions.  Being patient with myself when things don't work the first time. 

## I hope to see my Vonage community...
Create amazing software that will enable businesses of all sizes to be able to connect with their employees and customers.

## Thanks...
For taking the time to read about my journey!  Looking forward to reading all the other posts as well.
Nested Array Inside Formik
Tags: react, array, nested, formik
Published: 2020-03-08 10:51:41

---
title: Nested Array Inside Formik
published: true
description: Nested Array with Formik
tags: react, array, nested, formik
---
I am trying to write a nested array of items inside Formik, with the Field I am okay but with the ImageField it's a component I wrote for uploading images, I need to give it a key of the array like the field but I tried many solutions none of them is working, any help with this?
```javascript
                          else if (data.type === "items") {
                            console.log(formikBag);
                            const dataKey = data.key + suffix;
                            return (
                              <>
                                <FieldArray name={dataKey}>
                                  <React.Fragment>

                                    {data.items &&
                                      data.items.length > 0 &&
                                      data.items.map((item, index) => {
                                        // tslint:disable-next-line: no-shadowed-variable
                                        const { key, title } = item;
                                        if (item.type === "text") {
                                          return (
                                            <Field
                                              name={`${dataKey}[${index}].${key}`}
                                              component={TextField}
                                              margin="normal"
                                              variant="outlined"
                                              placeholder={title}
                                              required={true}
                                              label={title}

                                            />
                                          )
                                        }
                                        else if (item.type === "image") {
                                          return (
                                            <ImageField
                                              value={(formikBag.values as any)[data.key]}
                                              error={(formikBag.errors as any)[data.key]}
                                              setValue={value =>
                                                formikBag.setFieldValue(data.key as string, value)
                                              }
                                            />
                                          )
                                        }
                                      })}

                                  </React.Fragment>
                                </FieldArray>

                              </>
                            )
                          }
```