teleren/devto huggingface dataset:
DML : User Web Module
Tags: dml
Published: 2021-07-29 06:58:01

I like this functionality very much.
Look how you can get a reference to the element newly created in the last line of the below sample.


You can test it here : [UWM](https://flems.io/#0=N4IgtglgJlA2CmIBcA2AzAOjQFgDQgGd4EBjAF3imRAwAsyxYR8CSAnAe1iaQG0AGXPwC6+AGYQEBZL1AA7AIZhESGvUbMQJDnIq7qAHnWwABLAVyA5gF4AOiCjx7APltyTJo-AVRX7z8pkCiYktApsRGR2IACuZGIAtAAcLm4eHgZkEGQIzlk58AYA9Pm5aekGgcGKytEAbhDwAO4ADhxsZPYhOnpR9k3QZLTWjg0k8AkDUEO4JhBy2RAKsAmsy-DWAIwY-Kn+GaxsEC1kJgRsJNH0ZC0ESEVF8GItCpbwGI5FACIAsgAy33+AH1aBxlC83kVYBAAEaAv4JSByDAAKwILmKh2OZD8GSKtG8vjc5QMMI4UAAnrjPLRNtSAKpENgmRwSOSUExNeAwkxgckxKQk-F04n+AxYk7UjxiGJycgQHS8ikASTkLTiAAoCLMpkMAJQmYDldJzOTQ9lfCB1LUvORavWzewUAAeZASywgljkSDMT06ID1GAIZApCAwutoJmsnMGkYA1CZ7C1nfYANzG9IIU5seCnaPzdVkAAq8FdGvs9lmRv2JpMMIURAAgmQyEcYT77GBwpZ5j60MnU4nmBmTRJiFAAOqxn28Tb8QQmOciXAjkwAXz16ZrHhzZBibHcu8HDxMACVc-vD094Dm5fATGJ2iYFCRxgR0TW1xnaeWQKrCwkJbBvYm4ZmAKpqpq9gAMqgh0laLvOoE1uB-5QSAABqN4Un8OiWAhS7ISaWYmGwyhQBAMRgFGSpoWQv4-JQlFgARSFbiaZFMVRGA6AWcQ0Rq8AGtYzjdHIBBcO8sAcJYgkYEEbBvGQGB1MsMRCUKEo4kKZKUn4xTGM4mhEKQWQ6NIqgAEwoEgmybCAa64PISgqDQaKaNoujwPoqgOU5IA1K5GAkO+Hk9N5ZDUA5whrkAA)

```html
<html lang="de">
  <head>
  <meta charset="utf-8">
    <title>title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
  </head>

  <body>
  <h1>
  User defined web modules
  </h1>

  <script>
    function myInput(s, width) {
      inlineDiv(span(s), "text-align: left").style.width = width + "px";
      let ret = inputText("", {
        baseAttrib: "margin: 3px; ",
        fieldWidth: [100, 100],
      });
      return ret; // Return reference for access
    }
    h1("Input-Test");
    myInput("Short", 100);
    myInput("VeryLong", 100);
    let rmedium = myInput("Medium", 100);
    rmedium.oninput = (e) => console.log(e.target.value)
  </script>
  </body>
</html>
```
How to test your NPM package locally
Tags: npm, javascript, testing
Published: 2021-07-29 06:36:35

We made our very [first NPM package](https://daily-dev-tips.com/posts/publish-your-own-npm-package/), and briefly touched on how to test it locally.

However, I felt this needs some more explanation.
As I hit this wall when making my NPM package.

You don't want to be that person pushing new versions just so you're able to test if something works.

And trust me, I did this 🤦‍♂️.

## Link your NPM package locally

The first step is to open a terminal and navigate to your NPM package on your machine.

Now execute the following command in the terminal:

```bash
npm link
```

This command will link this local package to your globally installed packages.

## Import the link in a test project

On the other side, we need to link this package to the test project we want to try it out in.

Navigate to the test project and execute the following command.

```bash
npm link {package-name}
```

I named my package `npm-calculator`, so I have to run:

```bash
npm link npm-calculator
```

Now, if we look at our node_modules, we can see this is a symlink now!

![Link a local NPM package](https://cdn.hashnode.com/res/hashnode/image/upload/v1627018880474/78ybxp50m.png)

Now let's also actually try if it works. By creating a test index file, we can import our NPM package.

```js
const {add, subtract, multiply} = require('npm-calculator');

console.log(add(1, 5));
console.log(subtract(10, 5));
console.log(multiply(2, 6));
```

When we run the code now, it works. Our NPM package is loaded and worked locally.

![How to test your NPM package locally](https://cdn.hashnode.com/res/hashnode/image/upload/v1627019052208/_LJY3ELiS.png)

To try this out, edit your NPM package by, for instance, adding a console log. This is just for the sake of testing the local link.

I'll add a log in the add function.

Now without doing anything, head back to your test app and re-run the code.

![Changed local NPM package](https://cdn.hashnode.com/res/hashnode/image/upload/v1627019207297/kgXI6zSNT.png)

As you can see, our change works right away!
This makes for a much quicker development experience.
And again, once you're happy with this, you can go ahead and [publish your NPM package to the registry](https://daily-dev-tips.com/posts/publish-your-own-npm-package/).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Day 156
Tags: 100daysofcode, programming
Published: 2021-07-29 06:20:03

Day 156/200 of #200DaysOfCode #100DaysOfCode 

- Solved five problems on Codewars.

1 -  Closures and Scopes (6 kyu)
2 -  sum function (6 kyu)
3 -  You Can't Code Under Pressure #2 (7 kyu)
4 -  Currying functions: multiply all elements in an array (7 kyu)
5 -  Understanding closures - the basics(7 kyu)
Resumable file upload with TUS protocol
Published: 2021-07-29 06:19:01

```
"Work half done is still some work done"
```

We all have faced problems while uploading a file. Whether it is an error with a file exceeding the maximum upload size or failing to write a file to disk.

Here, in this blog, we are going to talk about partial upload failing. We all have been to that place where we have uploaded a huge file and have been waiting for minutes if not hours to finish the uploading process. Finally, the moment comes when our upload is about to be completed but then some error occurs, and our upload fails.

Now, you have to go through all the trouble to re-upload it, which is irritating as well as time-consuming.

There might be various factors for such failure. Such as a weak internet connection, your browser might crash, etc.
So, what can we do? Should we re-upload the whole file? But then again the re-uploading process will take the same amount of time and effort that it required earlier. If only there was a way that we could continue from where the last failure occurred.

Well, we are in luck because the answer is simple, "TUS upload".

## What is TUS?

TUS stands for Transloadit Upload Server.

"TUS is a protocol for resumable uploads built on HTTP. It offers simple, cheap, and reusable stacks for clients and servers. It supports any programming-language, any platform, and any network."

## Why TUS?

So, the question may arise, Why do we need TUS? The thing about TUS is that it allows us to continue uploading our file from where we left off even after it has failed previously.

For example, We are trying to upload a file of 100 GB and due to some interruption, we were able to upload only 60 GB of the data. Normally, we would re-upload the file which means we will be uploading the 60 GB of the same data that was already uploaded in a prior upload. But, using TUS we won't need to upload that 60 GB we will be uploading the remaining 40 GB of data.

## Pros

- It is built upon HTTP and supports any programming-language, any platform, and any network.
- The main advantage of using TUS is that you can start uploading files from the point where you left off last time.
- It is open source. So, anyone can use and contribute to it.
- It allows the user the ability to pause and resume the upload anytime they want(even after multiple days).
- It can handle increasing numbers of connections and uploads.

To see a demo of how it works you can visit the [Resumable File Upload Demo](https://tus.io/demo.html) and for real-life implementation of TUS resumable upload protocol have a look at [this](https://tus.io/implementations.html).

This brings us to the end of this blog. In the next blog, we will look into specifications for the TUS protocol and its HTTP methods.
HTML tags | pre
Tags: html, tags, pre
Published: 2021-07-29 06:11:12

It is used to **display text as it has been written in the HTML**, keeping spaces and line breaks.

The browser will display the text **using the default monospaced font**, unless it is overwritten with CSS.

When using preformatted text to represent an image or diagram, **it is important to provide an alternate description** for people who use assistive technology to navigate, such as a screen reader. To do this, a combination of `<figure>` and `<figcaption>` will be used, plus a combination of an `id` and the `role` and `aria-labelledby` attributes as follows:

><figure role="img" aria-labelledby="cow-caption">
>  <pre>
>  ___________________________
>< I'm an expert in my field. >
>  ---------------------------
>         \   ^__^
>          \  (oo)\_______
>             (__)\       )\/\
>                 ||----w |
>                 ||     ||
>  </pre>
>  <figcaption id="cow-caption">
>    A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.
>  </figcaption>
></figure>

- Type: *block*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) | [Support](https://caniuse.com/mdn-html_elements_pre)
How to rank your website #1 on Google
Tags: webdev, google, frontend
Published: 2021-07-29 06:10:50

How to rank your website #1 in Google?
first, learn what is SEO?
Search engine optimization is the process of improving the quality and quantity of website traffic to a website or a web page from search engines. SEO targets unpaid traffic rather than direct traffic or paid traffic.
Learn how to analyze traffic
and study the market.
use  website like Similarweb.com
or semrush.com
to analyze your website traffic.
There are 4 levels to improve your website ranking in Google
first is  website and content.
Technical Requirements for the Website 
Website is available and notifications are set UptimeRobot
Website is indexed by Google (check with the command site: ) 
Website download speed is in the range between 1-3 sec (check with the Pingdom Tools)
Website is in the "green zone" of adaptivity in Google Page Speed Insights 
Website is adaptive according to the Mobile-Friendly Test
Website is in the Google Search Console 
No signs of sanctions and hacks in Google Search Console
The Search Traffic Report shows stable growth in Google Analytics 
The Content
You have relevant content (from 500 words) on the main pages that are promoted 
Unique content(check with Advego Plagiatus or Content Watch)
Content is regularly cached every few days (command cache:)
2nd level of website optimization is keywords:
Keywords Selection
use Keywords Planner from Google
https://t.co/vpFNr9zEuQ
nner/

Trends Analysis from Google
https://t.co/r4UrsbfHym
use internal optimization.
Internal Optimization
● Title
● Description
● Text on web-pages
● URL
● H1, ALT, internal links etc.
3rd level of SEO is links
Analyze your and your competitor using Ahref.
Instruments to check backlinks
https://t.co/nd4VtnacEa
https://t.co/AJiIHKu1d3
https://t.co/Zg6fYCzQKE
Where Do We Take Links?
White-Hat links
● Content Marketing, Outreach and Influencer Marketing
Grey links
● Buy links from web-masters
● Buy links from backlink services or stocks
● Crowd Marketing
● PBN
"Black hat” links
● Spam and Hacking
4th level of SEO 
UX
Brand
Social
Run JupyterLab on SAP BTP Cloud Foundry
Tags: python, cloudnative, cloudfoundry, sap
Published: 2021-07-29 06:07:52


What is Jupyter Notebook?

Jupyter Notebook is an open-source web application used to create and share documents that have live code, equations, visualizations, and text. It’s maintained by the Project Jupyter community. In 2014, Project Jupyter and Jupyter Notebook became spin-off projects from IPython and the IPython Notebook.

In addition to the Jupyter Notebook, there’s also JupyterLab, which is a web-based IDE for Jupyter Notebooks. It allows you to set up your user interface to support various workflows in machine learning, data science, scientific computation, and more. With JupyterLab, you can run terminals, text editors, and code consoles in your web browser. You can also create your own plugins.

JupyterHub is another offering from Project Jupyter. JupyterHub is a multi-user version of Jupyter Notebook, designed for teams, classrooms, and labs. The hub allows you to deploy your notebooks to your organization, scale your deployment with Docker and Kubernetes, and provide uniform data management and access within your company.

Jupyter Notebook is a popular computational notebook, with over 2.5 million public notebooks available on GitHub. It’s used for a variety of things, such as:

    Data analysis
    Data cleaning
    Data transformation
    Data visualization
    Machine learning
    Numerical simulation
    Statistical modeling

Etc.
Let’s start deploying Jupyterlab to Cloud Foundry

Follow the link to know the complete steps...

https://blogs.sap.com/2021/07/28/run-jupyterlab-on-sap-btp-cloud-foundry/
Creating vite vue ts template: Deploy to Github Pages
Tags: github, deployment, vite, vue
Published: 2021-07-29 05:38:16

## Setup project for Github Pages integration

1. Configure `vite` by setting correct `base` option. Update `vite.config.js`

    > If you are deploying to `https://<USERNAME>.github.io/<REPO>/`, for example your repository is at `https://github.com/<USERNAME>/<REPO>`, then set `base` to `'/<REPO>/'`.

    ```diff
     export default defineConfig({
       plugins: [vue()],
    +  base: '/vue-ts/',
    ```

1. `git add -u`
1. `git commit -m "update vite's 'base' option for github pages"`
1. Prepare our sources `npm run bulid` on `main` branch.
1. Let's setup `gh-pages` branch that will contain our site source. From docs:

    > The default publishing source for project sites is the root of the `gh-pages` branch.

    ```console
    # Create a new branch, with no history or contents, called gh-pages and switches to the gh-pages branc
    $ git checkout --orphan gh-pages
    ```

1. Clear the index and the working tree right after creating the orphan branch.
    ```console
    $ git rm -rf .
    ```
1. Put `dist/` folder contents into root of a project.
    ```console
    mv dist/* . &&  rmdir dist/
    ```
1. `git add assets/ favicon.ico index.html`
1. `git commit -m 'deploy' --no-verify`. We are adding `--no-verify` here to skip pre-commit checks, which will fail because we have deleted `.pre-commit-config.yaml` from this branch.

## Deploy to Github Pages with Github Actions

{% link https://dev.to/imomaliev/creating-vite-vue-ts-template-deploy-to-github-pages-with-github-actions-b7 %}

## Links

-   https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages
-   https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll
-   https://vitejs.dev/guide/static-deploy.html#github-pages
-   https://cli.vuejs.org/guide/deployment.html#github-pages
-   https://pre-commit.com/#temporarily-disabling-hooks

## Project

{% github https://github.com/imomaliev/vue-ts no-readme %}
Putting the M in MVP
Published: 2021-07-29 05:30:39

That's Minimum Viable Product, not this guy: ('jordan.png').

But I could also call it Most Valuable *Priorities*, as that's really what I'm thinking about: what should I prioritize?

###So much to do, so little time
Here are some goals for the FEC, and for nearly every coding project:

- cleanly-written code
- well-structured/reusable code
- implementing numerous features
- implementing complete features
- fast delivery

This is obvious stuff, but it's not obvious what comes first. I mean writing clean code is obvious, but I'm not a veteran coder. Sometimes things look a bit sloppy as they come together. And with the momentum that comes from getting things to work, it can be hard to choose refactoring a few lines vs. going on to whatever next step is right in front of you.

Scale that decision up and now we're talking full components that need to be re-factored, or worse.

###Fewer Complete Features vs More Incomplete Features
When I say incomplete, I don't mean buggy vs working.
I mean would you rather have five widgets with fewer bells and whistles or three widgets that are fully decked-out. It depends, right? 

###This isn't the real world
And that's good and bad. Good in that we get to make choices that fit our growth and what we need or want to learn. Bad in that we're not getting the guidance from a project manager or senior engineer who can help us understand the trade-offs that come with these decisions.

The FEC is going well, and I'm hoping that these questions will resolve themselves as we continue to make good progress through our checklists.
All About Kubernetes on AWS
Tags: kubernetes, aws, kubernetescourse
Published: 2021-07-29 05:28:15

Kubernetes, an open-source software that allows you deploy and manage containerized apps at scale, is Kubernetes. Kubernetes manages clusters of Amazon EC2 compute instances and runs containers on those instances with processes for deployment, maintenance, and scaling. Kubernetes allows you to run all types of containerized applications on-premises or in the cloud using the same toolset. Learn how to set up your own Kubernetes Cluster, configure networking between pods and secure the cluster against unauthorized access with the Kubernetes Certification Training(https://www.edureka.co/kubernetes-certification).

AWS makes it easy to run Kubernetes in the cloud with scalable and highly-available virtual machine infrastructure, community-backed service integrations, and Amazon Elastic Kubernetes Service (EKS), a certified conformant, managed Kubernetes service.

HOW KUBERNETES WORKS

Kubernetes manages a cluster of compute instance and schedules containers to run on that cluster according to the compute resources available and the resource requirements for each container. Containers can be run in logical groups called pods. You can scale up or down one container at a time by using a pod.

Kubernetes control software determines where and when to run your pods. It also manages traffic routing and scales your pods according to utilization or other metrics you specify. Kubernetes automatically creates cluster pods according to their resource requirements. If they fail, or the instances they are currently running on, Kubernetes will restart them. Kubernetes assigns each pod an IP address along with a single DNS name. This is used to connect your services to external traffic and other services.

WHY USE KUBERNETES?

Kubernetes can be used to run containerized applications from anywhere, as it is an open-source project. Kubernetes is constantly improving and being maintained by a large group of volunteers. Additionally, many other open source projects and vendors build and maintain Kubernetes-compatible software that you can use to improve and extend your application architecture.

RUN KUBERNETES ON AWS

Kubernetes can be run with AWS. Amazon EC2 allows you to manage Kubernetes infrastructure or Amazon EKS automatically provides a managed Kubernetes control plan. You get strong, community-backed integrations with AWS services such as VPC, IAM and service discovery, as well as security, scalability and high-availability from AWS.
Useful VS Code Extensions
Tags: beginners, webdev, vscode
Published: 2021-07-29 04:31:41

Here are some efficient VS Code extensions which will help improve your productivity and workflow.

![pic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwq15zklloiyhxjcmpqv.gif)


###1. indent-rainbow
It is a simple extension to make indentation more readable. This extension colorizes the indentation in front of your text alternating four different colors on each step. Some may find it helpful in writing code for Python. 
###2. Live-Server
It is one of the most used extension. It launches a local development server with live reload feature for static & dynamic pages.
###3. auto rename tag
Useful for writing substantial lines of code. When you rename one HTML/XML tag, it automatically renames the paired HTML/XML tag thus making the process easier.
###4. CSS Peek
If you hate having to toggle over to your .css file to check the properties attached to a class or id, with CSS Peek, you can view a hover image of your CSS from within you HTML file. This extension also turns class names and ids into a hyper link that takes you directly to that class or id definition in your CSS.
###5. Prettier
Prettier - Code Formatter is incredibly popular for auto-formatting. It automatically formats your code on saving thus making it more organized and easy to work with.
Migrating from Sequel Pro to Sequel Ace
Tags: database, tools, tooling
Published: 2021-07-29 04:13:26

Sequel Pro is a MySQL/MariaDB management GUI for macOS and it has been around for a long time. Sequel Pro's first release was in 2008 and at the time of this writing, the last one was in 2016. I've been using Sequel Pro for the past seven years but with the update to Big Sur, it's time to move on. Sequel Pro has become slow to use but I've continued on using it as a habit. A co-worker mentioned that the project forked into one called Sequel Ace. It's still [open source]("https://github.com/Sequel-Ace/Sequel-Ace") and actively maintained. Here's how to install Sequel Ace and pull over your favorite database connections from Sequel Pro with the least amount of headache.

#### Install Sequel Ace

`brew install --cask sequel-ace`

and if you have a Brewfile, add the cask "sequel-ace"

#### Copy Preferences and Favorites to Sequel Ace

```
cp ~/Library/Preferences/com.sequelpro.SequelPro.plist ~/Library/Containers/com.sequel-ace.sequel-ace/Data/Library/Preferences/com.sequel-ace.sequel-ace.plist
```

```
cp ~/Library/Application\ Support/Sequel\ Pro/Data/Favorites.plist ~/Library/Containers/com.sequel-ace.sequel-ace/Data/Library/Application\ Support/Sequel\ Ace/Data/Favorites.plist
```

#### Copy Passwords (optional)

The database connections that we copied over will not have the passwords because those are stored in the Keychain Access app. You can re-enter those passwords and save them as you connect to the different databases or you can open KeyChain Access and copy them over ahead of time. Open up KeyChain Access and search for "Sequel Pro". From there, you can click on the different connections and then check "Show Password" to view the plain text password. Next, copy that password over to Sequel Ace.

If you have many favorite connections, Sequel Ace offers the following bash script:

```bash
#!/bin/bash

results=$(security dump-keychain -r | grep "Sequel Pro" | sed -E -e 's/^.*"([^"]+)"$/\1/' | sort | uniq)
IFS=$'\n' read -r -d '' -a items < <(printf '%s\0' "$results")

for key in "${items[@]}"
    do
        newkey=$(echo "$key" | sed -E -e 's/Sequel Pro/Sequel Ace/')
        echo "Migrating: $key --> $newkey"
        account=$(sudo security find-generic-password -l "$key" | grep "acct\"<blob>" | sed -E -e 's/^.*"acct"<blob>="(.+)"$/\1/')
        pwd=$(sudo security find-generic-password -l "$key" -w)
        security add-generic-password -a "$account" -s "$newkey" -w "$pwd" -T "/Applications/Sequel Ace.app" -U
        echo "Done: $key --> $newkey"
done
```

#### Uninstall Sequel Pro

`brew uninstall --cask sequel-pro`

#### Wrapping Up

Now we've got our Sequel Pro connections moved over to Sequel Ace, an actively maintained database GUI ready for the next decade of coding on a Mac!

##### References:

[Migrating From Sequel Pro](https://sequel-ace.com/get-started/migrating-from-sequel-pro.html)