teleren/devto huggingface dataset:
Minimal webpack configuration to build typescript
Tags: webpack, typescript
Published: 2021-07-08 18:10:01

Let's take a look on a minimal webpack configuration needed to build typescript.

# Demo page

`index.html` loads the js from the default webpack output location

```html
<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Webpack ts example</title>
    <link rel="shortcut icon" href="#" />
  </head>
  <body>
    <script type="text/javascript" src="dist/main.js"></script>
  </body>
</html>
```

The demo code is in `src/index.ts` - a file that is loaded for the default entry point. The code is simple:

```ts
const element = document.createElement("div");

element.innerHTML = "hello world!";

document.body.append(element);
```

# Configuration

For this to work, we need 2 configuration files. 

Webpack configuration goes to `webpack.config.js`:

```js
module.exports = {
  resolve: {
    extensions: [".ts", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.ts$/i,
        use: ["ts-loader"],
      },
    ],
  },
};
```

`extensions: [".ts", ".js"]` make webpack attempt to load ts when extension is missing, and makes it try TS before JS. Object added to `module.rules[]` sets `ts-loader` for all files that ends `.ts`.

The ts configuration is in `tsconfig.json`:
```json
{
  "include": ["src/**/*"]
}
```

# Dependencies
All dependencies that we need to install:
```sh 
$ npm install --save-dev webpack ts-loader typescript
```

This could work would without installing `typescript` explicitly - but it's better idea to specify the dependency ourselves & keep it simple to pin the version if ever we will want to it.

# Running code

{% asciinema 424582 %}

# Links
* [webpack video course](https://bit.ly/WebpackCourse)

# Summary

In this article we have seen to what's the minimal webpack configuration to build ts files. If you want to play with the code, you can find the repo here:

{% github marcin-wosinek/webpack-ts no-readme %}

The working example page:
https://marcin-wosinek.github.io/webpack-ts/
Introducing Indiepen: A privacy-friendly tool to embed HTML, CSS & JS code examples
Tags: webdev, privacy, javascript, news
Published: 2021-07-08 17:47:17

When [André](https://twitter.com/_andrewsecret) and I launched our [blog](https://yetanother.blog) last year, we always wanted to create a simple, performant, and accessible tech blog. We live in Europe so we have to deal with cookie law banners, privacy policies or other legal details. It was clear to us, that cookie law banners are super annoying and we wanted to do everything we can to avoid such a bad experience. On the other hand, we also wanted to have a lively blog with cool integrations such as showing code examples directly on our blog. Sadly, many existing solutions set cookies, have a ton of features or just a bad performance so we had to come up with our solution.

## Demo

Let me introduce [Indiepen](https://indiepen.tech/): A privacy-friendly tool to embed HTML, CSS, and JS code examples. See the website for a live demo!

With Indiepen, you generate a code snippet and integrate it on your website. Indiepen takes care of fetching the HTML, CSS, and JS files and providing a shiny preview of the code example. The cool thing: Indiepen is not a hosting
platform, instead, you provide an URL of your code example, and Indiepen does the rest. You can host your code examples with every hosting provider!

If you want to learn more, check out the [getting started guide](https://indiepen.tech/#get-started).

## At a glance

No one likes to read wordy articles, so here are the features at a glance:

* Fun: Embed your HTML, CSS and JS code examples with ease
* Fair: No cookies, no tracking, no external requests
* Fast: Small footprint with less than 20 KB
* Inclusive: Features built for everyone
* Transparent: Open-source software

## Open source

Indiepen is our first open-source project, and we are super excited to share our ideas of a fast, fair, and transparent web with you. We can’t wait to hear your feedback! Feel free to check out [our code on GitHub](https://github.com/yetanother-blog/indiepen/), open an issue or create a pull request. We built Indiepen because we wanted to embed code examples on our blog, but now it’s time to see what you do with our little
project.

That’s it for today. Get in touch with me on [Twitter](https://twitter.com/henrik_fricke) or [LinkedIn](https://www.linkedin.com/in/henrik-fricke/).

Cheers ✌️
Developer Secret News
Tags: devjournal, security, news
Published: 2021-07-08 16:59:28

These are **secret** news, keep them in the down low, and don’t share them with anyone.

1. We write unnecessary code.
2. What we think the code will do is wrong.
3. Not everything is testable.
4. Not everyone will understand the code you write.
5. Code is not always extendible nor manageable.
6. The Software you build for a company will never be for the greater good.
7. You are being exploited, and your job exists because others get exploited.
8. You will never know everything there is about Software.
9. Technology moves in the direction of money, not progress.
10. Software will never keep up with real life.
11. AI will neither save us nor destroy us.
12. Things change around you; you don’t change things directly.
13. You don’t need everything in your tech stack.
14. Your architecture is unnecessarily complicated.
15. Your documentation is not good.
16. Every computer system is compromised.


<figure class="img center"><img src="https://rmcomplexity.com/assets/images/george-carlin-secret-news.gif" style="max-width:200px;" alt="George Carlin hiding because these are secret." class="img-responsive">
  
  <figcaption><em>Don't look at these for too long!</em></figcaption>
</figure>
How to Replace All Occurrences of a String
Tags: javascript, developer, codenewbie, methods
Published: 2021-07-08 18:21:07

---
title: How to Replace All Occurrences of a String
published: true
date: 2021-07-08 17:33:02 UTC
cover_image: https://cdn.devdojo.com/posts/images/July2021/how-to-replace-all-occurrences-of-a-string.jpg
tags: javascript,developer,codenewbie,methods
canonical_url: https://devdojo.com/bo-iliev/how-to-replace-all-occurrences-of-a-string
---
# Introduction

One of the main data types in JavaScript is `strings`. These data types are used for storing and manipulating **text**. And luckily for us, there are quite a few methods that help us in manipulating these data types.

These methods are one of the many built-in methods of JavaScript. This is because JS has some built-in objects. Some of them are: `Array`, `Math` and `String`. And for each object, some properties and methods are associated with them.

In this post we are going to see **How to Replace All Occurrences of a String** with the `replaceAll()` method.

# `replaceAll()` Method

In order to use this method, we first have to create our string. Let's add randomly `!` inside this strong so that we can remove it.

```
let intro = 'My! n!ame! i!s Bo!yan!';
```

Now to remove it, we have to write the strings name, then add the `replaceAll` method next to it, and pass in the first argument which element we want to be replaced or removed. An important thing is to remember that you have to save the new string into a new variable. It should look something like this:

```
let newIntro = intro.replaceAll('!', '')
console.log(newIntro);

<- My name is Boyan
```

Now if you want to replace the elements, just pass in the second argument as what you want it replaced with. Let's replace the whitespace with `-`.

```
let newerIntro =newIntro.replaceAll(' ', '-');
console.log(newerIntro)

<- My-name-is-Boyan
```

# Conclusion

This is pretty much it to the `replaceAll()` method. It is the main method used, if not the only method, that replaces all occurrences of a string.

I hope that this post has helped you and I would love to hear some feedback in the comments below.
How to use AVIF today!
Tags: avif, image, compression, picture
Published: 2021-07-08 17:24:08

<small>Original Post: [https://praveenpuglia.com/blog/how-to-use-avif-today/](https://praveenpuglia.com/blog/how-to-use-avif-today/)</small>

Short one!

I am currently working on revamping my website, which I am hoping will be up soon! I am taking this opportunity to move away from [Jekyll](https://jekyllrb.com/) and choosing to go with [Eleventy](https://www.11ty.dev/). To be honest, I am enjoying it quite a bit. Hopefully a post on that will soon be up.

One of the interesting things that I wanted to try out is to serve AVIF images because [boy it compresses](https://squoosh.app/)! Hoof! You can literally get the same quality in less than half the size.

Here' the thing though. [AVIF support](https://caniuse.com/?search=avif) is pretty flaky at the moment. That means I would have to serve AVIF image to browsers that do support it and serve a diff format to those who don't.

Good'ol `<picture>` element comes to rescue. We declare multiple `source`s pointing to the same image in diff formats. The browsers pickup the best image they support. So Chrome and Opera end up serving AVIF to us and others serve the WEBP version.

```html
<picture>
  <source srcset="home-banner.avif" type="image/avif" />
  <source srcset="home-banner.webp" type="image/webp" />
  <img
    class="home-banner"
    decoding="async"
    loading="lazy"
    src="home-banner.webp"
    alt="Home Banner"
  />
</picture>
```

If you are wondering why we are using that `<img>` tag inside `<picture>`, please [head over to MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture).

That's it!

Read More

- [https://jakearchibald.com/2020/avif-has-landed/](https://jakearchibald.com/2020/avif-has-landed/)
- [https://avif.io/](https://avif.io/)
Accessing Handlebars variables in an outer scope
Tags: rust, javascript
Published: 2021-07-08 16:16:26

This weekend I learned some unfamiliar behaviors with the way Handlebars handles nested variable scopes. I typically use Handlebars via the [handlebars-rust](https://github.com/sunng87/handlebars-rust) implementation which aims to maintain nearly one to one compatibility with the [JavaScript implementation](https://handlebarsjs.com/). They have block scope helpers such as `#each` and `#with`, both of which create an inner scope for variable resolution. Unfortunately, the syntax can be quite unintuitive for accessing outer scope once in those nested scopes.

Handlebars is a largely declarative templating syntax which uses curlybraces such as `{{var}}` for variable and helper substitution. The `#each` helper is important for loops, imagine the following data structure:

```json
{
  "repos" : [
    {
      "name" : "otto"
    },
    {
      "name" : "l4bsd"
    }
  ],
  "mood" : "cool"
}
```

This could be rendered into a list on a page via:

```html
<ul>{% raw %}
    {{#each data.repos}}
        <li>{{name}}</li>
    {{/each}}{% endraw %}
</ul>
```

Inside the `#each` block the values of the indexed object become the scope for variable resolution, such that `{{name}}` actually refers to `data.repos[i].name`. This presents problems when the template must refer to outer scope variables, such as `mood`. In the Rust implementation this variable resolution can be accomplished through a path traversal style syntax such as:

```html
<ul>{% raw %}
    {{#each data.repos}}
        <li>{{name}} is {{../data.mood}}</li>
    {{/each}}{% endraw %}
</ul>
```

The `../data.mood` is all that's needed to refer to the variable in the outer scope of variables. Not what I expected at all, and the only reason I found it was because I found [an old issue](https://github.com/sunng87/handlebars-rust/issues/416) which alluded to the syntax and gave it a try.
DuckEngine - A 2D Game Library for the web
Tags: javascript, gamedev, webdev, showdev
Published: 2021-07-08 17:08:11

# ![DuckEngine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9upykoiouvkcolskt4cp.png)

A 2D Game Library for the web.

<https://github.com/ksplatdev/DuckEngine>

## Features

1. Collision Physics
2. Sprites & Sprite sheets
3. Many Game Objects
4. Particle System
5. Scenes
6. Cameras
7. Cutscenes
8. Mobile Scaling
9. Keyboard and Mouse input
10. And a lot more

## Demos

All demos are bundled with parcel-bundler and are all on codesandbox.

### [Space Shooter Game](https://codesandbox.io/s/duckengine-space-shooter-64wkg?file=/src/scene.js)

### [Test Template](https://codesandbox.io/s/duckengine-test-7gfbt?file=/src/scene.js)

### [Particle Test](https://codesandbox.io/s/duckengine-particle-test-dhcr1?file=/src/scene.js)

### [Tilemap test](https://codesandbox.io/s/duckengine-tilemap-test-ryqqz?file=/src/scene.js)

## Download

### Github

1. Download the [latest release](https://github.com/ksplatdev/DuckEngine/releases/latest).
2. Set up webpack or parcel. (or any other bundler)
3. Import DuckEngine.
4. Read the [docs](https://ksplatdev.github.io/DuckEngine/).

### NPM

1. Run `npm install duckengine`.
2. Set up webpack or parcel. (or any other bundler)
3. Import DuckEngine.
4. Read the [docs](https://ksplatdev.github.io/DuckEngine/).

## License

[MIT](https://github.com/ksplatdev/DuckEngine/blob/main/LICENSE)
Atomic Design in Laravel using blade components
Tags: laravel, design
Published: 2021-07-08 16:52:18

Structuring your front end code can become cumbersome as your project starts to increase. Atomic design thinking is an amazing way to structure your code and achieve flexibility, consistency and code reuse.

Laravel blade components is an amazing way to create server side rendered components. Though they are not like React or Vue components but they are bit similar in the way that you can pass the props and have the code reused. In this video, I will show how to do atomic design in a Laravel app using blade components.

https://youtu.be/XvqMPsdEiSQ
Code-on-Canvas. Develop and Design at the same time.
Tags: ux, javascript, react, webdev
Published: 2021-07-08 16:45:07

Code plus canvas are a match made in heaven. Code lets you express any complex idea, using logic, state, etc. And a canvas for visual design lets you compose, layout, and experiment quickly with different interfaces — [Framer lets you combine both](https://www.framer.com/developers?utm_source=dev.to&utm_medium=link&utm_campaign=developers).

{% youtube Is-nojnY61M %}

[Framer](https://www.framer.com/developers?utm_source=dev.to&utm_medium=link&utm_campaign=developers) is a no-code tool for interactive design. It has a performant free-form canvas for direct manipulation like many other design tools. But the canvas was made in React, so it can render any React Component, including the ones you code yourself right inside the tool. You can even add custom UI for your component props and instantly share your components with anyone.

Code in Framer lets you extend the tools capabilities. By using Code Components (React components) or Code Overrides (Higher-Order Components) you can create advanced interactions on top of your designs, share state, load real data from an API, and pretty much anything else you can think of. It’s a truly [hackable design tool](https://www.framer.com/developers?utm_source=dev.to&utm_medium=link&utm_campaign=developers).

And with a major update to the editor and compiler to build components, the experience just got a whole lot smoother. The editor now uses swc and wasm to instantly preview your changes (or show errors). It’s a pretty nice way to build components directly in Framer, but of course you can also use external code from npm or other tools like CodeSandbox.

Framer code is fully built on [ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). That means that every module you make in Framer automatically becomes an ES module. That way it’s instantly shareable across your projects and your team member’s. But it’s technically even how they’re rendered on the canvas.

Because we integrated ES modules fully in the in-app editor, you can import any http based ES module and use it in Framer directly, even from npm. No more `yarn install`, just import the full http URL where the ES module lives:

```.jsx
import _ from "lodash" // Old way (need to install)
import _ from "https://jspm.dev/lodash" // ESM way
```

---

### Get started

You’ll be able to pioneer new ideas faster than ever before, create custom code solutions to uplevel your whole team, and share with the whole world with a simple link. 

Explore our all-new [Framer for Developers site](https://www.framer.com/developers?utm_source=dev.to&utm_medium=link&utm_campaign=developers) to get started. Find cool examples or start playing immediately with our code playground. And finally, join us on Discord for help or questions from a community of 6,000.
Como subir um servidor simples?
Tags: javascript, html, node, tutorial
Published: 2021-07-08 16:44:48

####Requisitos básicos:
• NodeJS
• NPM

* Para subir um servidor simples, sem babel e es6, precisamos apenas de uma pasta com um `index.js` dentro. 
* Começamos acessando o nosso terminal(qualquer um que tenha como diretório a pasta que estamos modificando), damos um `npm init -y` para criarmos nosso `package.json`.
* Quando estivermos com ele ja criado, vamos baixar o koa com `npm i koa --dev` para dentro das nossas dependencias de desenvolvimento.
* Feito isso, podemos pegar agora nosso arquivo `index.js` e digitar:
```
 const koa = require('koa');
 const app = koa();
 const port = 3000;

 app.listen(port, () => {
     console.log(`Servidor rodando na porta ${port}`)
});
```
* Digitamos `node index.js` no nosso terminal. Se aparecer a mensagem que digitamos no `console.log` e nosso diretório sumir, é que estamos com o servidor local on-line. Caso você queira derrubar o servidor, basta segurar Ctrl + C, que o próprio terminal vai perguntar se você quer mesmo derrubar o server ou não.

Com isso, já podemos rodar o nosso servidor, porém é recomendável fazer uma configuração com um transpiler (`babel-cli` e o `babel-preset-env`) para rodarmos novas features do ES6 como `import`, `export` e etc...

Obrigado a todos que leram e espero ter ajudado alguém, qualquer coisa é só mandar um feedback!! Também estou aprendendo e gostaria muito de receber alguns :)
Communication in Node JS
Tags: node, webdev
Published: 2021-07-08 16:39:43

We all know that the application makes an API call to get data and display them. so let's see how things work. I will keep it crisp.
	
* Firstly, your application makes an HTTP request call to the Node server.
* Now, the Node server gets the request function and makes a call to a remote server for the requested service.
* Without waiting for the response message from the remote server, the node immediately returns a response. which indicates the request was sent successfully.
* When Node receives an HTTP response message from the remote server, it calls the call back function that has been defined in the HTTP request function call.
* This callback function returns an HTTP response message to the calling application,
	
	Ok, now let's see this in a real-time example.
	
 Let's consider you are hungry and order some food, ill leave the choices to you.
	
* First, you will open the APP  to select our choices and place the order. (This is the HTTP request that the application makes to Node JS) 
* Now the restaurant receives the order placed and forwards the order to their kitchen.
* The restaurant would send an order accepted message to you, without waiting for the food to be actually prepared. (This is the immediate response node, which indicates the status of the request).
* Finally, when the food preparation is done, a delivery executive will be assigned for the order. (The delivery executive is the call back function that you defined in the HTTP request).
This executive reaches out and delivers you food. (This is the HTT response message )
	

I hope, you got an high-level understanding of node calls are processed.

Thank you for being patient with me for my first post, if any beginner errors. I will improve myself in upcoming posts.
Build Gmail Clone using HTML & CSS 
Tags: webdev, html, css, tutorial
Published: 2021-07-08 16:22:50

## Getting Started
In this video,we will build gmail clone using html and css.This  tutorial is target towards beginners who want to improve their design skills by cloning website using html and css.
Download the starter file via [github](https://github.com/learnwithchristopherglikpo/gmail_clone) in order to follow along with the video.

{% youtube ve9I2tcl_d0 %}

If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Copy rich HTML with the native Clipboard API 📋
Tags: javascript, dom, html, clipboard
Published: 2021-07-08 15:57:15

---
title: Copy rich HTML with the native Clipboard API 📋
published: true
tags: javascript, dom, html, clipboard
canonical_url: https://stegriff.co.uk/upblog/copy-html-with-native-clipboard-api/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rge8renrfun4yfrdd3xv.jpg
---

The relatively new Clipboard API in browsers lets you load up the user’s clipboard as though they’d copied something themselves. 

Copying text or images is fairly well documented, but examples writing **rich text (as HTML)** are harder to come by.

At time of writing, this is [implemented in Chrome 86+](https://www.chromestatus.com/feature/5357049665814528) and [in Safari](https://webkit.org/blog/10855/). I got the content for this post from the [Glitch project created by dsleeps at Google](https://glitch.com/~hyper-silly-cross).

## How to copy rich text HTML onto the Clipboard API

This sample assumes you have a `<div class="js-output"></div>` which contains your HTML to copy.

I’ll cut right to it:

```js
try {
  const content = document.getElementsByClassName('js-output')[0].innerHTML;
  const blobInput = new Blob([content], {type: 'text/html'});
  const clipboardItemInput = new ClipboardItem({'text/html' : blobInput});
  navigator.clipboard.write([clipboardItemInput]);
} catch(e) {
  // Handle error with user feedback - "Copy failed!" kind of thing
  console.log(e);
}

```

Key things:

- Get the HTML string (I’m using `innerHTML` of an element for this)
- Create a new `Blob`. 
  - [Param one](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob#parameters) must be an Array-like or a `USVString` value. So we wrap our HTML content in an array.
  - [Param two](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob#parameters) is an options object, where we set the MIME type.
- Create a `ClipboardItem` around the blob, specifying MIME type _again_
- Finally, write the `ClipboardItem` to the clipboard API.

## Demo

I have a quickly-made Vue app with a ‘Copy to Clipboard’ button at [https://stegriff.github.io/deployment-complete/](https://stegriff.github.io/deployment-complete/). Source repo at [https://github.com/stegriff/deployment-complete](https://github.com/stegriff/deployment-complete).

I hope this tutorial helps you! What will you make? 📋