teleren/devto huggingface dataset:
Why having a "Work With Me" guide can be a good idea?
Tags: remote, work, productivity, management
Published: 2020-12-29 19:28:55

Lately, while I was surfing Twitter, I found this [tweet](https://twitter.com/shreef/status/1341399140555759617) from [Shreef](https://twitter.com/shreef) talking about his **Work With Me Guide**. And how it can be useful especially when it gets read by a teammate.

And that gave me a flashback about a problem that happened to me when I started as a remote developer for the first time in a new startup. 

In April 2020, I joined a remote international team with 6 nationalities operating in 4 different timezones. I did not have a proper onboarding process. As I previously meet all the team members many times in casual meetings. 
We all thought that should be okay joining and working directly. But it was not. 
We did not know each other enough to work together and we did not have team rules for communication and work organizing.
Given that we were working in a startup moving fast to survive during the COVID-19 global pandemic. We faced a lot of communication, behavioral, and organizational problems which led me to leave in less than 2 months.

Although it was a long time ago, I kept thinking about the reason behind this problem. And I found that my teammates did not know me and I did not know them. I did not tell them enough about myself and I did not ask them to tell me about their preferences. We did not set rules.
Eventually, It turned out that we all were having different ways of handling communicating, organizing, and doing work.

Personally, I used to do face to face communication in all of my life. I was bad at expressing my ideas and feeling in writing. Also, I do not like doing work without taking care of planning, process, and organizing tasks flow.
On the other hand, others were less organized but they knew how and where to move their steps with minimal planning. And they preferred writing over face-to-face communication.

With that said, I think it would have smoothed the onboarding process, reduced communication conflicts, and increased the quality of the team environment if we have shared a **Work With Me Guide** together.

These guides should work as bases to set some team rules and as references to tell more about each team member in the work environment. They should be small, readable, and accessible. And should be used to tell how we work, what we like/dislike, what is the preferred way of communication, ... etc.

One other solution could be a **Kick-Off Meeting** between team members to know each other and to set some guidelines in the work environment.

Finally, Working in an international environment is challenging. We meet different people from different backgrounds. And these backgrounds affect heavily how people communicate, react, and respond. Even in local teams we can see differences but on a smaller scale.
What may be obvious to you, may not be obvious to your teammate.

Thanks.
-----------
[My guide](https://github.com/ahmedeltaweel/work-with-me-guide/blob/main/README.md)
SEO tools to make your site more effective
Tags: seotools, seoservice, searchoptimization
Published: 2020-12-29 19:27:27

If you want to own a website that has visits, sales and reputation make sure it is SEO optimized. This can be helped by various agencies and people who deal with SEO optimization using SEO tools and techniques that will improve the effectiveness of your site.

SEO tools are the center for reporting and delivering important data that indicates the quality of your site and the content that is on it. So never use tools that will do the optimization for you. It is almost certain that complete automation of SEO optimization is impossible without the help of SEO experts. Hence, businesses should get some [SEO services in India](https://marketer/seo-services/) from marketer agency that possesses the knowledge of Search Engine Optimization. 

People are often confused by various SEO tools that promise miracles, but your success still mostly depends on your knowledge, ie the knowledge of SEO experts. When it comes to SEO optimization, the biggest problem is in anticipation. Some people expect nothing, while others expect too much.

##For what it is best to use SEO tools
As I mentioned at the beginning of the text, SEO tools are used for a report that will point out certain problems that need to be corrected on the page. Their advantage is the speed of information that they can gather in a very short time, extract the most important, and make a report that will give you a clear picture of the current state of the page. There are many things you can do as part of SEO optimization, but your time is limited and you need to set priorities to make the site as productive as possible. So, the first thing in SEO optimization is to analyze the current situation and make decisions based on the results. This is exactly the job where SEO tools can help you the most.

##Which SEO tool to use?
Unfortunately for the security of your website we do not have a recommendation for any automated SEO software that you will think will do the job for you, but we do have a tool recommendation based on which you can get a clear picture of the shortcomings of your site.

The Digital Legates website is an ideal example of a quality SEO report on the basis of which you can make a decision on what to do next. Everything you need is in one place. Just enter your domain name and after a thorough audit of your website, they will present the SEO report. The SEO optimization data such as speed, metadata, index files, social media status, internal page performance, and many other things will help you to do SEO optimization as high quality and better as possible.

If you have problems with optimizing your site, feel free to get an [on-page SEO audit](https://marketer.ltd/on-page-seo-services/) from Digital Legates!!!
One Step Make and Change into a Directory
Tags: tips, productivity, bash
Published: 2020-12-29 19:22:12

I've taken a lot of time to personalize [my dotfiles](https://github.com/meaganewaller/dotfiles/). There are a couple of functions I wanted to share.

## Make a Directory and Change Into It

My workflow often looked like this:

```bash
mkdir some-directory
cd some-directory
```

I wanted to put that workflow all into one command.

```bash
function mcd() {
  mkdir -p "$1" && cd "$1";
}
```

Now I can type

```bash
mcd some-directory
```

## Add this function to your set up

To start using the `mcd` function, copy and paste the function above into your `~/.bashrc` file (or `~/.zshrc` file if you're using zsh), and run `source ~/.bashrc` (or `source ~/.zshrc`) to start using it.
Ugly Sweater CSS: That's no moon.
Tags: css, frontend
Published: 2020-12-29 19:06:40

On Christmas Eve the last door of the LEGO Advent Calendar was opened. It's Darth Vader in a Death Star ugly sweater. I'm not coding on Christmas Eve. So this post is coming days later.

The sweater is red with white designs. I used a couple shades of red, white, and cornsilk. The red and white by themselves  was too jarring so I used the few shades.

I've done a few of these now and have a bit of a template. The featured character  goes in the center of the sweater in Character div. The Death Star itself is only 3 divs. 
 
```HTML
       <div class="character">
         <div class="deathStar">       
            <div class="outer_dish"></div>
            <div class="trench"></div>
          </div>            
       </div>
```

The character div is for positioning the featured character in this case the Death Star.  The Death Star is a black square. I applied `border-radius: 50%` to make it a circle. The dashed border gives the edge of the circle an 8-bit look. this works because the border color matches the sweater background color. see the image where the border id green you see the border and looses the effect of 8 bit.
![Death star drawn as black circle on red background.  mid Circle theres' a red line. ](https://dev-to-uploads.s3.amazonaws.com/i/27fxshnnqst3bi7cltsm.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a0znzci2r1kjq0rcyixp.jpg)

```CSS
.character {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    overflow: visible;
}


.deathStar {
    background-color: #000000;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 2px dashed #bb3634;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    flex-direction: column;
}
```

The gun dish is much smaller so I used a dotted border. The trench is a straight line across the center of the div, just like Beggar's canyon back home.

```CSS

.outer_dish {
    background-color: #000000;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    border: 2px dotted #bb3634;
    margin-right: 70px;
    margin-top: -95px; 
}

.trench {
    background-color: #bb3634;
    height: 5px;
    width: 100%;
    position: absolute;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/98ko7r0qbqei29ioyyln.jpg)

That wraps up this short build. Like I said just three divs for the Death Star but some styling makes it a recognizable image.
Die Halbwertszeit von Software
Tags: devops
Published: 2020-12-29 18:57:44

Software hat kein Verfallsdatum? Dem kann ich nicht zustimmen. Software fängt zwar nicht an zu riechen, schlecht wird sie aber dennoch. Dies kann man in vielen Artikel aus der Jahrtausendwende herauslesen. Das Chaos der doppel 0 führte damals zu einer falschen Panik. Aber auch diese sollte uns die Augen geöffnet haben.
Die Probleme alter Softwaresysteme finden sich in zwei Hauptkategorien. Die wesentliche dabei ist die Sicherheit des Systems angreifbar von aussen zu sein. Die zweite wäre der Performancefaktor. Dieser wird oftmals noch mehr vernachlässigt als der erste. Die Gründe liegen klar auf der Hand. Das System läuft seit Jahren. Tut genau was es soll und war damals in der Anschaffung auch noch sehr teuer. Also, zunächst kein Handlungsbedarf. Damit Punkt eins keinen Strich durch die Rechnung macht wird das System kurzerhand nach außen vollkommen abgeschottet. Never change a running System, Punkt. In vielen Hardwarenahen Systemumgebungen in der Industrie ist dieses Vorgehen sogar relativ unkritisch. In der Webwelt eher nicht. In den letzten Jahren sind zahlreiche Cloudplattformen aus dem Boden gestanzt worden. Viele über Jahre zu dem Entwicklt was sie heute anbieten. SaaS oder PaaS für fast jedes Einsatzgebiet. Diese Software muss zwingend auf dem aktuellen Sicherheitsstand sein. Wir verlassen uns auf sichere und hochperformante Services.

Kann man eine Formel erstellen wann Software sein Lebensende erreicht hat? Bislang komme ich nicht zu diesem Punkt. Es fällt schwer klare Aussagen zu treffen. Auf jeden Fall muss jemand unter die Haube schauen und den Motor inspizieren. Dabei fällt dem Programmierer oftmals die “veraltete” Architektur auf die Füsse. Sequentielle Skripte und viel verteilte Businesslogik machen die Analyse sehr teuer und aufwendig. Nun muss die erste Entscheidung getroffen werden. Was ist günstiger, eine Systemanalyse und ein Redesign, Neuaufsetzen der Software. Oder ist das System so komplex das die Logik zu extrahieren zeitlich das Budget schon sprengt und daher Wartung die günstigere Option ist. Nur wer kann jetzt in die Glaskugel schauen und sagen wie lange dauert die Wartung das System sicherer, stabiler und moderner zu machen. Und was genau muss gemacht werden? Hier kommen viele Fragen zusammen. Die Verantwortung der Entscheidung möchte wohl lieber keiner übernehmen. 

...

Geschrieben im Jahr "2015" - wie ist der Stand heute?
Your favourite vscode syntax theme
Tags: syntax, javascript, webdev
Published: 2020-12-29 18:49:53

---
title: Your favourite vscode syntax theme
published: true
description: 
tags: syntax, javascript, webdev
//cover_image: https://direct_url_to_image.jpg
---

Hello guys, 

I'm looking for an alternative syntax theme. My current one is [New Moon Syntax Theme](https://taniarascia.github.io/new-moon/), which I love to use, but feel like giving smth else a shot. 

What would you recommend?
How to use Dynamic Imports in ES2020
Tags: javascript, webdev, es2020
Published: 2020-12-29 18:46:26

---
title: 'How to use Dynamic Imports in ES2020'
published: true
tags:
- javascript
- webdev
- ES2020
cover_image: https://miro.medium.com/max/5120/1*_1yUVJY6cDvLNc0ISUKPbQ.png
---


One of the most exciting new features, for me, in [ES2020](https://www.ecma-international.org/memento/tc39-m.htm) is the ability to dynamically import your files. This means that rather than importing all your potentially necessary files at the top of your file, you can just import files based on need.

## Imports

Import was introduced in **ES2015**, since then we have been able to natively load our modules in our code. We could divide our modules into export classes or functions that organizes our code into manageable sections. However, the JavaScript engine needed to resolve all the imports first before executing the code. 

## Why use dynamic imports?

As developers, we should always be aiming to reduce load times anywhere possible. It may not be necessary, but optimizing code always feels nice. Using dynamic imports, we can avoid importing a large bundle which will let us have blazing fast apps. Dynamic imports also allows us to navigate situations where a module you want to import does not exist when the component is first loaded. This way, you can set logic to load the files with only a few lines of code. 

## How do we use them?

Here is an example with the old system introduced with **ES2015**. Note that without extra bundling tools, we need to set the **type** attribute specifically to **module**:

```

<script type="module">
  import add from './add.js';

  add(7, 4); // returns 11
</script>

```

**ES2020** allows us to use the **import** keyword as a function. There is now also no need to set the type because **import()** will work from a script:

```

<!-- No need to typeset -->
<script>
  import('./add.js')
    .then(module => module.default(3, 7)) //returns 10
    .catch(error => // log error here);
</script>

```

A really common use case scenario is when you may potentially never need to import a module, like when something is loaded dependent on user action. For example, this allows us to be super flexible loading page modules based on button presses:

```

document.getElementById("button")
.addEventListener("click", async () => {
    const { nextPage } = await import("./NextPage.js");
    nextPage();
});

```

Now the user experience is improved with snappier loads with only a few simple refactors. If you want to read more about **ES2020** and **Dynamic Importing**, check out  the MDN [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports).

Originally published at [https://www.josephc.how/dynamic-imports-es2020/](https://www.josephc.how/dynamic-imports-es2020/)
Invitation to Sage-Code
Published: 2020-12-29 18:34:58

#Hello all.

Most computer languages that are free, also have free documentation that should be good enough for anyone to learn the language. But there are universities and teachers who teach these languages for money and I think this is wrong! 

Also there are websites with good content but full of annoying adds. I think documentation for programming languages should be available without any restriction. Programming is difficult to learn anyhow so why extra pain or extra cost? We deserve better!

I'm looking for volunteers to join my community: [Sage-Code](https://sagecode.net) , to help me create such a place where you do not have to register and you can learn without registration for free several programming languages. My content has so far 100 pages and I teach 14 languages: {HTML, CSS, JavaScript, SQL, Dart, Python, Ruby, Julia, Go, PHP, Rust, C, C++, Java, Scala}.

My time is limited so I have covered only the basics. Help is needed for finding typos and errors. In return you can learn from what I wrote. I think this is a good deal. We discuss about improvements on chat. I have set-up a discord server: [Invitation] (https://discord.gg/bC9BvpcDQt) where you can report the errors and ask questions if something is unclear. 

Any comment will help me improve the content. I use to have a lame WordPress website that was awfully slow. Now my website is using Bootstrap and SVG diagrams instead of pictures. This has improved performance dramatically. I'm very happy to say all pages load under 0.8 seconds.

*P.S.* I look forward to meet you on-line if you join us!

Only decent developers are invited. Trolling is not allowed! If you are a troll, stay away. We will kick you out anyhow!
Maven: How to use local lib
Tags: java, beginners, webdev, showdev
Published: 2020-12-29 18:28:30

Sometime ago I saw me before a situation that I've never had passing before. I needed use my local lib on Java maven project.

###To do that I followed the steps:###

Step One: Put in my local library into maven repository

```
mvn install:install-file -Dfile=home/victor/dev/Example.jar -DgroupId=br.com.example -DartifactId=Example -Dversion=1.0.0 -Dpackaging=jar
```

Step Two: Install maven dependencies

```
mvn clean install
```

Step Three: Use the library in the project

Add the pendency in the pom.xml file like that:

```xml
<dependencies>
  ...
  <dependency>
    <groupId>br.com.example</groupId>
    <artifactId>Example</artifactId>
    <version>1.0.0</version>
  </dependency>
  ...
</dependencies>
```

That's it!

I hope this helps you.
Fix for Erlang installation with asdf on macOS 11 Big Sur
Tags: elixir, erlang
Published: 2020-12-29 13:32:17

## Issue
There is an open issue with installing Erlang on macOS 11 Big Sur - https://github.com/erlang/otp/pull/2865

I use **asdf** (https://asdf-vm.com/#/) to manage versions of my local Elixir and Erlang applications. Recently I noticed that when I want to install (using asdf install ) Erlang version specified in .tool-versions file I see that error:

```
You are natively building Erlang/OTP for a later version of MacOSX
  than current version (11.1). You either need to
  cross-build Erlang/OTP, or set the environment variable
  MACOSX_DEPLOYMENT_TARGET to 11.1 (or a lower version).
```

## Solution
I manage to overcome this. My strategy was to install desired Erlang version with another tool to build and manage Erlang instances - **kerl** (https://github.com/kerl/kerl) - and inject that installation to asdf.

Steps to solve the issue:

1. Install Kerl (I assume you use Homebrew).
`$ brew install kerl`

2. Set configuration options for Kerl.
`$ export KERL_CONFIGURE_OPTIONS="--disable-debug --without-javac"`

3. Try to build your version of Erlang (it will fail!). In that example I'm installing version 21.3.8. If you want another version, just replace `21.3.8` to a version you want in all following commands.
`$ kerl build 21.3.8 21.3.8`

4. Open OTP configuration file (I assume you use VSCode - that's why you can see `code`. Replace with your editor.)
`$ code ~/.kerl/builds/21.3.8/otp_src_21.3.8/configure.in`

5. Find that line 
`#if __ENVIRONMENT_MAC_OS_X_VERSION_MIN_REQUIRED__ > $int_macosx_version`
and replace it with that line: 
`#if __ENVIRONMENT_MAC_OS_X_VERSION_MIN_REQUIRED__ > $int_macosx_version && false`

6. Try to build it again. Now it should work. Will take some time so be patient!
`$ kerl build 21.3.8 21.3.8`

7. Make a directory for a new version of Erlang in your asdf directory.
`$ mkdir ~/.asdf/installs/erlang/21.3.8`

8. Install (copy) Erlang installed via kerl to asdf.
`$ kerl install 21.3.8 ~/.asdf/installs/erlang/21.3.8`

9. Close your console and open again (or open new window) and go to you project. Run asdf install to ensure you have your Elixir and Erlang versions installed.
`$ asdf install`

10. Compile your Elixir app.
`$ mix compile`

And that's it!

If you have any comments or questions, find my on Twitter: https://twitter.com/k_kempinski
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-12-29 18:25:28

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

### End of Year Inspiration

@firangizg shares a collection of entertaining, inspirational, and motivational developer portfolios for you to peruse. 

{% link https://dev.to/firangizg/developer-portfolios-as-inspiration-4p29 %}

### Don't Repeat Yourself

@anuradha9712 shares a quick overview of web components and shows us how to create custom HTML elements with the Shadow Dom.

{% link https://dev.to/anuradha9712/create-reusable-web-components-in-html-1llc %}

### Listen to the Console

@guivr expands on a proof of concept and built a browser extension that displays logs, warnings, errors, SEO issues, and network requests in a toast notification format.

{% link https://dev.to/guivr/toast-log-a-browser-extension-to-see-js-errors-right-on-your-page-without-opening-the-console-2p4j %}

### Don't Hold Back

@victoria explains the benefits of building in the open and how small, constant, incremental changes can be more valuable than big changes. 

{% link https://dev.to/victoria/be-brave-and-build-in-public-5afg %}

### Most Loved Programming Language

@somedood reflects on their golden moments and pain points with Rust from the past year. 

{% link https://dev.to/somedood/rust-reviewed-is-the-hype-justified-1pa1 %}

### Syntax Sugar 🍯

@lukeshiru first explains how classes work, and the proceeds to explain why we don't need them.

{% link https://dev.to/lukeshiru/you-don-t-need-classes-jk4 %}

### No Tracing

@bias shares two approaches to collecting analytics information. 

{% link https://dev.to/bias/how-i-removed-google-analytics-and-still-have-good-data-to-analyze-1c50 %}

_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!_
JavaScript Promises
Tags: javascript
Published: 2020-12-29 18:20:32

It's a quick guide to write a function that returns promise and how to consume it.

1. How to write a function that returns promise.

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

Now there are two ways to consume the returned promise.
  A. using then-catch
  B. using async-await


A. using then-catch

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

B. using async-await

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