teleren/devto huggingface dataset:
Top Tips If You Want To Learn JavaScript
Tags: javascript, codenewbie, programming, beginners
Published: 2021-11-29 12:52:41

JavaScript is currently a very popular language of choice for code beginners, so I wanted to share some of the top tips for anyone looking to give it a go!

## Easy to start

One of the best things about JavaScript is how easy it is to get started! You don’t need a server or any expensive software.

There are even tools like [Codepen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) and [CodeSandbox](https://codesandbox.io/) which allow you to do it all directly in your browser.

## Programming Principles

It’s important to start with the basic principles of programming. Understanding how programming works and what tools are available to you (variables, loops, functions, etc.) will help you learn not just JavaScript but any programming language.

## Build Foundations

Don’t jump straight into using frameworks and libraries. You should always start by learning plain JavaScript first. This will set you up with good foundations and make learning frameworks easier.

## Practice

As with any other skills, you will only get better with practice! Even while you’re still learning make sure you always have small projects so you can practice what you learn.

You can watch and read all the tutorials in the world but if you don’t actually write some code, you will never improve.

## Read

Reading other people’s codes is just as important as writing your own. Try looking at scripts written by others and see if you can understand it. You might even pick up some new techniques!

## Refactor

Build and improve your code progressively. Start by just making it work and then go back and make improvements.

This will help you spot and fix things like repetition in your code and apply that knowledge next time.

## Don’t compare

Lastly, don’t compare yourself to others! Everyone learns in different ways and at different speeds.

Instead, track your progress by looking through your older code to see your personal progression and how you have improved.

**Was this useful?**
Let me know in the comments!

---

### Let's connect 💜

You can follow me on [Twitter](https://twitter.com/MrDanishSaleem), [Instagram](https://www.instagram.com/mrdanishsaleem/) & [GitHub](https://github.com/mrdanishsaleem/)

If you like this post. Kindly support me by [Buying Me a Coffee](https://www.buymeacoffee.com/mrdanishsaleem)

![Buy Me a Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fefzbxbnwww7tkght33w.png)
Week 5 journey, Taskforce 4.0
Published: 2021-11-29 12:48:52

---
title: Week 5 journey, Taskforce 4.0
published: true
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--qpHCYMWj--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2g9zgldo4mzcwqdkw518.jpeg
description: 
---
Hello guys!

Now the news is, we left with one week in TaskForce. Actually which is a good news for TaskForce 4 member, because we successfully reached the last week a long with valuable knowledge we gained in this internship.

Maybe your wondering how the firth week was like!
Last week was a week we had to continue our project of ShowApp, by integrating documentation, logs and API testing.

All this task had to be done within a week, and am grateful that the team i belong to, we tried to do all of them. And how we did our presentation on friday using swagger.

It's not only technical task, we also had several interesting session regarding time management, design thinking as well as requirements gathering. In all this session we had to do some exercise to give us a bigger picture of it.

I conclude by saying that, even though the journey has not yet ended but in general this internship was amazing. I can't wait to see what our last week has for us.
Ethereumの超シンプルなコントラクトをgethコンソールからデプロイする
Tags: blockchain, ethereum, solidity
Published: 2021-11-29 12:45:26

下記の超シンプルなコントラクトをコンパイル、デプロイして、アクセスしてみます。Windows10のWSL2のUbuntu20.04でやっています。

```solidity
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.7.0 <0.9.0;

contract Hoge {
    function get() public pure returns (string memory){
        string memory hoge = "HOGE";
        return hoge;
    }
}
```
コンパイラは、solcを[aptでインストール](https://docs.soliditylang.org/en/v0.8.10/installing-solidity.html#linux-packages)するか、[solc-js](https://github.com/ethereum/solc-js)をnpmでインストールするかで、どちらでもコンパイルできました。以下はsolc-jsの場合です。

```shell
> solcjs --bin --abi -o bin Hoge.sol
```

コンパイルすると下記ファイルができます。

```shell
❯ tree
.
├── Hoge.sol
└── bin
    ├── Hoge_sol_Hoge.abi
    └── Hoge_sol_Hoge.bin
```

デプロイするネットワークは、[goerli](https://goerli.net/)にします。[ここ](https://faucet.goerli.mudit.blog/)でgoerliで使えるETHをもらえます。

```shell
> geth --goerli --syncmode "light" --verbosity 0 console
```

上記を実行するとlightモードでgoerliに接続しつつ、gethコンソールが開きます。以下はgethコンソールでの作業です。利用するアカウントは、ETHを保有しています。アカウントのパスワードは `hoge` です。

まずは、コンパイルした `Hoge_sol_Hoge.bin`と、`Hoge_sol_Hoge.abi` の中身をgethコンソールの変数に入れておきます。binの中身の先頭に `0x` をつける必要があります。

```shell
> bytecode = "0x608060405234801561001057600080fd5b50610182806100206000396000f3fe608060405234801561001057600080fd5b506004361061002b5760003560e01c80636d4ce63c14610030575b600080fd5b61003861004e565b604051610045919061012a565b60405180910390f35b606060006040518060400160405280600481526020017f484f47450000000000000000000000000000000000000000000000000000000081525090508091505090565b600081519050919050565b600082825260208201905092915050565b60005b838110156100cb5780820151818401526020810190506100b0565b838111156100da576000848401525b50505050565b6000601f19601f8301169050919050565b60006100fc82610091565b610106818561009c565b93506101168185602086016100ad565b61011f816100e0565b840191505092915050565b6000602082019050818103600083015261014481846100f1565b90509291505056fea264697066735822122097a132140711a9b641222ac8bc84bb5a671eb1c5c2b26d58c564036536ec0bba64736f6c63430008090033"
> abi = [{"inputs":[],"name":"get","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"pure","type":"function"}]
```

次に、アカウントのロックを解除して、コントラクトをデプロイします。

```shell
> account = eth.accounts[0]
> personal.unlockAccount(account, 'hoge')
> params = {from:account, data:bytecode, gas:500e3}
> tx = eth.sendTransaction(params)
```

トランザクションが反映されたかどうかは下記で確認できます。未反映の場合`null`が返ります。

```shell
> web3.eth.getTransactionReceipt(tx)
```

下記でコントラクトの関数を実行できます。

```shell
> addr = web3.eth.getTransactionReceipt(tx).contractAddress
> Hoge = web3.eth.contract(abi).at(addr)
> personal.unlockAccount(account, 'hoge')
> web3.eth.defaultAccount = account
> Hoge.get.call()
"HOGE"
```
Asteria Dashboard - Low Code Dashboard Builder for Bootstrap 5
Tags: javascript, webdev, html, css
Published: 2021-11-29 12:37:49

Hi,

I recently launched a new theme to Loopple, a Free Low Code Dashboard Builder that aims to help developers to speed up their development process.

**Asteria Dashboard** is built on top of Bootstrap 5 and has the following features:
- 56 components included
- 3 plugins included (chartjs, apexcharts & swiperjs)

Any feedback would be gratefully received!

Links:

[Asteria Dashboard Builder](https://www.loopple.com/theme/asteria-dashboard)
[Loopple](https://www.loopple.com/) - Loopple website
[Loopple](https://github.com/Loopple/loopple/stargazers) - Github Repo

Thank you!
My Journey to Connect MariaDB to MySQL Workbench
Tags: database, datascience, webdev, programming
Published: 2021-11-29 12:31:14


I happened to have to extract the Entity-Relationship diagram starting from the SQL schema. I usually use XAMPP to work in SQL so I told myself to try using the Designer tool provided by PhpMyAdmin. In truth, the result was not great. My database had over 20 tables and the Designer showed them all stuck on top of each other. Furthermore, the PhpMyAdmin Designer is a very basic tool, which does not allow you to automatically align the tables to make them more readable.

However, since my boss had asked me to produce this blessed ER diagram, and not have the desire to manually move the tables one by one in the graph, I thought about using MySQL Workbench. I remembered from distant reminiscences that MySQL Workbench provides a very powerful tool for the automatic conversion of SQL schemas into ER diagrams. The tool in question is called Reverse Engineering.

And here the problems arose. Getting MariaDB (database provided by new versions of XAMPP) to talk with MySQL Workbench was not a very simple operation. But I want to eventually make it.

And I want to tell you how I succeeded.

First of all, I had already pre-installed on my computer (a Mac OS) the latest version of XAMPP (7.3.33 at the time of writing this article), so I had no desire to downgrade to a previous version with MySQL DB installed, as suggested in some posts on StackOverflow.

## First Attempt 😱
I downloaded the latest version of MySQL Workbench (8.0.27 at the time of writing this article) and installed it.
My first attempt was to have MariaDB speak directly to MySQL Workbench. I started MariaDB from the XAMPP control panel.

When the server is active, the light next to its name turns green. Then I started MySQL Workbench and clicked on the + sign to create a new connection
I added the connection parameters, but when I tried to press the Connect button, miserably the connection failed, as it required configuring SSL.

## Second Attempt 😢
Continue Reading on [Towards Data Science](https://towardsdatascience.com/my-journey-to-connect-mariadb-to-mysql-workbench-2d7e599a8a26)
Auto comment memes, love texts or any custom message on your Github Workflow with Github Actions
Tags: actionshackathon21, actionshackathon, opensource
Published: 2021-11-29 12:18:42

### My Workflow
I created a github action to create auto comment of three different kinds, which includes a `love_text` for the single folks, a `meme` (GIFS) or a `custom message` that suppost Githuub Markdown syntax. 
[auto-commenter](https://github.com/zt4ff/auto-commenter)

How Can it help you.
- you can add fun to your open source project and have the single folks trooping in to get some sweet selected love text :laughing:.
- you can include selected memes fun the 10+ year memes experience from the community
- or you can include a custom message.


### Submission Category: 

Wacky Wildcards


### Yaml File or Link to Code

{% github https://github.com/zt4ff/auto-commenter %}


### Additional Resources / Info
[auto-commenter on Github Actions Marketplace](https://github.com/marketplace/actions/auto-commentter)
I want to erase this white border line...
Tags: javascript, css, html
Published: 2021-11-29 11:15:30


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvnzj8s3l4tqn1q29wkf.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9otbg00xrey3z6554o0g.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33dmquzzucubquw168en.png)

I want to erase this white border line.
I've tried several times. 
And I knew it wasn't a border. 
But I have no idea how to fix it.

It is a text type of input tag.
It is a background setting of 100% width and height.

 However, the rest of the white parts are formed. 

Take a picture of the code and upload it to make it easier to see. 

I asked the school teacher, but only the insincere answer came back.

This is English that feels like a Korean using a translator.
[Solved] The POST method is not supported for this route. Supported methods: GET, HEAD. Laravel
Published: 2021-11-29 11:07:05

Quick Solution and straight to the point no bulky intro(this is my intro though)

Solution: If you are trying to make an update request and you are using laravel route resource to manage your routing, this solution should work for you 

```
<form action="{{ route('article.update', $article->id) }}" method="POST">
 @csrf
@method('PUT')
```
Noticed the `@method('PUT')` ?  This is because laravel resource route natviely uses the "PUT" verb for handling your form actions.

Hint:
If you defined the route by yourself with out the route resource, you can make use of the "POST" verb and it will definitely work!

For example:

```
<form action="/articles/update/{{$article->id}}" method="POST">
        @csrf
```

You can reach me out on [Twitter](https://twitter.com/jovial_core). I'm on 
[Linked too](https://www.linkedin.com/in/chidiebere-chukwudi-49a982182/)
echo3D featured on The AR Show
Tags: augmentedreality, startup, podcast, news
Published: 2021-11-29 10:53:33

![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638182947689/VkQaqm9JW.png)

Excited to share the latest episode of [The AR Show](https://www.thearshow.com/podcast/123-alon-grinshpoon) with Jason McDowall featuring echo3D! The AR Show dives deep into the emerging world of Augmented Reality with a focus on the underlying technologies and uses of Smartglasses, and the people behind them. The show features interviews with entrepreneurs, executives, investors and early adopters to extract insights that will both inform and inspire you.

**Listen on [TheARShow.com](https://www.thearshow.com/podcast/123-alon-grinshpoon), [Spotify](https://open.spotify.com/show/4EAWkE9WiqqjFatTvnUitp), [Apple Podcasts](https://podcasts.apple.com/us/podcast/alon-grinshpoon-echo3d-on-building-the-aws-for-3d/id1355302220?i=1000542803659), [Google Podcasts](https://podcasts.google.com/feed/aHR0cHM6Ly93d3cudGhlYXJzaG93LmNvbS9wb2RjYXN0P2Zvcm1hdD1yc3M/episode/NWEzZDQ3MjRiZTQyZDZmYjVjYTYxZWVlOjVhOTg4OWUyZTQ5NjZiMGFkYTM5MjBhYjo2MTk4MzdkMjdkYWY0NjRjYTY0NjE2ZGQ), or [PlayerFM](https://player.fm/series/ar-show-with-jason-mcdowall/alon-grinshpoon-echo3d-on-building-the-aws-for-3d-and-founder-market-fit).**

We discuss how echo3D is building the AWS of 3D, the world of 3D content, cloud streaming, and so much more! Check out the conversation to hear our CEO, Alon Grinshpoon, talk about our entrepreneurial journey, founder-market fit, founder-investor fit, and more.

Thank you Jason McDowall, host of The AR Show for the invite!

Learn more about echo3D at www.echo3D.co.

> echo3D (www.echo3D.co; Techstars ’19) is a cloud platform for 3D/AR/VR that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps, games, and content.

![2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638183117003/uin1eiIJo.png)
The Implications of the COVID-19 Crisis on Local Banking
Tags: github, devops
Published: 2021-11-29 10:48:14

Over the past few years, the increasing popularity of online banking has already resulted in a reduction in branch banking, prompting financial institutions to begin making changes to their distribution networks and implementing **[Oracle Flexcube](https://jmrinfotech.com/financial-services-solutions/core-banking-transformation/digital-core/)**. A causal relationship between the COVID-19 issue and this tendency could not be established. However, it has considerably aggravated it.

They were not forced to close during the height of the epidemic because they were deemed "essential services" led to a reduction in hours, the temporary closure of some branches, and the restriction of walking in customers for many banks, building societies, and credit unions.

It also sped the transition to digital, with some segments of the public adopting digital technologies, like the **[Oracle Flexcube universal banking](https://jmrinfotech.com/financial-services-solutions/core-banking-transformation/digital-core/)** and contactless payments much more quickly than experts had predicted.

In the wake of the epidemic, we identified six behavioral modifications that we believe will impact branch utilization when the crisis is past. These are as follows:

• Cash decline: There was a 60 percent decline in cash machine withdrawals during the closing period. Seventy-six percent of those who responded to a YouGov survey in the United Kingdom said they planned to spend less money after COVID-19.

• eCommerce adoption: We found out that 25 percent of its clients made their first online food purchase during the financial crisis. Forty percent of those who shopped online were over the age of 55, and 37 percent said they intended to continue doing so even when the situation was over.

• Online banking usage:73 percent of consumers in the United States habitually conduct business online, according to a Mastercard poll conducted in the country. The vast majority (21 percent) have never used online banking before.

• Contactless usage: In the United Kingdom, contactless transactions account for 66 percent of all Mastercard transactions at the moment. In addition, Mastercard discovered that 76 percent of its customers want to continue using contactless payments in the future.

• Technology adoption: In recent decades, technology such as Skype and other web-based services have grown in popularity due to its accessibility. According to the company, Microsoft Teams, a group communication platform, saw a spike in usage of 12 million users in March. According to the company’s estimates, approximately 300 million individuals will use Zoom's services daily in April 2020.

Many processes still rely on branch offices, which means they will continue to play a vital role for financial institutions using **[Oracle Flexcube 14.x](https://jmrinfotech.com/financial-services-solutions/core-banking-transformation/digital-core/)** even if the number of branches drops.
On Design Systems
Tags: designsystem, componentlibrary, react, typescript
Published: 2021-11-29 10:41:18

---
title: On Design Systems
published: true
description: A series of articles
tags: designsystem, componentlibrary, react, typescript
cover_image: http://metamn.io/react/static/d455e1263037f662051560e7d9e36ccc/839e9/ds-context-black-nologo.png
canonical_url: http://metamn.io/react/on-design-sytems/
---

Design systems bring a novel approach to UI/UX design and development &mdash; to solve its inherent consistency and scalability problems.

As of today, dedicated companies &mdash; with resources &mdash; can afford their own custom design system. Others copy or innovate.

The series walks-through the problem in-depth, from the viewpoint of all stakeholders.

And proposes a solution &mdash; of recent origin &mdash; to help companies with less resources to roll their own.

## 1. Workflow, practices and deliverables

[The first article](http://metamn.io/react/on-design-sytems-1/) takes a look at existing systems and defines the workflow, practices and deliverables for all stakeholders.

## 2. Design tools and processes

[The second article](http://metamn.io/react/on-design-systems-2/) examines design systems from the designer viewpoint.

Offers novel ideas &mdash; design systems as database (code), pair designing &mdash; to reduce the cost of rolling out design systems.

It presents an ideal and working use case where a rare species &mdash; a developer who designs &mdash; creates a design system, and more, in the browser.

## 3. Consistent user interfaces in web context

[The third article](http://metamn.io/react/on-design-systems-3/) examines design systems from the developer viewpoint.

It presents past and current front-end development paradigms and examines why they lead, or not, to consistent user interfaces.

And comes to the conclusion: to end fragility in front-end development &mdash; standard software development patterns and practices should replace the current hacking mindset and non-programming languages.

## 4. Implementing a design system in React and Typescript

A work in progress. A complete example for developers where the findings above merge into a real-life project.
Structured Query Language
Tags: database, data, engineering, sql
Published: 2021-11-29 10:35:49


[SQL](https://en.wikipedia.org/wiki/SQL) is an abbreviation for **Structured Query Language**. It was born in 1974 to handle data that is stored in a **Relational Database Management System** - [RDBMS](https://en.wikipedia.org/wiki/Relational_database#RDBMS). 

It is good to know SQL, because it is widely used in software development and data engineering. Furthermore it influenced al lot NoSql languages. So it is considered a basic skillset every information technology engineer needs.

As there is a lot of information to store in the brain, when it comes to learn or remember a specific topic, I thought drawing a sketchnote might help. This has the advantage that you have all the information one page and it helps learning and remembering facts about a topic.

As you can see, I did not use a pen for a long time. But even though the graphical quality is not high, I hope you can also use it to learn or freshen up your sql skills.

The sql sketchnote holds information about:

- *When to use sql*
- *Entity relationship diagram*
- *Normalization*
- *Joins*
- *Aggregations*
- *Subqueries*
- *Core window functions*
- *Ranking window functions*
- *Advanced window functions*

I hope you like it - Enjoy!

![Sketchnote SQL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oklwxe4foi62ncnofz51.jpg)

If the resolution here is too low - in case you really want to read it - you can find a higher resolution [here](https://github.com/BarbaraJoebstl/data-engineering-nd/wiki/Sketchnotes).

If you don't like it, but still need some information, you can check these links:

[wikipedia](https://en.wikipedia.org/wiki/SQL) | [syleguide](https://www.sqlstyle.guide/) | [cheatsheet](https://intellipaat.com/mediaFiles/2019/02/SQL-Commands-Cheat-Sheet.png)
OSD600 - Preparing For The Final Release
Tags: opensource
Published: 2021-11-28 23:18:27

### 1. Introduction
In the final release, I decided to work on an external project named [Awesome-Adoption](https://github.com/redxzeta/Awesome-Adoption) which is a web application helping users find pets and adopt around their area. 

### 2. The issue
I am going to add new feature to the app, here are some tasks I need to complete:

* Coding form and validating user's input
  * Create a modal form for user story which has title, description, location
  * Check that the fields are not empty
  * Have the option to reset fields
  * Post valid story to the table stories using `react-supabase`
  * Display any errors for the user
  * Use a spinner when posting the data (recommend `FetchingButton.jsx` in layout)
  * Success should close the modal
  * Be sure to clear the fields after closing the modal
* Write some tests

### 3. Planning
To complete the tasks successfully, I am going to spend the next week to finish coding the form and validating user's input since the sub-tasks are interrelated. 

Then in the final week, when the form and validation code are done, the tests should be written to make sure that there are no unexpected behaviors.
The Release of Selenium 4 (and 4.1) | Top Features to Look Into
Tags: selenium4, testing
Published: 2021-11-29 10:03:13

"The first-ever release of Selenium WebDriver 1.0 in 2007 has indented a lasting footprint in web automated testing. And through the years, the contributions of the Selenium project (WebDriver, Grid, and IDE) have truly transformed the way that we do quality assurance. 

Fast forward to the ‘drop-in’ release of Selenium 4 and Selenium 4.1, this article narrows down the top 5 changes you need to know for WebDriver, IDE, and Grid."
[Continue reading](https://www.katalon.com/resources-center/blog/selenium-4-features/)