teleren/devto huggingface dataset:
JavaScript - remove duplicated lines
Tags: javascript, webdev, tutorial, programming
Published: 2021-03-02 16:37:08

Hello there! 👋 😊

In this article, I would like to show you two ways to remove duplicated lines from some text in JavaScript. 🔠

__Before we start__, I would highly recommend you to check out __runnable examples__ for the solution on our website:
[JavaScript - remove duplicated lines](https://dirask.com/posts/pVPYG1)

We're gonna use two methods: 

- `filter()`
- `reduce()`

##`filter()` based example
This approach uses a functional programming pattern.

On the text I've used set of operations to remove duplicated lines:

- `split()` method to split text into lines that take a newline character in 4 different variants which is a universal approach,
- `filter()` method that creates new array of elements tested with provided function,
- `join()` method to merge items back.

Practical example:
```javascript
const newLineExpression = /\r\n|\n\r|\n|\r/g;

const removeDuplicatedLines = (text) => {
  	return text.split(newLineExpression)
  		.filter((item, index, array) => array.indexOf(item) === index)
    	.join('\n');
};

// Usage example:

const text = `a
b
b
a
a
c
c`;

console.log(removeDuplicatedLines(text)); // a
                                          // b
                                          // c
```
You can run this example [here](https://dirask.com/posts/pVPYG1)

##`reduce()` based example
This approach was created to show that it is possible to get the same effect as in the example above with `reduce()` method.

Practical example:
```javascript
const newLineExpression = /\r\n|\n\r|\n|\r/g;

const removeDuplicatedLines = (text) => {
  	const blocker = {}; // prevents lines dupplication
  	return text.split(newLineExpression)
    	.reduce((result, line) => {
        	if (blocker.hasOwnProperty(line)) {
				return result;
            }
            blocker[line] = true;
            return result + line + '\n';
        }, '');
};

// Usage example:

const text = `a
b
b
a
a
c
c`;

console.log(removeDuplicatedLines(text)); // a
                                          // b
                                          // c
```
You can run this example [here](https://dirask.com/posts/pVPYG1)

If you found this solution useful you can react to this post or just leave a comment to let me know what you think. Thanks for reading and see you next time! 😊

_____________
## Write to us! ✉
If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on [dirask.com -> Questions](https://dirask.com/questions)
Learning GraphQL, what do you learn first?
Tags: graphql, help, react, mern
Published: 2021-03-02 16:35:28

What do you focus on first learning GraphQL? 
I have a MERN + Apollo/ GraphQL + Strapi CMS, project.
I want to eventually have a checkout system, ALSO, possibly a small social side so people can share “fish tank” setups and also what products they use or need.
Send metrics to Datadog from Netlify builds
Tags: javascript, datadog, observability
Published: 2021-03-02 16:31:20

I previously wrote about gathering [Lighthouse audit metrics within CI](https://dev.to/jamescryer/programmatically-audit-with-lighthouse-and-performance-budgets-9kb). These and other custom metrics can be sent to [Datadog](https://docs.datadoghq.com/developers/metrics/) for analysis without needing the Datadog agent.  The implementation below uses [Dogapi](https://github.com/brettlangdon/node-dogapi#readme) to send custom metrics via the Datadog API.

```javascript
const {
  env: { DATADOG_API_KEY, VERSION, ENVIRONMENT },
} = require('process');

function createMetricReporter({ service }) {
  const dogapi = require('dogapi');
  const defaultTags = [`env:${ENVIRONMENT}`, `releaseVersion:${VERSION}`, `service:${service}`];
  const metrics = [];

  dogapi.initialize({
    api_key: DATADOG_API_KEY,
  });

  return {
    gauge: (metric, points, tags = []) => {
      metrics.push({
        metric,
        points,
        tags: [...tags, ...defaultTags],
        type: 'gauge',
      });
    },
    send: () => {
      const sendPromise = new Promise((resolve) => {
        dogapi.metric.send_all(metrics, (error, result) => {
          if (error) {
            console.log(`Unable to send metrics to Datadog`, error);
          } else {
            console.log(`Successfully sent metrics to Datadog`, result);
          }

          resolve(!error);
        });
      });

      return sendPromise;
    },
  };
}
```

Below is a snippet of what the Netlify plugin might look like.
```javascript
module.exports = {
  onSuccess: async ({ inputs: { service, url, budget } }) => {
    const metrics = createMeticsReporter({ service });
    const results = await lighthouse(url, budget);

    for (const result of results) {
      const tags = [`formFactor:${result.formFactor}`];
      metrics.gauge('lighthouse.accessibility', result.accessibility, tags);
      metrics.gauge('lighthouse.bestPractices', result.bestPractices, tags);
      metrics.gauge('lighthouse.performance', result.performance, tags);
      metrics.gauge('lighthouse.pwa', result.pwa, tags);
      metrics.gauge('lighthouse.seo', result.seo, tags);
    }

    await metrics.send();
  },
};
```
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2021-03-02 16:30:17

---
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. ❤️_

## From Windows to Arch Linux

Considering a switch to Linux?  🤔 @mauro_codes walks us through their decision to move from Windows to Arch Linux, providing some helpful tips and tool recommendations along the way.

{% link /mauro_codes/switching-to-arch-linux-1hm %}

## Kickin' the Habits

In this post, @lizlaffitte lists out 5 common web dev practices that should be tossed to the curb, which also led to some excellent discussion amongst folks in the comments section.

{% link /lizlaffitte/web-development-bad-habits-to-kick-1f0n %}  

## Graduating Bootcamp and on to Google

Wanna hear a super fun career success story? @sylviapap walks us through their journey from graduating coding bootcamp to getting a job at Google in just over a year's time. 🙌

{% link /sylviapap/my-career-story-from-0-to-google-in-1-year-2p8a %}

## How to Apply Colors 🎨

Learn by doing in @georgedoescode's in-depth beginner's tutorial on applying color in UI design. It's awesome! 🌈

{% link /georgedoescode/a-beginner-s-guide-to-applying-color-in-ui-design-3904 %}

## Check "This" Out 

Think you know "this" in JavaScript? @anmshpndy walks us through how "this" works in different contexts to help better our understanding.

{% link /anmshpndy/how-well-do-you-know-this-2cg1 %}

## Keep Kindness in Mind  

@nocnica provides excellent guidance for how to be kind and more empathetic to trans people. Read through these tips and share the love. ❤️

{% link /nocnica/9-ways-to-be-kind-to-trans-people-2l9e %}

## Figma Is Your Friend

From first steps to creating branded slides, @dawntraoz shows off how they're using Figma in their workflow as a front-end dev.

{% link /dawntraoz/a-front-end-developer-using-figma-41p2 %}

_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!_
How To Combine Fonts (Hint: Contrast)
Tags: design, css
Published: 2021-03-02 16:26:06

Contrast attracts the eye, and you can use fonts to create contrast in your design.

Take a look at this.

![Third image of font](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hc9q4zpbd6dep3igsxbn.png)

The example on the right is more “colorful” in a way that doesn’t utilize color. It’s interesting without overwhelming the eye.

Here are other examples.

![Second image of font](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/247tsk6zgmoypoam16vk.png)![Fourth image of font](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1t8lntkgbdetep6dtxqk.png)![Fifth image of font](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84o7vt9bq1lslzrobnks.png)

It’s all about contrast—the more different the typeface or font is, the more interesting it becomes. There is, obviously, a fine line—when the fonts clashes really hard, it’s becomes confusing rather than interesting. 

If you combine all the things above, it will look something like this.

![First image of font](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nezejl1v22oatu8o5y3n.png)

If you want to add another font to your single-font design in your website, there’s no point in adding a font that looks similar. At best, it will look like a design without conflict, but it confuses the eye when inappropriately applied.

Contrast attracts the eye; to create contrast, you can't be a wimp.
รัน MinIO เพื่อทดสอบเวลาเขียนโค้ดต่อกับ AWS S3
Tags: aws, s3, minio
Published: 2021-03-02 16:25:15

[MinIO](https://github.com/minio/minio) เป็น Open Source Object Storage service ใช้ license Apache License v2.0 โดยมี API ที่ compatible กับ API ของ AWS S3 ดังนั้น ก็เป็นตัวช่วยที่ดีถ้าเราอยากทดสอบโค้ดที่จะต้องต่อกับ S3 แต่ยังไม่มี account AWS S3 จริงๆ

การใช้งานมีวิธีติดตั้งหลายแบบ แต่แบบง่ายสุดคือไม่ต้องติดตั้ง รันมันผ่าน Docker เลย ง่ายๆแบบนี้

```
> docker run -p 9000:9000 minio/minio server /data
```

ซึ่ง default สำหรับ env `AWS_ACCESS_KEY_ID` กับ env `AWS_SECRET_ACCESS_KEY` นั้นใช้ `minioadmin` ได้เลย

นอกจากนั้นยังมีหน้า admin อีกด้วยเมื่อเข้าเข้าไปที `http://localhost:9000` โดยใช้ username กับ password `minioadmin` ทั้งคู่เลย

เมื่อเข้าไปแล้วด้านขวาล่างจะมีปุ่ม `+` ให้เรากดแล้วสร้าง bucket ใหม่ได้

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5epxkcmzyu7f0uziw0az.png)

จริงๆแล้ว MinIO ไม่ได้เอาไว้แค่ทดสอบ ใครจะเอาไปใช้เป็น service แทน AWS S3 เลยก็ได้เช่นกัน แต่ก็ถ้าใช้งานจริงๆอย่าลืมอ่านคู่มือเพื่อตั้งค่าการใช้งานและ key ต่างๆให้ปลอดภัยด้วยนะครับ

## ขอฝาก Buy Me a Coffee
สำหรับท่านใดที่อ่านแล้วชอบโพสต์ต่างๆของผมที่นี่ ต้องการสนับสนุนค่ากาแฟเล็กๆน้อยๆ สามารถสนับสนุนผมได้ผ่านทาง Buy Me a Coffee คลิ๊กที่รูปด้านล่างนี้ได้เลยครับ

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

ส่วนท่านใดไม่สะดวกใช้บัตรเครดิต หรือ Paypal สามารถสนับสนุนผมได้ผ่านทาง PromptPay โดยดู QR Code ได้จากโพสต์ที่พินเอาไว้ได้ที่ Page DevDose ครับ https://web.facebook.com/devdoseth

ขอบคุณครับ 🙏
How to Overcome Programmer’s Block
Published: 2021-03-02 16:15:51

So it’s not just writers who get stuck when they stare at a blank page — I mean, a blank code editor. Whether it’s for a programming assignment or a work project, you just don’t know where to start sometimes. It can make you feel really frustrated. Finishing the task feels so far away.

What can you do in this case besides panicking and banging your head against the keyboard? Let’s explore five steps to overcoming coder’s block:

1. You need a break. If you have been staring at the blank screen for a while and you cannot come up with any good ideas to approach the problem, you need to get up and do something else. You can take a walk around the neighborhood, bake some cookies, or watch funny cat videos on YouTube and just take your mind off the problem for now.

2. After your fun little break, you need to get back to work. Yes, no procrastinating is allowed. Take a look at the problem again and give yourself five minutes to take another stab at it. In those five minutes, you can read the question again, write the signature of the functions, write pseudocode, draw a diagram — do whatever first tiny step you need to do to get started.


3. Write down any specific questions you have about the problem that you do not know the answer to on a notepad. This makes the task less overwhelming. Perhaps you do not know how to make a button clickable. You would write “How do I make a button clickable in JavaScript?” on your notepad. If you have to create an API and you don’t even know what that means, you should write “What is an API?” See what I mean? Every little thing that you do not know, you need to write down. As you continue to do more research, you may come across more things you do not know, so you need to keep track of them.

4. Once you have specific questions listed, Google and Stack Overflow are your best friends. Chances are most of us programmers think alike, have asked the same questions before, and have had the same bugs before. Most of the time, you will be able to answer all of the questions you wrote down yourself if you are resourceful at finding answers. This is a great way to get unstuck by helping yourself.

5. Finally, if you have tried finding the answers to your questions, but you are still stuck, try to get help from others. If you are in school, you can ask your professors and TAs. At work, you can ask coworkers or your manager. Even if they do not know the answer, hearing different perspectives can help you get unstuck and come up with a better way to approach the problem.
Know that all programmers get coder’s block sometimes, and it is perfectly OK! In fact, the experience helps you grow and learn new skills. Just don’t get coder’s block during a coding interview.
O que é o Shell?
Tags: shell, linux, terminal, windows
Published: 2021-03-02 16:10:52

O **Shell** é um programa que possibilita à usuária acessar recursos do Sistema Operacional, através do [Terminal](https://dev.to/womakerscode/o-que-e-o-terminal-1bgp) ou da interface gráfica. É ele quem faz a ponte de comunicação entre o núcleo do Sistema Operacional e a usuária/aplicações/programas.

![funcionamento do shell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwybsy6st9fb10n6jh12.png)
 
O Shell CLI mais conhecido entre as usuárias de sistemas baseados em UNIX é o **Bash**. No Windows temos o **PowerShell**.
What I Built Last Week - Feb 22, 2021
Tags: devjournal
Published: 2021-03-02 16:10:49

> I use these posts as part of my effort to build in public. They showcase my current progress on products and audience building. They are intended to provide an imperfect snapshot of what I am working on and progress towards goals. If nothing else, they are useful to me for record keeping.

## Overview

Last week was a relatively mellow week in terms of productivity on the side projects. I made the conscious choice to not work over the weekend too so I could recharge a bit. I am really glad I opted for the time off.

### Irons in the Fire This Week

- Developing new "Postcards" music newsletter
- Mapbox and React Deep Dives series
- Mapbox Developers Handbook

### Metrics

Making just about everything transparent and accessible.

- You can check out the [Growth Dashboard](https://datastudio.google.com/reporting/7278763f-4383-4dee-99f4-f2951816f6a7) I mentioned below

Here are the things I worked on during the last week.

## Personal Site Improvements

### The What

I continued making some small stylistic tweaks to the site (mostly typography related). The main improvements I made centered around internal tooling. I expanded my existing utility scripts for generating a new blog post to support multiple different templates now that I have a few recurring weekly posts (i.e. What I Built Last Week, Songs of the Week, Mapbox and React Deep Dives).

### The Why

I have been trying to automate as many things as I can. I have fairly limited free time (1 to 2 hours a day) to devote to side projects, so the less time I have to spend on repeatable, non-value add tasks the better. Expanding my blog post generation utility script to support different templates has already saved me a good amount of time. I will probably write a post on how I did this, but it loosely follows [the process](https://www.lostcreekdesigns.co/writing/auto-generating-a-react-component-with-intelligent-boilerplate) I used to develop a utility script for auto-generating React Components.

## Writing

### The What

I put out three blog posts last week:

- [A Complete Guide to Sources and Layers in React and Mapbox GL JS](https://www.lostcreekdesigns.co/writing/a-complete-guide-to-sources-and-layers-in-react-and-mapbox-gl-js)
- [What I Built Last Week - February 15, 2021](https://www.lostcreekdesigns.co/writing/what-i-built-last-week-february-15-2021)
- [Songs of the Week - February 22, 2021](https://www.lostcreekdesigns.co/writing/songs-of-the-week-february-22-2021)

The guide to sources and layers was a beast and a wake up call on just how involved some of these remaining Mapbox and React Deep Dive guides are going to be. Initially I had hoped to put two to three of these posts out a week, but realistically it will probably be limited to one.

I have been having fun with the **What I Built This Week** and **Songs of the Week** series though. There is something freeing about the formats as I do not have to worry about suggesting a "correct" solution to a problem, I just get to write.

That's it for the updates this week!
From zero to HeroComponent and beyond
Tags: codenewbie, webdev, tutorial, angular
Published: 2021-03-02 16:03:12

Hi,

I'm guessing most of you know what it's like to explain programming to non-programmers... not an easy task. Nevertheless I came up with the (foolish?) idea of trying to teach someone with zero programming knowledge the ins and outs of web development by starting to work towards comprehending the angular HeroComponent. Making her understand programming is plain English and not some foreign language she doesn't understand (her own words).

My reason for doing this is my interest in spreading the beauty of software development as you can read in [Here goes nothing](https://dev.to/jmdejager/here-goes-nothing-o5o). It most definitely also has something to do with trying to be understood and minimize the glazed looks when talking about my job.

It would be great to inspire other people to also start programming, so this is going to be a beginners series. It is meant for the absolute beginner and will exist of a blogpost every two weeks containing new examples, challenges and programming theory. The posts will also contain the implementations that were made by a fellow non-programmer for inspiration. The final goal is to be able to write a webapp using Angular (grocery list, meal planner or actually: whatever you like).

This being the first of the series and probably the one most read by more experienced developers I would like to get your opinion on the starting point of this series. So please let me know what you think, should the series start with:
- HTML/CSS (vote ❤)
- Simple script programming (vote 🦄)

And please recommend this to people that would like to pick up on programming so we can minimize the glazed (what language are you speaking?) looks and let them all see the beauty of web development.
Build Windows native like ui apps using react-windows-ui
Tags: react, javascript, webdev, uiweekly
Published: 2021-03-02 15:58:11

![fluentUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phscs45gxm661eypmt2l.png)
As **Microsoft** introduces the new **fluent ui** design to their windows apps most of the developers started implementing the interface to their apps.

Here comes **react-windows-ui** a **web** based library build using **reactjs** to produce more rich feel of a **_native windows_** apps using **_web architecture_**, It resembles on components model to develop fast PWA or Native apps with coupling with electronjs or NodeGUI.
 

## Adaptive UI

![adaptiveUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33coiuxhn8j03ngels9v.gif)

## Repository
{% github virtualvivek/react-windows-ui %}

## Demo ⚡
https://virtualvivek.github.io/react-windows-ui/


## Installation
```css
$ npm install react-windows-ui
```

## Getting Started

```js
//Be sure to include styles at some point, probably during bootstraping
import 'react-windows-ui/config/app-config.css'
import 'react-windows-ui/dist/react-windows-ui.min.css'
import 'react-windows-ui/icons/fonts/fonts.min.css'
```

## Usage

```js
import { Button, InputText } from 'react-windows-ui';

const App = () => (
  <>
    <Button type="primary" value="Press Me" />
    <InputText placeholder="Enter a text" />
  </>
);
```

## Run Demo Locally
```css
$ git clone https://github.com/virtualvivek/react-windows-ui.git
$ cd react-windows-ui
$ npm install
$ npm start
```

<p>
<a href="https://www.npmjs.com/package/react-windows-ui">
  <img src="https://img.shields.io/badge/package-npm-red.svg?style=for-the-badge&logo=npm&color=f55a42" alt="npmJS" />
</a>
<a href="https://github.com/virtualvivek/react-windows-ui">
  <img src="https://img.shields.io/badge/repository-github-red.svg?style=for-the-badge&logo=github&color=181717" alt="github" />
</a>
</p>

## Find this library useful? :heart:
Support it by joining [**stargazers**](https://github.com/virtualvivek/react-windows-ui/stargazers) for this repository. :star:

## Final Thoughts
I think this project will glorify web developers specially from field of react can build Windows design system hybrid or Native apps with ease. It provides a responsive design flow to support a broad field of devices.
Hackathons : Why You Should Do Them
Published: 2021-03-02 15:50:55

Do you have to be a hacker to do a hackathon? Nope! Typically, a hackathon is an event where coders, designers, and other people get together in teams and get to build an innovative project to present! However, most hackathons actually don’t require participants to know how to code and are perfectly friendly for beginners. Let me give you 5 reasons why you should at least give one hackathon a try! 

###1. They are low-time commitment!

Usually hackathons are about 1–3 days so you can find one weekend to participate in one. You don’t have to spend weeks working on a project and you will be surprised at how much you can accomplish in 24 hours!

###2. You get to meet interesting people

Not only do you get to meet people from different schools and companies, and backgrounds, but you also get to meet people with different skill sets and backgrounds. Besides programmers and designers, I’ve been able to meet owners of non-profits, managers at start-ups, business specialists, and other talented people at these events. You have tons of opportunities to meet new friends at these events and stay in the touch with your teammates afterwards.

###3. You get to develop and explore a bunch of skills in a short amount of time

Your teammates will likely have knowledge in different areas and you will be able collaborate and learn from them. There are also usually workshops hosted by experienced workers in the industry throughout the event that you can attend if you want. Each team also usually gets an industry mentor so you can learn from them. In addition, big companies and sponsors usually provide free resources from 3D printers to virtual reality glasses to Amazon Alexa and other various software and hardware. Hackathons are a great opportunity to be able to explore new technologies that you otherwise may not have the chance to use.

###4. Build a real project that you can put on your portfolio

Employers love to see that you have been proactive by getting involved with hackathon events. Even if you do not want to work in tech, they demonstrate skills such as teamwork, innovation, and business acumen. The jam-packed event really pushes you to try your best during the short time to come up with a usable and creative project that you otherwise probably would not have come up with and implemented.

###5. They are fun!

Hackathons usually have tons of fun activities planned throughout the day and they giveaway a lot of free swag. They also provide free meals and snacks during the entire event. And in the chance that you do win, you may win a large cash prize and other cool prizes like XBoxes, MacBooks, iPads, etc.