teleren/devto huggingface dataset:
Installing the Pro version of Font Awesome
Tags: fontawesomepro
Published: 2020-06-15 07:29:53


1.  Create a  `.npmrc`  file in the root of your project (or where you have your package.json file)  `@fortawesome:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=TOKEN`
2.  After that configuration, you can install the latest Pro version of Font Awesome via npm or yarn:  [using-package-managers](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers)
3.  Implement in app.scss  `// font awesome 5 pro @import "node_modules/@fortawesome/fontawesome-pro/scss/fontawesome.scss"; @import "node_modules/@fortawesome/fontawesome-pro/scss/solid.scss"; @import "node_modules/@fortawesome/fontawesome-pro/scss/light.scss"; // and so on - brand etc`
4.  Copy webfonts to your directory fonts from  `node_modules\@fortawesome\fontawesome-pro\webfonts`
5.  In variables.scss  `// font awesome path $fa-font-path: "../fonts/fontawesome-pro/webfonts"; $font-family-font-awesome: 'Font Awesome 5 Pro';`
6.  CSS style - To choose solid, or light depends on font-weight  `content: "\f128"; font-weight: 900; // this is solid`
How do you do user testing?
Tags: usertesting, usertest
Published: 2020-06-15 07:29:03

User testing, or ease of use testing, is a key part in structuring, settling and propelling an incredible automated item. It's tied in with identifying usability  issues at any phase of the item improvement cycle with the point of improving the general client experience. This is finished by checking how delegate clients cooperate with the item in a reasonable setting. Along these lines, you can see precisely what works and — more importantly — what doesn't. 

The issue numerous creators and item improvement groups have, in any case, is leading client testing that will recognize real item issues and configuration imperfections. This is justifiable. There are a ton of factors that can impact the quality and legitimacy of a convenience test. Things like financial plan, tight cutoff times, members, deficiencies in staff, ineffectively organized inquiries, muddled models, and diverse testing situations can — and for the most part do — devalue the conclusive outcomes.

To guarantee you set up a substantial user test you have to comprehend the <a href="https://www.testingxperts.com/blog/user-testing">user testing process</a>. I've written down 6 simple-to-follow ventures for effective user testing. How about we get straight into it.

Stage 1: Define Testing Objectives 

Stage 2: Choose a Testing Method 

Stage 3: Find Representative Users 

Stage 4: Create Task Scenarios 

Stage 5: Replicate the Testing Environment 

Stage 6: Analyze the Findings 

Client Testing: Test, Analyze, Repeat 

Effectively leading user testing doesn't need to be advanced science. It's very simple once you characterize your destinations, pick your testing technique, make your assignment situations, plan your inquiries, and report the outcomes.
Why I am making rookie mistakes?
Tags: watercooler
Published: 2020-06-15 07:25:16

Either on the work projects or in my personal ones I find myself making rookie mistakes such as in the https://github.com/ellakcy/docker-moodle/blob/master/dockerfiles/fpm_alpine/Dockerfile not setting the correct permissions in order for the entrypoint to be executed?

So I keep wondering why I do these mistakes? I mean it is an obvious mistake not to set +x permissions on an executable script.
convert-psd-to-html-responsive-with-css-javascript
Published: 2020-06-15 07:25:05

About This Gig
Please text me to discuss about your projects.

Hi,

If you are looking to convert

   1)    psd to html responsive

   2)    sketch to html responsive

  3)    image to html responsive

Then you are in right place.

I will convert your psd/image/sketch files to responsive  webpage with css, bootstrap, Javascript, Jquery, php. Site design or site content will remain same as psd.

What I need:

To develop your website I need your psd/image/sketch files.

You are here because you will get:

Responsive design
Cross browser compatibility (Chrome, Firefox, IE9+, Safari, Opera)
Fully hand coded HTML, CSS, JS, PHP
Latest Framework Bootstrap 4,Jquery
Unlimited revision
Express delivery
W3C validated code.
Server Upload.
100% copyright safe content
3-month free service.
Quality work and longtime relationship
Thank you

Ismail
https://www.fiverr.com/share/RVvBpw
エラトステネスの篩 (Sieve of Eratosthenes)
Tags: eratosthenes, エラトステネスの篩
Published: 2020-06-15 07:23:38

{% youtube pKDQ0xK4Wig %}

## code

最近JavaScriptでPriorityQueueとかなくて悲しいことが多いのでさけがちです。今回はC++にしました。

```cpp
class Solution {
 public:
  int countPrimes(int n) {
    int count = 0;
    if (n < 2) {
      return count;
    }
    vector<bool> visit(n);
    for (int i = 2; i < n; i++) {
      if (visit[i]) {
        continue;
      }
      count++;
      int v = i;
      while (v <= n) {
        visit[v] = true;
        v += i;
      }
    }
    return count;
  }
};
```

## 問題

* https://leetcode.com/problems/count-primes/submissions/
Why it's important to strengthen core HTML/CSS and Vanilla JS before frameworks.
Tags: webdev, javascript, beginners, healthydebate
Published: 2020-06-15 07:18:44

If you have been following my posts, you would know that I am not a full-time blogger who has any fixed agenda or timeline for her content. I write what I experiment. And I write to document my learnings on-the-fly, hoping it will help others who seek similar goals! So, the next question arises...

In this era of powerful frameworks, why am I spending time on vanilla JS, HTML and CSS. Long answer short-

1- While frameworks were busy keeping us away from our roots, the HTML5+CSS3+Vanilla JS combo have grown so powerful that it's mind-blowing how much catching-up we have to do. 

2- While the frameworks raging through the industry change with a blink, these roots will be our only constants and our forever companions.

3- God forbid, but if ever these open-source frameworks start licensing themselves, companies will start relying on their home-grown frameworks (already many "big fishes" like Facebook, Oracle... prefer this over third-party- they want their revenue to stay indoors). This is when people with strong fundamentals will prove to be an irreplaceable asset!

4- Every framework has its own set of limitations (no one's perfect). And, if you want to design a webpage out of the imagination of these framework developers, you have to rely on your own strength to create from scratch!

I absolutely realise how controversial all points presented above could be! And that's why it's open for a friendly discussion. 

Again, I am not against frameworks. I am just against all the newbies jumping directly into the frameworks without knowing their roots. They end up thinking that certain features are specific to their frameworks while all the time it's offered by Vanilla JS and the framework is only gift-wrap around it. I have been there, and I don't want the newcomers to be in the same delusion. 

Any thoughts?
Multi-lingual Chicken and Egg
Tags: typescript, challenge
Published: 2020-06-15 07:06:33

A colleague uploaded this image to the company Slack

![Chicken and Egg Sorted](https://dev-to-uploads.s3.amazonaws.com/i/wdfr7bs4lgruk2q1atln.jpg)

The claim was "Finally, it's sorted".

Being bi-lingual, I wanted to challenge that, as in my language, the word for egg appears lexicographically before chicken. Funnily enough, even the phrase itself exists, but the phrase reverses the order of the words - while in English the phrase is "What comes first, the chicken or the egg", in my language, the nouns are reversed.

What do you do when two parties disagree? Look at everyone else!
I found [this website](https://smodin.me/translate-one-text-into-multiple-languages) which translated the words for me into all the languages it had available (101).
I chose to include also a translation for "Hen", as "Chicken" is the meat you eat, while "Hen" is the animal which lays eggs. It will translate into a different word in many languages.

This site is also great because it lets you export the translations as a `JSON` or a `CSV` file! 😍

There isn't anything too exiting about the implementation. I grouped the words by languages and then for each tuple I sorted the items and counted "which came first".

This was the bottom line:
![Egg is the winner](https://dev-to-uploads.s3.amazonaws.com/i/rtc3tb7q2xrxr95n97v7.png)

It is a little tight between the chicken and the egg, with the egg having one more win, but if you account for the egg vs. hen, the egg wins big time!

The world has said it's piece. The egg came first. 🥚

P.S.
You can find the source code [here](https://stackblitz.com/edit/chicken-hen-egg-languages). You are welcome to code review it and improve it.
MiMoSim - Another way to scroll in macOS
Tags: macos, swift, scrolling, mouse
Published: 2020-06-15 06:32:28

---
title: MiMoSim - Another way to scroll in macOS
published: true
description: A tiny macOS app that allows you to scroll contents in an interesting way
tags: macOS, swift, scrolling, mouse
---


## Feature
Scroll content by moving the mouse in a circular path.

## Installation
- Download the MiMoSim app from the release page or you can build from source code
- Double-click to run MiMoSim
- Since MiMoSim listens to the keyboard events (to understand when you want to start and end a scroll session) and mouse events (to understand which direction and how fast scroll do you want), you will be asked to give MiMoSim accessibility privilege. Open your System Preferences → Privacy → Accessibility, and grant accessibility privilege to MiMoSim by checking MiMoSim item on the list.
- Double-click again to run MiMoSim
- Now you will see a small MiMoSim icon in the system's status bar
- Start using MiMoSim

## Usage
- Press and hold the control key (the mouse now is in P1 position on the screen)
- Move the mouse in any direction a short distance ~ 50pt
- Then you will see the scrolling wheel appears with P1 as its center point.
- Now move the mouse in a circular path, and you will see the content under the mouse being moved in sync with your mouse movement. 
- Move your mouse in the clockwise (CW) direction to scroll up, and counterclockwise (CCW) direction to scroll down.
- Release the control key to finish

***Watch this video for more detail:***

{% youtube VlE2XT3h_F8 %}


{% github https://github.com/congnd/MiMoSim %}
JOnConf 2020: Java trends and best practices - FREE Online conference
Tags: java, eventsinyourcity, career, news
Published: 2020-06-15 06:30:20

Our team is proud to announce a brand new event we put together for developers. And everyone is invited! In times where social distancing is absolutely necessary we want to bring career growth and networking opportunities directly in your homes. 


Our goal is to provide you with exclusive training on the best Java practices as well as trending tendencies in the industry. **FREE of charge!** Directly from the experience of Java champions with over a decade of experience in the field. 

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

To make the event special, we recruited our long-time partners and Java champions who have previously been featured in our [Java Daily newsletter] (https://dreamix.eu/blog/tag/java-daily). I want to share with you more about some of those industry leaders who will be taking developers under their guidance.

* [Sven Ruppert] (https://github.com/svenruppert) has been working with Java since 1996 and is an Oracle Developer Champion as well as a speaker, helping developers worldwide to grow their business.
* [Victor Rentee] (https://victorrentea.ro/) is an independent trainer and consultant as well as a renowned Java champion. He has been teaching developers for the last 8 years with over 1500 trainees worldwide.
* [Nicolas Fränkel] (https://github.com/nfrankel) is a developer advocate who has been working with Java with more than 15 years. He has extensive experience consulting customers from various fields. His training experience extends past courses and conferences and into university halls and institutions that provide a higher level of education.

* Some of Dreamix’s own leading specialists will be taking the stage as well, digitally speaking, to share their first-hand experience from years of developing custom software. 

The full [list of 10+ speakers] (https://jonconf.com/speakers/) is yet to be announced, so keep an eye out for that! With over 5 zoom rooms and multiple workshops, you will dive deep into the latest trends and best practices in the Java world.

We hope we see you in our virtual rooms a few weeks for now. While there is still time, the sooner you secure your spot the better! So head on to the JOnConf [website] (https://jonconf.com/) and take a look at the schedule and topics that will be covered over the weekend!
Goopensource.dev has published new search engine UI  
Tags: jobs
Published: 2020-06-15 06:28:54

---
title: Goopensource.dev has published new search engine UI  
published: true
description: 
tags: jobs 
cover_image: https://media-exp1.licdn.com/dms/image/C4E1BAQGtMhmjcOI4hQ/company-background_10000/0?e=1592290800&v=beta&t=Vq6Hh9Tx1ibKUMJqoA_wLOV2FeYOyT2U56ogx4VNWkY
---

## Goopensource.dev

https://www.goopensource.dev/

We’re happy to announce that our new search engine UI and some other great improvements are officially available for everyone.

#### Show case of search engine 

{% youtube l6tHGnnDqvo %}

#### Features

We’re rolled out a set of new enhancements over the past 2 weeks.

* New filter algorithmus to better detect company across the web 
* New UI for company search engine 
* New data collector to enrich all current and incoming data points on our plattform (Core feature) 
* Refactored localization algorithmus to improve localization of every company (WIP)

Stay tuned it’s coming more in the future.

Any feeback is welcome!
Plain HTML Scroll to Top
Tags: html
Published: 2020-06-15 06:27:39

The other day I made a post about a [`JavaScript` Scroll to Top](https://daily-dev-tips.com/posts/vanilla-javascript-scroll-to-top/) function, which is very cool. As mentioned, there are so many ways of doing a certain action.

On this specific post, I got a lot of comments; you can do the same in just plain `HTML`. This is true! And I thought it would be great to write an article about this.

## HTML Structure

```html
<div id="top"></div>
<a href="#top" class="scroll scroll-top">☝️</a>
<a href="#bottom" class="scroll scroll-bottom">👇</a>
<div class="content">
  All the content...
</div>
<div id="bottom"></div>
```

So the thinks to mark are the divs with specific id's, in this case we just made two empty divs, but we can even use existing divs!

Then we create two links with a `href` to `#top` (id="top") and `#bottom` (id="bottom")

This will automatically scroll to the specific ID once clicked on!

To make it smooth, we can add the following `CSS`

```css
html {
  scroll-behavior: smooth;
}
```

It can be as easy as this, many ways leading to the same solution it all depends on what you prefer or needs.

See it in action on this Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="rebelchris" data-slug-hash="gOPMBVa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Plain HTML Scroll to Top">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/gOPMBVa">
  Plain HTML Scroll to Top</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
monetize-files
Tags: gftwhackathon, webmonetization
Published: 2020-06-15 05:48:30


## What I built

Web Monetization is really cool.
I came up with an idea that how existing content creators could add web-monetization to all their websites/projects.

Adding the *monetization meta tag* is simple, but it can be **tiring** to add it one-by-one to all your projects and webpages by opening them and add the tag.

With the [monetize-files](https://www.npmjs.com/package/monetize-files) command-line tool, you can do it in just **one simple command**. 

`
npm install -g monetize-files
cd your_project
monetize-files -w 'wallet address
`

Really, that's it!
*monetize-files* will figure out the *html* files by default and add that *monetization meta tag* to that file. You can also use other filetypes like pug or ejs if you want.



### Submission Category: 

[monetize-files](https://www.npmjs.com/package/monetize-files) falls into the category of **Foundational technology.**

## Demo

![working](https://drive.google.com/uc?id=1ivTPD8FUKRrRZjVfOleTIUht8_-_jtxb)

That's it to quickly get started with *monetize-files*.

If you want you can customize 
- which filetype will it monetize
- which folder and its contents will it exclude from being monetized
- run it as dev-dependency for your project instead of a global dependency

All of these customization can be found [here](https://github.com/aditya-mitra/monetize-files#customization) on the [github repo](https://github.com/aditya-mitra/monetize-files).
Go on have a look ;) 
 

## Link to Code

The code for this tool can be found here on GitHub:

{% github https://github.com/aditya-mitra/monetize-files %}

All contributions are welcome! :D

If you find a issue, you can submit the issue on this repo or simply by [clicking here](https://github.com/aditya-mitra/monetize-files/issues/new)

## How I built it 

I have used **JavaScript** entirely to built this simple CLI tool.
However, my package has one dependency on [yargs](https://yargs.js.org/).

Basically, *monetize-files* takes input from the command line through [yargs](https://yargs.js.org/), figures out the files and directories to be scanned using and makes changes to these files using [fs](https://nodejs.org/api/fs.html).

## Additional Resources/Info 

The tool can be found [here](https://www.npmjs.com/package/monetize-files) on npmjs.

I really enjoyed building this and liked this hackathon. ;D
Host Jekyll Site in AWS S3
Published: 2020-06-16 02:04:08

---
title: Host Jekyll Site in AWS S3
published: true
date: 2020-06-15 05:40:00 UTC
tags: 
canonical_url: https://blog.taufek.dev/kubernetes/2020/06/15/host-jekyll-site-in-aws-s3.html
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/628a2j51qy07q2kurs7v.png
---

In previous [post](https://blog.taufek.dev/kubernetes/2020/06/14/deploy-jekyll-site-to-heroku.html), I’ve wrote about on how to push a Jekyll site to Heroku. In this post it will be about how I host this blog in AWS S3 bucket.

Turns out it is much simpler to do it in S3.

## Create a S3 bucket

Create a S3 bucket and enable Web Hosting in the properties.

## Configure Github Action

You will need to configure following secrets in your Github setting.

1. `AWS_S3_BUCKET` with your bucket name.
2. `AWS_ACCESS_KEY_ID` with your AWS access key id.
3. `AWS_SECRET_ACCESS_KEY` with your AWS secret access id.

```
name: Sync to S3

on:
push:
branches:
    - master

        jobs:
        deploy:
        runs-on: ubuntu-latest
        steps:
    - uses: actions/checkout@v1

    - name: Retrieve Gem Bundles Cache
        uses: actions/cache@v2
        with:
        path: _bundle
        key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
        restore-keys: |
        ${{ runner.os }}-gems-

    - name: Generate site
        run: |
        mkdir -p _bundle/cache
        chmod a+rwx -R .
        docker-compose run -e JEKYLL_ENV=production jekyll bundle install
        docker-compose run -e JEKYLL_ENV=production jekyll bundle exec jekyll build --trace

    - uses: jakejarvis/s3-sync-action@master
        with:
        args: --acl public-read --follow-symlinks --delete
        env:
        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: 'ap-southeast-1'
        SOURCE_DIR: '_site'
```

With a push to `master` branch, it will trigger a build which will

1. Checkout code from `master` branch.
2. Generate Jekyll static files.
3. Push generated files inside `_site` folder to your S3 bucket.

## Conclusion

This seems like a cheaper option for hosting a static site and have SSL configured in CloudFront compared to paying for a dyno in Heroku to host a site with SSL. For Heroku, I will need to pay atleast $7/month for a dyno and for CloudFront it will based on usage. Since my blog does not have much visitors, my AWS bill is very small which is around $1/month. This includes S3, Route 53 and CloudFront services.
Android ViewModel Example
Tags: android, kotlin
Published: 2020-06-15 05:36:00

<head>
<meta name="monetization" content="$ilp.uphold.com/p4ypQGhW4fLW">
</head>
The ViewModel is part of Android JetPack and is used to effectively implement MVVM architecture pattern in android.

<h3>Why ViewModel?</h3>
MVVM architecture requires the activity to do minimum number of logical operations on the activity. That means we can do the logical operations needed for the View to be performed in ViewModel and then reference it in the Activities. Also ViewModel allows to observe <a href="https://developer.android.com/topic/libraries/architecture/livedata">LiveData</a> in apps

<h3>Benefits</h3>
When we rotate the android device the activity is restarted an all the data is reloaded again. We can prevent this from happening if we are loading all the data in views from ViewModel class. An activity doesn't survive a state change while a ViewModel does.

<h3>Why can't just use a simple Kotlin/Java class</h3>
Some people might think that why can we use a simple Kotlin/Java class that does't extend ViewModel class to save the current state. The simple reason is that it won't survive state change. You can try the below example with a Kotlin/Java class.

<h3>Implementation</h3>
ViewModel class
```
class MainViewModel : ViewModel() {
    var number: Int = 0
    fun changeMainText(){
        number += 1
    }
}
```

Reference the view model class in activity
```
private lateinit var viewModel: MainViewModel = ViewModelProviders.of(this).get(MainViewModel::class.java)
```
Increment the number by calling
```
viewModel.changeMainText()
```
Get the value of the number
```
viewModel.number
```

<img src="https://user-images.githubusercontent.com/46933160/84643169-16d11380-af1b-11ea-8b27-ea19a25f7611.jpg" width="100dp">

<img src="https://user-images.githubusercontent.com/46933160/84643188-1cc6f480-af1b-11ea-80c2-324827088c31.jpg" height="100dp" width="200dp">

This way we can save the data at state change without using some database. If you have any questions feel free ask me. If you learned something from this post please heart it❤