teleren/devto huggingface dataset:
YouTube Video | Create App Using Unsplash API In ReactJS — 2
Tags: react, webdev, showdev, youtube
Published: 2020-07-03 04:52:52

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel.

We will create an web app from scratch using ReactJS, which will consume the Unsplash API. We can search for any image from unsplash.com and it will show them.

Here is the second part of the series.

{% youtube nYuSbH4VM6k %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.

You can also read the complete blog here -

https://thewebdev.tech/image-search-unsplash-react-2
Need anonymity and privacy to feel safe when opening up? ‘Cloakspace’ is here for you
Tags: anonymous, typescript, technology, website
Published: 2020-07-03 04:49:45

"Data Privacy" has become a myth in this era of unrestricted usage of social media. All that we do is pried upon and stored efficiently in a database. Be it shopping online or chatting with people, this data is saved for future purposes. The data which is collected from people like us is then used to regulate our feeds to show more relatable content and advertisements, so that we keep scrolling on no matter what. There's no way out. With data comes the possibility of more engaging and innovative features most of which is user-specific. 

However, there are people who would prefer to remain anonymous. People who want to share or open up but fear the judgemental eyes of social media. 
Cloakspace provides that anonymous "Safe-Space" where people feel free to be authentic. It's a very fundamental platform where no form of data is collected from the users to allow them to post something. Cloakspace is inclusive of everyone, who adheres to its policies and refrain from saying anything too extreme. 

Two Undergrads have taken on the initiative of building Cloakspace, which is an intriguing platform for people who value data privacy. Since the website is hosted on Firebase with a custom paid domain, Firebase itself has provisions for an SSL certificate for the domain. This makes it more secure than you would expect it to be. Firebase also has introduced Certification Transparency which helps detect invalid SSL certificates and deals with them. Here's the full article related to it:
https://firebase.googleblog.com/2019/03/rtdb-supports-certificate-transparency.html?m=1

Cloakspace provides all the features that can be provided without logging into any sort of data from the user. Likes, dislikes and comments are the usual expected ones. They also provide an option to share and to report any post. Strict policy is maintained to keep the feed as unbiased as possible. Advanced search highlighting and realtime updates are some of the other features provided by Cloakspace. It is completely free and made for people with love.

Do use it and help them improve.

Visit here: https://cloakspace.tech

Do use the platform, help the platform improve. Be a part of the change.

Creators of Cloakspace:

Subhranil Dutta: subhronil.dutta@gmail.com
GitHub: https://github.com/alpha037

Subham Das: das.jishu25@gmail.com
GitHub: https://github.com/das-jishu
July 3rd, 2020: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2020-07-03 04:30:04

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>

![A surprised seal](https://media.giphy.com/media/ZYdUijuxHE5eU/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 %}

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

{% link https://dev.to/jess/what-was-your-win-this-week-250n %}

<center>

![Al Roker hands clasped together going back and forth suggesting a win](https://media.giphy.com/media/3o7bu57lYhUEFiYDSM/giphy.gif)

</center>
What are easy ways to reset Comcast email password correctly?
Published: 2020-07-03 04:13:17

Comcast email service is a great and efficient way to communicate clearly and properly. This email application is very easy and efficient to use, so millions of users use it for official tasks. I am also using Comcast email service for the effective and clear communication. For the security concerns, I want to reset password of Comcast email account. I don’t have full knowledge to [reset Comcast email password](https://www.emailtechnicalsupport.us/blog/reset-comcast-email-password/) in the correct ways. I am facing problems for resetting the password of Comcast email account. Therefore anyone can recommend the easy ways to reset Comcast email password in the proper ways.
What is wrong with `export` and `export default`?
Tags: javascript, export, import, module
Published: 2020-07-03 04:11:13

I have been using `export` and `export default` together, and there is no much difference in the usage but aliasing to import the module. In fact, I was thinking that they are just same when I import them.
However, I found there is a difference between `export` and `export default`. Let me show an simple example.

###TestModule.js
```
let a = 0;

const test = () => a++;

export {a, test};
export default ({a, test});
```

###index.js
```
import module, { a, test } from './TestModule';

const check = () => console.log(a, module.a);

check();
module.test();
check();
module.test();
```

I expected that the console would be like this because index.js import just same reference:
```
0 0
1 1
```
**BUT**, the what the console really says is:
```
0 0
1 0
```

I think the references of theme are different each other, but I don't understand why? Is there some one explain about why, please let me know.

Anyway, I think I have to use them becarefuly.
🛑 Difference Between FindElement and FindElements in Selenium.🛑
Tags: testing, tutorial, webdev, beginners
Published: 2020-07-03 04:04:30

✅ Join us - https://sendfox.com/thetestingacademy

In this video, We are going to Difference Between FindElement and FindElements in Selenium.

Selenium defines two methods for identifying web elements:
- findElement: A command used to uniquely identify a web element within the web page.
- find elements: A command used to identify a list of web elements within the web page.

[![ FindElement and FindElements](https://i.imgur.com/UOzUmZf.png
)](https://youtu.be/411c4I7w6VU "FindElement and FindElements") 

✅ Download Code - https://scrolltest.com/automation/day24

✅FindElement () 
 - Find a Single element
 - If Element is not found - NoSuchElement exception.
 Return only single WebElement
```java 
driver.get(“https://katalon-demo-cura.herokuapp.com/“);
 WebElement demos=driver.findElement(by.id(“btn-make-appointment”));
```

✅ FindElements()
 - Find multiple elements with xpath/css
 - Return List of WebElements
        - Returns an empty list if no matching element is found
```java
 driver.get(“https://katalon-demo-cura.herokuapp.com/“);
 List<WebElement>  ptags=driver.findElements(By.tagName(“p”));
```

--
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")
Share useful one-liner commands you like or learned recently
Tags: discuss
Published: 2020-07-03 03:00:20

---
title: Share useful one-liner commands you like or learned recently
published: true
description: Productivity for everyone
tags: discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/624tsigx6h0lgv65oi1b.png
---

I'll start with mine.
Find all `npm link`ed modules on your computer:

```sh
npm ls -g --depth=0 --link=true
```
Test Post
Tags: batman, test, post
Published: 2020-07-03 02:53:41

Hi! This is a test so here's a lorem...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac ligula tempor, consectetur enim at, rhoncus tellus. Vestibulum lorem neque, pharetra et suscipit sit amet, faucibus vel enim. Nulla iaculis pulvinar quam ac porttitor. Proin porttitor mauris non gravida elementum. Maecenas ac nunc laoreet libero bibendum malesuada sit amet sagittis lectus. Duis auctor purus non lorem venenatis, in fermentum mauris condimentum. Cras commodo est magna.

Aliquam pulvinar est felis, at euismod orci efficitur ut. Maecenas accumsan ex eu varius lacinia. Integer sed lorem nec lorem pretium iaculis. Vestibulum et maximus quam. Maecenas efficitur porttitor sapien, a ornare tellus sollicitudin vel. Cras vitae laoreet orci. Morbi convallis a libero nec facilisis. Curabitur ornare facilisis viverra. Praesent nec fermentum massa, vitae molestie justo. Nullam facilisis nibh neque, ac semper velit lacinia ut. Mauris eu nibh ut ante lobortis auctor a in risus. Aenean at molestie orci, tempor posuere tortor.

Fusce blandit sed mauris in iaculis. Sed vitae urna urna. Maecenas eu mauris consequat, mattis dolor in, pretium elit. Nam dapibus dapibus urna, ut semper erat lacinia eget. In consequat efficitur ex id convallis. Duis mattis dui lacus, nec cursus lacus ullamcorper blandit. Nullam luctus, neque ut viverra volutpat, lorem ipsum molestie massa, eu cursus arcu risus eget massa. Nullam imperdiet est nec turpis consequat, eu tincidunt sapien aliquam. Proin id arcu nec elit feugiat finibus in sit amet lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras viverra, diam sed sodales vulputate, velit ligula condimentum elit, sit amet eleifend nibh quam eget justo. Aenean mattis erat eget rhoncus tristique. Nunc vitae consequat risus.

Aliquam ultricies libero ut maximus ultrices. Duis quam augue, finibus hendrerit tellus et, fermentum porttitor purus. Aenean felis turpis, dictum eu justo id, posuere suscipit purus. Integer ut rutrum ligula. Praesent et volutpat ex, quis tincidunt nunc. Maecenas sodales elit a ex pretium, eget lacinia urna ultrices. Maecenas scelerisque aliquam pulvinar. Aliquam semper, sem ut varius tristique, nisl ipsum dictum justo, vitae vulputate diam odio vel justo. Duis blandit sollicitudin magna, vel lobortis ante commodo vel. Suspendisse at pellentesque augue.

Duis viverra interdum lobortis. Suspendisse potenti. Sed hendrerit venenatis leo, eu malesuada turpis faucibus quis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque a urna pulvinar, convallis eros vel, finibus tortor. Nunc fringilla magna et bibendum lobortis. Etiam volutpat diam ut sapien dapibus, vulputate imperdiet odio mattis. Sed rutrum consectetur metus, et finibus elit egestas quis. Donec volutpat est massa, sit amet ultrices tortor scelerisque a.
SVG Filters Spotlight Effect
Tags: svg, video, css
Published: 2020-07-03 02:53:39

---
title: SVG Filters Spotlight Effect
published: true
description: Video showing how to create a spotlight with SVG filter
tags: svg, video, css
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ynzu3n01x45rxg3lh67w.png
---
{% youtube BmYFJau_IBo %}
Display a message to returning visitors using a JavaScript cookie
Tags: javascript
Published: 2020-07-03 02:32:08

Cookies are small strings of data stored on your computer that can be accessed by a web browser.

By using cookies we can detect if a visitor has visited a website before from the same browser.

This can be useful for showing a customised message or directing visitors to a special promotion.

**NOTE** – *Chrome doesn’t store cookies from pages loaded on the local file system (file://).*

Let’s start by defining our cookie name and calling a function to check if the cookie already exists.

```javascript
document.addEventListener("DOMContentLoaded", function () {
  const userCookieName = "returningVisitor";
  checkUserCookie(userCookieName);
});
```

If the cookie exists then insert HTML with our message otherwise call a function to create the cookie.

```javascript
function checkUserCookie(userCookieName) {
  const regEx = new RegExp(userCookieName, "g");
  const cookieExists = document.cookie.match(regEx);
  if (cookieExists != null) {
    document.body.insertAdjacentHTML(
      "beforeend",
      '<div id="welcome">Welcome back friend! Check out our latest thing <a href="#">HERE</a></div>'
    );
  } else {
    createUserCookie(userCookieName);
  }
}
```

Lastly we create the cookie using document.cookie with our cookie name, value and an expiry date.

```javascript
function createUserCookie(userCookieName) {
  const userCookieValue = "Yes";
  const userCookieDays = 7;
  let expiryDate = new Date();
  expiryDate.setDate(expiryDate.getDate() + userCookieDays);
  document.cookie = userCookieName + "=" + userCookieValue +"; expires=" + expiryDate.toGMTString() + "path=/";
}
```

Now if you refresh the browser you should see the message which we can pretty up with some CSS.

```css
#welcome {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  background: rgb(14, 108, 170);
  color: #fff;
  text-align: center;
}
#welcome a {
  color: #fff;
}
```
Which tech stack should you pick as a web developer?
Tags: webdev, programming
Published: 2020-07-03 02:26:30

---
title: Which tech stack should you pick as a web developer?
published: true
description: Quick video about the reasons I pick a certain stack.
tags: webdev,programming
//cover_image: https://direct_url_to_image.jpg
---

Hey guys -- made a quick little video regarding what to pick as a web dev, as I'm sure many of us have fallen into this dilemma.

{% youtube wxxr97VyI6c %}
Day 32 : #100DaysofCode - Resources for learning to code
Published: 2020-07-03 02:03:43

Today I was traveling, it is the fourth of July weekend and my sisters birthday weekend so I took a ride to her house. What that means is that I did not get to code as much as I wanted today. However, I want to share some resources I use for learning to code. I plan to update this list as often as I can as I learn more but for now:

<h1> Online </h1>

<a href="https://www.mikedane.com/#courses"> Courses with Mike Dane </a>

<a href="https://www.codecademy.com/"> Code Academy </a>

<a href="https://learncodethehardway.org/"> Learn Code the Hard Way </a>

<a href="https://projecteuler.net/about"> Project Euler </a>

<a href="https://theodinproject.com/"> The odin project  </a>

<a href="https://www.udemy.com/"> Udemy </a>

<a href="http://stackoverflow.com/"> Stack Overflow </a>

<a href="https://www.codewars.com/"> Code Wars </a>

<a href="https://www.lynda.com/"> Lynda </a>

<a href="https://www.raywenderlich.com/"> raywenderlich </a>

<a href="https://www.codementor.io/"> Code Mentor </a>

<a href="https://www.freecodecamp.com/"> Free Code Camp </a>

I will be adding more resources as I come across them. Hope this helps someone.
A small list of resources for web development
Tags: webdev, beginners
Published: 2020-07-03 01:54:37

A personal list of websites that I refer to frequently. It's not meant to be comprehensive but worth checking them out if you are new to web development.

## Web performance
* [PageSpeed Insights] (https://developers.google.com/speed/pagespeed/insights/)
 - PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster. Find out what's pulling your leg and preventing you from achieving a lightning-fast load time. With this, I was able to discover the issue of non-essential render-blocking resources (stylesheets) that's delaying the load time and also an interesting [trick](https://www.filamentgroup.com/lab/load-css-simpler/) to fix that. 

## Site metadata
* [Meta Tags](https://metatags.io/)
 - With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter, and more! This is especially helpful when achieving the final touch on a website by giving it all the necessary meta tags for SEO and Social Media Sharing purposes.
* [Linkedin Post Inspector](https://www.linkedin.com/post-inspector/)
 - Discover how to optimize your content for better engagement on LinkedIn. This tool allows you to see how your meta tags are interpreted and how your page actually rendered on LinkedIn. It points you to the right place for adjustment.

## Frontend
* [Codepen](https://codepen.io/)
 - Frontend insprations
* [Bootstrap Cheatsheet](https://hackerthemes.com/bootstrap-cheatsheet/) 
 - Quick reference to various Bootstrap components
* [CSS Grid Cheatsheet](http://grid.malven.co/)
* [CSS Flexbox Cheatsheet](https://darekkay.com/dev/flexbox-cheatsheet.html)

## Security
* [Sentry](https://sentry.io/welcome/)
 - Error tracking service. Finally, you get to see how buggy your code is :smile: .

## Analytics
* [Google Analytics](https://analytics.google.com/analytics/web/)
 - Use it to see a detailed breakdown of your site traffic.

## Knowledge 
* [DEV Community](https://dev.to/)
 - :unicorn: here you are!

## Free stuff
* [Free for developers](https://free-for.dev/#/)
 - A comprehensive list of free stuff for software development.


![Sharing is Caring](https://media.giphy.com/media/l1J3vV5lCmv8qx16M/giphy.gif)

If you have something that I should get my hands on, do comment below.
【Flutter】Recommended package used in the developed memo application
Tags: flutter, ios, android, dart
Published: 2020-07-03 01:52:02

Hi!

I am a Japanese smartphone app developer.

I released a smartphone app "IdeaMemo iX" at the end of June.

IdeaShuffleMemo is a memo app to create good ideas.
This app has three functions to support idea generation.

- Shuffle Memo
- Pickup Past Memo
- Idea Hint Word

These three features will help you discover great ideas.
You will have great creativity.
If you use this app, you will have great creativity.

## for iOS(App Store US)
https://apps.apple.com/us/app/id1517535550

## for Android(Google Play US)
https://play.google.com/store/apps/details?id=com.IdeaShuffleMemoApp&hl=us


This app was created using Flutter.

In this article, I will introduce the recommended Flutter packages used in the development of IdeaShuffleMemo.


### Moor
https://pub.dev/packages/moor

This package can easily manipulate the database.
Moor has a good manual. If you look at it, there is no 
problem.

https://moor.simonbinder.eu/docs/getting-started/

### awesome_dialog
This package can easily display fancy dialogs.
It's also easy to customize.

However, the dialog does not disappear automatically.
I needed to add code.
The code is shown on the following page. (※Japanese)
https://qiita.com/YuKiO-OO/items/283f44da64d304a6228e
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wpectsgbjnpusbko4vv1.jpg)

### font_awesome_flutter
https://pub.dev/packages/font_awesome_flutter

This package can add more icons.
In my case, the material icon was not enough.

Usually you will need to upload an image if you want to use the Google logo.

If you use font_awesome_flutter, you can easily display the Google logo with an icon.

### vibrate
https://pub.dev/packages/vibrate

This package can use the vibration function of the smartphone.

During the processing of the app, I worry that my smartphone is unresponsive. "Is it working?"


If you use vibrate, you will be able to vibrate the process of processing.

### shake
https://pub.dev/packages/shake

I wanted to implement the features unique to smartphones.
It is shaking the smartphone.

If you use this package, you can execute the process when you shake your smartphone.

### introduction_screen

https://pub.dev/packages/introduction_screen


This package can easily make the tutorial screen of the first start.


How was this article?


If you're struggling with the idea of ​​apps and web services, this app will be a good help.

I would be very happy if you downloaded my App.


thank you for reading.

## for iOS(App Store US)
https://apps.apple.com/us/app/id1517535550

## for Android(Google Play US)
https://play.google.com/store/apps/details?id=com.IdeaShuffleMemoApp&hl=us
It is not as !important as you think
Tags: css, webdev, codenewbie
Published: 2020-07-03 01:38:57

A couple of weeks ago, I was handed a pre-existing project to handle its maintenance and continued support, which has thus become a bigger issue than its worth. A developer on my team came to me and had said "We have to rewrite this. I cannot fix anything without breaking 20 other things." From my experience, developers first desire is to rewrite code that is foreign, old to them, or overcomplicated. So, we had to find the root of the problem in order to find out if we truly needed to go through all that trouble of refactoring a major project for a couple stylistic changes? The developers main reason to complain and want to refactor was justified, at least from an operations perspective: the site used !important **2,033 times**. Yes, you read that right. 



# What is !important? 

In short, !important overrides CSS natural specificity, overruling the other possible style selections for that element, making the web pay attention and ignore the others. 

# Why should I care about CSS Specificity? If it works, it works. 

*Welll........ does it really work?* 
In the project I described in the beginning, sales was very happy the project got out in a timely manner, as they were unaware of what was truly happening in the code. One could argue, the site worked. Whats the big deal? Which, they would be right in a way. But months later when developers who did not originally support the code had to make adjustments, it became overly complicated. Specificity gives code consistency by maintaining a standard of weight that is applied to the CSS declaration. When that standard is ignored constantly, the code is no longer consistent, making it hard to maintain, scale, and control. By using !important everywhere, you are pulling the blinds down and ignoring the fire. Eventually, the room you are in will succumb to the fire. 

# So I should never use !important then?

In tech, I try to avoid the use of the term never. There is possible good done with !important, when applied carefully and sparingly. Some examples of cases where it might be applicable to use:

* Overriding style changes that created from JS

* Overriding those annoying third-party libraries styles

* When it may break multiple things on the website by not using it. 



These are just some examples I have seen in my day-to-day job, and it is not a catch-all example listing, each situation is unique. When deciding to use !important, its best to go through all your other options first. Can the structure be adjusted to be reusable? Would it be easier for this element to have its own unique identifier? Can I write this better to be more explanatory and robust? By going down  your self imposed list of checkboxes before taking the easy way out, you are sparing future developers from having to put out your fires. 

## Keep in mind next time you are going to use !important, **it is probably not as !important as you think!**
Like Share Subscribe video used by youtubers
Tags: youtube, like, video, subscribe
Published: 2020-07-03 01:14:42

https://dw71fyauz7yz9.cloudfront.net/video-upload__1fec4beee8de38402a94aa687ae75b85/thumbs-video-upload__1fec4beee8de38402a94aa687ae75b85-00001.png
Wing pro 7 is on sale @Steam 50% off 
Tags: sale, ide, python
Published: 2020-07-03 00:20:04

I bought an IDE to force myself to program more. Its exciting and its working. 

I support this because they are doing this since 1988, and it's really immersive.

My problems when programming is getting tired quickly. How you do stay awake for long coding sessions equivalent to gaming. I feel brain drained too lol. I'm only 27