teleren/devto huggingface dataset:
10 tools you might need as a developer
Published: 2021-06-18 03:37:21

1.  [carbon.now.sh](carbon.now.sh)
Lets you easily create and share beautiful images of your source code.

2. [wappalyzer.com](wappalyzer.com)
Chrome extension to find out what technology stacks the website is using. 

3. [remove.bg](remove.bg)
This website lets you easily remove backgrounds from any image in just a click. No more removing backgrounds manually. 

4. [coolors.co](coolors.co)
This website lets you generate color palette for your projects. You can explore from thousands of trending color palette to help you get inspired. 

5. [loading.io](loading.io)
This website lets you customize loading icons with tons of customization options. 

6. [vercel.com](vercel.com)
Vercel is a development and collaboration platform for frontend developers which helps you build high-performance websites and applications at ease. 

7. [webcode.tools](webcode.tools)
This website helps you find code generators to help you with your front-end web projects. 

8. [github.com/rahuldkjain/github-profile-readme-generator](github.com/rahuldkjain/github-profile-readme-generator)
This tool provides an easy way to create a Github profile README.md with features like visitors count, github stats and many more. 

9. [photopea.com](photopea.com)
Free and web based Photoshop alternative app which lets you easily create, edit your existing design on the go. 

10. [wireflow.co](wireflow.co)
Wireflow is a free and open source tool for creating beautiful user flow prototypes.
Day 2 of #100DaysOfCode!

Tags: beginners, 100daysofcode, javascript, codenewbie
Published: 2021-06-18 03:15:47

<h2>Today's progress🤖</h2>
Successful day! I tackled on more <a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-algorithm-scripting">Basic Algorithm Scripting</a>
problems from freeCodeCamp. Learned and used a wide set of methods, `slice()` `splice()` `indexOf()`. A combination of methods can really help to solve algorithms. So reading and really understanding what they do helps.  


<h2>What I learned</h2>
`split()` method divides a string into an ordered list of substrings and returns an array.

```javascript
let string = "I'm a little tea pot"

let arr = string.split(' ');

//output: ['I'm', 'a', 'little', 'tea', 'pot']
```
Now that we have the string into an array. We can loop through the array and take the first letter of each word and replace it using the `toUpperCase` method

`splice()` method modifies an existing array by removing, replacing or adding existing elements.

```javascript
let numbers = ['one', 2, 4, 'five', 'six', 7]

numbers.splice(2, 0, 'three')  


//output ['one', 2, 'three', 4, 'five', 'six', 7]
```
Zooming and Panning Options with React Charts of Syncfusion
Tags: reactnative, charts, webdev, components
Published: 2021-06-18 03:11:40

Learn how easily you can handle the zoom and pan behavior of Syncfusion [React charts](https://www.syncfusion.com/react-ui-components/react-charts "React charts") when working with many data points. This video explains how to work with different zooming options and modes, scroll the zoom area, and adjust its axis intervals.
 
Download the example from GitHub: 
https://bit.ly/3zho9rw

Refer to the following documentation for the zooming and panning options in the Syncfusion React Chart component: 
https://bit.ly/3w3i689

Check out this online example of the zooming and panning options in the Syncfusion React Chart component: 
https://bit.ly/3zcIQoL
{% youtube 6Fq99_MnpSA %}
Simple guide of Flexbox in Real Life🔥Part #2
Tags: css, flexbox, javascript, responsive
Published: 2021-06-18 03:04:17

If you have come until here you are prepared for working with <strong>Flexbox in real projects</strong>, but first read all this article.

<h2>An interesting property: wrap</h2>

First, we let's talk about the <code>wrap</code>, <code>wrap</code> is so useful property to defined If our items it adjusting in one line or allow the items to wrap as needed with this property.

It has 3 properties:

<code>nowrap</code> (default): all flex items will be on one line
<code>wrap</code>: flex items will wrap onto multiple lines, from top to bottom.
<code>wrap-reverse</code>: flex items will wrap onto multiple lines from bottom to top.

<h2>A combination between <code>wrap</code> and <code>flex-direction</code>: <code>flow</code></h2>

If you needed use flex-direction and wrap in the same element, so flow is your solution to save your time and create more clarity and professional code

This is an example of how use this property:

<code>.div {
  flex-flow: column wrap;
}</code>

I know that you are waiting for more property but I'm sorry it does not have more so important properties, If you want to read more about all flexbox properties clicking this <a href="https://yourlink.cc/a-complete-guide-to-flexbox">URL</a>, sorry it's a monetizable URL with them I pay my tomatoes
What is NoSQL?  
Published: 2021-06-18 02:49:17

Our team moving to NoSQL DB for my current project.(I've only used SOL originally...) So I'm going to think about it. Actually we plan to firebase.


My questions are ...
① What's good about NoSQL?
② What's bad about NoSQL?
③ I mean...actually what does SQL mean?
④ How do we design NoSQL DB...what is best practice?


① What's good about NoSQL?
  - Fast processing!
  - Easier!! to handle scale-out

② What's bad about NoSQL?
  - Data integrity is difficult to maintain
  - Data processing is difficult

③ I mean...actually what does SQL mean?
  - A database language for manipulating and defining data.
    ex...SELECT,INSERT,UPDATE,DELETE

④ How do we design NoSQL DB...what is best practice?
  - I don't know yet......................
 
 
----------- 
>Reference site
■Client Side Join
https://qiita.com/1amageek/items/afc1c0ceb15ffc2372fd
■What is RESTful API
https://qiita.com/NagaokaKenichi/items/0647c30ef596cedf4bf2#restful-api%E3%81%A8%E3%81%AF
June 17th, 2021: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2021-06-18 02:28:07

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>

![A picture it a dog waving their paw with the caption “Learning, cool at school or at home”](https://media.giphy.com/media/1xpm1nTQiRL96Di3Q6/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 %}
How to Disable a Repository in Azure DevOps (Azure Repos)
Tags: azuredevops, git, devops, repo
Published: 2021-06-18 00:39:05

In this post I'm going to show you how to disable a repository in Azure DevOps and prevent users from accessing its contents.

### Video

As usual, if you are a __visual learner__, or simply prefer to watch and listen instead of reading, here you have __the video with the whole explanation and demo__, which to be fair is much ___more complete___ than this post.

{% youtube G_um1mm7LiM %}

[Link to the video: https://youtu.be/G_um1mm7LiM](https://youtu.be/G_um1mm7LiM)

If you rather prefer reading, well... let's just continue :)

### Why Disabling Repos?

Before we talk about how to disable a repo, why would you want to do it?

Well, for example you may want to disable a repository because you found a secret in it. Or a third-party scanning tool found the repository to be out of compliance.

In such cases, you may want to temporarily disable the repository while you work to resolve the issue.

### How to Disable a Repo in Azure DevOps

Let's see now how to disable a repo. It is very easy.

Just go to the `Project Settings`, scroll down to the `Repositories` section and enter it, then click on the specific repo you want to Disable. In the settings, you have the `Disable Repo` switch

![Disable a Repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6jn7q4mtcrydlfl29z0.png)

When a repo is disabled, it still shows up in the list of repos, however no one can access or update its content.

And you would also see a message saying that the repo has been disabled when they try to access it in the Azure Repos UI.

![Disabled Message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8kwc99oklp2828z7090.png)

And of course after the necessary mitigation steps have been taken, disabled repositories can be re-enabled using the same setting.

> Final note: you can disable a repository only if you are either admin or owner, or you have the Delete repository permissions.

### Conclusions

Let me know in the comment section below if you think this is useful and if you've ever been in a situation in which you could have disabled a repo.

__Like, share and follow me__ 🚀 for more content:

📽 [YouTube](https://www.youtube.com/CoderDave)
☕ [Buy me a coffee](https://buymeacoffee.com/CoderDave)
💖 [Patreon](https://patreon.com/CoderDave)
🌐 [CoderDave.io Website](https://coderdave.io)
👕 [Merch](https://geni.us/cdmerch)
👦🏻 [Facebook page](https://www.facebook.com/CoderDaveYT)
🐱‍💻 [GitHub](https://github.com/n3wt0n)
👲🏻 [Twitter](https://www.twitter.com/davide.benvegnu)
👴🏻 [LinkedIn](https://www.linkedin.com/in/davidebenvegnu/)
🔉 [Podcast](https://geni.us/cdpodcast)

<a href="https://www.buymeacoffee.com/CoderDave" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 30px !important; width: 108px !important;" ></a>

{% youtube G_um1mm7LiM %}
#100DaysOfSwift: Day 3 
Tags: ios, beginners, swift
Published: 2021-06-18 00:37:09

Day threeeeee! Hello! Today, was a review for me as I went over the following material when doing codecademy:

1. Operators: compound assignment, comparison, ternary, comparison, and ranges.
2. Switch statements
3. Conditions
4. Combining conditions 

New things I learned:
1. You can compare strings using less than or equal to operators. For example, "Taylor" <= "Swift". I did not understand how at first and then I read that strings have a natural alphabetical order! 
2. There are two types of range operators: 
    i. half open range which is when you want to count up a certain number but not include that number. The syntax is two  periods and a less than sign.  For example, 1..<4 would be 1,2,3.
    ii. closed range is when you count up to a certain number and want to include that last number.The syntax is three periods. For example, 1...4 would be 1,2,3,4. 

Until tomorrow !
How to set the background color on the rect svg element in HTML?
Tags: html
Published: 2021-06-18 00:00:00

---
  title: How to set the background color on the rect svg element in HTML?
  published: true
  tags: HTML5
  date: Fri Jun 18 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/set-background-fill-color-rect-svg-element-html
  cover_image: https://melvingeorge.me/_next/static/images/main-873f7fc3f4760895d3824080faaa44ef.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/set-background-fill-color-rect-svg-element-html)
  
To set the background color for the `rect` SVG element, you can use the `fill` attribute on the `rect` element inside the `svg` tag in HTML.

### TL;DR

```html
<!-- Set background color on 'rect' svg element -->
<svg>
  <rect x="0" y="0" width="30" height="20" fill="red" />
</svg>
```

For example to set the color `red` on the `rect` svg element, let's use the `fill` attribute and set its value to the string `red` like this,

```html
<!-- Set background color on 'rect' svg element -->
<svg>
  <rect fill="red" />
</svg>
```

But this alone wouldn't show anything on the screen as the browser doesn't know where to start drawing the shape. For that, you also have to add other 4 attributes like the `x`, `y`, `width`, and `height`. To know more about these attributes check out [How to create or draw a rectangle using SVG in HTML?
](https://melvingeorge.me/blog/create-rectangle-svg-html)

So at the end it will look like this,

```html
<!-- Set background color on 'rect' svg element -->
<svg>
  <rect x="0" y="0" width="30" height="20" fill="red" />
</svg>
```

See the above code live in [JSBin](https://jsbin.com/qefocosuva/2/edit?html,output).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Example for Using the Single Responsibility Principle
Tags: programming, beginners
Published: 2021-07-19 12:10:39

---
title: Example for Using the Single Responsibility Principle
published: true
date: 2021-06-18 00:00:00 UTC
tags: [ programming, beginners ]
canonical_url: https://thomasstep.com/blog/example-for-using-the-single-responsibility-principal
---

I just recently change the way that [Crow Authentication](https://crowauth.com) stored user information. My data model did not completely suit a new use case that I was looking into implementing. On top of that, I realized that the way I modeled my data did not make total sense, so I wanted to change what I had hastily thrown together into a more elegant solution.

Luckily, I had written my code better than I modeled my data and all of my database operations were completely abstracted away from my business logic. Instead of needing to track down and change every location that I asked the database for anything, I only had to change one function that handled how I assembled my commands to DynamoDB. The business logic continued to call the same abstracted database functions and those functions still returned the same data that the business logic expected. The difference was in the way the data layer stored the information. No further code needing to change, but the way I modeled my data completely changed. Cool.

I always like to have examples and use cases to back up a popular saying or principle. When I needed to change how I stored information in my data layer and it only took me a few lines of code, I knew I had to write it down for myself in the future. This is one occurrence where something I designed needed to be changed based on a new use case and the way I designed and wrote the code made my life so much easier.
5 Rules for Writing a Web Crawler That Doesn't Break
Published: 2021-06-17 17:10:57

1. Use a framework like Scrapy

Don't try to reinvent the wheel. Frameworks like Scrapy abstract many of the complex functions of web scraping like concurrency, rate limiting, handling cookies, extracting links, using file pipelines, handling broken and different encoding to make life easier. Starting from scratch on your own dooms your project to the inevitable complexity that is going to hit you pretty soon.

2. Learn & Use XPath or CSS selectors.

Instead of using RegEx or any other custom rudimentary method to get to the data, you want to scrape, using CSS selectors or XPath or a combination of both makes your code more stable. It protects you against arbitrary changes in a website’s code.

3. Scale using Scrapyd and Rotating Proxies

Scrapyd allows you to run multiple spiders at the same time and manage them easily. Combining it with a rotating proxy means you can scale your project to dramatic speeds and break a lot of usage and concurrency restrictions of linear coding without incurring the wrath of usage restrictions or IP blocks.

4. Take measures to counter usage restrictions and IP blocks

Rotating proxies like Proxies API is the way to do it. There is no way around it for serious projects of any decent size, frequency, and importance.

5. Put in checks and balances

There are so many failure points in web crawling projects that you have no control over. It’s best to put it a bunch of checks and balances by first identifying them like:

a. Loss of internet connectivity on both ends.

b. Usage restrictions imposed.

c. IP blocks imposed.

d. The target website changes its HTML.

e. The target website is down.

f. Target website issues a CAPTCHA challenge.

The author is the founder of Proxies API, a proxy rotation API service.
Core skills vs. company-specific skills
Tags: team, skills, productivity, practices
Published: 2021-06-20 12:01:06

---
title: Core skills vs. company-specific skills
published: true
date: 2021-06-18 00:00:00 UTC
tags: team,skills,productivity,practices
canonical_url: https://jhall.io/archive/2021/06/18/core-skills-vs.-company-specific-skills/
---

At some point in your career, I’m willing to bet you’ve worked with someone who just joined the team, and started talking about how “at my old job, we did things differently”, as a petition for change, with no clear reason behind it. And they probably seemed pretty inexperienced—there’s an excellent chance that this is only their second job out of school.

“We should use GitFlow like we did at my last company.”

“We should do stand-up in the afternoon like we did at my last company.”

“At my last company, things were better because everyone used a MacBook.”

There’s also a good chance that you’ve been that person before.

What makes us do this? Why do so many people (perhaps all people, at some point in their life) try to change the way a new team works to conform to the ways of an old team? I think these suggestions are usually offered in good faith. There’s an honest belief that if we just did this one thing differently, work life would be better.

Most of these things are a matter of preference or culture, rather than “the right way.” Of course that’s not to say some new team member in this “at my last job” mode won’t occasionally make a great suggestion, but when they do it’s almost by accident.

I believe what leads to this situation is the fact that “newbies” don’t know how to distinguish between core skills (i.e. how to write functioning code, how to write clear documentation, etc) and company-specific skills (i.e. how to do a stand-up, which tool we use for monitoring, etc).

If we consider the [Dreyfus model of skill acquisition](https://en.wikipedia.org/wiki/Dreyfus_model_of_skill_acquisition), such people are “novices”, relying on non-situational repitition of learned behaviors. It’s not until the “advanced beginner” stage that a person begins to recognize that the skills they’ve learned are applicable only situationally.

If you find yourself itching to suggest “but we did it this way” just because it makes you more comfortable to do things that way, consider whether you’re still in the “novice” stage, and might learn something from those around you who are doing things different.

On the other hand, if you find yourself in a situation where things really _are not working_, and you remember a way of working that has worked in a similar situation, that’s a good indication that you’re at least an “advanced beginner.”

The key is not to offer advice based on past experience, obviously. The key is to offer advice that is situationally relevant, and as a bonus: that solves a problem the team as a whole feels needs to be addressed!

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Build an idea generator from scratch, part 4: Speed up the page by caching API results [Video]
Tags: video, javascript, tutorial, codenewbie
Published: 2021-06-17 23:58:28

{% youtube kMq3YHwEIxk %}
Hello again folks! This week's installment of the Idea Generator Tutorial focuses on performance and caching. We'll examine cookies and localStorage as possibilities, and how to ensure users still get fresh results periodically even with caching data. We'll also reinforce good programming practices by breaking up our functions into smaller, easier parts to manage and debug.

If you're new to this series, catch up by checking out [my post on the first tutorial in this series](https://dev.to/ashleykolodziej/build-an-idea-generator-from-scratch-part-1-project-setup-with-github-and-dotenv-video-34mn).

## This video covers:
- How to create localStorage data with expiration times so data stays fresh for returning users
- The difference between save and save-dev in npm packages
- How to troubleshoot common errors and importing with ES6 syntax

... and, as usual, a number of other fun tidbits that will help you work more effectively.

## The final product

In this series, we’ll be working toward [this idea generator](https://professorkolodziej.github.io/idea-generator/) as our final product.

## Code links

Follow along by cloning or forking the main branch here: https://github.com/ProfessorKolodziej/idea-generator

You can also start on your own project by using my Student Site Boilerplate template: https://github.com/ProfessorKolodziej/student-site-boilerplate/

**[Catch the new video over here.](https://youtu.be/kMq3YHwEIxk)** Happy coding!

---

**I'm always happy to connect!**

🐰 [@ashleykolodziej on Twitter](https://twitter.com/ashleykolodziej)
🐰 [Subscribe to Professor K Explains on YouTube](https://www.youtube.com/c/ProfessorKExplains?sub_confirmation=1)
mautic の多言語対応のソースはどこか
Published: 2021-06-17 23:41:03

現時点の mautic は最初から日本語化も簡単にできて導入がしやすい。
いくつか日本語化されていない部分があったので、どこで貢献できるのかと思いプロジェクトを見てみたがパッとは `en_US` 以外のファイルが見つからない。

## LanguageHelper

`CoreBundle` に含まれている。
https://github.com/mautic/mautic/blob/features/app/bundles/CoreBundle/Helper/LanguageHelper.php

上記によると、デフォルトの `en_US` 以外は remote server から fetch されていることが分かる。

### 言語ファイルの取得

`fetchLanguages` と `fetchPackage` 関数を見てもらうと分かるが、以下の 2 箇所からそれぞれ、manifest と言語パック (zip) を取得していることがわかる。

https://github.com/mautic/mautic/blob/features/app/bundles/CoreBundle/Config/config.php#L1615-L1616
- https://language-packs.mautic.com/manifest.json
- https://language-packs.mautic.com/ja.zip (日本語の場合)

`ja.zip` を展開すると分かるが、あらゆる Bundle 用の言語ファイルが含まれていることがわかる。

以下の Github リポジトリが本体のようである。
https://github.com/mautic/language-packs

## 貢献する場所はどこか

https://language-packs.mautic.com/ にアクセスすると以下が記載されている。
> This repository contains Mautic translation packs which are automatically built based on Transifex community translations.

https://www.transifex.com/mautic/mautic/

上記から貢献できることがわかった。

> サインアップしようとすると、なぜか失敗するのでまだサインアップできていない。
> -> ソーシャルアカウントでのサインアップは失敗するが、メールアドレスでのサインアップはできた

## Update 2021/06/19

https://docs.mautic.org/en/translations#how-to-translate-mautic
そもそも上記の公式にちゃんと書いてあった :sweat_smile:
https://developer.mautic.org/ こっちばっか見てたらだめだな。
Don't redirect in a callback
Tags: webdev, javascript, html, a11y
Published: 2021-06-17 23:39:36

I have to correct this every time I join a new project: in a web application, do not redirect users in a callback. Use an anchor (`a`) tag instead.

## Bad

```js
function onClick() {
  [...].goto('/patate')
}
```

```html
<button onclick="onClick()">Potato page</button>
```

## Good

```html
<a href="/patate">Potato page</a>
```

## Why is the handler bad?

1. Requires JS to work.
2. You are losing all the built-in browser functionalities. With a callback, one cannot:

  1. Right-click + Open in a new tab (and the other right click options)
  2. See whether he has already visited a link (although most people get rid of that visual feedback)

## When to stop using an anchor?

If you need to run JS for purposes other than user redirection. Ex:
- Calling an API then redirecting
- Running validations then redirecting
- etc.

In those cases, you may use a callback.