teleren/devto huggingface dataset:
arti Ukuran Fit
Tags: tutorial, webdev, tokoonline, allsize
Published: 2021-01-16 15:03:39

Semua ukuran dapat didefinisikan sebagai ukuran standar produk pakaian yang dibuat di wilayah khusus Asia (Cina, Korea dan Jepang), jenis ukuran ini beradaptasi di Indonesia. Kata semua ukuran umumnya digunakan oleh pedagang untuk menjawab pertanyaan dari pembeli tentang ukuran suatu produk. Periksa ...

 Misalnya, ada ukuran M dan L, kemudian, antara dua ukuran, ada ukuran yang biasa disebut ukuran penuh. M adalah singkatan dari medium (ukuran sedang), sedangkan L berarti besar (ukuran baju yang cukup besar).


Bahasa lain dari ukuran semua ukuran sesuai dengan L atau M cocok a L. Jika disesuaikan dengan L berarti ada 2 kemungkinan:

    Pertama, kemeja tersedia dalam ukuran XS, S, M, L.
    Pakaian dirancang dalam ukuran (tidak ada ukuran, M, L, tetapi baik xs xs sampai Anda dapat menggunakannya dengan baik).

Seperti kebanyakan badan jantung tengah Asia, ukuran rata-rata adalah antara ukuran M dan L, kemungkinan akan cocok dengan ukuran kecil M atau L. Ada kalanya ukuran semuanya dapat melebihi ukuran L dan Mungkin kurang dari ukuran M. menunjukkan bahwa ukuran ukuran semuanya adalah ukuran yang tentu saja tidak panjang dan lebarnya.


Meskipun istilah ini lebih sering digunakan untuk mendeklarasikan ukuran rata-rata antara L saya, tetapi pada kenyataannya, ukuran ukuran ukuran juga dapat digunakan untuk menyebutkan ukuran rata-rata antara S dan M, L dan XL dan XXL.


Mudah-mudahan, komentar tentang ukuran kemeja dapat membantu Anda memilih pakaian yang sesuai dengan kebutuhan.

Jadi lebih baik, ketika membeli, kita harus memperhatikan informasi gambar apa pun. Termasuk panjang, lebar, lingkar toraks, pinggang, pinggul, material dan hal-hal penting lainnya saat mengukur pakaian. Untuk standar untuk wanita, tanyakan adalah panjangnya, keliling lebar / dada jika tidak ada informasi.

Nah, jika seseorang menyebutkan ukuran setiap ukuran, jika rasanya dalam tubuh, lebih baik menyimpannya. Biasanya, ukuran ukuran ini akan sangat tepat atau bahkan kecil untuk tubuh mengandung. Cukup temukan pakaian pembelian asuransi yang telah diberi ukuran ukuran, misalnya, pas L atau XL.

Terkadang, ukuran S, M, L dan XL berbeda di setiap pabrik. Jangan salahkan penjual jika itu berbeda hehe ... Pabrik melakukannya? Itu tidak mungkin oleh penjual untuk memperbaikinya atau memperbaikinya. Kecuali penjual pada saat yang sama produsen :)

Bukankah itu hal yang baik jika kita tahu ukuran tubuh kita, ya? Jadi jangan malas untuk mengukur ukuran tubuh kita, ya, cewek ... Anda akan sangat beruntung jika Anda sudah mengerti dan tahu manfaatnya ^^

Sumber: https://kamplongan.blogspot.com.
Add Water Surface Simulation to your Web Page in 90 lines of Javascript or less
Tags: gamedev, javascript, webdev, tutorial
Published: 2021-01-16 15:01:20

Using a Distributed Object Framework, you can build a WebGL element by simply assembling from a repository of reusable software objects.  Once published, this object becomes available at a URL that can be placed on your web page overlaying other elements.

(1) Raging River with Wave Shaping
{% youtube AFquo2gs6q8 %}

(2) Under River Nile
{% youtube df2sxHMtQfw %}

(3) Underwater Godray Effect
{% youtube MNQpFU1eiFg %}


Investigate how these objects are put together here:
(1) https://www.otakhi.com/petridish?load=15193
(2) https://www.otakhi.com/petridish?load=15209
(3) https://www.otakhi.com/petridish?load=15218

[Learn about AtomDrive Here.](https://www.otakhi.com/atomdrive)
My First Virtual Hackathon | Major League Hacking 2021
Tags: mlh, majorleaguehacking, localhackday
Published: 2021-01-16 14:34:31

As we know Computer Science students, IT students and working professionals are so excited about attending hackathons; I am sharing my first hackathon experience and that too virtual. So I attended the Local Hack Day : Build Hackathon hosted and powered by Major League Hacking (MLH). The opening ceremony was hosted by two amazing hosts who are organizers of most of the Hosted by MLH events. About 5000–10000 hackers from around the world participated in the Build hackathon.


What is Local Hack Day 2021 ?

So, this how it works — so after registering for the contest one has to join the Major League Hacking’s discord server where you will find many guilds and I would definitely suggest you to join our guild at EquiCode as we are one of the top in the leaderboard holding the 3rd spot .
So, after you join a guild ,you will find a lot of enthusiasts like you, who want to learn and grow.
And to earn points you and your teammates will have to register and check in daily for very simple tasks where you will learn a lot from the people at MLH and submit some forms showing that you have completed the challenge and you will earn points for yourself as well as you guild, as simple as that !
So, at the end of the day you can see both the team and individual leaderboard and thus work with you guild mates to climb to the top by earning more points .

My Experience :

I participated in almost all technical and no-technical or fun events. I was part of the EquiCode guild.
I have come to know and connect with some awesome people in just this span of 2–3 days of chatting around on the discord channels and especially today was great, as we hopped on a video call to complete a challenge named “Share the Meal”, which turned out to be pretty awesome as we discovered the pretty faces behind the discord usernames and at last our screenshots of the call ended up in the MLH’s Instagram stories .

And also here’s what I build in Cup Stacking challenge. Although I didn’t have so many cups to stack but I had books.

So, it’s going pretty great and I and my team will make sure of the fact that EquiCode wins the Local Hack Day 2021 and if not it, tries it’s best .
How did I improve angular app performance drastically?
Tags: angular, javascript, react, webdev
Published: 2021-01-16 14:23:30

Initially, I checked my app first meaningful paint time, it was showing 17secs and performance rating was 20 per cent. Finally, I was able to reduce to 5secs meaningful paint time and 70 performance rating using the below methods.


####1. Reusable Components

First, figure out where there is a possibility to reuse components. It helps you to reduce app size.

####2. Lazy Loading

Lazy loading helps you to load certain modules only when needed rather than loading all things at a time.

https://angular.io/guide/lazy-loading-ngmodules

####3. Caching with Service Worker

Angular pwa help you cache assets and apis too. I used service worker to cache assets and some apis which are not gonna change frequently. You have even an option to give expire time for cache.

####4. Lazy load scripts

You can load some external js scripts dynamically rather than loading all at the initial time.

https://thecodeframework.com/angular-how-to-lazy-load-external-scripts/

Try to use async and defer depends upon the scripts which you imported, it helps you to load scripts asynchronously with page parsing and after page parsing.

https://javascript.info/script-async-defer

####5. Import what you need

When we import ui libraries, we import all components rather than importing what are we using.

Let me explain in detail, rather than importing whole library css 
```
import 'antd/dist/antd.css'; 
```
you can import what all needed
```
import 'antd/lib/notification/style/css';
import 'antd/lib/modal/style/css';
import 'antd/lib/spin/style/css';
import 'antd/lib/select/style/css';

```

####6. Image Thumbnails

In some cases, we don't have to show high-resolution pic. Even if we see flipkart and amazon products list there you don't have to show high-resolution pic. Figure out where all you can just show a thumbnail.


####7. Lazy Load Images

Rather than loading all images when page loads you can lazy load images means when user gonna interact ui then only we load the image. Suppose if you have multiple sections with images rather than loading all sections images at a time you can load images when user gonna interact.


####8. Shared Modules

Creating shared modules allows you to organize and streamline your code. You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your app

https://angular.io/guide/sharing-ngmodules
Day 16 Challenge
Tags: challenge, webdev, javascript, 365daysofcoding
Published: 2021-01-16 13:59:44

Day 16! This one is going to be a bit different I hope you enjoy it! Create a function that exemplifies the JS event loop. Show how you may not get what you expected because of the loop or specific ways you may have to organize your code/calls to get what you want because of the event loop.
My Local Hack Day 2021 Experience | Major Hacking League | Guild: Inaxia
Tags: majorleaguehacking, localhackday, mlh
Published: 2021-01-16 13:55:48

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

It’s a great experience with all the tech enthusiasts, we come together every day and divide some amazing tasks among us and try to finish all of them with our full energy.

I am having a lot of fun attending the live stream with Ryan, Mary, Sashrika, Mara, and some cool people of MLH. I really like how they guide us in every challenge they give as well as entertain us throughout the week of LHD.

Every day I get to know some new skills and technologies and it really helps me build my profile.

This is the first time Inaxia is participating in Local Hack Day and I really love the atmosphere of this community. Really love to work with this amazing team. Not only that, we became good friends in less than a week. We share our stories along with our meals. I was an introvert before this hackathon, but now I think I can talk to different people around the world.

Our guild is in 13th position today:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lya6ktu0ycifwju8rid3.png)

All thanks to Inaxia Community and Local Hack Day for organizing such an amazing event where people connect with each other and become part of a family.

Honestly, I love our Inaxia community a lot and would love to be a part of it for years to come and make it big and impactful.

At last, I hope we can make Inaxia to top 10 this as the top teams are way ahead of us. No issues as this was our first time, but next year we will come with more energy and try to get every single point for our Guild as well as for ourselves.

Thank You Major League Hacking for organizing Local Hack Day
Conceito simples de redes de computadores e sua empregabilidade
Tags: braziliandevs, beginners, computerscience, learning
Published: 2021-01-16 13:54:08

Olá pessoal, aqui é o Alex. Hoje vou compartilhar com vocês um conceito simples de redes de computadores e a sua empregabilidade. 

Primeiramente, a definição encontrada no livro de Tanenbaum, Redes de Computadores: "um grande número de computadores separados, porém interconectados". 

Mas, vasculhando a Internet encontrei um conceito dizendo que redes de computadores são estruturas físicas (equipamentos, porque hoje em dias não são apenas computadores que estão conectados à Internet, mas também celulares, geladeiras, câmeras, quadros fotográficos e outros equipamentos) e lógicas como programas e protocolos, que permitem que dois ou mais equipamentos possam compartilhar suas informações entre si, utilizando um sistema de comunicação.

Mas esses dias (para ser sincero hoje 😆) encontrei uma definição mais simples, que determina Redes de Computadores como  dois ou mais computadores (equipamentos) conectados um ao outro por um meio de transmissão, com o objetivo de aumentar a eficiência e facilitar o compartilhamento de informações, ou seja, dados.

## Empregabilidade deste recurso

A empregabilidade dos sistemas de comunicação são: o compartilhamento de recurso (impressora, documentos, etc), a comunicação entre as pessoas (e-mail, chat, etc), entretenimento interativo (jogos, livres, etc) e comércio eletrônico (e-shop, e-banking, leilões, etc).

Valeu pessoal, essas foram as digas, abraço 🤗 

### Referências

TANENBAUM, Andrew S.; J. Wetherall, David: **Redes de computadores**. 5º edição.  São Paulo : Pearson Prentice Hall, 2011.

CONCURSERIA. **Redes de Computadores**. Disponível em:http:https://concurseria.com.br/wp-content/uploads/2017/12/Redes-de-Computadores-Material-Complementar-ok.pdf. Acesso em: 16 de jan. 2021.
Angular Dart Router - Configure LocationStrategy
Tags: dart, angular, webdev
Published: 2021-01-16 13:41:48

In this article, I will explain how to correctly configure the router for development and production environment.

If you come from Angular Dart [Tour of Heroes](https://angulardart.dev/tutorial) tutorial, you might have already configured your project to use `package:angular_router` and would like to remove the ugly `#` from your app URL. To do that you need to correctly configure the LocationStrategy you use.

Most of the time people try to use the default strategy, `PathLocationStrategy` which does not fit all environments, for example during development when running with `webdev serve` and try to refresh a page of your app, you will get **404 Not Found**, because `webdev` does not support this `LocationStrategy`

## What is LocationStrategy
The LocationStrategy is responsible for representing the `RouterState` as an url.

- `HashLocationStrategy`
The router will produce url with `#` at the beginning (ex: `example.com#/foo`).

- `PathLocationStrategy`
The router will produce cleaner urls, without the `#`. (ex: `example.com/foo`)

### Which one should I use?
You probably want to use `PathLocationStrategy` in production to have a clean url in your app, but to do that you will also need to setup your webserver to redirect every **404** response to your **index.html**.

However during development, you can't configure `webdev serve` to do the redirection, you need to use `HashLocationStrategy`.

More about [SPA Routing](https://kevinwkds.medium.com/spa-routing-background-8499949be087)

## Router injection
You can conditionally inject a strategy or the other, using an environment variable that can be set in your `build.yaml`.

Your **main.dart**
```dart
import 'package:angular/angular.dart';
import 'package:angular_router/angular_router.dart';
import 'app_component.template.dart' as ng;
import 'main.template.dart' as ng;

// default is false
const isProd = bool.fromEnvironment('prod');

@GenerateInjector([routerHashModule])
final devInjector = ng.devInjector$Injector;

@GenerateInjector([routerModule])
final prodInjector = ng.prodInjector$Injector;

void main() {
  runApp(
    ng.AppComponentNgFactory,
    createInjector: isProd ? prodInjector : devInjector,
  );
}
```

And your **build.yaml**
```yaml
global_options:
  build_web_compilers|ddc:
    options:
      environment:
        prod: false
  build_web_compilers|entrypoint:
    release_options:
      # https://dart.dev/tools/dart2js
      dart2js_args:
        - -Dprod=true
        - -O4

```

That's it, if you run `webdev serve` during development, it will run **Dart Dev Compiler** with `prod: false` and when building your app for production with `webdev build` it will use **dart2js** compiler with `prod: true`.

--------

You can find a working github repo [here](https://github.com/lejard-h/example_angular_location_strategy) :)
Visual Studio Code shortcuts
Tags: vscode, frontend
Published: 2021-01-16 13:35:12

Some useful shortcuts I use in Visual Studio Code:

| Command             | Description                                                      |
|:--------------------|:-----------------------------------------------------------------|
|  (find) `\n([\w])` -> (replace with) ` $1` | remove all blank lines and replace them with space (using RegEx) |
| `cmd` + `b`             | toggle sidebar                                                   |
| `cmd` + `shitf` + `v`    | preview markdown                                                 |
| `opt` + `up/down`     | move row up/down                                                 |
| `opt` + `z`           | toggle text wrap                                                 |
| `ctrl` + `w`             | switch workspace                                                 |
| `cmd` + `f` -> focus away -> `cmd` + `g`             | find occurence, focus away, go to the next occurence             |
| search a word, then `↑`     | it will return the previous search keyword |
Build a bulk email and sms app with Vue and AWS SES, AWS SNS OR Twilio Part 1
Tags: webdev, aws, twilio, tutorial
Published: 2021-01-16 13:24:45

Hey! if you working on a bulk email and SMS application and you have Vue as your main frontend framework, today's tutorial will come in handy. This tutorial will be in three parts. We build a sample application, integrate with AWS Simple Email Service and last part integrate with Twilio.

 ## Table Of Contents
        * [Build Sample Bulk Application](https://dev.to/kevin_odongo35/build-a-bulk-email-and-sms-app-with-vue-and-aws-ses-aws-sns-or-twilio-part-1-33jp)
        * [Intergrate with AWS SES](https://dev.to/kevin_odongo35/build-a-bulk-email-and-sms-app-with-vue-and-aws-ses-aws-sns-or-twilio-part-2-2jo0)
        * [Intergrate with Twilio](https://dev.to/kevin_odongo35/build-a-bulk-email-and-sms-app-with-vue-and-aws-ses-aws-sns-or-twilio-part-3-1l3)

#Building Application

In this part, we are going to build our sample application using Vue and Tailwind.

```
// create your application
vue create bulk-email-sms-app
// we will manually select Vuex, Unit Testing, and Router
// Once done we will add tailwind
vue add tailwind
```

In case you want to use a different CSS framework I have an article about adding different CSS frameworks to the Vue project [https://dev.to/kevin_odongo35/how-to-add-tailwind-css-bootstrap-vuetify-or-bulma-to-a-vue-project-3on2](https://dev.to/kevin_odongo35/how-to-add-tailwind-css-bootstrap-vuetify-or-bulma-to-a-vue-project-3on2)

Let's create an application as shown in the video and image below. We will have a section we can list all our campaigns, create, edit, and delete a campaign.

![Alt text of image](https://res.cloudinary.com/dk5ch7wqm/image/upload/v1610727249/screencapture-localhost-8080-2021-01-15-15_21_09_byq1w8.png)

{% youtube STKUQvckBqk %}

I have added jest testing in the application. Once you Folk or download from Github run the following command

```
yarn install
yarn jest
```

Here are the Github links for each application:

####AWS SES

[https://github.com/kevinodongo/bulk-email-ses-app.git](https://github.com/kevinodongo/bulk-email-ses-app.git)

####Twilio

[https://github.com/kevinodongo/bulk-email-twilio-app.git](https://github.com/kevinodongo/bulk-email-twilio-app.git)

In our next article will handle integrating with AWS Simple Email Service and Twilio.
Daily Developer Jokes - Saturday, Jan 16, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-01-16 13:00:19

---
title: "Daily Developer Jokes - Saturday, Jan 16, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Jan%2016%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12591e45d64.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why didn't the `<div />` get invited to the dinner party?

___A:___ Because it had no class!
 -->
Have you ever managed a team?
Tags: watercooler, business, management
Published: 2021-01-16 12:56:07

---
title: Have you ever managed a team?
published: true
description: 
tags: watercooler, business, management
cover_image: https://cdn.uconnectlabs.com/wp-content/uploads/sites/34/2020/03/GEN-Business-Management-Teams-Teamwork-1290x860-1.jpg
---
Great team management is one of the main cornerstones of any successful business. Without it, it can be difficult to rally your employees to work toward common goals and perform at their best.

Have you ever been in charge of managing a team?

If so, what are some notable lessons you have learned from your personal experience? What are some of the most important skills to have?
Have you ever re-branded an already launched project?
Tags: watercooler, career, business
Published: 2021-01-16 12:42:36

---
title: Have you ever re-branded an already launched project?
published: true
description: 
tags: watercooler, career, business
cover_image: https://www.intheblack.com/-/media/intheblack/allimages/magazine-2017/11-november/rebrand-trucks-diggers.jpg?rev=62f4b95cf59740b5bee7e255cd668b20
---
Have you ever decided to change the name of the project, change a domain for it, or done other stuff to re-brand an already launched app/project?

If so, what did you learn from the process and how did it affect your traffic?
How to create a useKonamiCode React hook 🎮
Tags: javascript, react
Published: 2021-01-15 19:26:25

This hook makes it easy to fire off a function when the visitor enters the Konami Code on their keyboard (**↑ ↑ ↓ ↓ ← → ← → B A**). Every web app needs a cheat code right? Read through the code comments below to see how it works. Want to try it out? I'm using this hook in production on [divjoy.com](https://divjoy.com). Head over there, enter the code, and something amazing will happen. You won't regret it 😻

```jsx
import React, { useState, useEffect } from 'react';

// Usage
function App(){
  // Call hook with function to fire off  
  // after konami code is entered.
  useKonamiCode(() => {
    alert('Good job 🥳');
  });
  
  // Render whatever you like
  return (
    <div>
      Can you find the easter egg?
    </div>
  );
}

function useKonamiCode(handler) {
  // State to hold array of recently pressed keys
  const [keys, setKeys] = useState([]);

  // Convert stored keys to string and match against konami code string
  const isKonamiCode = keys.join(' ') === 'up up down down left right left right B A';

  useEffect(() => {
    let timeout;

    // When a key is pressed
    window.document.onkeydown = (e) => {
      // Update array of keys in state with new key
      setKeys((currentKeys) => [...currentKeys, getKeyName(e.keyCode)]);
      
      // Clear 5s timeout since key was just pressed
      clearTimeout(timeout);

      // Reset keys if 5s passes so user can try again
      timeout = setTimeout(() => setKeys([]), 5000);
    };
  }, []);

  // Once konami code is entered call handler function
  // and reset keys so user can do it again.
  useEffect(() => {
    if (isKonamiCode) {
      handler();
      setKeys([]);
    }
  }, [isKonamiCode, handler]);

  return isKonamiCode;
}

const getKeyName = (keyCode) => {
  return {
    37: 'left',
    38: 'up',
    39: 'right',
    40: 'down',
    65: 'A',
    66: 'B',
  }[keyCode];
};
```
Now you've got nothing stopping you from adding the Konami Code to your React app. If you do, be sure to share a link in the comments ⤵️