teleren/devto huggingface dataset:
Streamlit Components tutorial - build a custom slider
Tags: streamlit, python, react, datascience
Published: 2020-08-06 16:07:00

When I first found Streamlit I was thrilled at how quickly I could build apps in Python. One of the first things I did was to see how fast it would take to convert a Jupyter notebook to Streamlit, so I rebuilt the [Timbre Transfer demo](https://github.com/andfanilo/ddsp-streamlit-ui). While I loved how simple and quick it was to do this - one issue I kept running into with my Streamlit apps was how they would rerun every time I interacted with the slider.

![Manual Regression Analysis](https://dev-to-uploads.s3.amazonaws.com/i/bp5fobi6sy2518rye4qb.gif "Manual Regression Analysis")

In this manual regression demo, Streamlit reruns the script every time the slider's value is changed. If the computation becomes overly complex, then the animation tends to lag behind the slider interaction.

Imagine if you wanted to use a slider to parametrize a Machine Learning model, but the model would be trained every time you moved the slider... it would be quite time-consuming! Unfortunately, the Streamlit Slider is deeply ingrained into the Streamlit codebase, so making such a change is easier said than done.

Streamlit version 0.63, however, introduced [Streamlit components](https://medium.com/streamlit/introducing-streamlit-components-d73f2092ae30) that now enable us to integrate arbitrary HTML/CSS/JS code into our apps. The extensions can then be published so that other users can benefit from this custom functionality.

Our slider problem is the PERFECT use case for this new extension point!

![Custom slider](https://dev-to-uploads.s3.amazonaws.com/i/mxe916hoypwxnpcyfsdn.gif "Custom slider")

This in-depth tutorial will teach you all the techniques to build your first Streamlit component, by rendering a slider that reruns Streamlit on mouse release rather than value change.

As a teaser, the following `Chart.js` interactive Streamlit app is built with less than 50 lines of Python+React code and uses all the building blocks from this tutorial.

![Chartjs teaser](https://dev-to-uploads.s3.amazonaws.com/i/wobsu31ey0fr1bn91rq2.gif "Chartjs teaser")

Interested ? Head to my [Streamlit Component tutorial](https://streamlit-components-tutorial.netlify.app/)! By the end of the tutorial, you will be able to plug in new widgets into Streamlit and reuse this workflow to wrap any custom web feature into your app.
Angular 10 Cookbook
Tags: angular
Published: 2020-08-06 15:49:35

---
title: Angular 10 Cookbook
published: true
description: Angular 10 Cookbook with tutorials and examples
tags: angular
//cover_image: https://direct_url_to_image.jpg
---

Throughout this cookbook examples, you'll learn Angular--one of the most popular platforms for building front-end web applications

Using Angular, you can take advantage of a powerful TypeScript platform and tools to create applications for web, mobile, and desktop. TypeScript is a superset of JavaScript with powerful OOP abstracts and a strongly typed system that compiles to JavaScript.

With Angular, you have strong tools and design patterns to build either small or large web projects.

Angular is developed and maintained by Google. It has a large community which means you can find help on the web if you have any issues implementing your project requirements.

Our Angular learning path will offer the necessary tutorials, PDF books, for beginners, and examples to get started using this framework in your next project.

Check out on [GitHub](https://github.com/techiediaries/angular-cookbook)
Software quality control with code linters
Tags: software, webdev, python, javascript
Published: 2020-08-06 15:31:18

Software quality control has always been an important and integral part of building and maintaining a software.Even though we have the sense of measuring the quality of a product by our own interpretations, it is not always possible to perfectly ensure the quality without conforming to the standards defined in the industry. Most of us are aware of the terminologies but do not know the key differences among them. This article is all about defining software quality control, pointing out the difference between quality control of software and software quality assurance and later we will use an example of code linters to signify a particular software quality control technique.

![Software Development](https://dev-to-uploads.s3.amazonaws.com/i/pqkb7dluwt1uytgr96cn.png)

##[What is Software Quality Control?](https://www.decipherzone.com/blog-detail/software-quality-control-code-linters)

Take for an example, a product you purchased from a shopping mart. What thing goes into your mind before and after you pick it up and pay for it?Obviously, youmay think of its quality, check for any flaws in it and only after using it finally, you decide how good or bad it is. This is from the buyers point of view i.e. the buyer is following a set of steps to make sure he/she is buying a proper product. The analogy we described can be applied to software as well. That was from the buyers context (the consumer). In the context of software, software quality control is set of procedures that the organisation’s key players use to ensure that their software product will meet the required quality.

According to Wikipedia’s  definition software quality control is commonly referred to as Testing.

###Software Quality Control Vs Quality Assurance

It is hard to differentiate between the two terms just by looking at them, they seem synonymous.However, one is the subset of the other. If Software Quality Control is a set of procedures to follow while developing a software product and adhering to the software engineering principles then Software Quality Assurance is the means of monitoring the entire software development process. It includes the following phases:

**Read the full article here: https://www.decipherzone.com/blog-detail/software-quality-control-code-linters **
Better way to test Laravel validation errors
Tags: laravel, testing
Published: 2020-08-06 15:28:26


If I want to validate that given input is a valid array, I used to write my tests something like this.

```php
$this->postJson("/api/items", [
    'items' => 'not-an-array'
])
  ->assertStatus(422)
  ->assertJsonValidationErrors('items');
```

This gives a false positive result in some situations. Test does not know which validation rule is failing.

Here is the better way to write your test.

```php
$this->postJson("/api/items", [
    'items' => 'not-an-array'
])
  ->assertStatus(422)
  ->assertJsonValidationErrors(['items' => 'array']);
```

This assert if the array keyword exist in the validation error message. Now I am confident that my test is passing because `items` is not an array.
#30DaysOfCJS: Making Reusable SVGs with React
Tags: community, svg, javascript, react
Published: 2020-08-06 15:27:35

---
title: #30DaysOfCJS: Making Reusable SVGs with React
published: true
description: #30DaysOfCJS Day 5, Making Reusable SVGs with React
tags: community, svg, javascript, reactjs
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/790d8ltdo6ot88e3uftq.png
series: 30DaysOfCJS
---

*This is a follow up post for Day 5 of* **#30DaysOfCJS**, *learn more about* **#30DaysOfCJS** *here* {% link jimcalliu/30daysofcjs-1jd3 %}

**Making Reusable SVGs with React | Isabela Moreira | CascadiaJS 2019**

Ever wonder what is SVG?

@isabelacmor used straight forward examples to explain what is SVG and why we use them, and taught us how to make SVG into React components!

If you'd like to watch the talk, here is the Youtube link, as well as the [slides]( https://github.com/isabelacmor/talks/blob/master/slides/ReusableSVGs.pdf) and [Github repo](https://github.com/isabelacmor/svgrobots)
{% youtube frIFkXhHR4k %}

Further readings:
- [Practical SVG](https://alistapart.com/article/practical-svg/)
- [Learn SVG in 2 minutes from Nate Murray](https://is-hosted-email-api-prod.appspot.com/api/v2/public/email/6195835440463872/6341044168818688)
- [SVG cheatsheet from Fullstack.io](http://email-assets.fullstack.io.s3-website-us-east-1.amazonaws.com/assets/fs/2019-05-09-how-svgs-work/svg-cheatsheet.pdf)
Best Swift resources for beginners
Tags: swift, ios, beginners
Published: 2020-08-06 15:23:05

Hello everyone!

I am learning Swift, so here is a short list of best resources to learn this language. I hope they will help everyone who is interested in iOS development like me. I've divided the post in multiple sections, so you can use it as cheatsheet 😃

## 🖥 Websites
[Hacking with Swift](https://www.hackingwithswift.com) - probably the best resource with thousands of tutorials.

[Apple Developer](https://developer.apple.com/) - official resource with everything: from code snippets to design guidelines

[raywenderlich](https://www.raywenderlich.com/ios/paths/learn) - this learning path covers both UIKit and SwiftUI frameworks

[Fricking SwiftUI](https://fuckingswiftui.com) - SwiftUI cheatsheet

[Official docs](https://docs.swift.org/swift-book/GuidedTour/GuidedTour.html) - intro in Swift

[codewithchris.com](https://codewithchris.com/learn-swift/) - another great tutorial

## 📺 Youtube channels
If you're stuck with problem that is too complex to google, or you prefer videos for learning, here are best channels to watch:

[Sean Allen](https://www.youtube.com/channel/UCbTw29mcP12YlTt1EpUaVJw) - this guy perfectly explains delegates, Xcode basics, and much more in short videos

[CodeWithChris](https://www.youtube.com/user/CodeWithChris) - huge amount of iOS tutorials

[Brian Advent](https://www.youtube.com/channel/UCysEngjfeIYapEER9K8aikw) - another cool channel

[DesignCode](https://www.youtube.com/channel/UCTIhfOopxukTIRkbXJ3kN-g) - great SwiftUI tutorials

[Kavsoft](https://www.youtube.com/channel/UCsuV4MRk_aB291SrchUVb4w) - amazing channel focused on SwiftUI - must have if you are mastering it!

## 📚 Courses
Wasting money on a course that is not very effective or you don't like it isn't a good idea, so in this section I recommend only [this](https://www.udemy.com/course/ios-13-app-development-bootcamp/) Udemy course, because I've finished it myself and I really liked it.

##Conclusion
Thank you very much for reading this post 😊. This is my first post on DEV, I hope you liked it and it'll help you in learning iOS development and Swift. I'll update the post if I find any other other helpful resources, or you can offer them in comments!
Personalizing GitHub Codespaces 
Tags: github
Published: 2020-08-06 15:22:30

Tried out using example personalized GitHub Codespaces today - info here - https://docs.github.com/en/github/developing-online-with-codespaces/personalizing-codespaces-for-your-account.

Easy to do:
1. Go to the example Repo - https://github.com/microsoft/vscode-dev-containers
2. Find the language-based example for you, in my case `../containers/markdown`
3. Review the DOCKERFILE and the `devcontainer.json` file and clone these files (you can modify them if you like)
4. Copy the `.devcontainer` folder into the root of YOUR Github Repo
5. Start a new Codespace in your repo. Verify the customizations, in my case, installation of extensions.

Shows extensions to be installed

![Shows extensions to be installed](https://dev-to-uploads.s3.amazonaws.com/i/93zaiig3t1fq8gkv3xl8.png)

Shows environment with extensions
![Shows environment with extensions](https://dev-to-uploads.s3.amazonaws.com/i/yumax78spqb6nr239lae.png)
Have you had any experiences with the new Angular 10?
Tags: discuss, angular
Published: 2020-08-06 15:17:17

---
title: Have you had any experiences with the new Angular 10?
published: true
description: Improvements and features in the new Angular version
tags: #discuss #angular
cover_image: https://themesberg.s3.us-east-2.amazonaws.com/public/posts/angular-10/angular-10-officially-released-dropping-ie-9-10.jpg
---

So with the release of the new version of Angular, last month or so, they bring several improvements and interesting features. 

Because of work reasons, I have to re-review what's in the framework to be a part of client projects that are built on it. 

But there's the common question of "should we update the project to the last version (since is a major one) or should we keep on working with the actual one?" 

That's where I come to you and your collective wisdom to see if you guys have any experiences with the new version or if you have any experiences that you could share with Angular and their major version changes in projects you've worked in the past.

How has the update experience been and what common pitfalls you recommend to avoid in general.

Let me know in the comments below. Thank you all!
#CodepenChallenge CSS Only "hologram" effect Button Icon
Tags: codepen, html, css, design
Published: 2020-08-06 15:04:11

This is a no Javascript button; when you hover your mouse on the button, a 3D icon will appear, like hologram effect. The button may be rotated by moving the mouse pointer over the button.

I used the color scheme that was set on the challenge description.

There are:

- &#35;a5a7bb;

- &#35;a496a4;

- &#35;554d73;

But I cheated a little, because I used ``` lighten() ``` and ``` darken() ``` functions of Sass or SCSS to change the shade of the colors.

## what's going on

I used a trick where I put a grid of blocks over the button, locate each blocks, then rotate the Home icon based on the position.

Below is the SCSS loop for it

```SCSS
$x-count: $width / $size;
$y-count: $height / $size;
$x-half: floor($x-count / 2);
$y-half: floor($y-count / 2);
$x-angle: 90 / $x-half;
$y-angle: 45 / $y-half;
$nth: 1;
@for $y from $y-count - 1 to -1 {
  @for $x from 0 to $x-count {
    $x-cnt: $x - $x-half;
    $y-cnt: $y - $y-half;
    $x-deg: $x-cnt * $x-angle;
    $y-deg: $y-cnt * $y-angle;
    &:nth-child(#{$nth}):hover {
      & ~ .icon-home {
        transform:
          scale(1)
          rotateX(#{$y-deg}deg)
          rotateY(#{$x-deg}deg);
      }
    }
    $nth: $nth + 1;
  }
}
```

That's only the important trick to make the rotation. The rest is, example, just make a 3D model of 'Home'. I used too many transforms to achieve the shape of the home.

Below is the actual live demo

{% codepen https://codepen.io/takaneichinose/pen/wvGwXQJ %}
Gridsome for beginners #2: Project structure Walkthrough
Tags: vue, javascript, webdev, webdeveloper
Published: 2020-08-06 15:03:44

---
title: Gridsome for beginners #2: Project structure Walkthrough
published: true
description: In this blog, we will go through the project structure 
tags: vuejs, javascript, webdevelopment, webdeveloper

---

__Read the introduction of the Gridsome [here](https://dev.to/hellonehha/introduction-to-gridsome-vuejs-4f3p)__

In the last post, we learned about what is JAMStack and Gridsome. Today we are going to see:

1) How to install Gridsome
2) Structure of the project

# How to install Gridsome
Installation of the Gridsome is very straight forwards. We need to do the following steps:

## Using Yarn

`yarn global add @gridsome/cli`

## Using NPM

`npm install --global @gridsome/cli`

**PS: We will be using NPM**

Once the installation is done, we will create the Gridsome project:

1) `gridsome create my-gridsome-site` to create a new project
2) `cd my-gridsome-site` to open folder
3) `gridsome develop` to start local dev server at `http://localhost:8080`


# Structure of the project
Once you will successfully install the Gridsome, you will have the following folder structure. Every folder has the `readme.md` which tells about the folder. 

![Gridsome folder structure](https://dev-to-uploads.s3.amazonaws.com/i/4omj9xxn33uhrrdb0u7s.png)


## components
Components are the building blocks of the project. Components are the smallest unit of the project such as - button, checkbox, radio, etc.

## Pages
Components come together to build the pages. Such as aboutus, contactus, services, etc. All the components get imported to the pages to build the page.

## Layouts
Layout components are used to wrap the pages. Layouts should contain the components like - header, footer, sidebar etc. that will be used across the site.

## Templates
Templates are used to create single pages for nodes in a collection. Nodes need a corresponding page in order to be presented on its own URL.

## config files

### gridsome.config.js
Gridsome requires `gridsome.config.js`. This file contains configuration and options for installed plugins and projects such as:

1) Site name
2) Site description
3) Plugins
4) Metadata
5) Templates

and many more

So, if you want to change the site name using `gridsome.config.js` to change that.

### gridsome.server.js
Gridsome has many APIs such as Pages API, Server API, Data API. Gridsome.server.js is optional file and used when we want to hook to the Gridsome server


In the next blog, we will learn about the core concepts of the Gridsome
Static Sites, Multi Page & SPA: When to use each one?
Tags: discuss
Published: 2020-08-06 14:49:17

I've been trying to define the use cases where each one of them fits better and I would love to start a discussion.

Specially with Multi Page(server rendered). Statics Sites may be a good choice for blogs and to promote something, SPA are good when there needs to be heavy user interactions. But where do Multi Pages belong in the modern web?
Docker vs. Kubernetes: The important role of each
Tags: app, development, containers, devops
Published: 2020-08-06 14:47:13

While talking about cloud computing and containers, the issue of Kubernetes vs. Docker is often posed. This isn't really a valid question, however. Don't screw with Kubernetes and Docker. These are basically different technologies that work well together to create, execute and scal containerized applications.

An important part of DevOps ' development is to consider how Kubernetes and Docker containerization blends with the app and web network.

## What's a Container & what good is it for?

If [mobile app developers](https://underlabs.ca) need to use a new app on a new computer, certain steps have to be taken first. Perhaps even updating the operating system.

What if there were a single package that had all you needed? Each specification, application, frameworks or even security configuration is bundled into a good, clever, all-inclusive package. You just have to download it and used it.

Containerized systems have a single file, which is called an image, which includes all the dependencies, settings and frameworks. The most important advantage of a container is portability — it can be run wherever you need it. You 're on the desktop. You 're on your local server. It's in the cloud. It will always work the same way, regardless of capital. Containers separate information from their environment and ensure that it works continuously.

Unlike freight shipping containers with a standard size for storage and portability, software containers use a specific interoperability and portability model.

The downside is that tanks have a very small footprint. You only need a request and a description of all the libraries available. Containers share the kernel of the Host OS to virtualize the programme, unlike virtual machines which each need a complete copy of a guest operating system.

## Should I use a Container?
If you use an infrastructure for a microservice or want to turn into such an architecture, Kubernetes will be right for you. It is particularly good to use containerization software like Docker now. Many organizations thus rush to use Kubernetes without understanding the fundamental concepts of the distributed system. We seek to set up their own cluster of Kubernetes and host simple websites or a small flexible framework. This is risky — because things will break down easily because you do not have a deep knowledge of the system.

Container technology is here to work like Docker and Kubernetes. They help us to focus on systems and applications in a new way and are fundamental to our DevOps engineering services. All systems complement one another and are constantly evolving.

The architecture of container-centered platform software makes the applications more scalable and future - proof. Old VMs could work Well for now. Nonetheless, you want to move to a containerized platform in a few years' time.
An idea and a MVP, is it worth to continue?
Tags: webdev, discuss
Published: 2020-08-06 14:45:53

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

🧱 **Genesis**
A few month ago, I was looking for a way to get a list of restaurants in a given city, in a specific area. I needed a list of addresses (and phone numbers if possible). After extensive research, I found nothing satisfactory.

So, I tried to get this information from Google Maps and Foursquare until I read their terms of service. Obviously, data from services such as Google Maps or Foursquare can not be used extracted. For example, the Google Maps Terms of Service (3.2.4) states "Customer will not extract, export, scrape, or cache Google Maps Content for use outside the Services".

Then, I tried OpenStreetMaps and found what I was looking for: a list that could be used without constraints. However, it is quite difficult to define a specific area and to extract these data. That's when I decided to create a tool to automate the process.

At first it was only for me, and after some time and more free time I decided to create a website around and start a new project: www.thedatapond.net. I'm not sure yet, but people may be interested in this type of service. Tell me what you think in the comments. Good idea, bad idea?

🕹️ **How it works ?**
If you want to get data from the map, the procedure is pretty simple :
* 🗺️ draw a geographic zone on the map
* 🧩 define your parameters (categories, keywords...)
* 🗃️ and you get a list of names, addresses, websites, telephone numbers... which you can download in CSV format.

The data you get are not as rich as data from services like Google Maps or Foursquare but, at least, it is legal to use them (ODC Open Database License).

The website is not completely finished, there are still 1000 things to do: design, typo, features, improve lists... but the idea is to continue development based on comments or requests from users.

If the feedback is positive, I'll see if it's a good idea to spend some time on this project and push it to the next level 🚀 : SEO, Product Hunt, Hacker News, Reddit, ads...

We are now super eager to read your comments (positive or not).

🙏
Auth0 Hackathon
Tags: devops, codenewbie
Published: 2020-08-06 14:44:07

We are very excited to announce our first ever hackathon! We’ve got 6 superb partners, $10,000 worth of prizes, and the best developers in the world (you) hacking with us to solve some very real issues.
[Read more](https://auth0.com/blog/auth0-hackathon/?utm_source=newsletter&utm_medium=sc&utm_campaign=auth0_hackathon)