teleren/devto huggingface dataset:
Jamming with AWS
Tags: aws, cloud
Published: 2021-08-22 16:20:45

The upcoming [AWS Summit Online (Americas)](https://aws.amazon.com/events/summits/online/americas/) next week (August 24th-26th) will have the usual Keynotes and Sessions, but the most interesting/fun part of the summit will be the [AWS Jam](https://jam.awsevents.com/).

An AWS Jam is a "Capture the Flag" style event that runs over two days (on the 25th/26th August) where you complete challenges in AWS to earn points, either competing as an individual or as part of a team. The challenges vary in complexity and difficulty and can take anywhere from a few minutes to a couple of hours. If you're stuck you can get hints, but these decrease the number of points you get for completing the challenge.

_Example challenges from the AWS Jam at the May 2021 summit:_

![AWS Jam Challenges](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19s7qfnjfa8n6dqis77l.png)

At the last summit I wasn't entirely sure what an AWS Jam was, so I took part by myself and didn't have time to organize a team (I was also limited in how much time I could spend on it), but I still managed to reach 38th on the leader board by quickly completing a number of challenges at the last minute!

I found it was a great opportunity to experiment with parts of AWS I'd not used before, in particular some of the Data Science and ML challenges where you're given a pre-configured Notebook and Dataset and they work you through the steps of data analysis.

This time I'm hoping to have a team of EDJErs to compete in the challenge and see how much further we can get up the leaderboard!

## Joining the Jam

In order to take part in the AWS Jam you'll need a Jam account ([sign up here](https://jam.awsevents.com/)) and you'll also need to code for the Jam which will be available once the AWS Summit starts (so you'll need at least one person in your team to register with the summit to get the code, create a team, and then you can invite people to the Jam and direct them to your team).

## The rest of the summit

There should be an interesting keynote from the VP of Machine Learning at AWS (Swami Sivasubramanian), and possibly a few new announcements, and then there's a selection of interesting sessions in all areas of AWS.

Additionally there are two hour workshops in a range of technologies (e.g. Build and deploy web applications with AWS App Runner) that you need to [register for separately](https://aws-summit-online-americas-virtual-workshops.splashthat.com/). They're great if that particular workshop is something you want to learn about, but won't give you experience with the range of AWS services that the Jam will.

[![EDJE Articles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ch3nypi7c02kagscohyu.png)](https://dev.to/leading-edje)
ZoZo House Pet Shop
Published: 2021-08-22 16:00:38

Zozo House's là Petshop chuyên cung cấp thức ăn, vật dụng, phụ kiện & đồ chơi cho thú cưng uy tín hàng đầu. Với dịch vụ cắt tỉa lông móng, tắm rửa và grooming chất lượng cao Zozo House's sẽ là lựa chọn tuyệt vời cho chó mèo cưng của bạn

Website: http://zozohouse.vn/

SĐT: 0906682299

Địa chỉ : 558 Điện Biên Phủ, P.11, Q.10, TP.HCM

#zozohouse #zozohouse_petshop
2021 week 33, Hungry Ghost edition. Ghost-themed OSS and optical illusion.
Tags: ghost, web, firefox
Published: 2021-08-22 16:00:00

It is currently the Hungry Ghost month for those who follow the Chinese folk religion and there will be ceremonies to pay respect to the departed souls. That inspired the ghost theme for this week's post with three open source projects whose names befit the Ghost Festival, and another two items still picked from my weekly journal.

- **Ghostwriter**: a distraction-free writer app with some nice features like a focus mode to highlight the current sentence, show document outlines, writing stats, quick markdown references, etc.

- **Ghost**: the Node.js blogging platform that seems to gear toward the creator economy now, it has a default theme named Casper and the organisation is a registered non-profit in Singapore - one of the countries where Hungry Ghost Festival is observed.

- **Haunted**: React Hook API but for standard web components instead of React components, the hooks have the same names in hope that some existing code can be made compatible easily.

- **Firefox**: Service Worker API will ghost out on you in Firefox Private Browsing mode, i.e. `'serviceWorker' in navigator` will return `false`. It seems to be currently disabled intentionally.

- **Pepper's Ghost**: it's an optical illustration using an angled, partially reflective screen to catch a reflection from a brightly lit actor so that the actor will appear like a ghost on stage, popularised by John Henry Pepper in the 1860s.

This is my 6th weekly post since July 2021, thank you for reading and do let me know if you have any feedback by leaving a comment.

### Related Links

- Ghostwriter on GitHub: [wereturtle.github.io/ghostwriter](https://wereturtle.github.io/ghostwriter/)
- Ghost contact page: [ghost.org/contact](https://ghost.org/contact/)
- Haunted on GitHub: [github.com/matthewp/haunted](https://github.com/matthewp/haunted)
- Bugzilla on Service Worker: [bugzilla.mozilla.org/show_bug.cgi?id=1320796](https://bugzilla.mozilla.org/show_bug.cgi?id=1320796)
- Pepper's Ghost on Wikipedia: [en.wikipedia.org/wiki/Pepper's_ghost](https://en.wikipedia.org/wiki/Pepper%27s_ghost)
Using Axios Interceptors In Javascript and Typescript
Tags: webdev, react, typescript, javascript
Published: 2021-08-22 15:54:52

**Axios** is a robust, easy to use, promise-based http client for javascript and node.js. Axios provides developers with tools to handle all http-related functions. Axios interceptors are one of the essential tools Axios provides us for dealing with HTTP requests and responses. 

Axios is a great way to handle any sort of HTTP requests in javascript or typescript, and I use it in all of my projects that require accessing an API. It provides all the necessary functions for passing data to and from APIs and then accessing it on the frontend. 

If you've never used Axios, I suggest checking out the documentation here: [https://axios-http.com/docs/intro](https://axios-http.com/docs/intro) 

## Interceptors

Interceptors are exactly what they sound like. They "intercept" requests and responses. 

This can be useful if you need to perform some validation on the data before sending a request or when retrieving a response. 

Here's an example of intercepting a request:

```tsx
axios.interceptors.request.use(function (req) {

// if name not in request config then reject
	if (!req.name) {
		return Promise.reject("Error: Please Include a name");
	}
}, function(err) {
	return Promise.reject(err);
}
```

You can also use it on responses like this:

```tsx
axios.interceptors.response.use(function (res) { 
// filter out null or undefined values using filter()
    let filtered_names = res?.data?.names.filter((a) => a);
    return filtered_names;
  }, function (err) {
    return Promise.reject(err);
  });
```
In the response example, we're filtering an array of names that was passed back to make sure no null or undefined values are included. 

### Custom Axios Instances

One of the nicest use cases of Axios interceptors is the ability to add them to a custom axios instance for your project.

 If you are unfamiliar with Axios instances, it is a way to add all the data you need to send with each request automatically. 

For example: in our project we need to always have an access token header and the base URL of our api. We can create a custom instance like this:

```tsx
const customInstance = axios.create({
	baseURL: 'https://mytestingapi.com/api',
	headers: {'access_token': 'custom_token'}
});
```

Now whenever we need to perform a request with Axios, we can call *customInstance* instead and all our data will be included automatically. 

### Adding Interceptors To Custom Instances

Adding interceptors to Axios instances is done in the same way you'd do it normally, except instead of using the axios keyword, we'll use the name of our instance.

```tsx
customInstance.interceptors.request.use(function(){/* do stuff here */});  
```

### Conclusion

I hope you found this simple introduction to interceptors to be useful. It is worth checking out the Axios documentation if you want to learn more. 

Also don't forget to follow me on twitter @codespectremike to get notifications for my latest videos and articles.


[https://twitter.com/codespectreMike](https://twitter.com/codespectreMike)
React Portals: Intro
Tags: react, portals, javascript
Published: 2021-08-22 15:52:38


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc7yi6avk7bqavn7ma1j.png)

This article will cover -
- Basic intro to Portals in React.js
- Why & How to use react portals

## React Portals

Renders react components outside of root DOM element

## What is a Portal

React renders all its components inside a single root DOM element (ideally of id = "root").

If instead, we have a use-case where we want to render a component outside of this root element, we use a concept called **React Portals.**

## How to create Portals

Ideally, to bootstrap a react app, we use ReactDOM.render method to render our react app to root element.

```html
<div id="root"></div>
```

```jsx
ReactDOM.render(<SomeReactComponent />, document.getElementById('root)
```

Similarly, To create a portal we use ReactDOM.createPortal method which takes two parameters

1. React Component or JSX
2. HTML DOM element

```html
<div id="root"></div>
<div id="portal"></div>
```

```jsx
ReactDOM.createPortal(
	<h1>Portal goes here</h1>,
	document.getElementById('portal')
)
```

## Why to use React Portals

We can use Portals while creating a Modal or Popup as these occupy space outside of the normal element ordering/stacking. Modals sometimes cover the whole page for example take a look at the below code -

```html
<Wrapper style={{ maxWidth: '250px', zIndex: 1, position: 'relative' }}>
	<Modal open style={{ zIndex: 1000, postion: 'fixed', top: 0, left: 0 }}>
		<p>Some content inside Modal</p>
	</Modal>
</Wrapper>

<OtherWrapper style={{ zIndex: 100 }}>
	<div>some other content</div>
</OtherWrapper>
```

As per the example above, *Modal* is being rendered inside a *Wrapper* that has max-width limitation and a z-index set to 1. That means even though Modal has a z-index of 1000, it cannot be on top of everything because *OtherWrapper* has a higher z-index than *Wrapper*.

Hence, Modal(z-index=1000) will be still under OtherWrapper(zIndex=100) as Modal is inside Wrapper(z-index=1).

To overcome these kinds of issues, we can implement a Portal to render Modal -

```html
  <body>
    <div id="root"></div>
    <div id="portal-root"></div>
  </body>
```
```html
return ReactDOM.createPortal(
	<div>
		Modal content goes here
	</div>,
	document.getElementById('portal-root')
)
```

This will render the Modal component inside *portal-root* DOM element outside the root element. However, this is will be kept as usual in React component tree & events are listened & executed as before.

Thanks for checking!
Stay safe :)

References:
https://reactjs.org/docs/portals.html
Differences between Javascript and NodeJs
Tags: javascript, begginers, node, webdev
Published: 2021-08-22 15:50:39

At first it was hard for me to understand the differences because for me, they were the same thing. It was all javascript. But then, I started to understand what each one was used for. For this reason, I share it :)

> ☘ JavaScript is a language that runs inside web browsers as part of the documents loaded by the browser and is used as a client-side development language. It provides the behavior of the pages. Like HTML it provides the semantic structure and CSS the look and feel. 

However, being an interpreted language, it needs an interpreter to run. V8 is Google Chrome's JS engine and 'node' is a front-end that can be used to run JavaScript scripts outside the browser. In other words: 

> ☘  NodeJs is an open source, cross-platform environment that allows you to create server-side applications and tools using JavaScript. 


A short list of comparisons 🧐💻:

```
JS
🔴 Can only be run in the browsers
🔴 Used on the client-side
🔴 Capable enough to add HTML and play with the DOM
```
```
NodeJs
🟡 Can be run outside the browser
🟡 Used on the server-side.
🟡 Does not have the capability to add HTML tags
```
Getting Started with Vim Text Editor
Tags: vim, texteditor, tutorial
Published: 2021-08-22 15:35:08

Vim is a lightweight and powerful text editor popular on Linux systems. I use Vim mainly for fast editing of small files, such as a configuration file or a script file but it can of course be used for any text editing. This is a beginners guide just scratching the surface of Vim.

# Start Vim
Start Vim and create the file newfile.txt, or edit it if it already exists.
```
$ vim newfile.txt
```
Tips: vim `newfile.txt +3` will open the file and put the cursor to line 3 directly.

# The insert mode and normal mode
One thing making Vim a bit different from many other editors is the modes. I will only mention *normal mode* and *insert mode* in this article but there are more modes. 

When you start Vim you will enter *normal mode* automatically.

To enter text you need to be in *insert mode*. Simply press the `i` key or `insert` button to enter *insert mode*. Now enter some lines in the editor. 

Tips: Did you forget if you are in *normal mode* or *insert mode*? Check for the  `==INSERT==` message at the left bottom of your window. 

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

To enter the normal mode again, press the `esc` key.

# Navigate the text in normal mode
You navigate your cursor with your arrow keys or alternatively with the `h` , `j`, `k` and `l` keys:

* `h` - move left
* `j` - move down
* `k` - move up
* `l` - move right

It is totally fine to use the arrow keys, but the `hjkl` alternative is recommended for fast navigation since normally the arrow keys are located far away from the alphabetical keys and thus require more time to reach. However, using the `hjkl` instead of arrows requires some time to get used to. Give it a try!

Some more navigation options:
* `G` - Go to the last line of the document
* `gg` - Go to the beginning of the document
* `3G` - Go to line 3
* `20l` - Go to column 20 use `20l`.

Note: `20l` simply means repeat the l-command 20 times. 

# Search for a Word
To search for the word "Friend" from the *normal mode*, enter `/Friend` and press enter. It the word Friend is present in the document, the cursor will go to its first location. If you are familiar with the `less` program, you will be able to searach a document in Vim in a similar manner.

Note: The search is case sensitive by default.

# Save and Exit Vim
To save the current file and exit you enter `:wq` from *normal mode*. (If you are not in *normal mode* enter `esc` and then `:wq`).

# More Learning Resources
* In the terminal enter `vimtutor` for a beginner friendly introduction to Vim, including much more than this article.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/td467k4cnggbfbnyfe5y.png)
* [Vim adventure](https://vim-adventures.com) is a fun game for learning Vim commands. The first level is free, give it a try! If you buy the full game you will become an expert Vim user.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mm0tkke7dxmda01y8zl.png)
Interning at Kodecamp
Tags: programming, kodecamp
Published: 2021-08-22 15:29:04

Kodecamp is an online remote training that train you to be a developer. Beautiful thing is KodeCamp internship is FREE!. you gain relevant in-demand skills at your convenience. The program run for 16weeks 

**At kodecamp they have two Learning Tracks**

- Beginner Track: This track beginners into tech get to learn the fundamentals of web development.

- Intermediate Track: This track assumes you have the basic knowledge and trains you to know more programming languages.

- They have other tech related skills to learn like: CAD and others.

## My goal of joining Kodecamp back then was

1. Learn problem solving.
2. Improve my skills.
3. Learn Collaboration and team spirit.
4. To learn, unlearn, relearn certain things.
5. Experience.
6. Networking.
 

## Conclusion
Visit them at [kodecamp](https://kode.camp/)
How to create a component of Vue.js and publish to npm.com from scatch?
Published: 2021-08-22 14:50:58

创建组件目录
```
mkdir -p ~/packages/hello-npm
cd ~/packages/hello-npm
```

初始化组件
```
npm init --scope=@cuimingda --yes
```

初始化git，根据需要提交代码
```
git init
git remote add origin git@github.com:cuimingda/hello-npm.git
git add .
git commit -m 'init npm'
git push -u origin master
```

创建示例组件
```
mkdir -p src
vi src/HelloNpm.vue
```

我们在示例组件``src/HelloNpm.vue``中包含最简单的template、script和style
```
<template>
  <h1 class="demo-title">{{ title }}</h1>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello npm!'
    }
  }
}
</script>

<style>
.demo-title {
  color: red;
}
</style>
```

这时候其实就可以测试这个页面了
```
vue serve --open src/HelloNpm.vue
```

创建vue组件的包裹脚本``src/index.js``，这里没有使用``install``的方式，只是简单封装
```
import HelloNpm from './HelloNpm.vue'
export default HelloNpm
```

接下来创建Webpack的配置文件``webpack.config.js``
```
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

    entry: path.resolve(__dirname + '/src/index.js'),

    output: {
        path: path.resolve(__dirname + '/dist'),
        filename: 'index.js',
        libraryTarget: 'commonjs2',
    },

    plugins: [
        new VueLoaderPlugin(),
    ],

    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ]
            },
        ]
    }
}
```

修改``package.json``，增加一条脚本，顺便修改入口文件地址
```
"main": "dist/index.js",
"scripts": {
  "build": "webpack --mode production"
},
```

这时候先安装一下``Webpack``需要的组件，注意只要安装成开发依赖就可以：
```
yarn add webpack webpack-cli vue-loader vue-template-compiler css-loader style-loader --dev
```

这时候就可以直接用``Webpack编译组件了``，编译完成后，会发现``dist``目录多出了一个``index.js``文件。
```
yarn build
```

这时候其实我们就可以在本地引用这个组件了，只是不使用组件名称，而是使用本地路径
```
yarn add ~/packages/hello-npm
```

调用方式跟真实的组件是一样的：
```
<template>
    <div class="container">
        <hello-npm></hello-npm>
    </div>
</template>

<script>
import HelloNpm from '@cuimingda/hello-npm'
export default {
    components: {
        "hello-npm": HelloNpm,
    }
}
</script>
```

本地测试如果没有问题，就可以准备发布了，先登陆，会提示输入用户名、密码和邮箱，如果没有npm账号，甚至可以用``adduser``在命令行注册一个
```
npm login
```

如果不确定是否登陆过，可以用``whoami``命令验证，登陆了也可以用``logout``注销登录
```
npm whoami
npm logout
```

登陆以后就可以发布了，记得在发布之前要``build``
```
yarn build
npm publish --access public
```

如果之后更新了组件，首先是在``build``以后在本地测试，然后提交``git``，然后更新npm版本，注意``npm version patch``会自动在第三个版本上加一，最后发布。
```
yarn build
git add .
git commit -m 'new patch'
npm version patch
npm publish
git push -u origin master
```
Effortlessly install TailwindCss in a Rails app with Webpack (minimum configuration)
Tags: tailwindcss, webpack, rails, gem
Published: 2021-08-22 14:26:28

A while back [DHH](https://twitter.com/dhh) decided to created a [gem](https://github.com/rails/tailwindcss-rails) for easily installing TailwindCss into rails apps 🙌🏻. This gem could be used to install Tailwind through the asset pipeline as well as using webpack. This [changed](https://github.com/rails/tailwindcss-rails/issues/62#issuecomment-900193727) later on as contributors wanted to focus their attention to what was the heart of the gem 🥺.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif">


Well, since a lot of people used this gem to get a new Rails app going with Tailwind without the hassle of configuring everything from scratch (including colleagues from my company), [we decided](https://dev.to/wizardhealth) to create a [new gem](https://github.com/WizardComputer/tailwindcss-rails-webpacker) 🎉. This gem installs Tailwind with Webpack and has production purging enabled. Other Webpack specific problems are to be addressed as well.
Injecting pre-rendered widgets/content
Tags: react
Published: 2021-08-22 14:03:16

Hi! First time member and post. I had a question that I tried to find an answer for, but likely wasn't searching the right terms.

We have two teams building React experiences. One who is building the core page, and another that owns widget experiences (think carousels that are componentized, have data and specific logic attached). Is there a concept within React of "injecting" these carousels into the body of a page? Does this impact SSR, performance or security?

Many thanks in advance
[motivacional dev] Meu setup é bom o suficiente para me tornar uma pessoa desenvolvedora?
Tags: dev, motivation, braziliandevs
Published: 2021-08-22 14:00:22

*Foto de [Ann Nekr](https://www.pexels.com/pt-br/@ann-nekr-3111643?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels) no [Pexels](https://www.pexels.com/pt-br/foto/computador-laptop-preto-e-prata-na-mesa-branca-5798001/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)*

É muito comum vermos setups maravilhosos, cheios de led, com muitas telas e tudo mais por ai. E, a não ser em raríssimos casos, uma pessoa que está iniciando na área não terá um setup tão chamativo assim. Quero falar um pouco sobre isso.

Quem nunca ficou encantado com aquelas imagens de setup com duas telas, com leds e tudo mais? A maior parte de nós pelos menos, fica. Mas o que fazer se não tenho tais coisas e tudo que tenho é um PC ou noteboook batido pra estudar ou fazer uns jobzinhos?

Esses dias estava pensando sobre esse assunto, cheguei até a fazer uma thread no Twitter:

<blockquote class="twitter-tweet"><p lang="pt" dir="ltr">Geralmente quem está começando na área de desenvolvimento se sente frustrado ao se deparar com setups super customizados, duas telas ou telas gigantescas, e quando olha pra o que tem em mãos, na maioria das vezes, é um PC &quot;comum&quot;. Uma cadeira &quot;comum&quot;... [continua]</p>&mdash; Tadeu Barbosa (@TadeuBarbosaa) <a href="https://twitter.com/TadeuBarbosaa/status/1428674751246049281?ref_src=twsrc%5Etfw">August 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

É algo que realmente gostaria de compartilhar com pessoas que estão iniciando na área! Não se sinta frustado por começar estudando num celular, num notebook as vezes lento que só ele. É preciso entender que cada um de nós está em um momento diferente, que cada um tem uma vida diferente, tem problemas e questões diferentes. Por isso precisamos nos focar no que realmente importa: conhecimento.

Construa seu portfólio
----------------------

Uma das coisas que você pode fazer é construir o seu portfólio. O seu contratante não quer saber de onde você está fazendo, quer saber se você pode fazer o que ele precisa. Crie coisas, desenvolva ideias, use a imaginação. E o mais importante: Use o Github! Use suas redes sociais para postar tudo que está aprendendo. Conheça mais sobre o mundo open source. Saiba como você pode ajudar outras pessoas, outros grupos, com um simples comentário ou documentação.

Conheça pessoas
---------------

Uma das coisas mais importantes no mundo dev é o contato com outras pessoas. Tanto pessoas desenvolvedoras, quanto pessoas de outros meios, outras áreas etc. Isso te trará benefícios maravilhosos.

Aproveite o momento
-------------------

Não foque no que você não tem! Não fique preocupado com isso! Siga seu caminho, siga os seus sonhos e aproveite o momento. Uma das coisas que a preocupação excessiva pode causar é a depressão, é o pensar de mais no futuro, pensar de mais nos outros e esquecer de você.

------

Espero que esse post possa ser útil em sua jornada! Até a próxima!