teleren/devto huggingface dataset:
How to prepare for Google Summer of Code 2022? (5/7)
Tags: webdev, beginners, javascript
Published: 2022-03-11 07:01:30

Let's talk about the most important topic - how to prepare for Google Summer of Code? and what are the key points that one should keep in mind while applying?

Update - The list of projects and organisations participating in GSoC 22 is out now.

- Decide your tech Stack
This point is really important. Take your time and decide which technology you are good at for Example web development, Android Development, AI/ML etc. Most of the time people are confused about which org to contribute to because they don't decide their tech stack first.


- Now Finalize your Organisation
Once you have decided on your tech stack it's time to fix your Organisation as per your tech stack. Go through the code base of the organisation, create some issues, make some PRs and don't forget to join their community.


- Project Selection
Every Organisation will have projects listed on their idealist. Go through the projects. Once you have finalized the project, contact the mentor of that project and ask him about what all things are required for the project. Keep things formal and ask genuine doubts.


- Be active in the community
Every Organisation will have some form of community. It could be a slack channel, discourse panel or something else. Make sure to join their community give a nice introduction and help others with their doubts. Try to put our problem in the discussion before creating a GitHub issue, so that others can also contribute to this problem.


- Update Social Media handles
Update your LinkedIn and Github profile. Keep all genuine information on your profile and remove everything else. if you have made any projects don't forget to upload them on Github. Your mentor might visit your social media accounts.

Don't forget to read my other posts, linked in the comments down below.

like it a like if you made it so far.

#github #opensource #webdevelopment
Scan Duplicated & Similar CSS
Tags: css, javascript, webdev, react
Published: 2022-03-11 07:01:11

To auto detect redundant and unused CSS classes, I made this library recently: [css-checker](https://github.com/ruilisi/css-checker).

It helps to scan your codebase automatically by one command: 'css-checker'. I think it's always better to rely on automatic code checking tools than read all codes manually to find improvements.

The `css-check` can scan your CSS code along with your js/jsx/html/ts/tsx code to find unused CSS code (optional). 

## Install

* You can access to the package via `go install`:
```
go install github.com/ruilisi/css-checker@latest
```
(With go version before 1.17, use go get github.com/ruilisi/css-checker). Or download from releases

* Or from npm:
```
npm install -g css-checker-kit
```

## Start Checking

`cd` to your `Project Path`. Then just run: 
```
css-checker
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ba5i8r86sgb0yyzbqqs.gif)

The `css-checker` helps in checking my projects in seconds, and provides hundreds of similar and redundant classes for me to improve. 

You can check out the package from the Github link for more details:  [css-checker](https://github.com/ruilisi/css-checker)
Extracting data from a website using BeautifulSoup
Tags: beautifulsoup, webscraping, python
Published: 2022-03-11 06:40:38

There are mainly two ways to extract data from a website:
- Use APIs(if available) to retrieve data.

- Access the HTML of the webpage and extract useful information/data from it.

In this article, we will extract Billboard magazine's Top Hot 100 songs of the year 1970 from Billboard Year-End Hot 100 singles of 1970.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0zv07062vgeypo8fyov.png)

**Task:**

- Perform Web scraping and extract all 100 songs with their artists.
- Create python dictionary which contains key as title of the single and value as lists of artists.

**Installation**
We need to install requests and bs4.The requests module allows you to send HTTP requests using Python. Beautiful Soup (bs4) is a Python library for pulling data out of HTML and XML files.

```
pip install requests
pip install bs4
```

Import the libraries

```
import requests
from bs4 import BeautifulSoup
```

Sending request
```
url = "https://en.wikipedia.org/wiki/Billboard_Year-End_Hot_100_singles_of_1970"
response = requests.get(url)
print(response.url) # print url
response # response status
```

```
songSoup = BeautifulSoup(response.text) # Object of BeautifulSoup

data_dictionary = {}

for song in songSoup.findAll('tr')[1:101]: # loop over index 1 to 101 because the findAll('tr') contains table headers
  # Priting 100 table rows.............
  # print(song)   

  title = song.findAll('a')[0].string

  artist = song.findAll('a')[1].string
  # Printing Titles and Artists.............
  print(title, ',', artist)

  # Printing Dictionary.............
  data_dictionary[title] = [artist]
print(data_dictionary)
```
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5qpwuf728113walyk3v.png)
AWS Code Pipeline and CodeDeploy, appspec.yml for wordpress (File already exists exception)
Tags: wordpress, aws
Published: 2022-03-11 05:57:28

This is my sample appspec.yml

```yml

    version: 0.0
    os: linux
    files:
      - source: /
        destination: /var/www/wordpress/
        overwrite: true
    file_exists_behavior: OVERWRITE
```

In CodeDeploy default is DISALLOW, so you will get an error if the file already exist in that location.


And this is [Updated AWS User Guide for AppSpec 'files' section (EC2/On-Premises deployments only)][1]. In there you will find three options, DISALLOW,OVERWRITE and RETAIN.


  [1]: https://docs.aws.amazon.com/codedeploy/latest/userguide/reference-appspec-file-structure-files.html
Creating a simple browser for iOS
Tags: apple, swift, ios, webkit
Published: 2022-03-11 05:30:59

Link to the story: https://medium.com/macoclock/creating-a-simple-browser-for-ios-using-wkwebview-with-swift-95688acd04b9

Check out the code: https://github.com/mmafrar/swift-ios-wkwebview-demo

We’re going to have a look on how to create a minimal iOS app using Swift to render a web content on an iPhone
New Years Resolution - Dev Log 22
Tags: webdev, beginners, nextjs, startup
Published: 2022-03-11 04:51:54

Not a ton to report this time. I am still trying to solve the whole sending emails with attachments to employers who created a job posting on my site. I collect the user's information that is applying for the job, and I can send an email with all the text, but I can not for the life of me figure out how to get the attachments from the react portion to the node portion. To be specific I can get the raw data, but I need to be able to work with the up to two files sent to the backend, that is where the problem lies.

For my emailing API, I switched from MailGun to SendGrid. No particular reason why, I just found a decent Next.JS / SendGrid tutorial. My domain host (GoDaddy) is taking forever to verify the CNAME's from SendGrid, which is a bummer. I can still send emails and test though using a feature of SendGrid's called "Single Sender Verification", which is fine for now. I need to think about the security of my forms though. It has occurred to me that I am probably going to want some way to prevent form spamming. So that will be the next topic to research.

Glory to Ukraine!
Affiliate Magnet dev notes + Future plans
Tags: discord
Published: 2022-03-11 04:39:33

Hello there, I am Deathvenom, the developer of [Affiliate Magnet](http://affiliate-magnet.deathvenom.me/). In this post, I wish to convey my plans for the future for the bot, and also do a little survey.

I have not worked on Affiliate Magnet for a while, but I will begin active development on it soon. Before that, I would like to inform my active users, as well as collect some feedback.

## Future plans

### Whitelisted roles

A highly requested feature is a whitelist. Once added, you will be able to whitelist some roles. This means that if someone posts a link and has a whitelisted role, the bot will not do anything to it. This can be useful to ensure that your moderators and trusted members are not annoyed by it.

### Better /set command

Discord recently added modals, which allow bots to show dedicated "input screens". I plan to use these to to simplify the /set commands

![An example modal](https://preview.redd.it/mj8guz0pcsg81.png?width=566&format=png&auto=webp&s=6ecf895ea6c96bae67af5f502e07645537e9f5b1)

Once [discord.js](https://discord.js.org/#/) adds support for modals, I will combine separate commands like `/set amazon affiliate_tag` and `/set amazon replace_mode` into a simple single command `/set amazon`, which would open a modal with all options.

**What will this achieve?** Moving to modals will tackle the current "command spam" situation we have right now, and make it convenient to add support for a lot of websites!

![The current command spam situation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82lnbet80yd85gol0csw.png)
 
## Survey

I would be glad if you could [fill out this short survey](https://forms.gle/7gQJHh53nnq421zc6), which would inform me of things that need to be improved and some problems to address.

For updates, feel free to follow the #aff-mag-updates channel from the [support server](https://discord.gg/qJnrRvt7wW) to your own server.

Thanks for reading, and have a fantastic day!
March 11th, 2022: What did you learn this week?
Tags: weeklyretro, weeklylearn, discuss
Published: 2022-03-11 04:17:11

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Yoda wooping someone's butt](https://media.giphy.com/media/yDYAHbqe5DfyM/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

<!--
And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-3lco %}

<center>

![Drama from Entourage screaming “Victory!”](https://media.giphy.com/media/lnlAifQdenMxW/giphy.gif)
</center>

-->
Apache Airflow 初體驗
Tags: workflow, airflow, tutorial, docker
Published: 2022-03-11 04:16:48

---
title: Apache Airflow 初體驗
tags: workflow, airflow, tutorial, docker
author: Corey Lai
---

Airflow 是由 <mark>Airbnb</mark> 所貢獻的 Apache 頂級專案，用於流程控制，建立有向無環的工作流程(DAGs) ，以事件排程的方式部屬我們的 DAG Schedule 並可以部屬到各個雲端平台上， GCP / AWS / Azure，可透過網頁 UI 調配部屬排程，主打彈性、高擴充性、搭配Jinja Template Engine 優雅的設計 Workflow 工作流程！


## 1.建置 Airflow 環境 - 使用 Docker

下載官方提供 docker-compose 文件

```bash
curl -LfO 'https://airflow.apache.org/docs/apache-airflow/2.2.4/docker-compose.yaml'
```

產生相依目錄並設定 Airflow 使用者權限
```bash
mkdir -p ./dags ./logs ./plugins
echo -e "AIRFLOW_UID=$(id -u)" > .env
```

## 2.資料庫初始化
```bash
docker-compose up airflow-init
```

## 3.啟動 Airflow 服務
```bash
docker-compose up -d
```

![airflow service](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exsmfk5cp05nprstz4yk.png)

> 確認我們的 Container 是否都健康！
![dockerps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/terdwghqspd8h46xc39a.png)

## 4.下載 airflow 命令工具
```bash
curl -LfO 'https://airflow.apache.org/docs/apache-airflow/2.1.1/airflow.sh'
chmod +x airflow.sh
```

## 5.撰寫 Demo 程式
將我們第一隻 DAGs 程式放至於 Container掛載目錄 dags 下
dags/test_app_v1.py
```python
import time
from datetime import datetime, timedelta
from airflow import DAG
from airflow.operators.python import PythonOperator

default_args = {
  'owner' : '',
  'start_date' : datetime(2022, 1, 1, 0, 0),
  'schedule_interval': '@daily',
  'retries':2,
  'retry_delay': timedelta(minutes = 1)

}


def fn_one(): 
  print('execute jobs')

with DAG('test_app_v1' ,default_args=default_args) as dag:
  tesk = PythonOperator(
    task_id = 'one',
    python_callable=fn_one
  )
```

## 6.透過 airflow.sh 將執行我們的 DAG 程式 

```bash
# 建立運行 python container 
./airflow.sh bash
# 執行 python 檔案
python dags/test_app_v1.py
```

## 7.網頁中查看新建立的 test_app_v1 DAG

> Airflow Web Server
http://localhost:8080
airflow/airflow

在執行py腳本後我們就可以在 Airflow 首頁中查找到我們的 DAG 排程 ！

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

查看執行狀態，使否有異常失敗等情況
![status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tcvqmp6jn5pz0237y1s.png)

## 8.REST API
使用 Airflow Rest Api 可以取代我們在 WebUI 上的工作，進行 DAG 的抓取執行刪除等工作。

https://airflow.apache.org/docs/apache-airflow/stable/stable-rest-api-ref.html

```bash
curl -X GET 'http://10.1.200.67:8080/api/v1/dags' --user "airflow:airflow"
```

```json
{
  "dag_id": "test_app_v1",
  "description": null,
  "file_token": "",
  "fileloc": "/opt/airflow/dags/test_app_v1.py",
  "is_active": true,
  "is_paused": false,
  "is_subdag": false,
  "owners": [],
  "root_dag_id": null,
  "schedule_interval": {
    "__type": "TimeDelta",
    "days": 1,
    "microseconds": 0,
    "seconds": 0
  },
  "tags": []
}

```

## Conclusion
很多需要進行排定的工作項目都可以在 Airflow 的幫助下進行運行，搭配 python的語法可以很快速的撰寫爬蟲、資料轉換、事件觸發等工作，Airflow 提供WebUI操作畫面可以讓我們更便利的去對我們的 DAGs 進行監控，解決了我們在設計排程上的諸多困難！
Modeling practice for low-poly characters
Published: 2022-03-11 04:02:24

This article is a summary of what I learned about modeling low-poly characters in Blender 2.92.


I made this using the extrude, loop cut, and knife tools from Cube.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87d9nqcgv9loyl4kktej.png)

We would like to add a Rig to this model to practice animation.
Tabs are cool
Tags: ux, tabs, design
Published: 2022-03-11 03:37:37

I like tabs in a browser. The main feature of tabs are launching two different instances of the one web app.
And I dislike it when developers broke this feature. In Telegram web app I cannot run two tabs, because of "Such error, many tabs". But I need many tabs when I copy some information from notes to my public channel or personal messages.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6b43w00w4yb1vjb1pktw.jpg)
Tabs are a reason why I use web apps against desktop apps. I like when developers add tabs to desktop apps also. We have tabs in Total Commander and Figma.
But we have no tabs in Notion, and this is a reason why I use the web version of Notion even the web is much slower than the desktop app.
changing code by the version of gem
Tags: rails
Published: 2022-03-11 03:34:45

---
title: changing code by the version of gem
published: true
description: 
tags: rails
---

I've dived in the devise gem, and found a interesting if statement.

# what is `Devise.activerecord51?` ?
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9b4f75m32yed0fifbe2e.png)

# It's this.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/td4m6fgntktvrzy7j6uh.png)
Agregar Tooltips a tu Sitio Web con HTML & CSS
Tags: html, css, spanish
Published: 2022-03-11 03:33:43

**¡Hola gente bonita!👋**
**Aprende como crear tooltips básicos para tu sitio web utilizando solamente HTML y CSS.**

---
**HTML**
```html
<div class="container">
        <h1 class="title">Tooltip</h1>

        <div class="tooltips">
            <p>Muchos ignoran el hecho de que la web nació en Europa, y más concretamente en el
                <a class="tooltip" href="https://home.cern/" target="_blank">CERN.
                    <i class="fas fa-info-circle"></i>
                    <span class="tooltip__box"><b>Agregar un link:</b> https://home.cern/</span>
                </a>Allá por el año 1989,
                <b class="tooltip">Tim Berners-Lee,
                    <i class="fas fa-info-circle"></i>
                    <span class="tooltip__box tooltip__box-v">
                        <b>Agregar una descripción importante:</b>
                        Creador de la web y del lenguaje HTML
                    </span>
                </b>propuso un proyecto para gestinar la información.
            </p>
        </div>
    </div>
```

**CSS**
```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables CSS */
:root {
    --color-light: #EDEDED;
    --color-blue : #9FB2FF;
    --tooltip    : #F6DA63;
    --color-dark : #2B314F;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;    
    background-color: var(--color-light);
}

.container {
    width: 50%;
    height: 400px;
}


.title {    
    font-family: 'Oswald', sans-serif;
    text-align: center;
    padding: 30px 0;
    font-size: 60px;
}

.tooltips {
    background-color: var(--color-dark);
    color: var(--color-blue);
    font-family: sans-serif;
    border-radius: 10px;
    padding: 40px;
    font-size: 16px;
    line-height: 32px;
    box-shadow: 5px 5px 50px rgba(0,0,0,.10);
}

.tooltip {
    font-weight: normal;
    color: var(--tooltip);
    text-decoration: none;
    text-align: center;
    position: relative;
}

.tooltip:hover {
    text-decoration: underline;
}

.tooltip:hover .tooltip__box {
    display: inline-block;
}

.tooltip__box {
    display: none;
    position: absolute;
    background-color: var(--tooltip);
    line-height: 20px;
    z-index: 500;
    color: var(--color-dark);
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    left: -80px;
    right: 0;
    bottom: 30px;
    width: 200px;
}

.tooltip__box-v {
    left: -3px;
}

.tooltip__box:after {
    content: '';
    display: block;
    border-top: 8px solid var(--tooltip);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    position: absolute;
    bottom: -7px;
    left: calc(71% - 7px);
}
```
[Ver en Codepen](https://codepen.io/dmendozaec/full/oNWMYyQ)
JScout.js
Tags: codepen, devops, resume, hotwire
Published: 2022-03-11 03:29:29

<iframe height="300" style="width: 100%;" scrolling="no" title="build.ai/dist/scout.js" src="https://codepen.io/J2A2K4E/embed/ExbBPjE/3a997654f8c5b1f5305adc974556b756?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/J2A2K4E/pen/ExbBPjE/3a997654f8c5b1f5305adc974556b756">
  JScout.js</a> by J2A2K4E (<a href="https://codepen.io/J2A2K4E">@J2A2K4E</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

![Spartan Scout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72plawce1l4avl4gh1ur.jpg) Image by <a href="https://pixabay.com/users/mohamed_hassan-5229782/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=3696073" class="keychainify-checked">mohamed Hassan</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=3696073" class="keychainify-checked">Pixabay</a>
What's GIT & GitHub Purpose
Tags: 100wordsaday, inkedin, git, github
Published: 2022-03-11 03:15:42

 > <span style="color: red;" > **WARNING: Not a Guide on how to use GIT or GitHub.**</span> 

> - The term version control might sound odd to you, but it does what exactly what the name said. Git Is free and open-source, and it's a type of version control system we as developers used to track changes and history, within our projects.

## GIT -- (Version Control System)
> - Git is the Worldwide standard Version control system we use to track versions/history of the project directory. 
> - Distributed version control system, mean that the local copy or clone of the project is it own complete version control system. These are a fully functional local repositories to make our life easy by allowing us to work remotely or offline. 
> - This Whole process work like this: developers us commit code locally, then later we sync up our repository with the one on the server. This is different from a centralized version control system, where the client must be synchronized with the server before being able to create a new branch.
> - Just About Every development environment supports GIT, and the GIT Command Line Tools run in almost all the operating system.

> [**More About GIT**](https://docs.microsoft.com/en-us/devops/develop/git/what-is-git#git-basics)


## GitHub 
> - Basically is a place to host your code online, and allow for collaboration and version control. 
> - GitHub allow you and many others peoples to work together and contribute to a project. 
> - At it Core, data server and website that host our code on the cloud.

> [**GitHub GIT CHEAT SHEET**](https://education.github.com/git-cheat-sheet-education.pdf) 👈 Click the link to get a copy of the PDF.

>[**In Other Languages**](https://training.github.com/) 👈 Cheat Sheet in many Languages.

> - **NOTE: This is one of 30 blogs that I would be attempting to write over the next 30 days to improve my writing skills.**
Carbon Add Years To Date In Laravel
Tags: laravel, php, laravel8, carbon
Published: 2022-03-11 02:50:39

In this tutorial, we will see an example of carbon add years to date in laravel, here I will give you a simple example of carbon in laravel, carbon provides many functions like addyear(), addyears() to add the year in laravel 8. Using the carbon addyear() function you can change the year in the date in laravel 8.

If we need to add a year or more than one years in date then you can use carbon in laravel. carbon provides addyear() and addyears() method to add years on carbon date object.

So, let's see an example of laravel 8 carbon add years to date or add year using carbon in laravel 8.
addYear() Example

The carbon addYear() function is used to add the year on a date. So, here I will give you an example of the current date to add a year.

```
<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use Carbon\Carbon;
  
class DateController extends Controller
{
    public function index()
    {
        $currentDateTime = Carbon::now();
        $newDateTime = Carbon::now()->addYear();
             
        print_r($currentDateTime);
        print_r($newDateTime);
    }
}
```
 
Output : 

```
Current Date and Time : 2022-01-16 08:13:07
Current Date with Add Year : 2023-01-16 08:13:07
```

---
 
> **_[Read Also : Carbon Add Months To Date In Laravel]()_**

---
 
addYears() Example

The Carbon addYear() function is used to add year as per your requirements on the date. So, here I will give you an example of the current date to add 5 years.

```
<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use Carbon\Carbon;
  
class DateController extends Controller
{
    public function index()
    {
        $currentDateTime = Carbon::now();
        $newDateTime = Carbon::now()->addYears(5);
             
        print_r($currentDateTime);
        print_r($newDateTime);
    }
}
``` 

Output : 

```
Current Date and Time : 2022-01-16 08:14:46
Current Date with Add Years : 2027-01-16 08:14:46
```
 
You might also like :

- **_[Read Also : How to Install CKEditor in Laravel](https://techsolutionstuff.com/post/how-to-install-ckeditor-in-laravel)_**

- **_[Read Also : Carbon Add Days To Date In Laravel](https://techsolutionstuff.com/post/carbon-add-days-to-date-in-laravel)_**

- **_[Read Also : How To Generate QRcode In Laravel](https://techsolutionstuff.com/post/how-to-generate-qrcode-in-laravel)_**

- **_[Read Also : Autotab To Next Input Field JQuery Example](https://techsolutionstuff.com/post/autotab-to-next-input-field-jquery-example)_**