teleren/devto huggingface dataset:
New Skeleton component in windy - React UI Kit based on Tailwind
Tags: showdev, tailwindcss, react, opensource
Published: 2021-07-14 15:18:03

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5eksjubclyqbmyfd166.png)
 
Hi there, new update from **windy** - React UI Kit based on Tailwind!

We have added a new Skeleton component in Windy (https://windy-docs.vercel.app)

Let's use it in 5 lines of code!
```jsx
<div className="w-full">
  <Skeleton className="w-3/4 mb-3" />
  <Skeleton className="mb-3" />
  <Skeleton className="w-1/2" />
</div>
```

you can see other example in https://windy-docs.vercel.app/docs/components/skeleton

I'm working hard to improve windy so every feedback is important. 👨‍💻 Let's try it and let me know 🔥🙏
생산성을 높이는 POSTMAN 기능 활용. 2편
Tags: tooling
Published: 2021-07-14 15:17:59

1편, API 인증 자동화로 API 호출을 좀 더 편하게 만들기.
**2편, 콜렉션 수정내용 GIT 처럼 관리하기.**
3편, API 호출 및 응답 예제를 작성해서 MOCK 서버 구축하기.
4편, 다양한 요청 포맷을 IMPORT/EXPORT.

## 2. 콜렉션 수정내용 GIT 처럼 관리하기.
[1편](https://dev.to/itscreater/postman-1-209n)에서, 포스트맨에서 Request를 묶는 최상위 단위는 Collection 이라고 말씀드렸었는데, 포스트맨은 Collection 이라는 단위를 다양하게 관리 활용 할 수 있도록 여러 기능을 제공하고 있습니다. 

오늘은 여러 기능중에서도 **Collection을 다른 사람과 공유하는 share 기능**에 대해서 좀 더 상세 하게 알아보고, **share 상황에서 어떻게 Collection을 공동 작업 할 수 있는지**를 알아보겠습니다. 

## Collection share
본인이 작성한 Collection을 다른 사람에게 공유 할 수 있는 기능으로, 공유대상은 주로 Workspace 가 됩니다. 따라서, 해당 Workspace에 접근 가능한 사용자들은 공유된 Collection에 접근이 가능하고, Collection내에 존재 하는 Request를 실행 시켜 볼 수 있습니다. Collection 작성자는 손쉽게 다른 사람에게 공유할 수 있으니 자주 사용되는 기능중에 하나 입니다. 
 
아래 방법을 통해 공유 할 수 있습니다.
1. 공유하고자 하는 Collection을 선택하여 share 메뉴로 진입.
2. share 할 대상 workspace 선택. 
3. share 이후에 원본 Collection을 삭제 할것인지 | 그대로 둘것인지 선택.
![1~3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0dg57uxeblck7q7g4yv.gif)

4. share 될 Collection에 접근 가능한 사용자의 권한 설정.
![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzcz3u2kg3wmpc34u82i.gif)

Collection 공유 이후 작성자만 수정 업데이트를 하거나, 앞으로 수정 될 일이 아예 없다면 share기능으로 충분하지만, share이후에 Collection을 공유받은 다른 사람이 Collection을 수정 해야하는 상황이 오면, share만으로는 충분 하지 않을 수 있습니다.

Collection은 share 상태에서 어떤 워크스페이스에서 수정이 일어나건 저장을 하는 순간 모든 워크스페이스에 바로 적용이 됩니다. 이러한 사항 때문에 동시에 Collection을 여러 사용자가 사용하고 있는 상황이라면, 누구한명이 저장을 하는순간 다른 사용자는 영문도 모른채 수정된 Collection을 사용할 수 밖에 없습니다. 이를 위해 **공동 작업에 용이한 Collection fork 기능을 포스트맨에서 제공**하고 있습니다.

## Collection fork
개발자들에게는 익숙한 용어인 fork 가 등장 했습니다. github에서도 자주 언급되고, OS의 process를 다룰 때도 언급이 되는 용어로, **복제하여 분기된 것**이라는 의미로 자주 사용되는 용어입니다.
포스트맨에서도 fork 용어는 동일한 의미로 사용 되고 있습니다. Collection 을 fork 하면, 원본 Collection을 복제한 새로운 Collection을 생성하게 되고, fork된 Collection 가지고 자유롭게 수정을 할 수 있습니다. 이뿐이라면, Collection을 복사하는것과 다를바가 없는 기능이지만, fork된 Collection은 fork된 이후의 수정사항을 언제든 원본 Collection에 수정 내역만을 업데이트 시킬 수 있다는 것이 다릅니다.
위와같은 동작 덕분에, 여러사람들에게 공유된 Collection을 공동 수정 할 수 있게됩니다. 아래와 같은 **예시 상황**에서 fork 는 수정사항의 충돌을 해결 해줄 수 있습니다.

### 예시 상황
- 개발자 **A**,**B**는 공유된 동일한 Collection인 `payment` Collection에 존재하는 `결제 조회` Request를 수정 하려 함.
- **A**의 수정 내용: `결제 조회` Request의 `extension`이라는 query parameter를 삭제 함.
- **B**의 수정 내용: `결제 조회` Request의 `extension`이라는 query parameter의 value값을 true 함.

### share 상태에서의 결과.
share 상태라면 A,B가 저장한 시간순에 영향을 받습니다. A가 먼저 저장하고 B가 저장 했다면, A는 삭제 했음에도 `extension` query parameter가 다시 부활한 것으로 보여집니다.

### fork 상태에서의 결과
A,B가 `payment` Collection을 각자 fork하여 `payment-A`, `payment-B` Collection 에서 수정 하고 저장한 뒤 원본 Collection인 `payment`에 수정 사항을 반영 하기 위해 각자 pull request 를 만듭니다.
`payment-A`의 pull request를 merge 하고, `payment-B` pull request를 merge 하려고 하면 conflict이 발생 했기 때문에 conflict를 해결하라는 알림이 뜨고, `payment-B` pull request는 거부 처리 합니다.
이렇게 되면, A의 수정 사항만 원본에 반영 되고 충돌은 해결 됩니다.
![conflict 예시](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcrruhr5cxd7eybool25.png)

## 결론
공동 수정이 많은 컬렉션은 **fork**를 이용하여 수정 관리하자.
수정이 일어나지 않거나, 1명이 수정한다면 **share**를 이용하자
Machine Learning & Building a Twitter Community w/ Pratham
Tags: podcast, twitter, machinelearning
Published: 2021-07-14 15:17:46

{% spotify spotify:episode:1oQpXjp50MdLxvTVBkSHLv %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://www.htmlallthethings.com/podcast) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self-employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.

## What's This One About?

In this episode Matt and Mike sit down with Pratham, a Twitter influencer with over 75, 000 followers as well as a passion for coding and machine learning. At only 16 (at time of recording), Pratham has built up quite a bit of experience in the programming field, and filled the show in with a tons of insights on getting started with programming for passion versus profit, machine learning (even without math!), and building up a Twitter community. With all that and more this is an episode you won't want to miss!


## Guest Introduction

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjiwzb72ai8xqt82ntlx.png)
 
Our guest today is a well-known personality on Twitter with over 75000 followers. He’s also a 16-year-old self-taught developer. In this one, we talk about how Pratham started in development, specialized in machine learning, and got a job by building a massive Twitter audience. 

[Pratham's Twitter Account](https://twitter.com/PrasoonPratham)
[Pratham's Blog](https://prathamprasoon.codes/)


## Show Notes

4:00 - How did you get started in coding/development?
7:35 - What was your drive to get through all the obstacles?
10:40 - What made you get into machine learning as a specialty?
20:15 - What got you into building an audience on twitter?
26:00 - Does a new developer need to start building a twitter audience?
27:55 - Is there any advice you'd give to a new developer?
30:50 - Should you share knowledge as a beginner? 
36:50 - What's next for you?



##Key Takeaways

* Learning through resources outside of the internet is possible but very difficult
* Machine learning doesn't need a strong math base to get started with. Tensor Flow allows new developers to get into it without knowing every complex concept.
* Be consistent and focus on one task at a time.
* By teaching someone something, you solidify your knowledge so it's a win win situation. 


You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[TikTok (Html All The Things)](https://www.tiktok.com/@htmlallthethings)
Mastering JS' 5 Best Vue Tutorials
Tags: javascript, vue, codenewbie
Published: 2021-07-14 15:16:59

We love [Vue](https://masteringjs.io/vue) at Mastering JS. We even built our [JavaScript job board](https://masteringjs.io/jobs) in Vue, and wrote about the best [Vue books](https://masteringjs.io/tutorials/vue/books).

Here's our 5 most popular Vue.js tutorials.

5) [An Introduction To Vue $refs](https://masteringjs.io/tutorials/vue/refs)

Vue refs are a way to get access to a raw DOM element in your component. They're especially useful if you need to use a library that requires DOM elements, like [Stripe elements](https://thecodebarbarian.com/accepting-stripe-payments-with-node-js.html).

4) [Vue Error Handling](https://masteringjs.io/tutorials/vue/error-handling)

Vue's `errorCaptured` hook is an extremely powerful tool that lets you handle errors that happen in child components. You can handle any error that occurs from your root component, **even errors in async methods!**

3) [What's New in Vue 3](https://masteringjs.io/tutorials/vue/vue-3)

Vue 3 is the same old Vue that we know and love, with a few new delightful surprises. Here's an overview of what's new in Vue 3.

2) [How to Drag and Drop File Upload with Vue](https://masteringjs.io/tutorials/vue/drag-and-drop)

Vue makes it easy to handle drag events using the `@drag`, which makes drag and drop file uploads easy. Here's how.

1) [The $emit Function in Vue](https://masteringjs.io/tutorials/vue/emit)

The `$emit()` function is how a child component can communicate directly with it's parent. This tutorial describes how `$emit()` works.
Published my first npm package!
Tags: react, typescript, javascript, npm
Published: 2021-07-14 14:03:20

# As the title suggests, I published [my very first npm package](https://www.npmjs.com/package/@rathpc/zendesk-react) earlier this week! 

This is something that has definitely been long overdue, and I should have been doing for years. I have so many random code things I have done to simplify or abstract processes or components but have just never committed the time to actually sharing it out to the world. Well, now I have!!!

I hope to continue this trend and publish more packages in the future, but in the meantime here is some info about the package:

## [@rathpc/zendesk-react](https://www.npmjs.com/package/@rathpc/zendesk-react)
> A minimal component based implementation to include Zendesk in your React application.

- If you are using the Zendesk integration in your React application, you might find this useful. It essentially gives you a way to include the integration without explicitly needing to add the script yourself in an HTML file or template being passed into your bundler of choice.

- This makes it a bit easier to consume and tweak usage based on environment.

### Feel free to try it out and let me know if there is anything you want to see added to it or changed! I plan to add some more thorough typing of the `zendeskApi` function usage based on the Zendesk docs so it will be even easier to use and have auto completion!!!
-----
_**Sidenote**: This effort was definitely inspired by another package (react-zendesk) that is also available but it hasn't been maintained in quite some time. My intention was to build on that idea, update the logic to leverage newer React syntax and capabilities (16.8+) as well as write it purely in Typescript._
Practical Cloud-Native Java Development with MicroProfile
Tags: enterprisejava, book, java, jaxrs
Published: 2021-07-14 18:37:47

---
title: Practical Cloud-Native Java Development with MicroProfile
published: true
date: 2021-07-14 15:15:00 UTC
tags: EnterpriseJava,book,java,JAXRS
canonical_url: https://andymc12.net/2021/07/14/practical-cloud-native-java-development-with-microprofile/
---

For the past six months, I’ve had the privilege to work with some amazing co-authors ([Emily Jiang](https://twitter.com/emilyfhjiang), [John Alcorn](https://twitter.com/jwalcorn), [David Chan](https://github.com/Channyboy) and [Alasdair Nottingham](https://twitter.com/nottycode)) and a super-supportive publisher ([Packt](https://www.packtpub.com/)) to produce the definitive guide to Java Cloud-native development.

_So, what’s in it?_ My co-authors and I don’t like fluff – it’s titled _Practical_ for a reason. The book takes a deep dive into [MicroProfile](https://microprofile.io/) technologies – this include some of the technologies that MP “borrowed” from [Jakarta](https://jakarta.ee/) (REST, CDI, JSON-P/B) as well as the original MicroProfile technologies like Rest Client, Config, Fault Tolerance, Metrics, etc. But this book isn’t a textbook – there are practical examples with [a real-world application](https://github.com/IBMStockTrader/portfolio) at the core.

We also cover deployment strategies like how to run and test your application in open source servers like [Open Liberty](https://openliberty.io/) – then deploy in [Docker](https://www.docker.com/) and [Kubernetes](https://openliberty.io/guides/#kubernetes). All of the examples in the book are available in [GitHub](https://github.com/PacktPublishing/Practical-Cloud-Native-Development-with-MicroProfile-4.0).

_So, where can I get it?_ I’m glad you asked! It’s available for pre-sale on [Amazon](https://amzn.to/3hDnQkd) and [Packt](https://www.packtpub.com/product/practical-cloud-native-java-development-with-microprofile/9781801078801). It’s scheduled to release in September, 2021.

_Anything else you can tell me about it?_ You bet! I plan to post some excerpts from the book on this site in the next few weeks. Stay tuned!

<a target="_blank"  href="https://www.amazon.com/gp/product/1801078807/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1801078807&linkCode=as2&tag=andymc12-20&linkId=249c8dd6ca571e60c91c4125ab65b0ee"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1801078807&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=andymc12-20" ></a>
Web Dev Career
Tags: career, webdev, html, firstyearincode
Published: 2021-07-14 15:02:21

Hello,

I have just started a career in Web Development and thought it would be some good use if I shared my days and anything I am learning along the way.

This is my 4th week in and I have been thrown into the deep end with multiple project briefs coming fast and still learning a lot of the skills required on the job.

All of my experience within Web Development has been from college which I have just finished and went straight into my first job as a full time developer.

Any tips and or help will be greatly appreciated and if i can assist anyone along the way then great!
NeoVim LSP with Intelephense for PHP and WordPress (and others)
Tags: wordpress, neovim, php
Published: 2021-07-15 10:21:34

---
title: NeoVim LSP with Intelephense for PHP and WordPress (and others)
published: true
date: 2021-07-14 14:51:56 UTC
tags: wordpress,neovim,PHP
canonical_url: https://daniele.tech/2021/07/neovim-lsp-with-intelephense-for-php-and-wordpress-and-others/
---

Integrate everything in your shiny NeoVim!

The post [NeoVim LSP with Intelephense for PHP and WordPress (and others)](https://daniele.tech/2021/07/neovim-lsp-with-intelephense-for-php-and-wordpress-and-others/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
Update Homebrew on macOS With One Script
Tags: showdev, scripting, productivity, homebrew
Published: 2021-07-14 14:41:50

I use multiple Homebrew packages and I appreciate Homebrew's built in package management, so each time I update Homebrew packages on my mac, I get tired of typing multiple commands, especially since I like to be thorough. I use `brew update` to update the formula and Homebrew itself, `brew upgrade` to update everything, `brew cleanup` to delete any unfinished downloads, and finally `brew doctor` to check for issues. 

My initial thought was that I could just create a simple alias to run all four commands at once:

```bash
alias brewup='brew update; brew upgrade; brew cleanup; brew doctor'
```
I decided to improve on the idea and create a bash script that would run all the commands and echo messages back to me as it was running. I did it like this:

![brewup](https://raw.githubusercontent.com/josephmidura/markdown/main/brewup-post/brewup.png)


I used the printf command to tell me which part of the script is currently being executed, so if the script appears to be hanging I know how far it completed. I formatted the text to use a color that doesn’t appear elsewhere in my terminal's color scheme so that I know that the outputted text is from my script rather than as a result of a Homebrew process.

Finally, I named the script brewup, stuck it in my ~/bin directory and made it executable from any directory:

```bash
chmod +x brewup
```

Now that the script is executable I can run the script no matter how far down I'm working in a nested directory. When I want to update my Homebrew packages, I can type a single word and let Homebrew update in one terminal window while I work on something else:

```bash
brewup
```

This post also appeared on my [blog](https://josephmidura.wordpress.com/2021/07/03/updating-homebrew-on-macos/?preview_id=108&preview_nonce=6552e242a6&preview=true). If you like what I did and want to save yourself some typing, you can get a copy of the script from my [GitHub](https://gist.github.com/josephmidura/807770766aeb37b9cc3897e26f870210). Comments and suggestions are welcome.
Terraform – Escape strings with a $ (dollar) sign
Tags: terraform, dollarsign, escape, invalidcharacter
Published: 2021-07-15 07:01:30

---
title: Terraform – Escape strings with a $ (dollar) sign
published: true
date: 2021-07-14 14:33:47 UTC
tags: terraform,dollarsign,escape,Invalidcharacter
canonical_url: https://veducate.co.uk/terraform-escape-strings-with-a-dollar-sign/?utm_source=rss&utm_medium=rss&utm_campaign=terraform-escape-strings-with-a-dollar-sign
---

###### The Issue

When using Terraform to perform an action, and the input is using a $, you can end up with an output such as the below.

```
│ Error: Invalid character
│ 
│  on main.tf line 104, in resource "vra_blueprint" "this":
│ 104:      network: '${resource.Cloud_Network_1.id}'
│ 
│ This character is not used within the language.
```

This happened to me when I was using the [Terraform vRA Provider](https://registry.terraform.io/providers/vmware/vra/latest) to create Cloud Templates (blueprints) in my vRA environment. The vRA cloud templates use a syntax such as ${input.something}, which clashes with the syntax used by Terraform to identify inputs.

###### The Cause

Terraform implements a [interpolations syntax](https://www.terraform.io/docs/configuration-0-11/interpolation.html). These interpolations are wrapped in `${}`, such as `${var.foo}`.

The interpolation syntax is powerful and allows you to reference variables, attributes of resources, call functions, etc.

###### The Fix

You can escape interpolation with double dollar signs: `$${foo}` will be rendered as a literal `${foo}`.

[![Terraform Interpolation Syntax example](https://i2.wp.com/veducate.co.uk/wp-content/uploads/2021/07/Terraform-Interpolation-Syntax-example.jpg?resize=604%2C298&ssl=1)](https://i2.wp.com/veducate.co.uk/wp-content/uploads/2021/07/Terraform-Interpolation-Syntax-example.jpg?ssl=1)

Regards

[Follow @Saintdle](https://twitter.com/saintdle)<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[Dean Lewis](https://uk.linkedin.com/in/saintdle?trk=profile-badge)

 

The post [Terraform – Escape strings with a $ (dollar) sign](https://veducate.co.uk/terraform-escape-strings-with-a-dollar-sign/) appeared first on [vEducate.co.uk](https://veducate.co.uk).
I made an app that shows you your keyboard and mouse usage (with a keyboard heatmap)
Tags: html, javascript, css, webdev
Published: 2021-07-14 14:00:17

## What is [Keystroke Count](https://virejdasani.github.io/KeystrokeCount/)?
- Keystroke Count is an open-source, desktop app that you can use to get data for your keystrokes!
- Keystroke Count keeps all your keystroke data locally stored and NO data including your keystrokes is ever collected.

{% youtube rFWJ2cmRuBM %}

## This is what the app looks like

![keystroke Count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0iawlo5pn5iow59rgh6g.png)

> After about 20 minutes of using it 👆

![keystroke Count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgyh8szrzw3ha68yskik.png)

> After gaming on my laptop 👆

## How is it made?
- Keystroke Count is made using ElectronJS
- It uses JavaScript, HTML and CSS

## A star ⭐ on [the GitHub repo](https://github.com/virejdasani/KeystrokeCount) would be much appreciated!
Code Coverage at Landingi
Published: 2021-07-14 13:58:19

Code Coverage is a negative metric, because it shows us problems we have, not how we could improve.
At Landingi, we waited a long time before deciding to enforce the code coverage for each Pull Request. We were concerned that people would focus on KPI by writing tests for setters, getters, or other irrelevant stuff.

Quality does not equal quantity. You should focus on what you test and how to make sure you won’t make yourself harm in the long run. You can write a lot of tests for bad code, as a result, you get situations that it will be very difficult to change anything.

Ultimately, we decided to implement the rule that every PR is covered in at least 80%. Thanks to the @codecov it was very simple. We wanted to improve psychological safety for our developers and increase productivity in long run. After a few days, we got good feedback from our team. I hope it will be better and better.

P.S. We have plans to introduce mutation testing to improve our unit tests suites.
Happy to give feedback about my project?
Tags: showdev, webdev, javascript
Published: 2021-07-14 13:53:03

We are currently looking for front-end developers interested in testing a new tool created to speed up building reactive web apps.
 
Our Studio allows you to deliver projects to the end client even 4 times faster in comparison to more conventional ways such as building projects using frameworks with a full set of supporting libraries and tools.
 
I list couple of important features that we already implemented in our Studio to support our claims:
 
- Studio starts with initial set-up - The Live Preview, meta-framework, code generator, bootstrap, font-awesome and much more are ready to use right at the start of the new project
- Implementation Assistant - early version of AI that scans your code and not only notify you about important actions that you need to take, but also generates all necessary files and glue code and placing them inside of your project, exposing only files necessary for developing new features
- repository of Widgets - over 80 of them! From simple block presenters, to more advanced data tables and forms, ending on microservices like table reservation API. All the Widgets can be inserted inside of your project within one-click and customized by object JSON file for content or pure CSS for styles
- Scoped CSS - that makes naming and styling easier. The Studio generates dedicated CSS files for Widgets and 'Slots' of your web page. You can place 15 elements with the same name of class on your web page and still styles each of them differently.
- Global Styles - Exact opposite of scoped CSS. You can globally style the whole app at once to avoid repeating or speed up the work
 
 
There are many more features, but I think those should bring your attention already.
 
So what is the purpose of my post? We are looking for front-end developers that are interested in giving us feedback. We are looking for 2 specific groups of developers:
 
Curious one - If description of the Studio sounds interesting for you, we are happy to simple hear your feedback after you use our tool
 
The one in need of a tool like this - If you are freelancer or running a project on the side, we are happy to give you access to the most advanced plan for FREE. In exchange for it we only ask for one thing. You will let us share the URL to your website/project/web app on social media and on our website. Please note, I'm not asking for source code, only for the result of your work. We want to prove our concept and show to our community capabilities of our tool. So we simply want to brag on our channels that your website has been built in our Studio. Plus it is always some advertisement for you as well.

If that's sounds interesting please contact with me:

przemek@glue.codes

or

https://twitter.com/PrzemyslawMic10

You can also visit website of the project here:

https://www.glue.codes