teleren/devto huggingface dataset:
Daily Challenge #5 - Ten Minute Walk
Tags: challenge
Published: 2019-07-02 11:42:08

---
title: Daily Challenge #5 - Ten Minute Walk
published: true
series: Daily Challenge
description: Our fifth installment in the Daily Challenge series. 
tags: challenge
---
Hey there, it's time to get moving.

Today’s challenge is modified from user [_@JKphobic_ on CodeWars](https://www.codewars.com/kata/take-a-ten-minute-walk):

>You live in a city where all roads are laid out in a perfect grid. You have the unfortunate habit of arriving too early or too late to your appointments, so you decide to create a Walk Generating App. 

>Any time you press the button, it will send you an array of one-letter strings representing directions to walk (eg. [‘n’,’s’,’w’,’e’]). You always walk only a single block in a direction. It takes one minute to traverse one city block.

>Create a program that will return an array of one-letter strings representing the walk. The program should accept input for the amount of time the user decides to walk and should bring the user back to their starting location.

I wish the streets in my town were structured like this, it would make driving so much easier.

Good luck, happy coding!
***
_Thank you to [CodeWars](https://codewars.com/), who has licensed redistribution of this challenge under the [2-Clause BSD License](https://opensource.org/licenses/BSD-2-Clause)!_

_Want to propose a challenge for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Understanding pseudo elements: Creating Simple Tooltips with CSS and HTML
Tags: css, html, frontend
Published: 2019-07-02 11:32:49

---
title: Understanding pseudo elements: Creating Simple Tooltips with CSS and HTML
published: true
description: 
tags: css, html, frontend
series: Understanding pseudo elements
---


Tooltips are a nice way to show the user extra info about the site's UI. By making use of CSS attribute selectors and the `attr()` function, we're able to create a neat little tooltip to show our users extra info that we don't want to add to the element's text. Scroll down to the bottom to see the tooltips in action, or follow along to learn how to make them yourself!

## Preface

Before we begin, we need to understand what problems tooltips solve. They help confused users understand the UI we have created. Confused users come in all different shapes and we need to help them all. This means our tooltips must work for 
- Sighted users
- Users with vision impairments
- Those using a mouse
- Those who prefer navigating the web with only a keyboard

Descriptive text can be added through the use of `aria-*` attributes, such as `aria-label` and `aria-description`, and the keyboard users need the element to be focusable. This pretty much sorts itself out, as any element with a tooltip probably is some kind of a focusable element already (`a`, `button`, `input`, `textarea`), however should you need to add a tooltip to a `div`, please think twice to help those of us who won't be able to see that information. 

We also need to add some kind of hover effect for those of us using a mouse pointer. Is there a way to neatly combine all these things such that our tooltips make a great developer experience as well? Let's write some code!

## Step 1: The HTML

There is not much code to write in the HTML part of this, which is actually great, as it means it won't become a hassle to use it!

Let's start with a simple button:

```html
<button 
  data-tooltip 
  aria-description="Stormy weather ahead!">
  ⚡⚡⚡
</button>
```

The `aria-description` attribute makes screen readers read both the text inside the `button` element, as well as the description text. We'll use the `data-tooltip` to tell the browser that this element should have a tooltip. 

## Step 2: Creating a tooltip in CSS

By using pseudo-elements and `content: attr()`, we can display any of the element's attribute values:

```css
/* Target any element with the `data-tooltip` and `aria-description` attributes */
[data-tooltip][aria-description]::before {
  content: attr(aria-description);
  display: none;
}

[data-tooltip][aria-description]:hover::before,
[data-tooltip][aria-description]:focus::before {
  /* Show the tooltip on hover and focus */
  display: block;
}
```

## Step 3: Styling the tooltip

Ok, now we have a default styled button and some text that pops out whenever we hover or set focus to it. The description can even be read by screen readers! We've done great already, but the UX is not very good for sighted users. Let's fix that!

Check out the final result on CodePen:

{% codepen https://codepen.io/sindre/pen/XLELQr %}
minavdrawer - Easy to use customisations of standard NavigationDrawer
Tags: productivity, navigationdrawer, android, kotlin
Published: 2019-07-02 11:07:58

Develop outstanding navigation drawer using Android(Kotlin) for your business.

Want to know how we made it? [Check Code Here](https://github.com/Mindinventory/minavdrawer)
 
![DoorIn](https://raw.githubusercontent.com/Mindinventory/minavdrawer/master/media/doorIn.gif)
![Slide](https://raw.githubusercontent.com/Mindinventory/minavdrawer/master/media/slide.gif)
![Scroll](https://raw.githubusercontent.com/Mindinventory/minavdrawer/master/media/scroll.gif)
![DoorOut](https://raw.githubusercontent.com/Mindinventory/minavdrawer/master/media/doorOut.gif)
Why anonymous social media is better
Tags: internet, privacy, socialnetwork
Published: 2019-07-02 13:36:47

---
title: Why anonymous social media is better
published: true
tags: Internet,privacy,social network
canonical_url: https://kevinhq.com/why-anonymous-social-media-is-better/
---

This is the story why I prefer to hang around on sites like Reddit, Hacker News, or Twitter than the other social media services. I need a bit more privacy. Those sites, like the time I write this post, treating its user’s privacy better. Privacy concern I still remember the time when there are many… 

[Read More »Why anonymous social media is better](https://kevinhq.com/why-anonymous-social-media-is-better/)
Difference Between Http And Https
Tags: http, https, webprotocol, httpandhttps
Published: 2019-07-02 10:14:15

Throughout the training course of day-to-day purchases including using computers most take for approved that the info sent out as well as received is secure. The innovation which enables the safe transfer of data can be attributed to the procedure referred to as SSL (Secure Socket Layer).



<a href="https://www.notifyvisitors.com/blog/difference-between-http-and-https/">Difference Between Http and Https</a>.




The SSL Certificates discussed in nonprofessional's terms defines the security procedure made use of to shield online communications. It's most usual usage is to safeguard personal information such as individual information.

When an individual starts a deal by clicking the submit button or entering data onto a website the process begins to establish a secure link. The internet browser then checks the SSL Certification ensuring it is valid as well as the web site is genuine. Security of information ensues along with codes reviewed by both the web browser as well as the website. A human has the ability to secure data yet the computer utilizing SSL is undoubtedly much faster as well as efficient. SSL Certificates have the computer owner's public secret, thus the technology in PKI (Public Secret Framework) that enables the sharing of encrypted data by SSL, TLS as well as HTTPS; therefore SSL Certificates clarified.

The HTTPS (hypertext transfer protocol secure) which is displayed on the address bar of the PC offering an aesthetic hint to confirm that the website being visited has a secure connection; however the HTTPS certification does not work as a stand-alone procedure, however, counts on SSL Certificates to encrypt information on the website that utilizes this modern technology. The HTTPS certificate is a digital security tool that utilizes SSL procedure and also is most often used by online banking, credit card payment internet site as well as those that depend greatly on a secure link for their consumers as well as the businesses themselves.

With the boosting number of computer cyberpunks gaining access to delicate files and information worldwide it has actually become important for financial institutions, charge card companies and also local business owners big and also small to secure their interests. Many otherwise all companies own or lease computer system tools to aid them with inventory, ordering and invoicing, payroll as well as a myriad of other applications. With the modern technology afforded by the use of SSL Certificates, HTTPS and encryption based interactions permit merchants as well as those that carry out organization online the guarantee that their personal information is protected. SSL, TLS as well as HTTPS work in the synchronous initiative to ensure a risk-free, protected environment for the Net neighborhood.
I have no idea what I'm doing, but here Goes #4 Ah C'maaaahhhhnn!!!!
Tags: beginners, node, blog, codenewbie
Published: 2019-07-02 09:56:51

---
title: I have no idea what I'm doing, but here Goes #4 Ah C'maaaahhhhnn!!!!
published: true
description: a journey of awareness
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7e8gduupcw1o4crfia21.PNG
tags: #beginner #node #blog #codenewbie
---
*If you've not been following along: 1. Shame on you. 2. To learn Node, I've decided to build an API that automatically chases freelance work for me*.

"Aaarrrggghhhhhhhhhhhhh ffffaaaaarrrrrrkkkkk!! (in the nicest possible way)" That's angry (but not really *angry*) Australian for: "Oh come on Google, does it *really* need to be so convoluted. You're making me look bad."

OK, ok. To preface this, I have been very busy with my day job. I had a very demanding job interstate, and just arrived back in town yesterday. I'm tired, grumpy, and not focused. There's the disclaimer. Not an excuse... dis-cl-aim-er. OK? 

AANNNNyyway... The goal today was to understand how authorisation of Google APIs worked in dev vs production environments, respectively. The outcome? I have no idea whatsoever. None. Nuthin. Seriously, Google's instructions are about as useful as a hip pocket in a singlet. I can't even understand how it works AT ALL. "Arrrrrggghhhh ffaaaarrrrkkkkkk! (in the nicest possible way)."

I watched [this video](https://www.youtube.com/watch?v=DYAwYxVs2TI&list=PLOU2XLYxmsILOIxBRPPhgYbuSslr50KVq&index=2) and the UI has changed, so it made this pretty much useless. But not completely useless, I managed to add gmail and calendar to my developer console, under my app. So that's a win. I'll take whatever victory I can get, right now. And to be honest, once I read the OAuth documentation properly, I think the verification process will be pretty smooth, and with the right authorisation keys, twc2k will be able to continue development. 

The upside of today's effort is: I need to further break down this problem into smaller problems. I think. 
1. I know I need to access sensitive data. So I need OAuth, so let's verify a domain and use that. 
2. Then, I need to figure out what has to change in the google boilerplate that was given to me for authentication with the calendar app.
That'll give me an idea of how to proceed from there, I think. Wish me luck.

Anyone want to bale me out, here???? I'll buy you a beer. 


For those (terrible people, well maybe not *terrible*, maybe it's more like *naughty*) that haven't been playing along: 
[Episode 0](https://dev.to/jamonjamon/i-have-no-idea-what-i-m-doing-but-here-goes-0-4ffl)
[Episode 1](https://dev.to/jamonjamon/i-have-no-idea-what-i-m-doing-but-here-goes-1-decision-time-cp2)
[Episode 2](https://dev.to/jamonjamon/i-have-no-idea-what-i-m-doing-but-here-goes-2-yay-json-5fkb)
[Episode 3](https://dev.to/jamonjamon/i-have-no-idea-what-i-m-doing-but-here-goes-3-it-works-142m)
Simple Animations with React Hooks
Tags: react, javascript, video, tutorial
Published: 2019-07-02 09:33:44

{% youtube KT-qtuBgAZI %}

Hi DevPeeps™! 👋

I just posted my first video tutorial *(also my first youtube video in general)*!

It's about using react hooks to create simple animations!

I've been getting *really* into hooks lately (especially linking them to other web APIs), so expect more hooks videos in the near future!

Also, if anyone has any feedback on the video I'd really love to hear it!
I'm quite new to video production and need all the advice I can get!

Thanks for reading and/or watching!

---


```jsx
function useAnimation(duration) {
    const [progress, setProgress] = useState(0)
    const [startTime, setStartTime] = useState(Date.now())
    const reset = () => setStartTime(Date.now())
    useEffect(() => {
        let queuedFrame
        const frame = () => {
            const now = Date.now() - startTime
            if (now < duration) queuedFrame = requestAnimationFrame(frame)
            setProgress(Math.min(1, now / duration))
        }
        frame()
        return () => cancelAnimationFrame(queuedFrame)
    }, [startTime, duration])
    return [progress, reset]
}
```
How to code review in a start up?
Tags: help
Published: 2019-07-02 09:19:59

---
title: How to code review in a start up?
published: true
tags: help
---

I work in a small team of 5 developers and we've decided that we need to start doing code reviews which we definitely should have been doing already.
I have experience for doing code reviews in my previous job for a large company were we could afford to spend the time and people on such tasks which is not the case here. 

* Does anyone have any words of wisdom for code reviewing in small teams?
* How do you make time to review code?
* What do you do if there isn't a reviewer available who can understand that code or programming language?
* How do you resolve disputes when the reviewers and the authors are the same technical level?
How do you make balance between working and studying?
Tags: discuss
Published: 2019-07-02 08:57:02

---
title: How do you make balance between working and studying?
published: true
description: make balance between work and learning is becoming struggle for me
tags: #discuss
---
I am wondering about this as I am very stressed nowadays because of it. I have 9-5 as Frontend developer but I would like to really improve my skills. I subscribed to Vue mastery but actually finding time to study is hard, especially that I want to improve in both Vue and JavaScript besides wanting to learn other skills like Graphql and Firebase. 

So much things to learn but the day job simply eats your day and sometimes I have to work after 5 to finish something.
RxJS and Angular, I'm not feeling it
Tags: angular
Published: 2019-07-02 08:56:45

I read an article by  on creating custom Closure builder for Angular, and apparently the "Architect" (yes, that's the name of the system) relies heavily on RxJS for consistent API.

{% link https://dev.to/steveblue/build-angular-like-an-architect-part-1-3ph2 %}

Yet again, I'm thinking how much easier people would have it if we (Angular community) were ok to use Promises where they made sense. Here's an example snippet from the article:

```typescript
return of(context).pipe(
    concatMap( results => ngc(options, context)),
    concatMap( results => compileMain(options, context)),
    concatMap( results => closure(options, context) ),
    mapTo({ success: true }),
    catchError(error => {
      context.reportStatus('Error: ' + error);
      return [{ success: false }];
    }),
  );
```

This is what it would look like with promises (in 'async' function):

```typescript

try {
  await ngc(options, context);
  await compileMain(options, context));
  await closure(options, context);
  return { success: true };
} catch (error) {
  context.reportStatus('Error: ' + error);
  return { success: false };  
}
```

(This is just async function for handling one element from the stream, so you need a Promise.all in some top level to do the loop).

It's clear that the hotshots doing RxJS day in and day out can sling those concatMaps and mergeMaps in their sleep, but for an average developer - can you take a good glance at that RxJS and tell whether it's correct or not? Is the right operator being used? If you are speculating that a bug might be in that area of the code, how fast can you read and replay the flow in your head?

It is pretty clear that the wider web developer community already opted for Promises and async/await, how long does Angular community plan to go their own way?

(Before you ask, yes, I know Angular itself is built on RxJS - I have three pages of that in the call stack every time I hit a breakpoint).
What VSCode theme are you using?
Tags: productivity, vscode, discuss
Published: 2019-07-02 07:49:07

The IDE and Visual Studio Code in particular is the one tool developers use most. 
Since most of us spend many hours a day in Visual Studio code, it's a terrific feature that you can choose your own theme.

At the moment I use [Shades of Purple](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple), before that I used [Dracula Official](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula) for a long time but I want my IDE a bit more colorful 🎨

A great resource for finding your next theme is [vscodethemes.com](https://vscodethemes.com) (I'm not related to this website 😉).

![vscodethemes.com](https://thepracticaldev.s3.amazonaws.com/i/qxl9wbp28kdrb15f5u5v.png)

**What theme are you using?**

<hr />

If you like my content, you might want to follow me on Twitter?! [@fullstack_to](https://twitter.com/fullstack_to)
PyCon UK Individual tickets
Tags: python, pyconuk, conferences
Published: 2019-07-02 07:39:45

---
title: PyCon UK Individual tickets
published: true
description: PyCon UK's use of tickets for individual attendees rather than corporate accounts makes the conference more accessible
tags: python,pycon uk, conferences
---

[PyCon UK](https://2019.pyconuk.org/) recognises that not everyone who attends their conference is doing so on the back of corporate expense accounts. I think their Individual ticket rate is a great idea and that more conferences should follow their example.

Many conferences for example still insist that you supply a company name when you attend their events, showing you who they expect their primary customers to be.
ReactJS File Structure
Tags: react, discuss, question, beginners
Published: 2019-07-02 07:38:14

---
title:ReactJS File Structure

published: true
description:What is the importance of file structure in ReactJS? 
tags: react, discussion, question, beginner
cover_image: https://images.unsplash.com/photo-1485856407642-7f9ba0268b51?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9

---

I have been playing around with ReactJS for approximately two weeks now and i find it interesting. However, i have come across something new: **How to put files into folders**. This brings out a number of questions:
 
- What is the importance of putting files into a structure [In React] ?
- Is there a particular approach that you currently use that eases the process building and accessing React Apps?
   Thanks
Is Web Assembly the future?
Tags: webassembly, webperf, webdev
Published: 2019-07-02 06:57:34

Recently, I have seen and read articles on web assembly out of curiosity and was wondering if it would be a significant part of web development in the future since it provides better performance than Javascript.

( I'm a Javascript developer - React and React Native - and was exploring more on web development so that I've something new to learn over the next couple of weekends. )

What are your thoughts, devs?
How to debug php cli – artisan commands or unit tests
Tags: homestead, laravel, php, phpstorm
Published: 2019-07-02 12:49:38

---
title: How to debug php cli – artisan commands or unit tests
published: true
tags: Homestead,Laravel,PHP,PHPStorm
canonical_url: https://42coders.com/how-to-debug-php-cli-artisan-commands-or-unit-tests/
---

## Introduction

If we develop an application with TDD methodology (which we should do!), we write a lot of code which runs in the command line. Also when we create tasks or artisan commands, debugging the code in command line would make our life easier. In this post, I’ll show how to set up cli debugging with PhpStorm and Homestead.

## Prerequisites

You’d need to have Xdebug extension installed and enabled for php cli. Please note that I’ll use php 7.2 in paths, but you may need to replace it with your php version.

## Xdebug configuration

Open the xdebug configuration file: sudo nano /etc/php/7.2/cli/conf.d/20-xdebug.ini  
Put the following configuration in the file:

```
zend_extension=xdebug.so
xdebug.remote_autostart = 1
xdebug.remote_enable = 1
xdebug.remote_connect_back = 0
xdebug.remote_port = 9000
xdebug.max_nesting_level = 512
xdebug.remote_host = 192.168.10.1
xdebug.idekey = homestead_cli
```

There are two important configuration keys above, which might change depending on your configuration:  
**xdebug.remote\_host** – this is the host machine’s IP address (on the virtualbox network)  
**xdebug.idekey** – This is a custom key which should be used in the PhpStorm as well

## PhpStorm configuration

Open the debug configurations and add new PHP Remote Debug configuration, set up the server (if you need guidance on how to create new server, please check out my previous post on debugging, here: [https://42coders.com/how-to-set-up-debugging-with-phpstorm-and-homestead/](https://dev.to/dv42coders/how-to-set-up-debugging-with-phpstorm-and-homestead-484g) ), and the IDE key, which should be the same as what you’ve set up in the xdebug configuration:

![](https://42coders.com/wp-content/uploads/2019/06/phpstorm_cli_debug-1024x643.png)

Start the debugging session as usual by clicking on the green bug button in the top right corner, set breakpoints in the code. When you start the command line script, PhpStorm connects to the xdebug automatically, and you can debug your code.

Happy debugging!

The post [How to debug php cli – artisan commands or unit tests](https://42coders.com/how-to-debug-php-cli-artisan-commands-or-unit-tests/) appeared first on [42 Coders](https://42coders.com).
How to install third-party apps on Android & iOS
Tags: android, ios, apps
Published: 2019-07-02 06:15:49

If we are using Android or iOS smartphones of the current era(Snapdragon 800 series) and not utilizing some of the amazing tweaked apps developed by individuals, how are we leveraging money we spent on such devices? That's true.

Tech geek will surely be using and exploring such new apps to try and experiment. Installing third-party apps on Android is quite easy. But when it comes to iOS, it is really effort-seeking. Well, I am gonna introduce one of the easiest way to install such modded apps on both - Android and iOS devices.

We will be using TutuApp for Android and iOS OS here.

##**What is TutuApp?**
TutuAppp is nothing but an app store similar to Google Play Store or iOS App Store. The difference here is the huge directory of almost any kind of apps. All tweaked and patched apps will be available which can be availed absolutely free.

##**Install tweaked apps on iOS iPhone**

1. **Download** [TuTuapp APK iOS](https://tutuapk.co/tutuapp-for-ios/)
2. Tap on **Install** and coniform the installation.
3. Wait for a while till installation finishes.
4. Navigate to **Settings -> General -> Profiles & Device Mangement** and trust the developer.
5. You should've installed TutuApp by now.
6. **Open** TutuApp and search for any app you've in your mind.
7. Download your desired app and it will start the downloading.
8. That's it. (You may have to trust the developer manually for the new app you just installed using TutuApp.

##**Install patched apps on Android Devices**

1. **Download** [TuTuapp for Android](https://tutuapk.co/tutuapp-for-android/)
2. Tap on apk file and it will initiate the installation.
3. Upon **successful installation**, allow preferred permissions.
4. **Open** TutuApp and search for your favorite app.
5. Click on **Download** near the app and downloading will be started.
That's it. 

As mentioned earlier, TutuApp has made such cracked apps on Android really easy. TutuApp does not gather your sensitive data like email address, name, device id etc. And hence, TutuApp is safe to use.