teleren/devto huggingface dataset:
Add CSS animated hotspot links to a responsive image
Tags: css, tutorial
Published: 2020-07-09 03:47:06

Hotspots are visual indicators applied over an image with a call to action (hyperlink, tooltip, modal).  

In this example we’ll be using hotspots to highlight some features of a car interior.

Demo -> https://codepen.io/michaelburrows/pen/PoZeJvy

Let’s get started with the HTML.

```html
<div class="hotspots">      
  <img src="https://images.pexels.com/photos/1104768/pexels-photo-1104768.jpeg" />
  <a href="#" class="hotspot" id="hs-a">A</a>
  <a href="#" class="hotspot" id="hs-b">B</a>
  <a href="#" class="hotspot" id="hs-c">C</a>
</div>  
```
 
If you want to add more hotspot just be sure to give them a unique id.

Now for the CSS.

For this to work we need a relative positioned parent (hotspots) and absolute positioned children (hotspot).

```css
.hotspots {
  position: relative;
}
.hotspots img {
  max-width: 100%;
  height: auto;
  display: block;
}
.hotspot {
  position: absolute;
  width: 30px;
  height: 24px;
  padding-top: 6px;
  border: 3px solid rgb(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: fader 2s ease infinite;
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-family: sans-serif;
  color: #555;
}
.hotspot::after {
  content: "";
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
  display: block;
  margin: -21px auto 0 3px;
  transition: all 0.2s;
}
```

We can now position our hotspots in the desired locations using percentage based measurements.

```css
#hs-a {
  top: 50%;
  left: 25%;
}
#hs-b {
  top: 32%;
  left: 44%;
}
#hs-c {
  top: 25%;
  left: 68%;
}
```

If you resize your browser the hotspots will now maintain their position over the image.

To finish we’ll add some simple animation and some hover effects.

The following CSS will make the hotspots green on hover and also fade in and out the border.

```css
hotspot:hover {
  border-color: lightseagreen !important;
  animation-play-state: paused;
  color: #fff;
}
.hotspot:hover::after {
  background-color: lightseagreen;
}
@keyframes fader {
  50% {
    border-color: rgb(255, 255, 255, 0.2);
  }
  100% {
    border-color: rgb(255, 255, 255, 0.8);
  }
}
```
New On GitHub: Add A README Cover To Your GitHub Profile
Tags: github, tutorial, howto, personalbranding
Published: 2020-07-09 03:44:19

**GitHub has recently rolled out a new feature which allows you to add a README to your GitHub profile.  Here's how to get yours in two steps.**

*Originally published at [suze.dev](https://suze.dev/blog/2020/07/09/new-on-github-add-a-readme-cover-to-your-github-profile/).*

### 1) Create a new repo with the same name as your GitHub username.

Go to [github.com/new](https://github.com/new) and type your **GitHub username** into the **Repository name** field.

Make sure you leave it as a **Public** repo and **initialise it with a README**.

When you press the **Create repository** button, the README will be **live immediately** with some **default content**.

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

### 2) Customise and edit your README.

You can do this on the **GitHub website** or **clone the repo** to your computer and do it locally.

Add whatever **text**, **pictures** etc you like.  GitHub gives you some suggestions to get started.

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

If you want to use an **image** that's in one of your other **public repos**, link to it in the usual way:

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

Use the **[usual markdown formatting](https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf)** for your text.

That's it!

**[Here's my GitHub profile README!](https://github.com/SuzeShardlow)**
A way to "manage" modules on Deno
Tags: deno, node, javascript, productivity
Published: 2020-07-09 03:16:52

it's have been weeks when I started to learn Deno, when my team started to work in the [Trex](https://github.com/crewdevio/Trex/) project.

there are many people still want to a package manager for deno and I think deno doesn't need one, but sometimes we need an auto-completation and when you use deno at first time, before caching the module there's no auto-completation of words of a module.

Trex has a new release to help with that:
![Use Trex](https://cdn.discordapp.com/attachments/727169454667989016/728363543614980116/ajio.gif)

Trex is a way more easy to use the [Import Maps](https://deno.land/manual/linking_to_external_code/import_maps)

This tool also support install modules from:
- [Deno.land](https://deno.land/)
- [Nest.land](https://nest.land/)
- [denodpkg](https://denopkg.com/)
- an you can install custom modules from any url 


You can see all the new features in the Trex documentation: [Documentation](https://github.com/crewdevio/Trex/blob/master/README.md)
Problems are better than ideas
Tags: motivation, ideas, webdev, productivity
Published: 2020-07-09 03:08:28

<link rel="canonical" href="https://ottogutierrez.com/problems-are-better-than-ideas/"/>

## Why am I writing this article

This is my journey to becoming a software developer, and so far it’s taken a long time for me! I know, you’re probably thinking “don’t be too hard on yourself!”, but hold on! I’m just trying to be realistic with myself to find why this journey that started around 2012 it's still going... and the problem was this: I got this romantic dream of coming up with a millionaire app idea that would take me to success and also to land a awesome job down the line. But the reality is that I’m not really good at ideas, specially innovative ideas; and these are really hard to come by, even for people that have made viral apps.

Then I see websites with big lists of app ideas, but I always think: "...those are not for me,, I need to be interested in the software I'm building. And also there needs to be a purpose, even if it is just practice"

## What’s wrong with ideas?
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g5pc1wr53pkv1dslhpe8.png)

Recently I had a discovery that has given me a lot more hope and a more attainable goal than just coming up with innovative ideas for apps. I realized that I have the knowledge and skill to execute programming tasks once my objectives are defined, something I don’t have when looking for my killer idea. So it's not that ideas are bad, but problems are a faster way to finding your ideas.

## Problems is the way to go!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r7kmfugs9imyi85wt8mp.png)
So instead of saying why Ideas are bad, let me explain why problems are better. Well, as you may know, problems have the following characteristics:

- Easier to find than ideas, they are everywhere!
- Anyone is willing to share their problems and/or frustrations. For ideas, people are a bit more protective of them

## Applying this...

There are several ways I am applying this new approach. As an example, I'm contributing to the [Protege.dev](http://protege.dev) project, this is helping me by honing my software skills, experience how it is to contribute to a big source code, and all this while helping the Protege team! And the best of all this: problems (issues) are already there, I don't need to find them!

Also, at my current job I'm also in the constant look out for problems, so I can bring value to the company by automating steps and trying to make some processes more efficient!

And you? Do you prefer ideas or problems?



*<span>Cover Photo by <a href="https://unsplash.com/@thjperry?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Timothy Perry</a> on <a href="https://unsplash.com/s/photos/ideas?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>*
GitHub Actions 利用時に misc/wasm にパスを通す
Tags: go, webassembly, github
Published: 2020-07-09 03:07:57


Go で "syscall/js" を利用してるとテストを実行したときに `$GOROOT/misc/wasm` 以下にパスが通ってる必要があります。

`go env GOROOT` を活用すれば簡単です。


```yaml
name: main

on:
  push:
  pull_request:

jobs:
  main:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/setup-go@v2
        with:
          go-version: 1.14
      - uses: actions/checkout@v2
      - run: |
          export PATH=$(go env GOROOT)/misc/wasm:$PATH
          make test
```

一応 makefile も載せておきます。

```makefile
all:
	GOOS=js GOARCH=wasm go build -o wasm.wasm


test:
	GOOS=js GOARCH=wasm go test
```
Thermal Data
Tags: hotdata, colddata, dataengineering, data
Published: 2020-07-09 02:41:04

Dados possuem temperatura, conhecer a temperatura dos seus dados ajudará você a saber como gerenciá-los da melhor forma.
 
A temperatura dos dados refere-se diretamente a suas características de acesso, e portanto de armazenamento. As classificações podem ser divididas em: hot, warm e cold data.

Hot data são dados frequentemente acessados, possuem um volume total do banco de dados em torno de megabytes ou gigabytes. A quantidade de dados utilizados em uma consulta gira em torno de kilobytes ou bytes, enquanto a taxa de latência é em milissegundos. São dados voláteis e seu custo em geral é na casa dos reais. 

Warm data são dados com frequência de acesso um pouco menor que hot data, seu volume total do banco de dados é em torno de gigabytes ou terabytes. A quantidade de dados utilizados em uma consulta é entre kilobytes ou megabytes, possui taxa de latência entre milissegundos e segundos. São dados menos voláteis quando comparados ao hot data, porém ainda assim com taxa de volatilidade alta e seu custo é na casa dos reais ou centavos. 

Cold data são dados com baixa frequência de acesso, seu volume total do banco de dados é em petabytes e por conta disso possui alta taxa de latência, podendo rodar consultas com quantidade de dados em kilobytes ou terabytes em minutos ou horas. A taxa de volatilidade é baixa e seu custo é na casa dos centavos. 

Uma solução de dados adequada deve levar em consideração a frequência de acessos dos dados, tempo de resposta esperado, quantidade de acessos simultâneos e custo.
What is Random Forest?
Published: 2020-07-09 01:46:44

#Introduction

Random Forest is a very powerful supervised machine learning algorithm but can be a little confusing to understand. A simple explanation of what a Random Forest does is that it takes in a collection of decision trees, with each tree using different random features (Subspace Sampling) and only a portion of the total data with replacement (Bagging), then returns the mean of the predictions in the case of Regression or the mode of the classes in the case of Classification. So to really understand random forest we need to understand how decision trees work.

#Decision Trees

Decision Trees are very similar to a flowchart where you can follow each decision to another step until you get to a final outcome, though the way you make the splits in a Decision Tree to come to your outcome is a bit different than your normal flowchart. To create start at the top of the decision tree(root node) with all of your data and then make your first split into your first two leaves, from there you continue dividing your internal nodes into two more internal nodes until your data no longer provides information to create more splits(leaf node) or reaches a set limit which can be set by a number of hyperparameters. So you might be thinking that doesn't sound too complicated, well then here comes the math, to create these splits you will need to calculate which variable would best split the data out of all the different splits you could do, luckily we have computers for that because this process can get very labor intensive very quickly. 

#Metrics for Splitting

I will try to keep this part simple for your sanity as well as mine. There are two different metrics to calculate the best split, information gain and Gini impurity. Information gain uses a concept called entropy, which in information theory is kind of like the "amount of information held in a variable", to be able to numerically compare the change of information before and after the split and find the best one. While Gini impurity is a calculation of the probability of a randomly selected variable being classified incorrectly. 


#Some Pros/Cons of using Random Forest

##Pros
- Strong performance and highly accurate for most datasets.
- Can handle a high number of variables.
- Works with missing data.
- Gives user good measure of variable importance.
- Avoids overfitting by using the diversity of different samples and features used in the separate decision trees. 


##Cons
- Large memory footprint due to being an ensemble of a large collection of decision trees.
- Slow due to computational power required.
- Can be time consuming to tune hyperparameters, though less complex some similar algorithms such as Gradient Boost.

#Conclusion

Random Forest is extremely versatile and well performing machine learning algorithm especially for classification problems. It also works well with large amounts of data and does well avoiding overfitting. That being said it is not the most efficient model for predictions so it is best used when you have a lot of computational power and memory available.
Day 38 - #100DaysofCode - Built my first basic rails application
Published: 2020-07-09 01:33:15

Today I built a very basic rails application, I ran the following code to create my application:

``rails new crud_in_rails_instruments``

Then I generated my application by running:

``rails g resources instrument name instrument_type rating:integer pleasant:boolean``

<small> <i>please note that i had to change my table from <b>type</b> to <b>instrument_type</b> because <b>type</b> is a ruby object. </i></small>

The resource generator created my model in ``app/models/instrument.rb``:

```
class Instrument < ApplicationRecord
end
```

It created my instrument controller in ``app/controllers/instruments_controller.rb``

```
class InstrumentsController < ApplicationController
end
```

In addition, it created all of the my routes in ``config/routes.rb``

I went on to create my controller actions in ``app/controllers/instruments_controller.rb`` and my views in ``app/views/instruments``.

Some things I learned while building this simple application is how to render a partial form in rails. I used a partial form in my edit view and new view.

First I created a partial form in ``app/views/instruments``titled ``_form.html.erb`` and added the following code:

```
<h1>Form For</h1>
<%= form_for @instrument do |f| %>
Name: <%= f.text_field :name %>
Type: <%= f.text_field :instrument_type %>
Rating <%= f.number_field :rating %>
Pleasant? <%= f.check_box :pleasant, {:checked=>true} %>
<%= f.submit %>
<% end %>
```

Then I rendered that form in my ``app/views/instruments/edit.html.erb`` and ``app/views/instruments/new.html.erb`` by adding the following code:

```
<%= render 'form' %>
```

That simple line of code generated the form I needed on each page. 

Rails makes everything easier. What would have taken me hours building in Sinatra was done a hour or two (with a few newbie hiccups) 

Feel free to view my github repo containing the code. It is very simple but worth checking out :)

{% github https://github.com/SincerelyBrittany/crud_in_rails_instruments %}

Song of the day:

{% soundcloud https://soundcloud.com/hadassahisme/fool-for-you %}
Instalação do Git e subir seu repositório para o GitHub
Tags: git, github, linux, beginners
Published: 2020-07-09 01:13:31

Olá! nesse artigo eu irei dizer com eu faço a instalação e configuração do git/github no linux (estou usando o Ubuntu 20.04), e também como fazer com que um repositório local se torne remoto.

Espero que lhe ajude!

### ✨ Verificar a existência do git:
Antes de tudo, você precisa conferir se já tem o git instalado no seu computador utilizando o comando: ``> git --version``, caso apareça "command not found" siga para a instalação.

### ✨ Instalação do git: 
No linux utilize o comando ``> sudo apt install git`` e insira sua senha de sudo, logo após a conclusão fazer uma verificação da versão para saber se foi instalado corretamente: ``> git --version``.

### ✨ Configuração de ambiente: 
Utilizarei os seguintes comandos para definir o padrão de nome, email, editor de texto (opcional).
``> git config --global user.name "seu nome"``,
``> git config --global user.email "seu email``,
``> git config --global core.editor vscode`` (por exemplo).

Para visualizar todas as configurações feitas: ``> git config --list``. 

### ✨ Repositório local para remoto:

Utilizei o tutorial da [Documentação oficial](https://docs.github.com/pt/github/authenticating-to-github/connecting-to-github-with-ssh) como base de estudo e prática para entender como funciona o processo, e deixei indexado para você fazer o passo-a-passo também.

Em minha visão está bem completo e didático, então essa etapa será finalizada. :D

#### Espero que tenha curtido!
How to Create a Twitter Bot with Python that gets you Followers
Tags: tutorial, codenewbie, twitter, python
Published: 2020-07-09 01:07:56

{% youtube PPEuT12fzvg %}
Let's learn how to create a serverless Twitter bot with Python and Tweepy.
Here we will use AWS Lambda and CloudWatch to execute your Twitter API periodically.

code: https://github.com/codingx01/twitterbot

Follow on:
Github: https://github.com/codingx01
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/

Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
The best payment gateway
Tags: discuss
Published: 2020-07-09 00:26:23

I am developing a Web App that accepts credit card payments, for now mainly from European cards in particular MasterCard and Visa, I have implemented Stripe as a Payment Gateway but now that the transactions increase I have a problem with static fees. Stripe has a cost of 1.4% + € 0.25 per transaction, but having many transactions starting from a few euros the cost of € 0.25 is a problem, are there payment gateways that have commissions only on the percentage of the transaction without the static cost? as if Stripe charges only 1.4%, even if it has a monthly cost is not a problem, the important thing is that there are no static costs.
Home to Become a Microsoft MVP
Tags: leadership, career
Published: 2020-07-09 00:22:48

**Live-streamed on July 7th 2018 at 12:00pm Pacific**

{% youtube aKQr2vn4VtU %}

The Microsoft Most Valuable Professional (MVP) is an award program for technologist who demonstrate outstanding leadership in the technical community.

In this live-stream replay I chat with Tim Warner about who the program is for, and what it takes to become an MVP.

Along the way we do Q&A with a LIVE audience and provide tips on how to navigate your own journey.
How to use AlpineJS with Laravel Mix
Tags: tech, laravel
Published: 2020-07-09 19:41:52

---
title: How to use AlpineJS with Laravel Mix
published: true
date: 2020-07-09 00:22:25 UTC
tags: Tech, Laravel
canonical_url: https://martinbetz.eu/article/how-to-use-alpinejs-with-laravel-mix
---

This is another thing I do over and over and tend to forget how to properly do it: How can I use [AlpineJS](https://github.com/alpinejs/alpine) with Laravel Mix?

AlpineJS is a great lightweight library to sprinkle some interactivity into your website. I struggled a lot in the past with the question: "Do I really need to learn VueJS to get a simple dropdown account menu?" With AlpineJS, this is super simple to do.

If you want to use AlpineJS within your Laravel app, you can of course simply use the CDN version (`<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script>`), but when I use other scripts as well, I prefer to have it bundled to one file to reduce requests.

Here's how to use AlpineJS with Laravel Mix:

- `npm install alpinejs`
- (in `resources/js/app.js`) Add the line `import 'alpinejs';`
- (in `webpack.mix.js`) Make sure `mix.js('resources/js/app.js', 'public/js')` is there
- `npm run dev` (or `production` or `watch` instead of `dev`)
- (in the Blade file where you want to use Alpine) Insert `<script src="{{ asset('js/app.js') }}" defer></script>` in the `<head>` section
- Use Alpine as described in the docs, such as the following account dropdown

```
<div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button>

    <ul
        x-show="open"
        @click.away="open = false"
    >
        Dropdown Body
    </ul>
</div>
```
Cómo exportar archivos de Excel en Laravel
Tags: laravel, webdev, php, backend
Published: 2020-07-09 00:18:09

Trabajando en un proyecto personal me vi en la necesidad de exportar datos generados por consultas eloquent desde laravel en formato Excel. La dependencia que me funciono bastante bien es la siguiente:

https://docs.laravel-excel.com/3.0/getting-started/installation.html

Adicionalmente adjunto dos tutoriales que use:
* https://www.youtube.com/watch?v=YOMQudcPYiU
* https://laraveldaily.com/laravel-excel-export-formatting-and-styling-cells/

Saludos!
Export user records in Firebase Auth to Google Spreadsheet
Tags: firebase, googlecloud, typescript, node
Published: 2020-07-09 00:09:26

I published node project to export user records in Firebase Auth to Google Spreadsheet.

[https://github.com/yosan/FirebaseAuth2Sheet](https://github.com/yosan/FirebaseAuth2Sheet)

You can get user email's without downloading them to local. It is good for privacy when this code is executed in some server.
Cloud Cost Optimization
Tags: cloud, optmization
Published: 2020-09-08 12:05:48

---
title: Cloud Cost Optimization
published: true
date: 2020-07-09 00:00:00 UTC
tags: Cloud,Optmization
canonical_url: https://www.loginradius.com/engineering/blog/cloud-cost-optimization/
---

Organizations adopting cloud infrastructure also they are increasingly working with multiple cloud providers. "By 2021, over 75% of midsize and large organizations will have adopted a multi-cloud and/or hybrid IT strategy."Gartner Predicts A recent Gartner report cloud cost…

   
[Read On](https://www.loginradius.com/engineering/blog/cloud-cost-optimization/)
Obsolete Umbraco Property Types.
Tags: umbraco, configuration
Published: 2020-07-10 07:52:55

---
title: Obsolete Umbraco Property Types.
published: true
date: 2020-07-09 00:00:00 UTC
tags: umbraco, configuration
canonical_url: https://www.owain.codes/blog/posts/2020/july/obsolete-umbraco-property-types/
---

Yesterday I had a bit of a panic. I was bug fixing something for a client and I changed the property editor from (Obsolete) Media Picker to Media Pick... [Continue reading](https://www.owain.codes/blog/posts/2020/july/obsolete-umbraco-property-types/)