teleren/devto huggingface dataset:
All about Web Components
Tags: monoliths, microservices, server, docker
Published: 2021-05-05 01:16:35

Lets talk a little bit about web components. 

![alt text](https://jonathanmh.com/wp-content/uploads/2019/05/web-components-101.png)

###What are they?

Simply put, A web component is a collection of api's that allow you developers to display information on a website.

I like to think of them as *reusable* puzzle pieces that can be slotted into different areas when needed. This helps for code reuse on a massive scale. In many ways its similar to classes in object oriented programing. 

Web components extend HTML and means that we can create our own tags.

Web components due to their nature provide a focus on compatibility and *accessibility* which are two key components when designing any website. They can allow for quick and easy changes to the entire site making the website easier to access for those with disabilities.

###How do they work? 

If the element is open source its possible to build upon what already exist rather than start from scratch , this is what makes them so reusable but of course this is an option as well.
Web components are built on top of frameworks can increase accessibility by adapting a standard and that don't changing as often as the frameworks themselves. This allows them to be more reliable and *future proof*. There are four main standards for web components they include Custom Elements, HTML Templates, ES Modules, and Shadow DOM.

###Are there any examples I can learn from?

There are many websites that you may visit daily that utilize web components these sites include. The sites that I have chosen to investigate YouTube, Microsoft product website, and Amazon ! 

![alt text](https://www.cnet.com/a/img/a0FFE0VNinTZqaHael9X2b5czFc=/1200x675/2020/01/01/301595b2-19b5-4399-94a2-718b3e3ed15c/youtube-logo-laptop-4692.jpg)

Check out my video below going more into depth on how these popular web site use web components. 

https://youtu.be/mRIrQ4vp7sc

You can learn more about web components here : https://developer.mozilla.org/en-US/docs/Web/Web_Components
Docker: Monolithic vs. Microservice Server Architecture
Published: 2021-05-05 01:15:24

Today we'll be diving into docker and what Monoliths and microservices are. I've never heard of such words before so if you're the same, let's take a dive together.

As far as researched, a **Monolith** is composed in a singular piece; everything is connected, and it's like a tool/one controller such as hammer.

**Microservices**, meanwhile, are moving all the services out of the one body into their own processes; it's like separating the full stack and making smaller areas of work; specialization.

Now let's discuss Docker. What is it? Docker let's you create container environments and instances over a operating system. It's much like VMware but much more lightweight!
Containers allow developing in more isolated environments in order to not affect other services or applications. It also allows for the storage of dependencies giving quick setup and testing.

An example of containers could be a scratch pad coming with all the necessary tools for each page allowing a developer to test and sample changes. Before with monolithic architecture, someone verifying changes would be necessary for something as simple as adding a single user. Imagine whole teams changing a whole system and having to go through that. Yeah, it wasted a lot of time. Now with microservices, processes for devops are a lot easier and smoother. It's much like sending a package from one side of the world to the other (assuming the postal system was equally reliable).

Microservices allowed for more reliable transferring between and across platforms without executables breaking.

To put it basically, much like web components, containers and microservices are like taking a large of list of items on a "To-Do" paper and breaking it up into smaller parts, doing each task separately. This might not be the most accurate way of thought but it's the beginning of such things like compartmentalizing and breaking a large monolithic creation into smaller more manageable pieces of work for a team. 

The concept itself seems hard to grasp so I may have rambled, but ramble on!

Video on This: https://youtu.be/yzqyTWlmkIE
4 วิธีอัพเลเวลความเป็น Developer Part 1/2
Published: 2021-05-05 00:01:24

เส้นแบ่งระดับของการเป็น Developer นั้นไม่ชัดเจน ถ้าหากถาม Senior , ผู้จัดการ , อะไรคือความแตกต่างในแต่ละระดับ Junior , mid-level , senior แต่ละคนก็อาจจะให้คำตอบแต่ละอย่างกัน

เนื่องจากความกว้างเกินไปของคำตอบ ดังนั้นไม่มีประโยชน์กับการมานั่งหาคำตอบ ว่าจะเป็น Senior ได้ยังไง 

ดังนั้น แทนที่จะมาสนใจสิ่งเหล่านั้น มาให้ความสำคัญกับการพัฒนาสิ่งเหล่านี้ เพื่ออัพเลเวลกันดีกว่า

# 1. สร้างโปรเจคที่เป็นประโยชน์จับต้องได้

เครื่องคิดเลขจาก ReactJs , ฟังดูดีใช่ไหม แต่มันไม่เป็นประโยชน์ หรือ Todo list ก็ไม่ต่างกันเท่าไหร่ อาจจะฟังดูสนุก แต่เอาเข้าจริงๆ โปรเจคพวกนี้ไม่ได้มีประโยชน์ หลายคนทำตามบทฝึกต่างๆ แต่เราจะต้องโฟกัสที่เรื่องอื่นๆ

ให้แตกต่างไปจากมุมมองเดิมๆ , วิธีการใช้งานแบบเดิมๆ หรือบางส่วนจากฟังก์ชั่นที่จะสะท้อนความคิดสร้างสรรค์ของโปรแกรมเมอร์

ตัวอย่างโปรเจคที่เป็นประโยชน์

- แอปหาคู่ให้น้องหมา
- โซเชียลมีเดียสำหรับคนเล่นโปเกม่อน
- โครงสร้างโปรเจค Backend หรือ Frontend ที่อาจไม่ต้องเสร็จสมบูรณ์ ที่ช่วยให้คนอื่น เข้าใจการสร้างโปรเจค

นี้เป็นตัวอย่างเล็กๆน้อยๆ แต่ประเด็น คือไม่ว่าจะสร้างโปรเจคขนาดใหญ่ที่คุณกำลังสนใจ หรือสร้างอะไรบางอย่างที่ใช้สุดขอบความเข้าใจในสิ่งที่คุณสนใจ แต่ไม่ว่าอย่างไรสิ่งที่คุณกำลังจะทำคือสิ่งที่ช่วย อัพเลเวล เพราะคุณได้เชื่อมความเข้าใจต่างๆเข้าด้วยกัน

## 2. มีส่วนร่วมกับโปรเจคสารธณะประโยชน์

อาจจะหมายถึง การที่คุณสร้างโปรเจคด้วยตัวคุณเองหรือมีส่วนช่วยในการพัฒนาโปรเจคที่มีอยู่ก่อนแล้ว

## สร้างแพคเกจ

ถ้าหากต้องการสร้างแพคเกจเป็นของตัวเองต้องมั่นใจว่าแพคเกจนั้นไม่ได้เอามาจากแบบฝึกที่ไหนและเป็นสิ่งที่คุณต้องการให้คนอื่นได้ใช้งานจริงๆ

### บันทึกขั้นตอนการทำงาน

ของแถมเพิ่มเติมถ้าเกิดว่าคุณต้องการที่จะเขียนบล๊อกหรือทำวีดีโอเกี่ยวกับว่าคุณทำมันเพื่ออะไรและทำมันได้อย่างไร ผ่านขั้นตอนต่างๆที่คุณทำ สิ่งเหล่านี้ไม่เพียงช่วยให้คุณต้องคิดวิธีการเล่าเรื่องแต่จะเป็นสิ่งบันทึกความสามารถของคุณได้อีกต่างหาก เพื่อไว้ว่าจะมีใครอีกหลายคนที่ต้องการเรียนรู้ในสิ่งที่คุณรู้

## จากโปรเจคคนอื่น

คุณอาจจะชอบ node , PHP , Python , Java หรือปลั๊กอินจาก Github นี้จะเป็นโอกาสดีที่จะได้เจอ issue บางอย่างบน Github

ลองดูใน repository contributors guidelines ซึ่งปรกติมักจะในโฟลเดอร์ root ของโปรเจค เริ่มทำความเข้าใจต่อโปรเจค และเริ่มแก้ issue ให้ดีขึ้น และอาจจะเพิ่มฟังก์ชั่นบางอย่างเข้าไปที่คิดว่าเป็นประโยชน์

### สิ่งที่เราทำไปนั้นมีวัตถุประสงค์

- เป็นหลักฐานได้ว่าเราสามารถเข้าใจ coding guidelines ( เป็นสิ่งที่ดีสำหรับการทำงาน )
- เป็นหลักฐานได้ว่าคุณได้เป็นส่วนหนึ่งของสังคม Open source และชื่อของคุณจะกลายมาเป็นส่วนหนึ่งของ  contributor บน Github
- คุณจะได้เรียนเกี่ยวกับเรื่อง Forking , Pull request , commits และอื่นๆที่เกี่ยวข้อง
- คุณได้เห็นว่าการซ่อมบำรุงโปรเจคจากชุมชนเป็นอย่างไรและเอามาปรับใช้ในการฝึกโปรแกรม
How we can fetch api using requests in python
Tags: python, requests, tutorial, learn
Published: 2021-05-05 00:01:13

#Introduction

An API, or Application Programming Interface, is a server that you can use to retrieve and send data to using code. APIs are most commonly used to retrieve data, and that will be the focus of this beginner tutorial.


##starting by prepare venv:
in the terminal
```python
python3 -m venv venv
source venv/bin/activate
```

##then we need to install requests
in the terminal
```python
pip3 install requests
```

#Make our first request
after creating app.py file
```python
import requests
url ='https://animechan.vercel.app/api/random'
response = requests.get(url=url)
print(response.status_code)   # must be 200
```

* 200: Everything went okay, and the result has been returned (if any).
* 301: The server is redirecting you to a different endpoint. This can happen when a company switches domain names, or an endpoint name is changed.
* 400: The server thinks you made a bad request. This can happen when you don’t send along the right data, among other things.
* 401: The server thinks you’re not authenticated. Many APIs require login credentials, so this happens when you don’t send the right credentials to access an API.
* 403: The resource you’re trying to access is forbidden: you don’t have the right permissions to see it.
* 404: The resource you tried to access wasn’t found on the server.
* 503: The server is not ready to handle the request.

after we get checked our request we can start getting response results

```python
import json.py
...
with open('response.json','w') as f :
    if (response.status_code == 200):
        json.dump(response.json(),f)
```
resources:
https://www.dataquest.io/blog/python-api-tutorial/

used api :
https://animechan.vercel.app/
How to set the HTML lang attribute in Next.js?
Tags: nextjs
Published: 2021-05-05 00:00:00

---
  title: How to set the HTML lang attribute in Next.js?
  published: true
  tags: Nextjs
  date: Wed May 05 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/set-html-lang-attribute-in-nextjs
  cover_image: https://melvingeorge.me/_next/static/images/main-8903ddecf4726a07a59351662b5ebe21.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/set-html-lang-attribute-in-nextjs)
  
To set or add the `lang` attribute to the `html` tag in Next.js, you can add the `i18n` object to the `next.config.js` file (or Next.js config file).

It can be done like this,

```js
/* next.config.js  */
module.exports = {
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
};
```

- the `locales` property in the object should have an array of `locales` values that you want to support in the application. This is a required property.
- the `defaultLocale` property defines the default locale to be used on routing. This is a required property.

This will set the `lang` attribute to `en` in the root `html` tag.

It will look like this,

```html
<html lang="en">
  <!-- Content -->
</html>
```

To see all the possible `locales` you can use, see the [ISO 639-1 Language Codes](https://www.w3schools.com/tags/ref_language_codes.asp).

See the above code live in [codesandbox](https://codesandbox.io/s/setting-html-lang-attribute-in-nextjs-rw1zx?file=/next.config.js).

### NOTE: This will work on the Next.js versions 10.0.0 and up.

That's all! 😃

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

---
The Mikado Method
Tags: productivity, practices
Published: 2021-05-09 08:57:31

---
title: The Mikado Method
published: true
date: 2021-05-05 00:00:00 UTC
tags: productivity,practices
canonical_url: https://jhall.io/archive/2021/05/05/the-mikado-method/
---

I’ve been refactoring on some very brittle, poorly-written code lately. One method I like to use in a situation like this is the “Mikado Method”, as described in [the book by the same name](https://amzn.to/3xNk51K).

But the gist of it is that it’s a system of quick, iterative experimentation for rapid, but safe changes to code.

1. **Set a goal** (e.g. add a new feature to the web service)
2. **Experiment** and break things (e.g. try the first thing that comes to mind to move toward your goal)
3. **Visualise** (e.g. write down the things that broke in a “Mikado diagram”)
4. **Undo** (e.g. `git reset HEAD`)

![A Mikado diagram](https://jhall.io/archive/images/mikado-diagram.png)

The breaking pieces in step 2 become new goals, then you repeat. Eventually, your experiments won’t break things, and they become final code that you commit, and mark off of the diagram.

This practice can apply to non-coding activities, as well. For example in a my (very low-production quality) [video of a workshop I did](https://youtu.be/Cvql4DtRAhU), we apply this practice to increasing sex appeal!

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Animated CSS Checkbox
Tags: webdev, html, css
Published: 2021-05-04 23:45:48

So i made this animated check with pure html and css. The image upload is static but it is animated when you click on the check box.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpuyahfn7mhp2z2li334.gif)

Here is a link to the codepen:
https://codepen.io/Abdullah_Noor/pen/xxqKjzq


My twitter:
https://twitter.com/ANoorDev?s=09
All about Monoliths and Microservices
Tags: monoliths, microservices, server, docker
Published: 2021-05-04 23:16:46

Lets talk a little bit about server architecture. And the difference between Monoliths and Microservices. 

![alt text](https://divante.com/blog/wp-content/uploads/2020/01/Frame-1.png)



##What's a Monolith

A Monolith (Mono meaning one) Is a server architecture method where both the frontend and backend of a web app are combined and contained in one deployment. While this method is tried and true it is slowly being proceeded by newer methods such as Microservices

Its pros are that its easy to make edits to the entire structure.,

Its cons are that due to its combined nature one change can be quite tedious to update.



##How about a Microservice , what's that ?

A Microservice is small and fragmented with each service independently separated out into smaller pieces of standalone files. 

Some of the pros of microservices are that it allows for very specific and specialized websites to be created. 

When it comes to cons though, They are fairly new and can be somewhat difficult to implement depending on the web service developers are trying to deploy.





Check out my video below showing drupal being set up through docker:
https://youtu.be/Vn0G0EZ4Wg8

Shout out to this github page for the instructions I went over in my video:
https://github.com/heyMP/ist402-docker/tree/master/labs/7-news-api-microservice
Insuretech Connect Asia 2021 Telah Dibuka
Tags: berita, startup
Published: 2021-05-04 22:57:23


Dalam rangka mendukung era industri 4.0 di bidang asuransi, Insure Tech Connect (ITC) Asia menyelenggarakan Insuretech Connect Asia 2021 yang akan diadakan di Singapura pada tanggal 16 - 17 Juni 2021.

Acara ini akan dihadiri oleh lebih dari 7,000 investor, inovator, dan para pemimpin di industri asuransi dari berbagai negara. beberapa perusahaan yang akan hadir diantaranya Traveloka, AIA, AIG, Grab, FWD Insurance dan PasarPolis.com.

# Pembicara

Acara ini akan menghadirkan pembicara termuka seperti Sopnendu Mohanty (CFO Monetary Authority of Singapore), Melita Teo ( Chief Customer & Digital Officer AIA Singapore), Rosaline Chow Koo (CEO & Founder CXA), Stephen Barnham (CIO, Asia MetLife), Tom Duncan (Head of Insurance Grab), Jinesh Patel (Integra Partners) dan masih banyak lagi.

# Mengapa harus hadir?

*   Terhubung langsung dengan jaringan komersial dan entrepreneur global
*   Membuka kesempatan terhubung dengan jaringan investor, inovator, dan para pemimpin di industri
*   Memahami lansekap kompetitif di industri yang tengah hangat saat ini
*   Mempelajari bagaimana investor mendanai perusahaan
*   Dan masih banyak lagi

# Biaya + Format Acara

Insuretech Connect Asia 2021 akan dibagi menjadi dua format, akses online + offline dan akses online. Harga untuk akses online+offline adalah $599 (sampai 20 Maret), $699 (21 Maret - 15 Mei 2021) dan $799 apabila Anda mendaftar pada 16 Mei - 15 Juni 2021. Untuk startup, silakan kirim email asia@insuretechconnect.com untuk mengecek apakah Anda layak mendapatkan potongan harga untuk startup atau tidak.

Sedangkan untuk akses online, harga yang ditawarkan adalah $99 (sampai 20 Maret), $120 dari 21 Maret - 15 Mei 2021. Sedangkan apabila Anda mendaftar pada 16 Mei - 15 Juni akan akan dikenakan biaya $199.

[Daftar Insuretech Connect Asia 2021](https://asia.insuretechconnect.com/register/)

*Originally published at [MauCariApa.com](https://maucariapa.com/insuretech-connect-asia-2021-telah-dibuka/) on May 04, 2021.*
What are Microservices?
Published: 2021-05-04 21:57:58

If you're a computer programmer or software developer, you're no stranger to the ~trendy lingo~ and ~catchy keywords~ used in the industry. Whether it's machine learning, artificial intelligence, neural networks, web components, Web 3.0, or whatever else, trendy lingo in the software industry is like water in swimming - you pretty much can't have one without the other.

One big trend that's come up as of late has been that of microservice architecture. It's a variant of service-oriented architecture which basically splits an application into a collection of loosely coupled services. This allows for greater scalability as well as faster development and deployment: one process in the microservice can be updated and restarted much more easily than the entire service together. 

Here's some differences between the monolith and microservice architectures and why you would use each.

# Monoliths
Monolith server architecture is the traditional way of deploying a service to the internet: hosting a single process as a single service and having it handle every part of that application's processing. It's very heavy, oftentimes resource intensive, and difficult to develop and update at scale. Additionally, if one part of the code crashed, the entire application would crash, resulting in the need to restart everything all over again.

# Microservices
As mentioned above, microservices are much more versatile and scalable. Instead of treating an application as a single service and only using one process to handle everything being thrown at it, microservices partition an application into many... micro-services. Each major task being split into its own service results in the overall application being much less prone to failure and much more easy to update and develop on, and makes it much easier to scale into clusters when it grows too big to live on just one machine. However, microservices tend to be a lot more resource-intensive and frustrating to manage than monoliths because of the need to juggle many services at once, and so, they are usually only used when the application is at a scale where it would make sense to make that trade off for the sake of a better experience for everyone.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rwy5b82vd6raa81k4if.png)

Both types of server architecture have their own uses: most beginner programmers, for example, will stick to monoliths and only use them until they begin working with large-scale infrastructure due to the lack of need of microservice-based architecture. There is a lot of merit to each, and both of them offer different benefits, but overall, both will continue as the two major types of server architecture going forward. 

Watch my video on it here:

https://youtu.be/U54BmiOmDnU
Day 359 : My Space
Tags: hiphop, code, coding, lifelongdev
Published: 2021-05-04 21:14:50

_liner notes_:
- Professional : Nice day. Had a meeting with my manager and showed him the video template thing I've been working on. He likes it and wants to keep moving forward with it. Awesome. Basically worked on my blog post for the rest of the day.

- Personal : Worked on my timer Web Component. Got most of it working and added an event that is dispatched when the countdown reached zero. Also, I think I may have figured out how to attach the wheels to the framework for the inside of my van. That was something big on my mind. My space is coming together slowly. Then watched an episode of "Yasuke" and went to bed.

![Aerial view from the ocean at an hill covered in green trees on an island in Clew Bay, Ireland](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z72yjrln9wlyuc4kpi5i.jpg)

Thought of another event I want to dispatch from my timer Web Component. When the countdown is shown, I want to send an event so that the outside application knows and can display UI elements if needed. For my side project, I want to show a different set of buttons when the countdown starts than when the countdown is over. I want to get that worked out then publish the Web Component so I can start to use it in my side project. Going to do some research into the Firebase Cloud Messaging. I want to see if I can send messages from different subdomains. They are all under one project. I think it could work like Authentication accounts. I don't want to load Firebase unless I really need too. I want the landing page to be super fast. We'll see. Then end the night watching "Yasuke". 

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube Yr_9kXBk-G0 %}
Project Universe Game Dev Update
Tags: gamedev, indiegamedev, opensource, opencommunitydev
Published: 2021-05-04 21:12:07

Hey all, posted a complete game dev update of Project Universe on Patreon! Dev is going well, we're making progress on all base forms of non-combat gameplay. Dev will slow down for the next 2 weeks. Includes a bunch of pictures!

https://www.patreon.com/posts/50864764
add appreciation after form submit 
Tags: html, css, javascript
Published: 2021-05-04 21:01:39

Hello All 
I'm working as front end, but I need simple feature added to website, when user click in button submit form then I want to shoe appreciation after submit.

Can anyone help me what is the name of the process so I can search more in related topic that I mention above. or can you give me resources help me about this features.
All I need some resource help me how implement this.

Thank you for your help from now!!
Awesome Illustrations Resources
Tags: webdev, beginners, productivity
Published: 2021-05-04 20:59:43

1. [Undraw](https://undraw.co/illustrations)

2. [Draw Kit](https://www.drawkit.io/)

3. [Indian Doodle](https://iconscout.com/illustration-pack/indian-doodle)

4. [Poke](https://www.karthiksrinivas.in/poke)

5. [open Doodles](https://www.opendoodles.com/)

6. [Lukaszadam](https://lukaszadam.com/illustrations)

7. [IRA Design](https://iradesign.io/)

8. [Mixkit](https://mixkit.co/free-stock-art/)

9. [Scale](https://2.flexiple.com/scale/all-illustrations)

10. [Pulse](https://sleekbundle.com/product/pulse-illustration-kit/)

11. [Gee Me](https://geeme.vercel.app/)

12. [Absurd](https://absurd.design/#slide-6)

13. [The Noun project](https://thenounproject.com/)

14. [Fresh-folk](https://fresh-folk.com/)

15. [Rawpixel](https://www.rawpixel.com/search/illustration?sort=curated&page=1)

16. [Webpixels : Eye Pop](https://webpixels.io/illustrations)

17. [Delesign](https://delesign.com/free-designs/graphics/)

18. [Manypixels](https://www.manypixels.co/gallery?ref=lapaninja)

19. [Icon8](https://icons8.com/illustrations)

20. [Humaans](https://humaaans.com/)

21. [Streamline](https://lab.streamlinehq.com/)

22. [Lucid](https://lucid.pixsellz.io/)

23. [Ui8](https://ui8.net/)

24. [Control.Rocks](https://control.rocks/)

25. [Niceillustrations](https://niceillustrations.com/free-illustrations/)

26. [Pixel True](https://www.pixeltrue.com/packs)

27. [Isometric](https://isometric.online/)

28. [Story Set](https://storyset.com/)

29. [Open Peeps](https://www.openpeeps.com/)

30. [Black illustrations](https://www.blackillustrations.com/)

31. [Free Illustrations](https://freeillustrations.xyz/)

32. [Illlustrations](https://illlustrations.co/)

33. [Getillustrations](https://www.getillustrations.com/illustration-packs)

34. [FreePik](https://www.freepik.com/)

35. [Vecteezy](https://www.vecteezy.com/)

36. [FreeVector](https://www.freevector.com/)

37. [All Free Download](https://all-free-download.com/)

38. [VectorSock](https://www.vectorstock.com/)

39. [Stubborn](https://stubborn.fun/)

40. [Blush](https://blush.design/)

41. [UseMash](https://usesmash.com/)

42. [Glazestock](https://www.glazestock.com/)

43. [VectorPortal](https://www.vectorportal.com/)

44. [GetWaves](https://getwaves.io/)
Generate svg waves, to create curved separations for page sections!