teleren/devto huggingface dataset:
WEB COMPONENTS
Published: 2021-04-04 09:12:54

<Strong>What is a Web Component?<strong>

Web Components are set of web platform APIs that help us create custom HTML tags with associated style and script. It essentially helps provide strong encapsulation for reusable components, making it easier to call or embed it in our code  while in development. Web components 

<Strong>How web components improve accessibility:</Strong>
<ul>
<li>Customized built-in elements</li>

<li>Accessibility Object Model (AOM).The AOM is an experimental JavaScript API being incubated at the W3C by Google, Apple, and Mozilla. It proposes several new features intended to solve existing accessibility use cases.</li>
<li>Countless number of open source code that can be used to enhance accessibility during development.</li>
</ul>

<Strong>Help future proof development/improve transparency</Strong>
<ul>
<li> Any one can learn and use web components because of how simple it is. </li>
<li>Expand more on the already vast open source code.</li>
<li>Future Proofing With Web Standards.(It can be used in any web browser such chrome,safari,firefox etc.</li>
<li>it saves time and money </li>

</ul>

<Strong>Who’s using Web Components</Strong>
<ul>
<li>Youtube</li>
<li>Xfinity</li>
<li>GMAIL</li>
<li>Health Dynamics</li>
</ul>

<Strong>Articles to help further understand Web Components</Strong>

 [6 reasons to see native web components](https://codeburst.io/6-reasons-you-should-use-native-web-components-b45e18e069c2).
[Why we use web Components](https://viljamis.com/2019/why-we-use-web-components/).
[The state of web components](https://medium.com/swlh/the-state-of-web-components-e3f746a22d75).
[Web Components and the AOM](https://www.24a11y.com/2019/web-components-and-the-aom/).



Link To Youtube Video
[Video](https://www.youtube.com/watch?v=zspkeNaHdQY)
Kotlin Firebase Storage - Get List of Files example - Image List with FirebaseRecyclerAdapter | Android
Tags: kotlin, firebase, firebaserecycleradapter, android
Published: 2021-04-04 09:11:48

https://grokonez.com/android/kotlin-firebase-storage-get-list-files-example-image-list-firebaserecycleradapter-example-android

Kotlin Firebase Storage - Get List of Files example - Image List with FirebaseRecyclerAdapter | Android

We had known the way to upload/download data. In this tutorial, we're gonna look at way to get list of files example - display list of Images with Firebase UI Database <code>FirebaseRecyclerAdapter</code>.

Related Posts:
- <a href="https://grokonez.com/android/kotlin-firebase-storage-upload-file-data-memory-local-file-stream-android">Kotlin Firebase Storage – Upload Data from Memory, Local File, Stream | Android</a>
- <a href="https://grokonez.com/android/kotlin-firebase-storage-download-file-example-to-memory-local-file-android">Kotlin Firebase Storage – Download Files to Memory, Local File | Android</a>
- <a href="https://grokonez.com/android/kotlin-firebase-realtime-database-readwrite-data-example-android">Kotlin Firebase Realtime Database – Read/Write Data example | Android</a>

<!--more-->
<h2>I. How to do</h2>
<img src="https://grokonez.com/wp-content/uploads/2017/08/firebase-storage-display-list-goal.png" alt="firebase-storage-display-list-goal" width="699" height="350" class="alignnone size-full wp-image-7443" />

To display list of Images, we need to:
- add Firebase to Android App & enable Firebase Auth
- use Firebase Cloud Storage to upload and store images
- use Firebase Realtime Database to store images' information (name + url)
- use <code>FirebaseRecyclerAdapter</code> to display images in <code>RecyclerView</code> with the help of <strong>Picasso</strong> lib.
<h3>0. Depedencies</h3>
After setup Project, <strong>build.gradle</strong> file (App-level):
<pre><code class="language-java">
dependencies {
    // ...
    implementation 'com.google.firebase:firebase-auth:11.0.4'
    implementation 'com.google.firebase:firebase-storage:11.0.4'
    implementation 'com.google.firebase:firebase-database:11.0.4'
    implementation 'com.firebaseui:firebase-ui-database:2.3.0'

    implementation 'com.squareup.picasso:picasso:2.5.2'
}

apply plugin: 'com.google.gms.google-services'
</code></pre>

More at: https://grokonez.com/android/kotlin-firebase-storage-get-list-files-example-image-list-firebaserecycleradapter-example-android
How to implement Singleton in Node.js
Tags: node, singleton
Published: 2021-04-04 08:52:26

How to implement Singleton in Node.js

https://grokonez.com/node-js/how-to-implement-singleton-in-node-js-example

Singleton is object that can have only a single, unique instance, with a single point of access. Node.js module system provides simple way to implement Singleton using <code>module.exports</code>. Module will be cached when it is accessed using <code>require()</code> statement. So our module is merely a cached instance although it behaves like a Singleton.

In this tutorial, we're gonna look at ways to implement this kind of Singleton in Node.js:
<ul>
<li>Singleton Object</li>
<li>Singleton Class</li>
</ul>

<!--more-->
<h2>Node.js Singleton Object example</h2>
We will create a <code>Bank</code> object, it has 3 methods:
- <code>deposit()</code> increases <code>cash</code>.
- <code>withdraw()</code> decreases <code>cash</code>.
- <code>total()</code> returns <code>cash</code>.

<em>Bank.js</em>
<pre><code class="language-javascript">
let cash = 0;

const Bank = {
    deposit(amount) {
        cash += amount;
        return cash;
    },
    withdraw(amount) {
        if (amount <= cash) {
            cash -= amount;
            return true;
        } else {
            return false;
        }
    },
    total() {
        return cash;
    }
}

module.exports = Bank;
</code></pre>
<code>Bank</code> object behaves like a Singleton because we will use <code>module.exports</code> and <code>require()</code> statement (not use <code>new</code> keyword).

<em>app.js</em>
<pre><code class="language-javascript">
const fund = require('./Bank');
const atm1 = require('./Bank');
const atm2 = require('./Bank');

fund.deposit(10000)

atm1.deposit(20)
atm2.withdraw(120)

console.log(`total-atm1: ${atm1.total()}`)
console.log(`total-atm2: ${atm2.total()}`)

fund.deposit(2000)
console.log(`total-fund: ${fund.total()}`)
</code></pre>
As you can see, we create 3 <code>Bank</code>s (<code>fund</code>, <code>atm1</code>, <code>atm2</code>), every <code>Bank</code> object can deposit or withdraw money. But all of the action work with only one the <code>cash</code> insides <code>Bank</code>.

Here is the result (run with <code>node app.js</code> command):
<pre><code class="language-javascript">
total-atm1: 9900
total-atm2: 9900
total-fund after funding 2000: 11900
</code></pre>

More at: https://grokonez.com/node-js/how-to-implement-singleton-in-node-js-example
Display Vue examples inside VuePress documentation
Tags: vue, vuepress, javascript, webdev
Published: 2021-04-04 08:50:48

Writing documentation with [VuePress](https://vuepress.vuejs.org/) is a breeze! Not only does it have support for Markdown files that get automatically converted to HTML, but it also contains a big collection of Markdown extensions out-of-the-box, including syntax highlighting in code blocks. But that's not all, it also includes site search capability, i18n, custom themes, and the list goes on.

One of the best features though is that you can use Vue components directly inside your Markdown files, thus making it the perfect documentation tool for Vue projects.

What's often needed while documenting software projects is to display "live" examples along with the source code side-by-side. This is where `vuepress-plugin-vue-example` comes in. It's a VuePress plugin that uses Vue SFCs for displaying Vue examples inside VuePress documentation pages.

The plugin is inspired by a similar functionality available on the [Vuetify documentation site](https://vuetifyjs.com). 

### How it works:
Upon initialization of the plugin you have to provide the folder in which all your examples reside. The examples will be just regular `.vue` SFC files.

```javascript
// .vuepress/config.js
const VueExamplePlugin = require('vuepress-plugin-vue-example');

module.exports = {
  plugins: [
    VueExamplePlugin({
      // You need to provide a directory that all the example .vue files will be stored.
      // You can use sub-directories to separate examples into categories.
      componentsPath: '/examples/'
    })
  ],
};
```

Then inside your `.md` files you just have to include a `vue-example` component tag passing to the `file` prop the filename of your Vue example component (without the `.vue` extension)
```html
<vue-example file="example" />
```

**That's it!**

There's now a section inside your VuePress page, containing the live example and the syntax highlighted contents of the template/script/style SFC tags.

You can check out [vuepress-plugin-vue-example here](https://vuepress-plugin-vue-example.netlify.app/).

Have fun writing docs with VuePress!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eweezpix0u4d1xpz6c9g.gif)
Cookies Notification Popup In Bootstrap 5
Tags: bootstrap, welcome, weeklyui, uiweekly
Published: 2021-04-04 08:06:34

Cookies Notification is one type of popup that comes in a website or web page to visit for the first time on a website. So here we made an awesome user interface of Cookies Notification Popup In Bootstrap 5 with CSS3.

In this popup, we used one image with a heading rag and 2 buttons we modified with CSS. Here we also used the new bootstrap 5 utility class for animations side “fade” classes. This is a responsive cookie Notification Popup for the mobile and tablet side.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/cookies-notification-popup-in-bootstrap-5/)
How to increase max upload size in All in one wp migration plugin
Tags: wordpress, php, webdev
Published: 2021-04-04 07:41:22

While migrating WordPress site from local environment to server or server to server All in one wp migration is one of the best options,
But the problem is it has an upload limit of 512M which is not enough while working with a large project. To exceed this limit it offers a paid solution.
Increasing PHP and httaccess file upload limit doesn't work on it.
To extend this we have to use an older version of this plugin 
I recommend Version 6.77 because after that this plugin restricted some features that are use full.
[Download Link](http://tahsinahmed.com/plugin/) 

After installing this, Goto 

wp-content > plugins > all-in-one-migration > constant.php 

Change this value according to your need 

####define('AI1WM_MAX_FILE_SIZE', 1024 * 1024 * 1024);

*PS: values are in bytes*

Oola your upload limit is extended.
Top 5 Must-Have Wordpress Plugins 2021 (Part 1)
Tags: wordpress, plugins
Published: 2021-04-04 07:34:39

Did you know that 40% of the web is built on Wordpress? A time and tested CMS, here's a rundown of ten must-have plugins your Wordpress site could use as of 2021:

## 1) [Advanced Custom Fields](https://www.advancedcustomfields.com/)

<img src="https://i.imgur.com/NP4a3EV.jpg" alt="Photo showing ACF Block and its registration declaration">

Even before Gutenberg, the Advanced Custom Fields plugin has been a staple to extend the core Wordpress functionality. It introduced ACF Blocks in version 5.8 which has made ACF even more future-proof, now being a part of Wordpress' Gutenberg editor.

## 2) [Akismet](https://akismet.com/)

<img src="https://i.imgur.com/dTgrf7z.jpg" alt="Meme saying delete all the spam">

Akismet comes with pre-installed with every installation of Wordpress, and that is for a reason. It has a setting where it can get rid of spam comments for you so you don't have to see the spam - it just _silently_ goes away. Ain't nobody got time for that.

## 3) [GravityForms](https://www.gravityforms.com/)

I could never build a Wordpress site without GravityForms. It simply is the best forms solution for Wordpress. Whether you need a simple newsletter opt-in form, or if you need a dynamic multi-page form with conditional fields - GravityForms does the job well.

## 4) [Better Search Replace](https://wordpress.org/plugins/better-search-replace/)

Sometimes you just need to do a quick search and replace on your website to fix a certain typo. Or a raw HTML code that's scattered on multiple pages. Using Better Search Replace lets you do a dry run - that way you can search your database without finalizing the changes. It's the most straightforward search and replace plugin I've used through the years.

## 5) [Duplicate Post](https://wordpress.org/plugins/duplicate-post/)

There's a lot of duplicate post plugins on the Wordpress plugin repo, but Duplicate Post has been there for awhile now. It's been so effective at what it does that the team behind Yoast SEO, Yoast, has acquired Duplicate Post last 2020. That's just a testament to how good the plugin is.

Please let me know if you agree with this list - and feel free to share your top 5 Wordpress plugins as well!
Hooks pada React
Tags: react, todayilearned
Published: 2021-04-03 09:11:35

Hari ini saya belajar mengenai Hooks pada React. Fitur ini telah ada sejak react merilis versi `16.8.0` nya dimana memang sangat baru implementasinya (sekarang sudah versi `17.0.2`). Sebelumnya untuk melakukan passing nilai variabel dari komponen untuk dikelola harus memakai kelas, ketika saya perhatikan kodenya memang lebih banyak, seperti `extends` ke `React.Components`, membuat `constructor()`, dan keyword `this` yang merajalela dimana-mana.


Apa yang saya pelajari dari Hooks ini:

- misalnya saya punya state seperti berikut untuk membuat app counter
`const [count, setCount] = useState(0);`
terdapat destructuring variabel `count` dan function `setCount` dengan nilai awal dari variabel `count` adalah 0 (diset pada `useState()`), tugas function `setCount()` adalah untuk mengubah value dari `count`

- `setCount` mengambil value dari `count`, sehingga jika kita membuat aplikasi form yang dapat menampilkan isi input form secara _seamless_ maka kita bisa kondisikan dari key pada objek apa yang kita ganti isinya dan sisanya tetap tidak diubah.




Banyak sekali yang saya pelajari mengenai react ini, rencananya setelah belajar react ini saya akan belajar mengenai pembuatan API dan Otentikasi. Setelah itu saya akan kembali lagi ke dasar ilmu dari javascript agar ilmu fundamentalnya lebih kuat lagi. 

Wish me luck!
5 tools to be more productive
Tags: productivity, jokes, agile, leadership
Published: 2021-04-04 07:07:42

# Do you want be more productive?

If you're reading this maybe you just need more rest 😅 , if you think that's true I think maybe the best combination to find your productive moments is your bed and that comfy pillow that goes with it.

It's really important to understand that we as developers first and foremost are human and we need to balance our mind and body to endure long working days.

## So here's my top 5 tools to be more productive

1. [Toggl](https://track.toggl.com/timer) → Is a tool to track your times, this can help you to discover when you are more productive and how many hours you hard work and how rest in your working day.
Remember that is very important take a rest after X amount of time and repeat as many times as you need to in your working day.

2. [Miro](https://miro.com/) → In the absence of physical boards, miro helps us to be more productive in meetings. You can explain a complex problem or flow in simply graphs and collaborate with your team.

3. [Figma](https://www.figma.com/) → If you work in Frontend you might like this tool, it's really amazing, easy to use and easy to collaborate with de UI/UX team. And if you work in Backend and you have never paid attention to the UX work please start doing it now, this is where the magic begins.
4. [Spark](https://sparkmailapp.com) → This is undoubtedly the best email client, It will help you to organice your day, conbine calendars and do tasks from your inbox more quickly.

5. [Notion](https://www.notion.so/) / [Archbee](https://www.archbee.io/) → **Notion** is very useful for building your own personal documentation, meetings resume. Personally, I keep track of my entire career in Notion, reading lists, AWS docs, react native tricks and technical information to share with the team, etc.

And this is the best part because everything is in markdown so you can copy & paste into **Archbee** your work documentation related to a specific project.
Day 21 of 100 days of SwiftUi
Tags: swift, 100daysofcode
Published: 2021-04-04 06:37:29

I just completed day 21 of 100 days of SwiftUi. Today,  I worked on the Guess the flag project utilising concepts I learnt about Vstacks, Hstacks, Buttons, Gradients and Image views. 

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

The project is not yet complete but the code is available on [github](https://github.com/sanmiAde/GuessTheFlag)
49 Days of Ruby: Day 8 - Symbols
Tags: ruby
Published: 2021-04-04 06:05:20

---
title: 49 Days of Ruby: Day 8 - Symbols
published: true
description: Join us on a 49 day learning journey through Ruby!
series: 49 Days of Ruby
tags: #ruby
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9m73qaetuse3nm3y3it8.png
---

**Welcome to day 8 of the 49 Days of Ruby! 🎉**

Today is all about another important data type, the **symbol**! 

## What is a symbol?

A symbol is actually a lot closer to a string than it is to a variable. The main difference is that a string is itself a piece of data, whereas a symbol is used to identify a piece of data.

*A symbol is a form of identification.*

## How do I use symbols?

In Ruby, a symbol can be written with a `:` in front of the identifier, like `:jedi`. The string `jedi` is the identifier, and the `:` marks it as a symbol, 

Symbols can be used as the keys in a Hash:

```ruby
info = { :jedi => "Luke Skywalker", :movie => "Star Wars" }
```

With the above hash, you could access the Jedi by referencing the symbol identifier in `info`:

```ruby
info[:jedi]

# => "Luke Skywalker"
```

Symbols can also be used to represent an instance variable. This will come up later in more depth further in the series. For now, let's take a look at the following example:

```ruby
attr_accessor :jedi

Class Heroes
  def initialize(jedi:)
    @jedi = jedi
  end
end

hero = Hero.new(jedi: 'Luke')

hero.jedi

# => "luke"
```

## What Else Do I Need To Know?

Another important thing to keep in mind about symbols is that they are *immutable*. What does that mean? It means that each symbol is unique and unchangeable. You cannot use the same symbol for two different things in the same object.

We will see further implementations and use cases of symbols later on in our 49 days of Ruby journey! Stay tuned!


**Come back tomorrow for the next installment of 49 Days of Ruby! You can join the conversation on Twitter with the hashtag [#49daysofruby](https://twitter.com/hashtag/49daysofruby).**
Azure Subscription Azure Subscription 'Reactivate' button disabled / greyed-out
Tags: azure
Published: 2021-04-04 06:04:57

---
canonical_url: https://thebernardlim.com/azure-subscription-reactivate-button-greyed-out/
---
On completion of the first 30 days of Microsoft Azure's free trial, your **'Free Trial'** Azure Subscription will be disabled.

To fix this, the subscription needs to be changed to the **'Pay-As-You-Go'** plan instead of the 'Free Trial' plan which it is currently on.
![Image](https://thebernardlim.com/img/posts/2021-03-27-azure-subscription-reactivate-button-greyed-out/reactivate_greyed_out.PNG)

# Steps

1. Access the [Pay-As-You-Go](https://azure.microsoft.com/en-in/offers/ms-azr-0003p/){:target="\_blank"} page. Click on **'Purchase Now'** button
   ![Image](https://thebernardlim.com/img/posts/2021-03-27-azure-subscription-reactivate-button-greyed-out/pay_as_you_go.PNG)

2. Click on **Upgrade your account to pay-as-you-go pricing'**
   ![Image](https://thebernardlim.com/img/posts/2021-03-27-azure-subscription-reactivate-button-greyed-out/pay_as_you_go_2.PNG)

3. Choose your preferred plan. As per screenshot, **Basic** plan has been chosen.
   ![Image](https://thebernardlim.com/img/posts/2021-03-27-azure-subscription-reactivate-button-greyed-out/pay_as_you_go_3.PNG)

4. That is all there is. After a while a notification popup will appear saying that Subscription has been upgraded.
   ![Image](https://thebernardlim.com/img/posts/2021-03-27-azure-subscription-reactivate-button-greyed-out/subscription_upgraded.PNG)

One thing to note, it might take awhile for the services to fully kick in. An example is if you try creating Budgets right after switching plans, it might not work right away.
Stack
Tags: datastructures
Published: 2021-04-05 01:24:56

---
title: Stack
published: true
date: 2021-04-04 06:00:00 UTC
tags: datastructures,datastructures
canonical_url: https://jsedano.dev/data-structures/2021/04/04/stack.html
---

My notes on the `stack` abstract data type with an implementation using an array in Java.

You can find the complete code for this and other data structures here: [data structures and algorithms](https://github.com/jsedano/examples/tree/main/data-structures-and-algorithms)

A `stack` is an `abstract data type` that mimics a real world stack where you can place elements on the top or you can take the top element. The behavior of the stack is described as `last in first out` (LIFO).

Common Operations for a stack includes:

| Operation | Complexity |
| --- | --- |
| push(element) | O(1) |
| pop() | O(1) |

Push will place a new element on the top of the stack.

![node](https://jsedano.dev/assets/images/stack/push.jpeg)

```
public boolean push(T valueToPush) {
    if(size == innerArray.length) {
        return false;
    }
    innerArray[size] = valueToPush;
    size++;
    return true;
}
```

Pop takes out the top element from the stack and returns it.

![node](https://jsedano.dev/assets/images/stack/pop.jpeg)

```
public T pop() {
    if(size == 0) {
        throw new NullPointerException("empty stack");
    }
    T valueToPop = innerArray[size - 1];
    innerArray[size - 1] = null;
    size--;
    return valueToPop;
}
```

In this implementation the `capacity` of the stack is the capacity of the `inner array`. We keep track of the size of the stack by increasing or decreasing the size with every pop and push, by doing this we always know that `top` is at `innerArray[size-1]` and when we do a push we put new element at `innerArray[size]`.

Implementing a stack using a [linked list](https://dev.to/jsedano/linked-list-3i3c) would be even easier because we can keep prepending a new node to the linked list with every push and for the pop we only need to get the first element, remove it from the list and then return it.

Download the complete code for this and other data structures here: [data structures and algorithms](https://github.com/jsedano/examples/tree/main/data-structures-and-algorithms).
Tomato, diseases and how to detect it. 
Published: 2021-04-04 05:30:06

I'm starting a new project about tomato ! Why ? My mom has a little tree of tomato and I see it every time growing and something we eat it, taste very good. 
Investigating I realized that tomato has a lot of disease. So the beginning of this project is trying to detect it, but first we need to understand their behavior.
ASAP
Andrea
What password manager should developers use ?
Tags: password, webdev, discuss, security
Published: 2021-04-04 05:10:00

What is the best open-source password manager out there?

Should we use password managers built into browsers like Firefox or Chrome?

Or should we use dedicated applications like Bitwarden?

What do you use and why? Please comment below.

What are the pros and cons of different applications?

Should we write our own script to manage passwords?

Or should we store them in offline files?

{% link https://dev.to/aahnik/how-do-you-bookmark-and-take-notes-2h45 %}