teleren/devto huggingface dataset:
Working toward imperfection: tips I could still use
Tags: tips, flatiron, newbie, ididit
Published: 2021-03-09 20:51:08

Today I passed my final project review for Flatiron School and I feel more like a software engineer than ever!  But there are still a boatload of things I need to learn and even more I don't even know exist yet.  That's what is so exciting for me, that there will always be something new to learn and I will never be bored!

There are a few tips I think I would have benefitted from getting (or listening to) when I was starting out so I'm going to share those with you.  Feel free to let me know if you have any to add!

**Git Commit more often**
This is still an issue for me and I have it on a post it note on my monitor.  It is easy to get caught up in the coding and forget to do this, but don't!  Just do it!

**Don't copy/paste, type it yourself**
Even if you type it word for word, it will help you understand it better if you type it.  Think through what you are typing while you do it.  It really helps!

**Comment your code as you write it**
This is still a pipe dream for me, but it sounds like a great idea!  And I find myself wishing I would have commented things when I look at my code later so I'm working on it!

**Google is your new best friend**
There were lots of times during bootcamp when I felt like something just wasn't making sense.  I wasn't understanding the way it was being taught.  So I googled the hell out of it until I found someone who explained it in a way that I understood.  The probability of an explanation better suited to you being out there is pretty high, so just keep looking.

**VS Code has some awesome tools, USE THEM!**
My son and I spent hours one night watching videos on the best tools for VS Code and it was time well spent!  There are some pretty amazing tools out there to help with anything from formatting to debugging to beautifying.  Take the time to find some that work for you and implement them.  It's worth it!

**Just Keep Swimming**
Even when you feel overwhelmed or frustrated, just remember to keep going!  Everybody feels that way sometimes.  Reach out to someone in the community, read some blogs or listen to some podcasts but don't give up.  It can be a long, difficult road sometimes but it's going to be worth it - I just know it!

Thanks for reading, hope you all keep swimming along in this journey!  Let me know what tips help you or what things you need to work on.  Reach out if you are struggling and I'll remind you just how awesome you are!

R
UI Dev Newsletter #47
Tags: webdev, html, css, javascript
Published: 2021-03-09 20:33:57

- [What Is Gutenberg Full-Site Editing (And How to Access It Today)](https://bit.ly/2OfBWw6)
Will Morris shows how to set up full-site editing and use it to edit every part of your WordPress website, including the underlying template.


- [The Best Font Loading Strategies and How to Execute Them](https://bit.ly/38kPrl2)
Zell Liew shares the best font loading strategies and how to execute all of them.


- [You want enabling CSS selectors, not disabling ones](https://bit.ly/3sWUikk)
Silvestar Bistrović shows how to write better CSS selectors.


- [Unicode Characters – What Every Developer Must Know About Encoding](https://bit.ly/3qxMaFy)
Kealan Parr explains a brief history of encoding and what we use now.


- [Through the pipeline: An exploration of front-end bundlers](https://bit.ly/3qlDNww)
Andrew Walpole explores Parcel, Rollup, and esbuild to find which one works the best for his needs.


- [Imagining native skip links](https://bit.ly/3qA6y93)
Kitty Giraudel proposes a few solutions for a native skip link.


- [Skipping skip links](https://bit.ly/2O5ez8K)
Vasilis Van Gemert questions the usage of skip links.


- [Hackers exploit websites to give them excellent SEO before deploying malware](https://zd.net/3cfEK4i)
Climbing up Google’s ranks is key to this new technique.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
Tab Bar Interaction
Tags: gsap, html, javascript, 100daysofcode
Published: 2021-03-09 20:29:20

the day 79 of challenge 100DaysOfCode

Tab Bar Interaction Using GSAP 

Demo : https://tab-bar-gsap.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day79
Hello, Please help me in laravel model
Published: 2021-03-09 20:20:06

i am changing query to laravel model.
but only one problem...
->join(array(\DB::expr('(select SUM(p.amount) as paid, p.case_id
                        from payments p
                        where p.status_id = 3
                        group by p.case_id)'),'p'), 'LEFT')->on('p.case_id','=','c.id')
this is leftjoin subquery but i have to change to laravel model type.
Please help me.
Cara install Nginx di Ubuntu 18.04
Tags: nginx, ubuntu, linux, indonesia
Published: 2021-03-09 19:31:01

Nginx yang dibaca dengan “engine x” adalah sebuah high-performance open-source web server yang sangat populer saat ini dengan kecepatannya. Nginx bisa berfungsi sebagai web server yang berdiri sendiri, atau menjadi reverse proxy untuk Apache.

Berbeda dengan Apache, Nginx terkenal sangat ringan dan cakap untuk menangani jumlah koneksi yang lebih besar dari yang bisa ditangani Apache.

Tutorial ini akan memaparkan bagaimana cara install Nginx di Ubuntu 18.04.

## Instalasi Nginx

Jalankan perintah berikut untuk memasang Nginx.
```
sudo apt update
sudo apt install nginx
```

Setelah selesai, verifikasi dengan perintah ini.
```
sudo systemctl status nginx
```
Outputnya akan terlihat mirip seperti ini.
```
● nginx.service - A high performance web server and a reverse proxy server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
   Active: active (running) since Wed 2020-01-15 11:53:23 WITA; 1min 1s ago
     Docs: man:nginx(8)
 Main PID: 30035 (nginx)
    Tasks: 2 (limit: 661)
   CGroup: /system.slice/nginx.service
           ├─30035 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
           └─30038 nginx: worker process
...
```

## Konfigurasi firewall

Diasumsikan pada sistem terpasang dan berjalan UFW Firewall, pastikan port `80` dan `443` bisa diakses. Jalankan perintah berikut untuk memastikannya.
```
sudo ufw allow 'Nginx Full'
```

Untuk memverifikasi, gunakan perintah ini.
```
sudo ufw status
```

Outputnya akan terlihat mirip dibawah ini.
```
Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere                  
Nginx Full                 ALLOW       Anywhere                  
OpenSSH (v6)               ALLOW       Anywhere (v6)             
Nginx Full (v6)            ALLOW       Anywhere (v6)
```

## Testing

Buka browser dan akses `http://IP_ADDRESS` untuk mengecek instalasi Nginx. Tampilan awalnya akan terlihat sebagai berikut.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vvhubpuuiyr48cgrztu.png)

## Mengelola Nginx

Perintah untuk menghentikan Nginx.
```
sudo systemctl stop nginx
```

Untuk menjalankannya kembali.
```
sudo systemctl start nginx
```

Me-restart Nginx.
```
sudo systemctl restart nginx
```

Reload setelah melakukan perubahan pada konfigurasi.
```
sudo systemctl reload nginx
```

Untuk menghentikan Nginx dan jalan otomatis saat boot.
```
sudo systemctl disable nginx
```

Membuatnya jadi normal kembali.
```
sudo systemctl enable nginx
```

Selamat, Nginx sudah berjalan pada server Ubuntu 18.04.

## Langkah selanjutnya

{% post https://dev.to/erolj/cara-membuat-server-block-nginx-di-ubuntu-18-04-3cfk %}
Cara membuat jail fail2ban untuk Microsoft SQL Server (MSSQL)
Tags: linux, mssql, indonesia
Published: 2021-03-09 19:20:08

Pada artikel ini akan ditunjukkan bagaimana cara meminimalisir potensi brute-attack yang seringkali terjadi pada server yang menjalankan MSSQL. Hal ini bisa terlihat dari errorlog file mssql, berlokasi di `/var/opt/mssql/log/errorlog`, dengan adanya baris log seperti ini.
```
Login failed for user 'sa'. Reason: Password did not match that for the login provided.
```

Untuk mengatasinya, bisa dibuat sebuah jail pada fail2ban yang akan memblokir nomor IP nakal, yang terdeteksi melakukan brute-attack lewat port MSSQL. Berikut ini adalah bagaimana caranya.

Pastikan fail2ban sudah terinstall pada sistem, cara untuk mengeceknya dengan menjalankan perintah ini,
```
service fail2ban status
```

Apabila sudah terinstall, buat file baru bernama `mssqld-auth.conf` dengan perintah ini,
```
vi /etc/fail2ban/filter.d/mssqld-auth.conf
```

Salin dan isi file baru tersebut dengan konten berikut.

{% gist https://gist.github.com/erolj/b7de2c1aac71c00030872841eadd0ef4 %}

Simpan file tersebut, dan selanjutnya buka file `jail.conf` dengan perintah ini,
```
vi /etc/fail2ban/jail.conf
```

Pada bagian akhir file, tambahkan konten berikut.
```
[mssqld]
enabled = true
logpath = /var/opt/mssql/log/errorlog
maxfailures = 3
findtime = 600
bantime = 1800
filter = mssqld-auth
port = 1433
action = iptables-allports
backend = polling
```

Simpan perubahan pada file, dan setelah itu restart `fail2ban` dengan perintah ini.
```
service fail2ban restart
```

Untuk mengecek apakah konfigurasinya sudah benar dan berjalan dengan baik, silahkan monitor file log milik `fail2ban`. Jalankan perintah ini.
```
less /var/log/fail2ban.log
```

Konfigurasi bisa dikatakan berfungsi dengan baik, bilamana terlihat baris seperti ini.
```
2019-11-08 11:19:45,405 fail2ban.filter         [30857]: INFO    [mssqld] Found 118.189.62.255
2019-11-08 11:19:45,428 fail2ban.filter         [30857]: INFO    [mssqld] Found 118.189.62.255
2019-11-08 11:19:46,076 fail2ban.actions        [30857]: NOTICE  [mssqld] Ban 118.189.62.255
2019-11-08 11:23:22,670 fail2ban.filter         [30857]: INFO    [mssqld] Found 27.64.134.184
2019-11-08 11:23:24,106 fail2ban.filter         [30857]: INFO    [mssqld] Found 27.64.134.184
2019-11-08 11:23:24,322 fail2ban.filter         [30857]: INFO    [mssqld] Found 27.64.134.184
2019-11-08 11:23:24,440 fail2ban.actions        [30857]: NOTICE  [mssqld] Ban 27.64.134.184
```

Selamat mencoba.
Cara mudah mengetahui alokasi RAM di Linux
Tags: linux, indonesia, bash
Published: 2021-03-09 19:10:04

Pertama buat dulu sebuah file (nama file bebas) dengan ekstensi `.sh` dengan cara, pada terminal ketik command berikut ini.
```
vi memory-used.sh
```

Tekan `i` untuk mengaktifkan mode edit, dan salin perintah dibawah ini. Gunakan `Shift+Enter` untuk menyalin ke terminal.
{% gist https://gist.github.com/erolj/e72158fcfd9edadca45d68d5414989be %}

Lalu untuk menyimpan file tersebut, tekan `Esc` kemudian ketik `:x` tekan Enter.

Untuk mengeksekusi file tersebut, ketik perintah berikut
```
bash memory-used.sh
```

Outputnya akan terlihat seperti ini.
```
# bash memory-used.sh
1232.84 MB              /opt/mssql/bin/sqlservr
37.293 MB               /usr/libexec/mysqld
15.2227 MB              /opt/mssql/bin/sqlservr
10.8477 MB              /usr/sbin/httpd
10.7852 MB              /usr/bin/python2
9.78516 MB              /usr/sbin/httpd
9.78516 MB              /usr/sbin/httpd
9.78516 MB              /usr/sbin/httpd
```
Dist::Zilla - Why you should use @Starter instead of @Basic
Tags: perl
Published: 2021-03-09 19:07:20

I posted previously about a new "starter" bundle for [Dist::Zilla](http://dzil.org/), the CPAN author's automation tool. I'd like to briefly try to answer the question: "Why should I care?"

If you're already happily using Dist::Zilla with an extensive configuration or plugin bundle of your own, this bundle isn't for you. But maybe you can get some ideas from the included plugins, I added a few to my author bundle!

If you're looking to get started in Dist::Zilla, the [@Starter](https://metacpan.org/pod/Dist::Zilla::PluginBundle::Starter) bundle makes a great starting point. Usage is similar to [@Basic](https://metacpan.org/pod/Dist::Zilla::PluginBundle::Basic) and all of the same information in the [dzil.org](http://dzil.org) tutorial applies.

If you're currently using `@Basic`, there are a few reasons you should consider switching over. `@Basic` has become somewhat outdated as it needs to maintain compatibility with existing configs; `@Starter` modernizes the base plugin set. For example, it includes the important [MetaJSON] plugin for generating modern CPAN metadata, and it uses [RunExtraTests] to run xt/ (extra) tests directly, which is now generally preferred over rewriting them into the t/ directory with the [ExtraTests] plugin. It also adds a few popular plugins, such as [Test::ReportPrereqs], which generates a test that lists all distribution prereqs and the currently installed versions, very helpful for debugging test failures.

Even if you're already including all of these improvements yourself on top of `@Basic`, using `@Starter` can cut down on the boilerplate in your dist.ini, and you can simply remove any plugins you want to leave out, or configure included plugins directly via config slicing. Plus, it can help incorporate new practices and features; `@Starter` will include future updates as new revisions, which you can review and switch to by setting the revision number in your dist.ini. This allows it to stay modern without breaking existing configs.

Switching from `@Basic` to `@Starter` is generally straightforward. Most minimal configurations can be directly switched over, removing any manually-included plugins that `@Starter` adds itself. If you are using `@Filter`, you can instead apply the -remove option directly to `@Starter`. The ["CONFIGURING"](https://metacpan.org/pod/Dist::Zilla::PluginBundle::Starter#CONFIGURING) section of the documentation goes over the most common ways to configure the bundle.

Feel free to stop by [#distzilla on irc.perl.org](https://kiwiirc.com/nextclient/#irc://irc.perl.org/#distzilla) or send me an email (address listed in module documentation) if you have any questions about the bundle, configuration, or Dist::Zilla in general. Happy releasing!

*Since the original publication of this post, `@Starter` has reached revision 5 and the [@Starter::Git](https://metacpan.org/pod/Dist::Zilla::PluginBundle::Starter::Git) variant bundle has been added for additional convenience. I will be republishing my other posts on `@Starter` in the coming week.*
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2021-03-09 18:46:27

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️_

## #SheCoded and nothing can stop her

"Advocating for myself looks like…
- Self-affirmations
- Taking breaks
- Not selling myself short - I love letting people know what I do
- Knowing I have a lot to learn and taking it one step at a time."

👏 @theflorz


{% link https://dev.to/theflorz/nevertheless-florence-coded-because-nothing-can-stop-her-4m81 %}

## Playing your cards right

In this article, @ms_yogii uses a very simple card to help us understand how to create components that have their own modules or subcomponents, like `<Dropdown.Item>`.

{% link https://dev.to/ms_yogii/create-react-subcomponents-in-a-simple-way-5h1f %}

## Sharpen your sharding knowledge

At the higher levels of engineering, says @renaissanceengineer "it's more about your ability to design a system rather than pure coding ability." 

This in-depth exploration of database sharding and other database scaling concepts will help you put your best foot forward.

{% link https://dev.to/renaissanceengineer/database-sharding-explained-2021-database-scaling-tutorial-5cej %}

## Hello darkness, my old friend

When @abbeyperini rebuilt their portfolio site, they knew that they wanted to have some fun with the design. Dark mode to the rescue! Check out this dark mode toggle tutorial to learn how Abbey did it. 

{% link https://dev.to/abbeyperini/toggle-dark-mode-in-react-28c9 %} 

## Finally someone says it!

"Why is Kubernetes so hard to use? How long would it reasonably take to get your application(s) running in K8s?? And why isn’t it easier?" asks @rwilsonreleaseapp. 

A refreshing and relatable list of Kubernetes questions, brilliantly tackled in this article

{% link https://dev.to/rwilsonreleaseapp/why-is-kubernetes-so-hard-i42 %}

## "Pretty syntax with sugar on top?"

@imiebogodson explains why using async/await can make your code "sweeter". 

{% link https://dev.to/imiebogodson/a-taste-of-syntactic-sugar-with-async-await-l %}

## DEV Community, work your magic

In this post, @marulucenat is soliciting constructive, respectful feedback on their first developer projects. You know what to do!

{% link https://dev.to/marulucenat/working-on-my-first-projects-would-love-some-feedback-2dib %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
Nevertheless, Rachel Coded
Tags: wecoded
Published: 2021-03-09 17:57:17


2020 was an interesting year, where the pandemic disrupted work/life balance worldwide. I was planning on skipping this post, as I couldn't think of anything to write. Then I decided I'd start and see what came out.

## My most recent achievement was…
When I look back on 2020, I thought I would be searching for a new role for some stability. As the world began shutting down, that outlook changed entirely as I saw the challenges ahead for companies weathering the new, unprecedented 'storm'. Instead, I settled in for a longer journey developing different products and embracing a remote work culture. 

Through this new normal, I helped a handful of clients bring data to life, creating a real-time dashboard and overhauling a product to improve its data querying and presentation. This included re-architecting how data was organized to improve speed and query times. More recently, I've been helping manage remote hires and to cultivate a remote work culture.

Outside of tech, I began rock climbing and just figured a challenging route that took over a month to figure out. 💪🏻 Haha, sometimes physical achievements feel greater than mental achievements...

## My biggest goal is…
...for my side hustle [Eonzah](https://www.eonzah.com) - an interactive giveaway management platform - to set the foundation to secure its first paying customer. Welcoming beta users...reach out if interested! 

## My advice for allies to support underrepresented folks who code is...
Take the time to **listen** and **practice empathy**. Be patient with things that aren't clear. Clarity comes with time as we learn to work better together. 

I guess, now that I've put all this on "paper", 2020 wasn't without good things. It just takes intentional thought to recall the good.
Rotate a circle with CSS
Tags: css, beginners, codenewbie, html
Published: 2021-03-09 17:55:59

Ever wonder how people animate images or anything? Like this image below??  Well today is your lucky day, It turns out to be simple to make.
![circle rotate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhorq8pilx3m7zrugacc.gif)

_Disclaimer:_ Having basic **CSS Animation** knowledge would really help.

Start with the basic HTML template. You can use any image
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS Rotating Circle</title>
    <link rel="stylesheet" type="text/css" href="circle.css">
</head>
<body>
    <h1>CSS Rotating Circle</h1>

    <main>
        <div>
            <img src="iconmonstr-circle-5.svg" alt="circle">
        </div>
    </main>
</body>
</html>
```
This boring Image should show up on the browser.
![rotate1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imvjxu9i2g6zlc9o1ph6.png)

Let's spice it up a little, shall we?
```css
/* circle.css */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
    width: 90%;
    margin: auto;
    text-align: center;
    padding: 20px 0px;
    font-family: Arial;
}
main{
    height: 500px;
    display: grid;
    align-items: center;
}
```
you can use other trick to center the contents, I went with Grid `display: grid;` and `align-items: center;`.

Increase the image size a little with the style below, since we are using an SVG image.
```css
main img{
    width: 200px;
    height: 200px;
    animation-name: rotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border-radius: 50%;
}
```
 `border-radius` can be optional. Everything should look cute now like the image below.

 ![rotate3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trs8kprt6o3dnv66t14h.png)

We can't animate anything if we don't have the `@keyframes` specified.

```css
@keyframes rotate{
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }
}
```

And **voilà**, its done. Also note that `animation-name:` and `@keyframes` share the same name **rotate**.
![circle rotate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhorq8pilx3m7zrugacc.gif)

You can play with it or even add more functionality to it, like starting and stopping the animation with JavaScript.

Thanks for reading.
Why I don't like to look for a job
Published: 2021-03-09 17:44:24

Years ago I was actively looking for a job as a software developer, and found the process to be pretty frustrating. Let me tell you why.

I used LinkedIn, StackOverflow and many other portals, but it got pretty tedious fast. Especially because I had to provide all the time the same information to tens of recruiters having job offers. Especially irritating was to tell what is my money expectation. What money do I expect in dollars, euro, per hour, per week, per month, per year, on B2B contract, or regular job. I had to calculate it every time on and on again. Because every job offer recruiter had, had another way of presenting it. And it was up to me to recalculate it.

But it is not only about money expectation. There are so much other information no job portal allows you to provide. So you end up sending and telling it again, again and again.

For example:

- do I want to work remotely only?
- in what hours I want to work?
- what is the stack I want to work in
- what role I am interested in?
- what responsibilities I want to take?
- are there any industries I don't want to work for?
- what is my minimal length of contract?
- what language I want to communicate?

And it is not only tiresome for me to send or tell all this info every time I talked with a recruiter. For recruiters, it is also bad, because they have less time to join dots and find right people to right jobs. Connect more dots.

Both me and recruiters would save a lot of time having all of this info in one place. So over a period of time I have created a document that includes my resume and all of these info back then and sent the link to every recruiter. 

What information would you include in such document? Write in the comments!
Day 23
Tags: 100daysofcode
Published: 2021-03-09 17:41:30

Day 23/100 of #100DaysOfCode

Codewars || DS

Hours coded: 1.6
Lines of code: 216
Keystrokes: 2669

Solved 2 codewars problems. Using JavaScript. & didn't forget to check out the best practice solutions
1. (6 kyu) Find the unique number
2. (5 kyu) Moving Zeros To The End