teleren/devto huggingface dataset:
What's the difference between attributes and properties?
Tags: javascript, webdev, html, beginners
Published: 2020-08-16 00:01:27

> An *attribute* is the additional information defined in an HTML element to be initialized upon creation. A *property* is a characteristic of a DOM node(object) that you can manipulate.

As I started to learn web development I discovered these two terms that appear to mean the same exact thing. In fact, some *HTML element attributes* and *DOM node properties* have 1 to 1 mappings that represent the same thing. 

```javascript

// HTML Element
<input type='text' value='name' id="signup">

// DOM Node
let inputValue = document.getElementById('signup').value

#=> The value in both cases return 'name'

```

So what is the big difference? In the creation, HTML *attributes* will determine the initial qualities of the object. With the help of the [DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) and javascript, the HTML is parsed in turned into an object that we can work with. Objects have *properties* that we can manipulate to change the look, feel, and behavior of our applications. 

```javascript
<p id="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus tortor quam, sed consectetur odio tempus ac. Maecenas fermentum vestibulum pulvinar. Aenean ex tellus, dictum ac accumsan ut, accumsan nec lectus. Donec semper feugiat blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pulvinar enim nec ante hendrerit, eu posuere enim placerat. Maecenas lorem velit, posuere in commodo at, laoreet vitae turpis. Nunc libero orci, venenatis at maximus eu, pharetra nec erat. Aliquam a convallis ex, congue fringilla arcu.</p

let para = document.getElementById("example");
para.style.color = "blue"

#=> This will change the color of the text through the style property.
```

I hope this helps you understand more about the differences between attributes and properties. If you enjoyed this explanation, feel free to comment below or follow me for more blog posts. 

Terry Threatt
Add tab to search in your Gatsby blog
Tags: gatsby, react, blog, search
Published: 2020-10-14 23:57:54

---
title: Add tab to search in your Gatsby blog
published: true
date: 2020-08-16 00:00:00 UTC
tags: gatsby, react, blog, search
canonical_url: https://jorgeruvalcaba.dev/blog/2020-08-16-tab-search/
---

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/nq27ztqy6ceycndh4rss.gif" alt="Tab to search demo gif"/>
  <figcaption>You can go to the [blog](https://jorgeruvalcaba.dev/blog/) main page of my blog to see the demo</figcaption>
</figure>

This is a cool trick that I just learned about today that can help the UX of your blog.

There’s a cool Chromium browser feature called [Tab to Search](https://www.chromium.org/tab-to-search), which lets you quickly search a site via a Chromium address bar (aka the Omnibox).

Here are the three quick steps to add it to your search-enabled Gatsby blog:

1. Create a file named `opensearch.xml` in your `static` directory (`src/static/opensearch.xml`) and add the following:

```
<?xml version="1.0"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>[Your Blog's Name]</ShortName>
  <Description>[Your Blog's Description]</Description>
  <Url type="text/html" method="get" template="https://[your-url]/blog/?search={searchTerms}"/>
</OpenSearchDescription>
```

Make sure to add your preferred `<ShortName>` and `<Description>` text content. The `<Url>` template is the URL where the search is taking place. In our case, it’s `/blog/?search={searchTerms}`, with `{searchTerms}` being the string the user types into the Omnibox. These tags are required for Chromium to add your site to the list of searchable sites and automatically enable this feature.

1. Copy the default `html.js` file to your Gatsby site so we can [modify the default HTML Gatsby file](https://www.gatsbyjs.org/docs/custom-html/).

```
cp .cache/default-html.js src/html.js
```

1. In your newly created `src/html.js` file, add the following `<link>` tag:

```
<link
  type="application/opensearchdescription+xml"
  rel="search"
  href="opensearch.xml"
/>
```

And that's it! With this change in place, you’ll have this neat feature up and running in your blog 😎!
How to convert string to base64 value and vice versa in JavaScript?
Tags: javascript
Published: 2020-08-16 00:00:00

---
  title: How to convert string to base64 value and vice versa in JavaScript?
  published: true
  tags: JavaScript
  date: Sun Aug 16 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/encode-decode-string-base64-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-3536c75ead7515d9edf391751995ff6a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/encode-decode-string-base64-javascript)
  
In computer science, Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation - as stated in [Wikipedia](https://en.wikipedia.org/wiki/Base64).

To make it simple, it represents binary data in ASCII format.

## How to convert a string to base64?

To convert a string to base64 you have to use the `btoa()` method in the `window` object in the browser.

- You need to pass the string as an argument to the `btoa()` method.
- The method returns a base64 encoded value.

```javascript
// string
const str = "Hello, World!";

// convert to base64
const base64 = btoa(str);

console.log(base64); // SGVsbG8sIFdvcmxkIQ==
```

## How to convert a base64 to string?

To convert a base64 to string value you have to use the `atob()` method in the `window` object in the browser.

- You need to pass the base64 value as an argument to the `atob()` method.
- The method returns a string value.

```javascript
// base64 value
const base64 = "SGVsbG8sIFdvcmxkIQ==";

// convert to string
const str = atob(base64);

console.log(str); // Hello, World!
```

## Abbreviation

- `btoa`: stands for **binary to ASCII**
- `atob`: stands for **ASCII to binary**

### Feel free to share if you found this useful 😃.

---
Cross Domain Security
Tags: security, websecurity, crossdomain
Published: 2020-09-01 10:55:38

---
title: Cross Domain Security
published: true
date: 2020-08-16 00:00:00 UTC
tags: Security,WebSecurity,CrossDomain
canonical_url: https://www.loginradius.com/engineering/blog/cross-domain-security/
---

Cross domain security address security threat by enabling the information sharing in more reliable and secure environments. Cross domain security is an inclusive approach to defending against all kind of threats to data connections at the boundaries of sensitive or classified networks.

   
[Read On](https://www.loginradius.com/engineering/blog/cross-domain-security/)
Making Discord Bot Commands
Published: 2020-08-15 23:22:17

Oh boy! Another week has passed and I learned a lot more about discord bots in general. Discord.js makes everything so simple to run and use!

Today, I want to write about just coding a simple discord command. This would just output Hello world!

So first we would start on how to actually get what messages are being sent on your discord server

Right under my previous code where I showed you how to turn on your discord bot, we're gonna add a code to listen for any messages that may start with !hi

But first lets get the basics up on how to actually get messages from your discord server

Under your *client.login*

We're going to add 
``client.on('message', message => {
})};``

Inside this code block is how we'll be getting our messages!

So we want the only the message content, not any other thing. Inside the code block lets check for the message to say !hi
``client.on('message', message => {
   if (message.content === `!hi`) 
})};``

Now we're checking if the message is exactly !hi
Now lets output something back!

``client.on('message', message => {
   if (message.content === `!hi`) {
   message.channel.send('Greetings.');
}
})};``

Message.channel.send basically is your bot outputting message into that discord server channel and only that channel. 


![It should look something like this at the end](https://i.imgur.com/fccSt0W.png)
Practical Front End Development Part 4 - Deployment
Published: 2020-08-15 23:18:21

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/34fmrpsw7mbdn9tvfcl6.gif)
.
# Netlify
.
in short help you host your static website (HTML, CSS, Javascript)
.
## First 
* Got to [netlify](https://app.netlify.com) and create an account
* On your dashboard there is a place for you to upload your application
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v84blxiwu7c7r4t7gvbj.png)
* Drag and drop your project folder 
* After uploading, netlify will automatically deploy the app and create a custom URL for you to access the application live
* After successful deployment the website will be listed under your website
.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/16fukb1kkbvwb7cxrla3.png)
Keep a Changelog Up To Date
Tags: actionshackathon, github, githunt, automation
Published: 2020-08-15 22:57:06

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)


### My Workflow
My team recently was running into a problem generating reliable release notes for our software. We decided we wanted to automate it from a `CHANGELOG.md` file. However, that meant we needed to always keep that file up to date with changes.

So I made a GitHub action that enforces that changes had been made to the file 😀

### Submission Category: 
Maintainer Must-Haves

### Yaml File or Link to Code
The repository can be found here {% github https://github.com/dangoslen/changelog-enforcer %}
 
### Additional Resources / Info
You can use this action in conjunction with the [Changelog Reader Action](https://github.com/mindsers/changelog-reader-action) to keep an updated `CHANGELOG.md` file and automatically generate release notes with your GitHub releases! 

An example workflow is found in the [Changelog Enforcer Workflows](https://github.com/dangoslen/changelog-enforcer/blob/master/.github/workflows/release.yml) which creates a new version on every push to master.

Hope you enjoy it!
Day 06 React
Tags: 100daysofcode, react, motivation
Published: 2020-08-15 22:41:19

Today I learn state management in react js.
Also, start a project but due to yelp API, I'm not able to complete it. because the yelp API confirmation message not received.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ov1m8tvigyu3rtzsfyoe.png)
one thing I want to say Thanks to Dev Community.
I learn a lot of things from Dev Community.
I read lot of posts about development.
Thanks from the heart all of you.
Portfolio V1
Tags: vue, beginners, javascript
Published: 2020-08-15 22:33:23

After weeks of learning(still learning), i've finally finished the first version of my portfolio website. Built from scratch using Vue and bootstrap. It still needs improvement but i'm glad i was able to finish and deploy it. Now i have something other than my github i can show recruiters lol.

Check it out here -https://olabamijioyetubo.netlify.app/
Source code is @ https://github.com/bigboybamo/Portfolio-v1
Wijmo — Made with Vue js showcase | Made with Javascript
Tags: javascript, vue, react, showdev
Published: 2020-08-15 22:16:22

![Wijmo — Made with Vue js showcase | Made with Javascript](https://dev-to-uploads.s3.amazonaws.com/i/a2s0xk8i3eynpstj088m.png)

High-performance JavaScript UI controls for enterprise apps

> ## FlexGrid
> The best JavaScript data grid includes built-in sorting, formatting, pagination, and flexible data binding
>
> ## FlexChart
> Includes 50+ chart types, dozens of chart elements, interactions, and customizations
> 
> ## Input
> Includes autocomplete, colorpicker, date/time, masks, menus, multiselects, and more
> 
> ## OLAP
> Process and aggregate thousands of rows in milliseconds with no server-side dependencies. Not available in Wijmo Core.
>
> ## FinancialChart
> Instantly create stunning, advanced stock trending visualizations with this powerful financial chart control. Not available in Wijmo Core.
>
> ## ReportViewer
> View reports in your web apps with this lightweight report viewer

## Want to get your Javascript project Featured on Made with Javascript?

- It is very easy to submit your project, especially if you are a developer. Just go to this github repository and create a PR with a file for your project.
- If you are not a developer and will like to submit a project for Made with Javascript, just fill out the below form and we will get in touch!
https://forms.gle/dWfFLBso4uMCViHW7
- If you still have any queries, shoot an email to us at madewithjavascript@gmail.com

> Already shared on various social media:
>
> - [Twitter](https://twitter.com/withjavascript/status/1294755368627843073?cxt=HHwWgsC9obvJ8vcjAAAA)
> - [Medium](https://medium.com/made-with-javascript/wijmo-made-with-vue-js-showcase-made-with-javascript-f205d26abc81)
> - [Facebook](https://www.facebook.com/permalink.php?story_fbid=179721060258382&id=104218054475350&__xts__[0]=68.ARA51cT4imuOl64SVSDKAYtRMFARpknbpyLkUufXftLfKPEj1qhdKicYkaL6vO9nfsauWuvU_q7MBiuah689nFHXltyxaclYK_wM0PZWC7xNaZyg09_73m4_EjchMnLHu_c_PTAo197NSZWsOmz1iRHaPBMkw0lmEnZIWsd95UtMoqCN8j9nBfec7hdD4ZCpsKe9W-H2RcInnCoOD0ENZLEexoD1m_3g8tyUxZjGHaxtSyjWMdzj_uI9bJfqaVtU1rPFGWqmhdSfqUbNWUBHAX1FvoTPramCL54xAQvrK6Np8dmP_PrEFi7liWdjaN79_edOxGRpYjoAREKz87cLFHk&__tn__=-R)
> - [Pinterest](https://pin.it/VUPON35)
> - [Tumblr](https://madewithjavascript.tumblr.com/post/626554947514908672/wijmo-made-with-javascript-vue-js)
> - [LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6700523974083821568/)
Valid Parentheses Problem
Tags: javascript, algorithms, beginners, functional
Published: 2020-08-15 22:13:13

> How to solve the Valid Parentheses Problem in JavaScript

### What is the **Parentheses Problem**?
Your _function_ is passed a _string_ of brackets. If each open bracket in the string has a corresponding closing bracket and they're in the correct order, then this is considered a balanced string of brackets.

1. Open brackets must be closed by the same type of brackets.
2. Open brackets must be closed in the correct order.

```javascript
"[]"        // Valid
"}{"        // Invalid
"{({[]})}"  // Valid
"{({[]}))"  // Invalid
```
## Our Approach
We're going to be using a **Stack** to solve this problem. JavaScript doesn't have Stacks by default but a simple **Array** gives us enough of the original Stack functionality to make this work. This array will follow a **LIFO** (Last In First Out) behavior.

## Pseudo-code
Let's try to solve this example using plain old English 
>'[{()}]'

1. Iterate over the entire _string_ once
2. For every **open** bracket we _push_ it to the stack
3. For every **closed** bracket we get the last open from the stack
4. If both the closing and opening brackets match we _pop_
5. If they don't, we end the loop and return false

## Time to Code
![excited](https://media0.giphy.com/media/rVbAzUUSUC6dO/giphy.gif?cid=ecf05e474tkvv0ccnrv12riclhkcf7faoeypw2otqlpuahlr&rid=giphy.gif)
```javascript
const stack = []
const brackets = {'(':')', '[':']','{':'}'}
```
We created our first data structures. An array to act as our stack and an **Object** to map our brackets.

```javascript
for (let i = 0; i < str.length; i++) {
        const currentBracket = str[i];
        
        if (brackets[currentBracket]) {
            stack.push(currentBracket)
...
```
Here we create a basic _for-loop_ to iterate over our entire string. For every bracket we find we _push_ it to the top of the stack **only** if is an **open** bracket.

```javascript
const lastOpenBracket = stack[stack.length - 1];
if (brackets[lastOpenBracket] != currentBracket) {
    return false;
}
stack.pop();
...
```
If the current bracket is not **open** then it must be a **closed** bracket. We grab the last **open** bracket from our _stack_ and compare them. If the pair doesn't match, we return false. If they do, we **pop** the stack and continue.

Here's the entire code;
```javascript
function isValid(str) {
    const stack = []
    const brackets = {'(':')', '[':']','{':'}'}

    for (let i = 0; i < str.length; i++) {
        const currentBracket = str[i];

        if (brackets[currentBracket]) {
            stack.push(currentBracket)

        } else {
            const lastOpenBracket = stack[stack.length - 1];
            if (brackets[lastOpenBracket] != currentBracket) {
                return false;
            }
            stack.pop();
        }
    }
    return stack.length === 0;
}
```

## Congratulations !
We just solved the Valid Parentheses Problem. This question was a very common interview question back in the old days but its still relevant today and we can learn a lot from it. Hope you enjoyed this read, happy coding !
Rigging Math.random()
Tags: javascript
Published: 2020-08-15 22:00:57

`Math.random()` returns a random decimal number between 0 and 1 (1 being exlusive). So 0, 0.5 and 0.99999 are all valid returns for this JavaScript function. 

But what the hell can we do with that?

Pro tip: Scroll to the bottom where I created an NPM package to handle many JavaScript random number generation for you to use ;)

Well, here's one advanced example! What if we can pass in an array of arrays to a function containing data and the percent chance of it being selected against all of the other elements in the array? Sounds a bit confusing but let's take a look at an example array argument:

```js
const arr = [
  ["Hoyt", 15],
  ["Kassad", 30],
  ["Silenus", 45],
  ["Weintraub", 10],
]
```

As you can see above, there are strings that we want to use to represent our data to be randomly selected. You can replace this with a number, another array, an object, etc. And the second element in the index is a number representing the percent chance of that array to be selected.

```js
chance(arr) {
    const total = arr.reduce((acc, curr) => acc + curr[1], 0);
    if (total !== 100) throw new Error("sum of percentages must equal 100");

    const sorted = arr.sort((a, b) => a[1] - b[1]);

    const percent = to(100);
    let sum = 0;

    for (let j = 0; j < sorted.length; j++) {
      sum += sorted[j][1];
      if (sum >= percent) {
        return sorted[j][0]
      }
    }
  }
}

to(num) {
  return Math.round(Math.ceil(this.randomizer() * num + (num > 0 ? 1 : 0)) - 1)
  }
```

In the code above we've made two functions. `chance()` is the one we've been talking about but it also uses a function called `to()`. Looking at `chance()` the first section checks to see if the sum of the numbers in the arrays equals 100. If it's any more or any less we throw an error.

Then we create a constant called `sorted` which is all of the arrays sorted by the smallest percent chance of happening to largest. We also create `sum` and set it equal to 0.

From there we create a random percent value between 1 and 100 (inclusive) using our second function `to()`.

Lastly, we add the percentage chance of the first element to our `sum` variable. We create a standard `for` loop to go through each array. If `sum` is less than `percent`, we repeat the loop by adding the next percent chance to `sum`. We repeat this until `sum` is equal to or greater than `percent`. And that, ladies and gentlemen, is how you rig JavaScript randomization.

I've created a little side project to handle various number randomization methods on npm called [totally-random](https://www.npmjs.com/package/totally-random). It can create a random number between two numbers, a random number up to a positive number or down to a negative number, random strings (alpha, numeric and alphanumeric) of different lengths, random colors (hex, rgb, rgba, hsl and hsla), and much, much more!

It is **open source** so feel free to contribute if you find this package to be of any use to you :)
Midyear Web Dev Plan
Tags: timemanagement, projectmanagement, productivity, webdev
Published: 2020-08-17 15:01:07

---
title: Midyear Web Dev Plan
published: true
date: 2020-08-15 21:50:40 UTC
tags: timemanagement,projectmanagement,productivity,webdevelopment
canonical_url: 
cover_image: https://cdn-images-1.medium.com/max/500/0*FVQXWPa5M6AKfN8n
---

![](https://cdn-images-1.medium.com/max/500/0*FVQXWPa5M6AKfN8n)

With a [midyear summary](https://dev.to/jmspace/an-update-to-2020-5fgk), there must be a mid-year project update. A more detailed inside on the projects that I have been working on.

In the midst of starting a new job, I have stopped coding. I stopped my day once I clock out. Starring at a screen intensely for hours, makes me want to sit in the dark. And that’s what I’ve been doing after work. I feel like I am adjusting to where my eyes don’t hurt. I started working in the dark with no lights on. I don’t need to see while working, so no lights need to be on.

### My new plan going forward

- No working on the weekend
- No late afternoon shifts; try to finish by 3 pm
- Start small, gain momentum
- Code on the weekend more because coding during the week may be hard

### Coding Projects

**30 Days 30 Sites**

Keep learning while coding, I have decided to learn something new or watch a new tutorial before starting a new webpage. I wanted to add some new elements to the webpages I was creating. I didn’t want it to be the same thing over and over.


**Learning New Elements**

Starting out, I want to review a Sass tutorial. I don’t think I fully got what I can do with this the first time I learned this. So I am going through another tutorial and maybe every webpage created going forward will use Sass. I don’t know why, but I have to do a tutorial every time I try to use CSS Grid. Fifth times a charm guess. I want to Designing webpages and coding them properly. My Figma designs are aligning with my coding and I want to make this process more efficient. There are also adding transitions, animations, and some JavaScript functions to add my projects.

* * *
I need help please 
Tags: laravel, php, mysql, controller
Published: 2020-08-15 21:27:19

Please I have a laravel website which have been working fine then all of a sudden when a user uses a referral link to register, the page will reload and redirect back to the registration page. I tried it for few times and it works then I used the new referral link to register another new account and didn't work again ever since then. And its not showing any error message but rather bounce back to same page. I have checked the RegistrationController and all the code is still fine as same before. Please I really need this help.

Thanks in Advance
Are there emerging scrolling methods?
Tags: scrolling, discuss
Published: 2020-08-15 21:20:59

---
title: Are there emerging scrolling methods?
published: true
description: Is anyone creating new scrolling methods? 
tags: Scrolling , discussion
//cover_image: https://direct_url_to_image.jpg
---

We have all heard of popular scrolling methods like parallax scrolling and infinite scrolling. These two (along with default scrolling) have taken the web by storm. But are there less popular or emerging scrolling methods? Is it even possible?