teleren/devto huggingface dataset:
How to define yourself?
Tags: javascript, css, webdev, career
Published: 2020-05-08 20:46:36

---
title: How to define yourself?
published: true
description: 
tags: javascript, css, webdevelopment, career
---

Have you ever faced the situation when you do a lot of things with javascript, as node.js or react.js, like to create some websites, create and cosume some APIs, but when you need to confront yourself against CSS you just fell that it sucks. How do you define yourself in this case, since Front-end developers need to be "ok" with your CSS knowledge, but you think that you dont have those skills to create a wonderful styles?
Emulating Fn::StartsWith in CloudFormation
Tags: aws, cloudformation
Published: 2020-05-08 17:45:50

# Overview
CloudFormation has a limited number of [intrinsic functions](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/intrinsic-function-reference.html) that can be combined in some interesting ways.

One of the intrinsic functions I wish existed is `Fn::StartsWith`. As the name implies, the objective is to check if a string begins with another string. While this operation doesn't exist natively, it can be constructed using the existing intrinsic functions.

# Part 1 - Fn::Split
`Fn::Split` is an intrinsic function used to split a string into an array using a delimiter string. It's most commonly used to split on a punctuation mark, such a comma (`,`). One of the side effects of applying this function, is that the resulting array does NOT contain the delimiter string, which we can leverage.

Consider the following example:
```yaml
!Split [ "world", "hello world!" ]
```
Which produces this result.
```yaml
[ "hello ", "!" ]
```
As you can see, the word _"world"_ is gone from the result.

Let's do this again using _"hello"_ instead:
```yaml
!Split [ "hello", "hello world!" ]
```
We get:
```yaml
[ "", " world!" ]
```

Now the lightbulb is turning on. Indeed, when the first string of a `Fn::Split` operation is empty, it means the split operation found an occurrence of the delimiter string at the beginning. Let's use this!

# Part 2 - Fn::Select and Fn::Equals
Fortunately, `Fn::Split` always returns an array of at least one element. This makes it safe to always access the first item in the returned array. We can use that to compare the value to an empty string.
```yaml
!Equals [ !Select [ 0, !Split [ PREFIX, VALUE ], "" ]]
```

# Part 3 - Beware of empty strings
An empty string, split on any delimiter string, always produces an array with a single empty string in it. This gives us a false positive if we don't check for it.
```yaml
!Not [ !Equals [ VALUE, "" ]]
```

# Final - Putting it all together
Combining the empty string check and the `Fn::Split` function gives us an implementation of `Fn::StartsWith`.
```yaml
!And [ 
    !Not [ !Equals [ VALUE, "" ]],
    !Equals [ !Select [ 0, !Split [ PREFIX, VALUE ]], "" ]
]
```

I hope you found this useful. If you know of other patterns to emulate missing functionality in CloudFormation, please leave a comment!

Happy Hacking!
How to Restore "Always open link checkbox" in Chrome 77+

Tags: tutorial, productivity, chrome
Published: 2020-05-08 20:00:57

I am in the process of setting up my workstation on my new Thinkpad T495 for work and I noticed on every Zoom or Slack link that opened in Chrome it would prompt with an xdg-open dialog box. 

![Always open links of this type in the associated app is missing!](https://dev-to-uploads.s3.amazonaws.com/i/emychtem452r4dhgx0xy.png)

This is pretty annoying! I just want it to open up the external Linux application automatically. This dialog box used to have a check box where you could just accept this action and always open this link in the correct app.

It turns out the they [removed this check](https://support.google.com/chrome/thread/14193532?hl=en) box in Chrome 77+. What a bummer! If you have an older Chrome profile that was made with a version below Chrome 77, and you already checked this box, you would have never known they removed it. 

After some digging, I found a [documentation site](https://org-roam.readthedocs.io/en/develop/roam_protocol/) for an Org-mode plugin(?) that shows how to add this checkbox back into Chrome. You can use [Managed Policies](https://www.chromium.org/administrators/linux-quick-start) to add the [​External​Protocol​Dialog​Show​Always​Open​Checkbox](https://cloud.google.com/docs/chrome-enterprise/policies/?policy=ExternalProtocolDialogShowAlwaysOpenCheckbox) Chrome Enterprise Policy to re-enable this checkbox.

##TL;DR

If you don't want to read the above links, you can quickly do the following:

### Linux

```
sudo mkdir -p /etc/opt/chrome/policies/managed/
sudo tee /etc/opt/chrome/policies/managed/external_protocol_dialog.json >/dev/null <<'EOF'
{
  "ExternalProtocolDialogShowAlwaysOpenCheckbox": true
}
EOF
sudo chmod 644 /etc/opt/chrome/policies/managed/external_protocol_dialog.json
```

### OS X 

```
defaults write com.google.Chrome ExternalProtocolDialogShowAlwaysOpenCheckbox -bool true
```

After setting the above for your respective OS, you will need to restart Chrome. Then open the link that wants to open an external application and you will get prompted with the dialog box again, but with a  _Always open links of this type in the associated app_ checkbox! 

![Always open links of this type in the associated app re-enabled](https://dev-to-uploads.s3.amazonaws.com/i/motey4kf9duofvw4t0t5.png)

Just check that box and you will never see this prompt again for the application! Wooo!!
Why I wanted to become a Software Engineer
Published: 2020-05-08 19:39:04

I have always been interested in coding. Ever since I was making backgrounds and changing the layout of my MySpace accounts. Of course back then I had no idea I was coding. Adding a little “</br>” line break here or there. Or manually creating a slideshow did not seem that difficult back then. Just knew I wanted my page to look extra “poppin”

When I went to college, I thought I had everything figured out. I would graduate a business major. Do something in business, get rich, be happy. . . RIGHT? Well WRONG, of course. I was miserable and caught myself missing the challenges associated with coding. I went to work and realized how tedious the work is and how different I was from everyone else at my job who felt that this was it.

I took a part time web development course with New York Coding and Design Academy and although my teacher was AMAZING! The school was not very helpful with resources. They did not provide you with any real tools on how to get a job after completing the course. I made some amazing coding freinds but as for a career. . . I was still stuck in finance.

Flash forward to today and I finally decided to put my money towards my future again with Flatiron Academy. I am hoping to apply my past learnings as well as learn more to build my portfolio up and get a job as a Software Engineer finally. Let see how this ends.

. . .
Originally published at https://sincerelybrittany.github.io on February 20, 2020.
Win a $50 Gift Card to the DEV Shop!
Tags: giveaway, developer, beginners, webdev
Published: 2020-05-08 19:31:03

---
title: Win a $50 Gift Card to the DEV Shop!
published: true
description: Follow Programming Liftoff to have a chance of winning $50 of store credit to the DEV Shop!
tags: giveaway, developer, beginner, webdev
---

Want to have a chance to win a $50 gift card to the [DEV Shop](https://shop.dev.to)? Just do the following:

1. Subscribe on YouTube: https://youtube.com/c/programmingliftoff

2. Follow on Twitter: https://twitter.com/programliftoff

3. Follow on DEV: https://dev.to/programmingliftoff

4. Comment here with a programming topic you'd like to learn!

We will post in the comments who won on Friday May 15th and we'll send the winner the $50 gift card code using the private message (Connect) feature on dev.to.

*The winner will be selected randomly. If we are unable to contact the winner within 3 days, we'll choose a new winner.*
Where Do You Get Your Inspiration for Web Design/Development?
Tags: discuss, watercooler
Published: 2020-05-08 19:20:38

---
title: Where Do You Get Your Inspiration for Web Design/Development?
published: true
description: 
tags: discuss, watercooler
---

Where do you get your inspiration for web design or development?

My go-to sites are:
- [Smashing Magazine](https://www.smashingmagazine.com/)
- [CSS Tricks](https://css-tricks.com/)

Our sites are a representation of our magazines, so I'll also check to see what popular media sites are up to:
- [Mashable](https://mashable.com/)
- [NY Times](https://www.nytimes.com/)
- [Washington Post](https://www.washingtonpost.com/)
- [The Atlantic](https://www.theatlantic.com/)

I may be looking for things like how they do their sub-branding or how they promote their native advertising.

What about you?
Drop It Like It's Hot
Tags: css, bootstrap
Published: 2020-05-08 19:15:54

**Bootstrap to drop support for Internet Explorer in the upcoming v5 release.**

[Read the pull request](https://github.com/twbs/bootstrap/pull/30377). 
﻿
My company is currently in the process of upgrading some internal applications from Bootstrap 3 to 4, so I didn't realize all of the changes coming in version 5.
﻿
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/14jf6cetpuakxj64f4nq.jpg)
﻿
[This article](https://medium.com/@themeselection/bootstrap-5-release-date-important-updates-and-latest-tutorial-b9e66e807e67) on Medium has a great rundown of what to expect in the new version.

**tl;dr**
* Moving from Jekyll to Hugo
* Jquery removed in favor of pure javascript
* Drop support for Node.js 8
* Revamped grid layout
* Responsive sticky top
﻿
If you want to take a look at a demo of version 5, [MDBootstrap.com](https://mdbootstrap.com/) has a pretty cool [demo site](https://v5.mdbootstrap.com/).
👋
Published: 2020-05-08 19:15:51

Hello, DEV! Below is the code that was used to generate your sock design with [Processing](http://processing.org/). Can't wait to hear what you think 😃

``` java
float stripeHeight, stripeY, slope;

void setup() {
  size(168, 400);
  background(255);
  noStroke();
  noSmooth();
  stripeHeight = height/20;

  for (int i = 0; i < 40; i++) {

    if (i % 6 == 0) {
      fill(#f39090);
    } else if (i % 6 == 1) {
      fill(#fde090);
    } else if (i % 6 == 2) {
      fill(#f3ef9a);
    } else if (i % 6 == 3) {
      fill(#5ac1ae);
    } else if (i % 6 == 4) {
      fill(#8aafda);
    } else if (i % 6 == 5) {
      fill(#f6b4ce);
    } 

    stripeY = i * stripeHeight;
    slope = (stripeHeight * 6);
    
    quad(0, stripeY - slope, width, stripeY, width, 
      stripeY  + stripeHeight, 0, stripeY - slope + stripeHeight);
  }

  saveFrame();
}
```
Make javascript to communicate between different tabs
Tags: frontend, javascript, webdev
Published: 2020-05-08 18:55:02

Hello Everyone, I hope you're doing great.

In this article, I'm going to discuss how to communicate between different tabs using **Broadcast Channel API**.

Broadcast Channel API allows basic communication between browsing contexts(i.e windows, tabs, frames, or iframes) and workers on **same origin**.

###Websites not come under the same origin
 - http://www.dev.to
 - http://dev.to
 - https://dev.to
 - http://dev.to
  Here hosts and ports are different. Http uses port 80 and Https uses 
  port 443

###Wesbites come under same origin are:
 - https://dev.to
 - https://dev.to/
 - https://dev.to/blog.html

##Let's get our hands dirty🚀.

We will try to update heading in all the tabs when user updates heading in one tab.

Create 2 HTML pages and 2 javascript files. Lets say **tab1.html, tab2.html, tab1.js, tab2.js.** Import tab1.js in tab1.html and same order for tab2. Create a broadcast channel in both js files and should have the same channel names.

```js
const bc = new BroadcastChannel('update-heading');
bc.onmessage = (eventMessage) => {
 
}
```

In both HTML pages add a title and in tab1.html add input element so that we can listen to this event and update the value in localstorage.

HTML in tab1 should be 
```html
<h1 id="title"> Hello </h1>
<input type="text" id="input" />
```

```js
const bc= new BroadcastChannel('update-heading');
const title = document.getElementById('title');
const input = document.getElementById('input');
input.onkeyup = (e) => {
    const val = e.target.value;
    title.textContent = 'Hello ' + val;
    localStorage.setItem('title', val);
    bc.postMessage('update-title');
}
```

On every keypress, we will call a method 'postMessage' in broadcastChannel.
When broadcast posts something, we will listen onmessage method from broadcast. And also updating the title in localStorage. So that in tab2.js, when broadcast onmessage is triggered, we can fetch value from localStorage and update DOM. 

**In tab2.js**
```js
const bc = new BroadcastChannel('update-heading');
const title = document.getElementById('title');
bc.onmessage = (eventMessage) => {
 const val = localStorage.getItem('title');
 title.textContent = 'Hello ' + val;
}
```


For code, [Please visit here](https://github.com/akashpinnani/broadcast-channel-api) .

**Broadcast Channel is used for communication between same origin.**

If you want to do cross origin communication, you can use **window.postMessage()** method, where window is the reference object of other domain's window.

Thank you for your time. Have a great day🙂.
Building lightweight single page apps
Tags: javascript, webdev
Published: 2020-05-08 18:28:06

My most recent project involved building a single page application. In this post I will share my strategy as well as some tips.

Codr didn't start off as a single page application. Each page was actually, like on any other regular website, just another page. But after speed tests and optimizing for offline usage, I had to adjust my strategy. I had to convert the individual pages into a single page app; to make it much faster, more user friendly and consume less bandwidth & storage.

In single page apps, each navigation doesn't require to a full refresh/reload of the website; instead only a small portion of the page needs to be loaded and shown to the user. There are many existing packages that can do this for you (jquery routing, Vue, Reach, etc...). But I prefer keeping it simple and lightweight. Here's how I did it using vanilla JavaScript & jQuery.

**spa.js**
```JS
$(window).on('hashchange', function(e) {
    codrRouter();
});

function codrRouter() {
  try {
      codrRouter_impl()
  } catch (err) {
      console.error(err)
      $.get('./views/500.html', function(pageContent) {
          $('.content').html(pageContent);
      }).fail(failedGet)
  }
}
```
We define a page router (codrRouter) which will be the backbone for the navigation within the SPA. Notice that we use the "hashchange" event for triggering navigation. This means all our pages are identifier by the #hashtag identifier in the URL.

```JS
function codrRouter_impl() {
  var page = window.location.hash;

  if (page === '#' || page === '') {

    $.get('./views/home.html', function(pageContent) {
      $('.content').html(pageContent);
    }).fail(failedGet)

  } else if (page === '#challenges') {

    $.get('./views/challenges_levels.html', function(pageContent) {
      $('.content').html(pageContent);
    }).fail(failedGet)

  } else {

    $.get('./views/404.html', function(pageContent) {
      $('.content').html(pageContent);
    }).fail(failedGet)

  }
}

function failedGet() {
  const refresh = '<a class="refreshpage" href=".">refresh page</a>'
  $('.content').html('Oops, make sure you are online.<br>' + refresh);
}
```
Now we implement the router and the possible routes. As you can see each matching route makes a GET request to get some html content. This content is only partial, and it will replace the existing code for our ".content" element which is just a placeholder. The final step is to make sure all a-href links are hashtags/anchors.

You can also programmatically navigate the users to different pages, by simply triggering the hashchange event:
```JS
window.dispatchEvent(new HashChangeEvent("hashchange"));
```

It's as simple as that, and you don't need to use any 3rd party library. :)
What can the tech industry do to better accommodate neurodiversity?
Tags: discuss
Published: 2020-05-08 18:27:36

DEV is in the process of launching a podcast and we'd love for you to be involved! We're recording the episodes in advance, and this week we'd like to know:

What can the tech industry do to better accommodate neurodiversity?

If you'd like to participate, please:

- Call our Google Voice at at +1 (929)500-1513 and leave a message 📞
- Send a voice memo to pod@dev.to 🎙
- OR, if you don't want your voice recorded...just leave a comment here and we'll read your response aloud for you 🗣

Thank you!
Run Goblin Run
Tags: gftwhackathon
Published: 2020-05-08 18:22:48

[Instructions]: # (To submit to the Grant For The Web x DEV Hackathon, please fill out all sections.)


## What I built: Ad free Endless runner game where the goal is to continuously better your score of picking up Gold nuggets and distance traveled. 


### Submission Category: 

[Note]: # (Foundational Technology, Creative Catalyst, or Exciting Experiments)
Exciting Experiments

## Demo
 https://run-goblin-run.netlify.app/

## Link to Code
https://github.com/RedHoodJT1988/endless-runner

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)
 

## How I built it 

I built this game using TypeScript and Phaser.js. The game was an experiment to see if, what I knew about developing games could be applied to the creation of games for the web with Phaser.js and TypeScript. I believe the end product is an accomplishment, as the game itself runs pretty smoothly on desktop browsers. I need to do some tweaking in order for it to be correctly rendering on a mobile broswer. 


## Additional Resources/Info 
There were assets for the game that I created before the hackathon but all of the code will be written during the time frame of the hackathon.

[Reminder]: # (We hope you consider expanding your submission into a full-on application for the Grant for the Web CFP, due on June 12.)
Frontend Project Demo
Tags: frontend
Published: 2020-05-08 18:21:26

I tried [this](https://dribbble.com/shots/6820944-Personal-Portfolio/attachments) dribble shot by sanket.

live [Demo](https://willgood.netlify.com).
Screenshot of the demo:
![Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/4mgkfdkk8y7a4a83mwgw.png)
Estimation of unit sales of Walmart retail goods
Published: 2020-05-08 18:19:49

For my module 4 project, I decided to concentrate on working with time-series and bigger data sets. 

**Problem Description**
After some research, I found interesting project on Kaggle competitions [page](https://www.kaggle.com/c/m5-forecasting-accuracy). Original competition intended to estimate unit sales of Walmart retail goods. Particularly, metric described by organizers is Weighted Root Mean Squared Scaled Error. This means that in order for a forecast to perform well, it must provide accurate estimation across all hierarchical levels, especially for series that represent significant sales, measured in US dollars. (Source: [M5-Competitors-Guide](https://mofc.unic.ac.cy/m5-competition/)). 

**Data Analysis**
When I prepared data for the feature engineering stage, I already had around 50 million rows of data. So, I realized that training the whole data frame with all the features could be quite compute-intensive task and not effective strategy for me to get good results. Also, during data exploration, I found that around 14% of the retail items generated 50% of the revenue. Considering that and time limit allocated for the project, I decided to explore only items which generate high revenue. So, I reduced model training time and used RMSE as a metric. For this case, RMSE serves as good approximation of WRMSSE, particularly, when applied for an each item separately.     

**Baseline model and Validation strategy**

Taking into account that I potentially will need to scale up my solution to the whole dataset, I was looking for model that trains fast and provides accurate results. After some research, I decided to choose [LightGBM](https://lightgbm.readthedocs.io/en/latest/index.html) which based on gradient boosted trees algorithm. 

As my goal was to find an effective method that I can scale up, in order to check my concept fast, I decided to use simple 'Random Search' approach for the model hyper parameter tuning.

For the future work, I think the most important would be applying good validation strategy along with custom Loss function, in order to get more accurate and stable forecast. This idea described in the tutorial I found [here](https://hub.packtpub.com/cross-validation-strategies-for-time-series-forecasting-tutorial/).

**Conclusion**
My major conclusion, that when working with a big dataset, finding optimal strategy for model training and validation is important. For that reason, I decided to explore forecast method that will perform better on the series that generates high revenue for the company and then potentially scale it up. 

Here is the link for my [repository](https://github.com/xs-abzal/WM-Sales-Forecast).
REST API Test cases using POSTMAN |30 Days of API Testing | Day 8
Tags: testing, tutorial, beginners, webdev
Published: 2020-05-08 18:15:50

🚀Mastering API Testing(Full Course) -  https://www.learnapitesting.com

In this video of 30 Days of API Testing Challenge, We are going to learn Rest API Test cases using Postman. 
> I have added a complete list of API Test-cases that you can use in next API Testing Project.

### Day 8 Task: Test cases for REST APIs.

[![30 Days of API Testing](https://i.imgur.com/TFbBpm0.png)](https://youtu.be/9raRuaFPJw0 "30 Days of API Testing")

Thread: https://scrolltest.com/api/day8
Resource: https://scrolltest.com/api/day8/2
Task List: https://scrolltest.com/api/task

## Test cases for REST APIs.
- Verify HTTP status code.
- Valid Response payload
- Verify Response Time
- Verify Parsed the Response data
- Valid Response headers.
- Negative Testcases response
- Verify Security Related Test Cases
- Verify Schema validation
	Field Type
	Mandatory Fields
- Chaining Request verification.
- Verification of APIs with Data parameters.
- Verify End to End CRUD flows
- Verify Database Integrity Test Cases
- Verify File Upload Testcases

👉 Master API Testing(Full Course) -  https://www.learnapitesting.com

👉 Become Automation Tester - https://sendfox.com/thetestingacademy

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
Inspect Element Script
Tags: help
Published: 2020-05-08 17:49:13

Hello!

A while ago, I saw someone posting a script that let their browser to turn into something like inspect element color (with borders etc) through a saved bookmark. Unfortunately, I lost (forgot) that after reformatting my machine. Tried searching on dev.to but I totally forgot the title. Is anyone here got any idea regarding what I mean?

Thank you!