teleren/devto huggingface dataset:
JavaScript Chapter 7 - Events in JavaScript
Tags: javascript, beginners, tutorial
Published: 2021-05-28 05:05:15

Hello friends 👋👋. See you again at the basic JavaScript tutorial. This time according to the title, we will discuss events in JavaScript, just go to the material.

## INTRODUCTION AND UNDERSTANDING JAVASCRIPT
Hello friends. This time, according to the title, we will discuss Events in Javascript. Do you know what an event is? An event is something the user does that triggers the nets of code. Surely my friend is still confused by this understanding. I will explain again bye, Suppose we have a button on a website or application that we build. And we want to give an action when the button is clicked. So the event here is an "event". For example, when the button is clicked it will display a sentence. So the event is a click. The following events are contained in javascript.

## Kinds of Events in Javascript
- `onclick` = event when an html element is clicked
- `onchange` = event when an html element changes
- `onmouseover` = event if an html element is placed the mouse cursor
- `onmouseout` = event if when the mouse cursor leaves the html element
- `onkeydown` = is an event if when an HTML element occurs
- `onload` = event when the element or page is loaded
Well, we will discuss some of the Javascript events described above.

## HOW TO MAKE A JAVASCRIPT EVENT
To create an event with javascript, we can add attributes with the event names above, to the html element that we want to give an event for example.

## EXAMPLE EVENT ON JAVASCRIPT
For example I will create a click event on a button. So I want to display a sentence when the button is clicked:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnmg7dc0g5glk2vjo2ga.png)

Try my friend, pay attention to the example above, there is a button that we give when the event is clicked.

```html
<button onclick="show_name()">Click here</button>
```

When this button is clicked it will run the `show_name()` function. So then we create a function name show.

```javascript
function tampil_nama(){dicument.getElementByid("hasil").innerHTML = "<h3>Nama Saya Dzun</h3>";}
```

The content of the function `show_name()` is to display the sentence "My name is Yogi" in the result id element.

Look at the following picture.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3u7lqpgyujlq67srzqh.png)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orjwk8apmzihtwh3ceqs.png)

After clicking the "button" it will appear under the "My name is Dzun" button.

## CONCLUSION
In conclusion, there are 6 events in javascript and the one I example above is the onclick event. So when we click the button, the contents of the function will appear more or less like that and you can develop it yourself according to your creativity. So, until this article on learning Javascript, Thank you
Horizontal sharding in a gem: a dive in to active record connection pools
Tags: rails, ruby
Published: 2021-05-28 04:57:01

Rails is a great framework that enables us to avoid grungy but essential topics like database connection pooling with all the inherent complexities of multi-threading and error handling.

Inevitably though we occasionally find ourselves immersed in areas where Rails or other gems aren't there to do the heavy lifting.

This is one such tale and comes with a necessary health warning. Our attempt at solving our problem is just that. Is it a flawed solution, could there be better solutions? Quite possibly.

### Our problem
Our Rails apps use a homemade gem that provides access to a series of MySQL databases with one database per customer.

This horizontal sharding was handled by octoshark but a new version of the gem hadn't been released since 2016 and we were seeing `MySQL client is not connected` errors so it was time to find an alternative.

### A solution for active record 6.0
Other gems provide support for horizontal sharding but in the context of a Rails app as opposed to a gem and although horizontal sharding is now supported natively in Rails 6.1 thanks to [@eileencodes](https://weblog.rubyonrails.org/2020/12/9/Rails-6-1-0-release/), it wasn't obvious how to use it within a gem.

We fixed our gem's active record dependency to 6.0 and removed octoshark. Then we set about creating the relevant connection pools on class load and enabled switching between them by overriding the active record `connection` method in an abstract base class. 

Note the solution we arrived at below has only been tested with puma. 

{% gist https://gist.github.com/jpawlyn/82196753b1f64ce45157987faaa39fa6 %}

{% gist https://gist.github.com/jpawlyn/dbb2b3c27adf2c5b31edda0c00133ced %}

{% gist https://gist.github.com/jpawlyn/b26579127251f806a0f9c1df687e9297 %}

In order for each http request to hit the correct database, we set the value for `RequestStore.store[:mygem_database_key]` (see [RequestStore](https://github.com/steveklabnik/request_store#requeststore--)) prior to calling models in the gem.

### A solution for active record 6.1
With Rails 7.0 around the corner we didn't want to stop at 6.0 so we upgraded our gem to active record 6.1 and not unexpectedly, the overriding of internal active record methods no longer worked.

After trial and error we arrived at the following solution:

{% gist https://gist.github.com/jpawlyn/47a054da16023efac1eec1cdd9f0d8b8 %}

In addition we needed to monkey patch `ActiveRecord::ConnectionAdapters::AbstractAdapter` due to the error `undefined method current_preventing_writes for String`. 

{% gist https://gist.github.com/jpawlyn/5c09411f7da37d953c4ae639bcf41458 %}

### Final thoughts
Overriding and monkey patching active record methods and classes is not always a great idea. They will likely constitute a barrier to future upgrades and can be a source of hard to find bugs but accessing the undercover power and capabilities of Rails can make a lot of sense when the alternative is a whole lot more challenging.
Changes to OpKey Workflow Management and Enhancements
Published: 2021-05-28 04:46:55

OpKey recently rolled out its latest version (5.63.00) to help global enterprises to streamline their testing, test smarter and faster. With this release, OpKey users now have access to a feature called Marketplace, which can be accessed from OpKey, or directly on the web as a Marketplace portal. With OpKey Marketplace, OpKey Users now have the power to discover, select and extend their Test Automation capabilities, by subscribing/unsubscribing to add-ons such as Keywords, Test Accelerators, Utilities, and Workflows for their automation script development, maintenance, and execution needs, as per their requirements.

<B>Collaborate and Innovate with Industry’s First Test Automation Marketplace for ERP Testing</B>

OpKey recently rolled out its latest version (5.63.00) to help global enterprises to streamline their testing, test smarter and faster. With this release, OpKey users now have access to a feature called Marketplace, which can be accessed from OpKey, or directly on the web as a Marketplace portal. With OpKey Marketplace, OpKey Users now have the power to discover, select and extend their Test Automation capabilities, by subscribing/unsubscribing to add-ons such as Keywords, Test Accelerators, Utilities, and Workflows for their automation script development, maintenance, and execution needs, as per their requirements.

<B>Collaborate and Innovate with Industry’s First Test Automation Marketplace for ERP Testing</B>

Workflow Add-on is a new feature of OpKey, allowing OpKey users to create a customized workflow with custom states, according to the requirements of their Projects and Modules. OpKey’s default workflow feature comprising of states Draft, Review, Approved, and Published will still be available to OpKey Users.

<B>OpKey Default Workflow feature</B>

This blog is primarily focused on existing OpKey 5.62 users, upgrading to OpKey 5.63.

OpKey users, opting to stay on version 5.62 will not have access to Marketplace, and will continue to work with the OpKey default workflow feature. However, should they decide to upgrade to OpKey 5.63 or the latest versions, they need to be aware of functional changes, impacting the state, transition, and accessibility of their existing and new test artifacts, as they decide to subscribe/un-subscribe <a href="https://www.opkey.com/blog/collaborate-and-innovate-with-industrys-first-test-automation-marketplace-for-erp-testing/">Marketplace</a> Workflow Add-On feature of OpKey.

For new Users of OpKey 5.63, they can continue to work with OpKey’s default workflow feature or define new workflows per their needs.

The Default Workflows present in the Marketplace are not editable. Below is summary of workflow changes, existing and new users of OpKey, should know, in order to work with default workflow states in OpKey 5.62 and <a href="https://www.opkey.com">OpKey 5.63</a>.
Create Chrome Desktop Notfications with JavaScript in 100 seconds
Tags: tutorial, notification, javascript, webdev
Published: 2021-05-28 04:44:17

In this article, I will show you steps to create a simple Chrome Desktop Notification looked like the image below by using JavaScript **just in 100 seconds** :alarm_clock: Let's count down!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v9g0ueoqs70qpgbx0ogp.jpg)

## :open_file_folder: Repository
- You can download the source code of this article on my Github: https://github.com/richard-wynn/simple-chrome-desktop-notifications

## :wrench: Necessary Stuffs
- **[Visual Studio Code](https://code.visualstudio.com)** with **[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)** extension installed
- **[Google Chrome](https://www.google.com/chrome)**, of course :grin:

## :computer: It's Coding Time!
### index.html
Create an `index.html` file with the following content.
```html
<html lang="en">
  <head>
    <meta charset="utf-8" />
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>

    <title>Simple Chrome Desktop Notification</title>
  </head>

  <body>
    <button id="btn-show-notification">Notify Me!</button>
  </body>
</html>
```

### script.js
Next, create a `script.js` file inside the same folder with the `index.html` file above:
```js
$(document).ready(function () {
  $(document).on('DOMContentLoaded', function () {
    // Request desktop notifications permission on page load

    if (!Notification) {
      console.log('Desktop notifications are not available in your browser.');
      return;
    }

    if (Notification.permission !== 'granted') {
      Notification.requestPermission();
    }
  });

  function showNotification() {
    if (Notification.permission !== 'granted') {
      Notification.requestPermission();
    } else {
      const options = {
        body: 'Simple Chrome Desktop Notification',
        dir: 'ltr',
        image: 'image.jpg'
      };
      const notification = new Notification('Notification', options);

      notification.onclick = function () {
        window.open('https://www.google.com');
      };
    }
  }

  $('#btn-show-notification').on('click', showNotification);
});
```

## It's Running Time!
In **Visual Studio Code**, go to `View` -> `Command Palette...` and type `Live Server: Open with Live Server` then press `Enter`, a new page will be shown:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzmk8b0qlklw93b7trkm.PNG)

Click on `Notify Me!` and hurray, a notification appears:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tu5hnw97ccyb5uqpq4l0.png)

Just simple as it is :wink: Hope this will help in case you need to use desktop notifications for your website(s).

## :iphone: Keep in Touch
If you like this article, don't forget to follow and stay in touch with my latest ones in the future by following me via:
- **Twitter:** https://twitter.com/RichardWynn01
- **Medium**: https://richard-wynn.medium.com
- **Github:** https://github.com/richard-wynn
JavaScript Chapter 6 - Creating JavaScript Functions
Tags: javascript, beginners, tutorial
Published: 2021-05-28 04:31:59

In this chapter 6 basic javascript learning tutorial we will continue our discussion of the basic tutorial. Previously we have discussed about other basic javascript tutorials from chapter 1 to chapter 5. in this tutorial to learn basic javascript chapter 6 we will discuss about "Creating Functions in JavaScript".

What is a function? maybe some of my friends still don't know the meaning of a function, so I will review a little about the meaning of function

## DEFINITION OF FUNCTION IN JAVASCRIPT
A function is a facility in every programming to create a command whose function we can use repeatedly indefinitely. As long as the page is still connected to the function in question.

## CREATE A FUNCTION IN JAVASCRIPT
To create functions in javascript, there are several things that must be understood first. Namely about writing functions in javascript. The following is an example of a function writing format in javascript.

```html
<script> 
/Create Javascript function
function name _function(){ 
// the contents of the function are made here
} 
</script>
```

As we have seen in the example above. To create a function the writing must be preceded by a syntax function then followed by the name of the function to be created. And the contents of the function are written in curly braces "{}". Here is a simple example of using a javascript function.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1g9o7k59k471er4i07gd.png)

Consider the example above
```javascript
function tampilkan_nama(){ 
return "Nurroin's Blog" }
``` 

We create a function named "showname ()" which contains the command to return the string "Script Kiddies". So when the show_name () function is called, the result is 'Nurroin's Blog'

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jl03dsdf491ca0z1pmv.png)

## CONCLUSION
That's how to create a function in javascript, in essence, we have to create a function first, then the name of the function and the contents of the function are located in curly brackets (). And we just call the function and in the example above I print the function display name using document.getElementById
Cara Interview lowongan kerja yang bagus
Tags: loker, lowongankerja, interviewkerja
Published: 2021-05-28 04:27:47

Interview kerja yang bagus adalah satu diantara kunci kemajuan satu orang dalam mengkaji kemungkinan/peluang kerja supaya diterima.

Dengan mengamati berbagai hal inti yang kebanyakan genting menjadi perhatian saat wawancara kerja, jadi peluang agar dapat diterima dalam sebuah perusahaan bisa dapat terwujud.

Kadangkala orang benar-benar terasa kalau mesti ikuti mekanisme interview kerja yang bagus yaitu yang berat, akan tetapi sebetulnya tak asal tahu langkahnya buat menjalankan interview kerja yang bagus serta penting dikerjakan jelas seluruhnya lancar.


Teknik Efektif Interview Kerja Yang Baik

Tentang hal berbagai hal yang sebaiknya menjadi perhatian buat menjalankan interview kerja yang bagus adalah;


1. Tekuni CV yang udah anda kirimkan.

Sebab mesti pertanyaan tentang CV bakal disampaikan. Ya, buat mendapat satu interview kerja yang bagus, peserta mesti mengenali dengan jelas apa yang ditulisnya dalam Curriculum Vittae-nya.


Sebab seandainya kelak ketika interview dijumpai terdapatnya ketaksamaan di antara CV dengan jawaban yang anda dikasihkan, jadi perihal itu bakal kurangi nilai interview kerja yang baik yang anda turuti bahkan kemungkin bakal tutup kemungkinan buat masuk ke dalam perusahaan itu.


2. Tekuni segala keterkaitan perusahaan yang anda pengin memasuk.


Buat bikin interview kerja yang bagus sesuai sama impian anda, jadi anda disarankan tahu terlebih dulu tentang perusahaan itu, baik tentang sejarahnya( sesuai kebutuhan saja), macam upayanya, untung yang dibuat (seandainya memungkinkan), dan struktur kerja yang dipakai di dalam tempat itu.


Ini paling penting buat anda pengin satu interview kerja yang bagus buat anda, sebab panelis akan bertanya perihal itu sekurang-kurangnya sejumlah antara lain.


3. Cermati kemeja serta trik tampilan anda buat membentuk satu interview kerja yang bagus.


Trik mengenakan pakaian serta tampilan adalah perihal pertama-tama yang bakal dianggap oleh panelis ketika interview kerja terjadi.Interview kerja yang bagus atau jelek bakal terwujud sekejap seusai anda masuk area serta tunjukkan bagaimana caranya anda berperilaku ketika itu.

Buat pria lebih baik seandainya memanfaatkan pakaian rapi lengan panjang, tak usah memanfaatkan jas.Putuskan warna yang halus serta tak menonjol. Buat wanita, biar mendapat kondisi interview kerja yang bagus harusnya memanfaatkan busana yang rapi serta tidaklah terlalu ketat.

Pakai rok kerja dan kancing busana atas serta sepatu kerja. itu semuanya jadi satu perkecualian seandainya faksi perusahaan udah memastikan macam kemeja yang anda pakai buat interview.

sumber : https://mintainfo.com
Laravel One to Many Eloquent Relationship Tutorial

Tags: laravel, php, tutorial, programming
Published: 2021-05-28 04:24:52

Hi Dev,

In this post Now let's visually perceive example of how to utilize hasmany relationship in laravel. This is a short guide on laravel if hasmany relationship. We will utilize how to utilize hasmany relationship in laravel. Here you will learn how to utilize hasmany relationship in laravel. We will utilize how to utilize if hasmany relationship in laravel. Let's get commenced with how to hasmany relationship use in laravel.

Here i will give you full example hasMany how you can check hasmany relationship in laravel.

Let's get started example of how to utilize hasmany relationship in laravel let's implement it.

more..
https://codingtracker.blogspot.com/2021/05/laravel-one-to-many-eloquent.html
A Quick Starter template for building a project using  Next.js,Typescript,TailwindCSS, ESLint,prettier (boilerplate).
Published: 2021-05-28 03:13:41

---
title:A Quick Starter template for building a project using  Next.js,Typescript,TailwindCSS, ESLint,prettier (boilerplate).
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

**This is a Next.js boilerplate with TailwindCSS and Typescript, Eslint, prettier**

[Github repository](https://github.com/zaakzaku/nextjs-typescript-tailwind-boilerplate)
https://github.com/zaakzaku/nextjs-typescript-tailwind-boilerplate

## Getting Started

First, run the development server:

```bash
git clone https://github.com/zaakzaku/nextjs-typescript-tailwind-boilerplate
cd nextjs-typescript-tailwind-boilerplate
npm install
npm run dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35+ Simple CSS Based Pre Loaders
Tags: css, productivity, beginners, webdev
Published: 2021-05-28 02:54:45

Pre loader or a loading screen animation is animation which will be displayed before the content of the website get loaded. Pre loaders help to keep users engaged while the page gets loaded. I list here more than 35 simple pre loaders that use only HTML and CSS, no JavaScript. You can customize these the way you like, this will help you to understand how animations work in CSS. Don't just copy, use your creativity to create something more user engaging. Happy Coding.

`Click the headings for direct Codepen links`
## 1. [Dot Based Pre Loaders](https://codepen.io/kiran-r-raj/pen/zYZzxMQ)
{% codepen https://codepen.io/kiran-r-raj/pen/zYZzxMQ default-tab=result %}
## 2. [Dot Based Pre Loaders 2](https://codepen.io/kiran-r-raj/pen/wvJqNpy)
{% codepen https://codepen.io/kiran-r-raj/pen/wvJqNpy default-tab=result %}
## 3. [Line Based Pre Loaders](https://codepen.io/kiran-r-raj/pen/YzZxbXy)
{% codepen https://codepen.io/kiran-r-raj/pen/YzZxbXy default-tab=result %}
## 4. [Circle Based Pre Loaders](https://codepen.io/kiran-r-raj/pen/oNZwBxq)
{% codepen https://codepen.io/kiran-r-raj/pen/oNZwBxq default-tab=result %}

{% link https://dev.to/kiranrajvjd/30-illustration-resources-for-web-developers-23hd %}
{% link https://dev.to/kiranrajvjd/30-awesome-css-animation-resources-h9c %}
{% link https://dev.to/kiranrajvjd/awesome-resource-for-your-web-projects-75-background-resources-2cm8 %}
HTML : Simplest way to refresh the page in X seconds
Tags: html, webdev, tutorial
Published: 2021-05-28 02:50:49

This is super easy, you just have to put this `meta` tag inside `head` tag of your html page.

Without URL
```html
<meta http-equiv="refresh" content="600">
```

The value in content signifies the seconds after which you want the page to refresh.
```html
<meta http-equiv="refresh" content="0; url=foobar.com/index.html">
```
# Example
The redirects to the provided URL in 5 seconds. Set to 0 for an immediate redirect. 
```html
<meta http-equiv="refresh" content="5;url=http://example.com/" />
```

# Bonus
Same thing you can achieve in php as -
```php
<?php
header('Content-Type: text/html; charset=UTF-8');
header('Refresh: 5; url=somewhere/');
?>
```
[Read more](https://www.w3schools.com/tags/att_meta_http_equiv.asp)


<a href="https://www.buymeacoffee.com/rkycom" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/www-rajeshkumaryadav-com/) and [Twitter](https://twitter.com/rky_com).
May 27th, 2021: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2021-05-28 02:49:11

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Information flowing through your brain](https://media.giphy.com/media/qKltgF7Aw515K/giphy.gif)

</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

<center>

And remember, if something you learned was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{%link https://dev.to/devteam/what-was-your-win-this-week-2ei4 %}

![Someone feeling like "Yaaas!"](https://media.giphy.com/media/zBhZiVNNQjfTG/giphy.gif)
</center>