teleren/devto huggingface dataset:
Where's my footer at!
Published: 2020-02-18 04:26:38

Recently [at work](https://www.hardhat.com.au) I was given the task to update a piece of UI in an established [React](https://www.reactjs.org) app. It was for a very large University in Australia.  

I stumbled across an interesting problem that i thought would be good to share as it is uses a relatively modern UX... 

### *...the (in)-finite scroll!*



#### What needed to be done...

![https://dev-to-uploads.s3.amazonaws.com/i/yp6w583mx6onfs7hj69f.gif](https://dev-to-uploads.s3.amazonaws.com/i/yp6w583mx6onfs7hj69f.gif)

The course list page is a bunch of card components (built using the older React class style) that are dynamically added to the DOM as you scroll down.  Although it is always in the DOM, the <code>Footer</code> component  is never reached visually until the end of the page scroll. 

So... when the footer eventually appears the yellow buttons in the bottom right of the screen needed to hide.

Simple enough I thought. Just find the height of the document and subtract the height of the footer, so that number could be used for the if/else condition to set the visibility.

```javascript
    // first pass...
    const window = window
    const footer = document.getElementById('footer').getBoundingClientRect()
    const doc = window.document.documentElement
    
    if ( window.pageOffsetY < (doc.scrollHeight - footer.height)) {
        //... show the buttons else don't
    }
```

BUT. 

the <code>doc</code> height is always growing, it's not fixed. The above  condition will always return <code>true</code>.


There was already a scroll handler set up to <code>**setState</code>** when <code>**window.pageYoffset > windowHeight**</code> was true, but no logic to find the end of the page.

![https://dev-to-uploads.s3.amazonaws.com/i/os430dxhpdvn0lo61tyj.png](https://dev-to-uploads.s3.amazonaws.com/i/os430dxhpdvn0lo61tyj.png)

What i needed to do was find the top position of the <code>Footer</code> component, and when it's <code>.top</code> position is less than the window height (the bit you see) then <code>setState</code> to false.

```javascript

const footer = document.getElementById('footer')
const window = window

  //... set init state
  this.state = {
    showButtons: false
  }
    
  onPageScroll() {
    
  // ...if they exist
  if (footer && windowHeight) {	
     // What I am doing here is checking if the scroll distance has gone 
     // past the height of the screen and also if the footer has not 
     // entered the bottom of the screeen yet, in which case show the buttons.

     if (window.pageYoffset >= window.outerHeight &&
                footer.getBoundingClientRect().top > windowHeight) {
   
        this.setState({ this.state.showButtons: true })
     } else {
       this.setState({ this.state.showButtons: false })
     }
    
   }		
}

```

And this is the result.. when the footer eventually appears and has a <code>.top</code> position less than the window height the state is set to false, and the buttons hide.
![https://dev-to-uploads.s3.amazonaws.com/i/tzipgjp7dwmyhy46jrmo.gif](https://dev-to-uploads.s3.amazonaws.com/i/tzipgjp7dwmyhy46jrmo.gif)
SQL for the Potterhead: Joins Introduction
Published: 2020-02-18 03:51:16

Querying data with SQL can feel magical, and JOINS are one of the things that feel the most magical to me. In the following article, I'm going to explain the magic behind joins. 

We will cover: 
1. Left Joins 
2. Inner Joins 
3. Outer Joins


--- 

Let's start with some setup and talk about the pets of the wizarding world. Students at Hogwarts are allowed to bring with them an owl OR a cat OR a toad. 

Let's consider a table to hold some of the students at Hogwarts. The table will have the following schema:
1. `id` : A unique id used to identify a wizarding student 
2. `name` : The student's full name 
3. `house` : Their Hogwarts house 

Here's the table, populated with some students: 

 id |        name        |   house    
----|--------------------|------------
  1 | Neville Longbottom | Gryffindor
  2 | Ronald Weasley     | Gryffindor
  3 | Harry Potter       | Gryffindor
  4 | Draco Malfoy       | Slytherin
  5 | Seamus Finnigan    | Gryffindor
  6 | Hermione Granger   | Gryffindor
  
  Now, let's create a table to hold information about the student's pets. The table will have the following schema: 
  1. `id`: Unique id used to identify the pet 
  2. `name` : The name of the pet 
  3. `species`: The species of the pet. 
  4. `owner_id`: The id of the owner of the pet. In general, `pet.owner_id` equals `wizard.id`. In database-ey terms, we think of this as a foreign key. (We will not be explicitly specifying a foreign key relation here) 
  
  Here is a table with some pets.
  
  id |    name     | species | owner_id 
----|-------------|---------|----------
  2 | Trevor      | toad    |        1
  1 | Scabbers    | rat     |        2
  3 | Hedwig      | owl     |        3
  4 | Crookshanks | cat     |        6
  5 | unknown     | owl     |        4
  6 | Norbert     | Dragon  |      100
  7 | Brodwin     | owl     |       10
  
  Let's confirm our understanding of this table is correct, by looking at the pet with id = 3. The pet's name is Hedwig, and it's owner_id is 3. Looking at the `wizard` table, Harry Potter has an id of 3. The data indicates that Harry Potter owns Hedwig, which is what we would expect. 

Now that we have table schemas ready, let's learn about joins! 

___

1. View this on [github](https://github.com/kamyashethia/SQLForThePotterhead/blob/master/Joins.md) 
2. [Pottermore's guide to wizarding world pets](https://www.wizardingworld.com/features/pottermore-guide-to-wizarding-world-pets)
Java Credit Card Validation Luhn Algorithm
Tags: java, card, luhn
Published: 2020-02-18 03:44:55



Any credit card number should pass following test:

From the rightmost digit, we should double every second digit. If the double is greater than 9, then add the both digits so that final number is of single digit.

Now sum all the digits in the number, the unchanged numbers and the doubled numbers.

The final sum should be multiple of 10 or mod 10 of the number should be 0. If it’s not then its not a valid credit card number.

Let’s check it with an example credit card number 12345678903555.

Digits are : 1,2,3,4,5,6,7,8,9,0,3,5,5,5
After doubling : 2,2,6,4,1,6,5,8,9,0,6,5,1,5
Sum of digits : 2+2+6+4+1+6+5+8+9+0+6+5+1+5 = 60 = 6*10 and hence a valid credit card number.
Luhn Algorithm in Java

Here I am providing java Luhn Algorithm program to validate credit card numbers.


     package com.journaldev.util;

     public class JavaLuhnAlgorithm {

	public static void main(String[] args) {
		validateCreditCardNumber("12345678903555");
		String imei = "012850003580200";
		validateCreditCardNumber(imei);
	}

	private static void validateCreditCardNumber(String str) {

		int[] ints = new int[str.length()];
		for (int i = 0; i < str.length(); i++) {
			ints[i] = Integer.parseInt(str.substring(i, i + 1));
		}
		for (int i = ints.length - 2; i >= 0; i = i - 2) {
			int j = ints[i];
			j = j * 2;
			if (j > 9) {
				j = j % 10 + 1;
			}
			ints[i] = j;
		}
		int sum = 0;
		for (int i = 0; i < ints.length; i++) {
			sum += ints[i];
		}
		if (sum % 10 == 0) {
			System.out.println(str + " is a valid credit card number");
		} else {
			System.out.println(str + " is an invalid credit card number");
		}
	}

 }

Here I am taking input to the validation method as String, so that it will work also where the first digit is 0.
Good First Issue - Make your first open-source contribution
Tags: showdev, opensource
Published: 2020-02-18 03:43:04

<p align="center">
  <a href="https://goodfirstissue.dev" target="_blank">
    <img src="https://goodfirstissue.dev/images/gfi-logo-dark.svg">
  </a>
</p>
<hr>

[Good First Issue](https://goodfirstissue.dev/) is an initiaitive to curate easy pickings from popular projects, so developers who've never made a contribution to open-source can get started easily.

Open-source maintainers are always looking to get more people involved, but new developers generally think it's difficult to become a contributor. We believe getting developers to fix super-easy issues removes the barrier for future contributions. This is why Good First Issue exists.


## Adding a new project

You're welcome to add a new project in Good First Issue, and we encourage all projects &mdash; old and new, big and small.

Follow these simple steps:

* Make sure your GitHub repository has at least one issue with the `good first issue` label. This label is already present on all repositories by default. If not, you can follow the steps [here](https://help.github.com/en/github/managing-your-work-on-github/applying-labels-to-issues-and-pull-requests).

* Add the repository's path in [data/repositories.toml](data/repositories.toml) here - [github.com/deepsourcelabs/good-first-issue](https://github.com/deepsourcelabs/good-first-issue/blob/master/data/repositories.toml).

* Create a new pull-request. Once the pull-request is merged, the changes will be live on [goodfirstissue.dev](https://goodfirstissue.dev/).
Are you still happy with the decision to use TypeScript?
Tags: discuss, typescript, javascript
Published: 2020-02-18 03:19:43

Thinking on slowly moving a large scale project over to TypeScript and curious if those that have done the same are still happy with the switch or if there are any cautionary tales before committing to TypeScript.

The main concern is that the overhead of defining types for everything (interfaces, objects, etc) is hard to do well, can lead to code bloat, causes too many workarounds, and provides a false sense of safety.

Would love to hear any success or horror stories that have come with a large code base moving over to TypeScript.
Custom Auto-Configuration in SpringBoot
Tags: java, tutorial, beginners, webdev
Published: 2020-02-18 03:17:27

The blog is originally published on my blog [jsblogs.github.io](https://jsblogs.github.io/spring/2020/02/18/Custom-Auto-Configuration-in-SpringBoot)

---
* [Introduction](#introduction)
* [Technologies used](#tech-used)
* [Project Structure](#structure)
* [Create config classes](#config-classes)

## Introduction <a name="introduction"></a>
The goal of this blog is to understand the autoconfiguration provided by SpringBoot. I'll be creating a logging library for demo purpose and that will include Auto-Configuration class to create all required beans for that library. 

## Technologies used <a name="tech-used"></a>

* Java 11
* Spring Boot 2.2.4
* Gradle 6.0.1

## Project Structure <a name="structure"></a>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bo4objeiz94xh40vme53.png)

I'm using a Gradle multi-module project. The module `logging-library` will be a shared library that will be used in the `service` module.

## Create config classes <a name="config-classes"></a>
Now It's time to create required config classes. I've created a config class called `LoggingAutoConfiguration` and marked as `@Configuration` and created one [conditional bean](#).

```java
@Configuration
public class LoggingAutoConfiguration {

    // We can define beans here

    @ConditionalOnMissingBean(Logger.class)
    @Bean
    public Logger getLogger() {
        return new ConsoleLogger();
    }
}
```
As of now this class is just a normal spring configuration and to make it auto-configuration class we need to follow 2 steps:

### Step 1: Create *spring.factories* file
Create a file in`logging-library` with name `spring.factories` under `resources\META-INF\` directory.
### Step 2: Register the auto-config class 
Now add your configuration class into the `spring.factories`.
```properties
org.springframework.boot.autoconfigure.EnableAutoConfiguration=tutorials.logging.LoggingAutoConfiguration
```

That's it!!!

Now we can inject the module in `service` and we don't need to specify any package to scan from `logging-library` our auto-configuration class will take care of that.

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

You can find the running code [here](https://github.com/jeetmp3/tutorials/tree/master/springboot-auto-config)
Turn sync function to async - Python Tips
Tags: python
Published: 2020-02-18 02:29:47

## TL;DR

We can write a function wrap a sync function an async function:

```python
import asyncio
from functools import wraps, partial

def async_wrap(func):
    @wraps(func)
    async def run(*args, loop=None, executor=None, **kwargs):
        if loop is None:
            loop = asyncio.get_event_loop()
        pfunc = partial(func, *args, **kwargs)
        return await loop.run_in_executor(executor, pfunc)
    return run 
```

To use it:
```python
import time
import os

async_sleep = async_wrap(time.sleep)
async_remove = async_wrap(os.remove)

# or use decorator style
@async_wrap
def my_async_sleep(duration):
    time.sleep(duration)
```


## Longer Description

If we use sync function `time.sleep` in a function and run it 3 times:

```python
import time

def count():
    print("func start")
    time.sleep(1)
    print("func end")


def main():
    funcs = [count, count, count]
    for func in funcs:
        func()


if __name__ == "__main__":
    start = time.time()
    main()
    end = time.time()
    print(f"Time elapse: {end-start}")
```

Run it:
```
func start
func end
func start
func end
func start
func end
Time elapse: 3.00303053855896
```

The total time cost is around 3 seconds.

Now let's use the async version of `time.sleep` (We can use `asyncio.sleep` from Python's `asyncio` standard library, but here to demonstrate our `async_wrap` function works, we are going to use our own `async_sleep` function).

```python
import asyncio
from functools import wraps, partial
import time


def async_wrap(func):
    @wraps(func)
    async def run(*args, loop=None, executor=None, **kwargs):
        if loop is None:
            loop = asyncio.get_event_loop()
        pfunc = partial(func, *args, **kwargs)
        return await loop.run_in_executor(executor, pfunc)
    return run 


async_sleep = async_wrap(time.sleep)


async def count():
    print("func start")
    await async_sleep(1)
    print("func end")


async def main():
    await asyncio.gather(count(), count(), count())


if __name__ == "__main__":
    start = time.time()
    asyncio.run(main())
    end = time.time()
    print(f"Time elapse: {end-start}")
```

Here we use `asyncio.gather` to run the `count` function three times. Now run it:
```
func start
func start
func start
func end
func end
func end
Time elapse: 1.007828950881958
```

We can see our async version only cost around 1 second! And our `async_sleep` function works!


## Reference:
* https://stackoverflow.com/questions/43241221/how-can-i-wrap-a-synchronous-function-in-an-async-coroutine
* https://github.com/Tinche/aiofiles/blob/master/aiofiles/os.py
* https://github.com/yifeikong/aioify/blob/master/aioify/__init__.py
* https://realpython.com/async-io-python/
Downtime: An Opportunity to Level Up
Tags: productivity, learning, education, downtime
Published: 2020-02-18 02:08:54

---
title: Downtime: An Opportunity to Level Up
published: true
description: Downtime is an opportunity to take action towards things we otherwise don't have time for.
tags: productivity, learning, education, downtime
---

# What is downtime?

- Having nothing to do.
- Holding pattern before you're able to continue work.
- Intentionally taking a break.

# Downtime !== Boredom

More often than not, people express boredom during downtime. If you have nothing to do, but have the freedom to do other things, then...

Boredom becomes a choice.

If you accept boredom, you are choosing inaction.

Intentional inaction (or stillness), is fine. Beneficial, even!

# Downtime === Freedom

It's an opportunity to do *anything* we want. Anything to benefit us personally, professionally, intellectually, emotionally.

Read a few pages of a book.

Watch videos of that course you bought last year.

Work on a side project.

Write in a journal.

Clean up your space (digital, physical, and mental).

Exercise. Meditate. Hydrate.

Practice or develop a new skill.

Help unblock yourself, or someone else.

# Timebox your tasks

I recently started to [timebox](https://en.wikipedia.org/wiki/Timeboxing) my tasks. In particular, the [Pomodoro Technique](https://en.wikipedia.org/wiki/Pomodoro_Technique) has been super effective.

James Clear's [1% Rule for Continuous Improvement](https://jamesclear.com/continuous-improvement) has dramatically influenced my actions. If spending 25 minutes helps me marginally improve in something, it's a massive success. Through daily repetition, the impact is exponential.

Accumulate small wins. Each win compounds.

Exponential winning.

# Prioritize

Most of us usually want to improve ourselves. To be better than we are now. E.g. Improve our craft. Our mindset. Our health.

If we practice being conscious of opportunities, taking action becomes easier. ESPECIALLY during downtime. Small wins in short bursts.

If we habitually associate downtime with opportunity, we level up. Therefore, we win.

How will you prioritize during downtime?

What will you prioritize during downtime?
The Building an Indie Business Podcast- How to Interview A Podcast Guest
Tags: podcast, startup
Published: 2020-02-18 01:43:46

In this episode I discuss how to interview someone on a podcast. I go over the Do's and Don'ts, an interview walk through, mistakes I made, and how to find great guests.

https://overcast.fm/+RG5jpA7Yg
[Episode Page](https://baib-podcast.com)
[Revenue Research](https://revenueresearch.co/)
"just spend 2 hrs with @oraclejet and lets talk again" !
Tags: react, angular, oraclejet, javascript
Published: 2020-02-18 01:14:12

"just spend 2 hrs with @oraclejet instead of angular/react/vue and lets talk again" !

that was the message from last nights ODMLON ! 

well its a bit late now but its on my todo list for tomorrow so lets see what happens
Kindly share the work/life related website(s) you never fail to visit everyday, and why
Tags: discuss, fun
Published: 2020-02-18 00:38:55

---
title: Kindly share the work/life related website(s) you never fail to visit everyday, and why
published: true
description: 
tags: discuss, fun
---

Everyone has that dev, work or life related website they never fail to visit EVERY DAY of their dev life. It could be 
- [StackOverflow](https://stackoverflow.com) for answers to their dev-related questions,
- [Dev.to](https://dev.to) for articles containing solutions to work and work-life challenges, and fun stuff,
- [Hackerank](https://www.hackerrank.com/) for coding challenges and jobs,
- [Toptal](https://www.toptal.com/) for freelancing jobs,
- [Codepen](https://www.codepen.io/),
- [FreeCodeCamp](https://www.freecodecamp.org/),

or any other one.

Kindly share with us and tell us why that website is a daily go-to for you. You never know.. You may win someone over to that website through its usefulness to you🤷‍♀️😉
Practicing Safe S...hell
Tags: linux, bash
Published: 2020-02-18 00:38:26

While creating [SkyHole](https://github.com/cristian-rivera/skyhole), I found myself writing a few shell scripts. They get the job done, and although I could have written them in a language such as Ruby or Python, it's a safe bet to make that any UNIX machine that execute these scripts have a shell.

As I was writing these scripts, it became clear that out of the box, a shell script doesn't have the niceties that you might expect when coming from another language. Things such as **the script exploding when a variable isn't defined** or **the script exiting when a step in the function has failed** aren't handled normally in a shell script. The purpose of this post is to share a few tricks to make scripting in a shell a bit safer.

## Have a shebang

Not every machine a script runs on might have an up to date version of `bash` at `/bin/bash`. For example, macOS ships with an old version on this path.

```shell
#!/usr/bin/env bash
```

## Set the exception parameter

If a script fails at a certain point, what would you like to happen? Most of the time, you want it to stop and not continue because the rest of the script might depend on that command to succeed. You can tell the shell to exit if anything throws an error immediately, and therefore the rest of the script won't continue running.

```shell
set -e
```

If you want to take this a step further, you can add `-o pipefail`, which protects against any failure anywhere in a pipeline, rather than just the last command.

```shell
set -eo pipefail
```

## Set the undefined parameter

A script might rely on user input or data from another source to run correctly. What happens when that data is empty, and a variable never gets set? Nothing. The script will continue and fail only when an empty input is invalid for that command. What about when you interpolate a path? For example:

```shell
rm -rf "${USER_FOLDER}/"
```

What's going to happen here if the variable `USER_FOLDER` is never set? You guessed it; the shell will interpret that command as `rm -rf "/"`. That would not be very good. You can prevent this from happening by adding the following to the top of your scripts.

```shell
set -u
```

## Conclusion

What does this look like all together? I always add these two lines to the top of every shell script I write.

Hint: you can combine multiple `set` parameters.

```shell
#!/usr/bin/env bash

set -euo pipefail
```

Check out [Anybody can write good bash (with a little effort)](https://blog.yossarian.net/2020/01/23/Anybody-can-write-good-bash-with-a-little-effort) for more tips and tricks when scripting in shell. It was the inspiration for this post.
ODMLON @oraclejet ui
Tags: oraclejet, javascript, ui
Published: 2020-02-18 00:36:16

ODMLON [oraclejet](https://www.oracle.com/webfolder/technetwork/jet/index.html) followup

well theres definitely a shortage of [oraclejet](https://www.oracle.com/webfolder/technetwork/jet/index.html) articles on DEV

i could only find 3 from 2017 to 2019
* https://dev.to/smgmaldonado/oracle-jet-charts
* https://dev.to/webpadawan/web-components-for-enterprise-part-1-salesforce-oracle-sap-e70
* https://dev.to/peppertech/easy-install-of-oracle-jet-web-components-using-npm-2m3m

so lets right that wrong asap
Public Speaking for Developers
Tags: discuss, productivity, career, help
Published: 2020-02-17 23:19:51

One my current missions in life is to teach (about software development). I know that writing is one way to do that. There are others ways to teach as well which involve speaking. Like talking out load in front of other people in real time.

That speaking thing is not in my wheelhouse. I think it is important to tackle this mostly because people learn in different ways. Some are happy learning by reading but others prefer audio, video, and other interactive ways of learning. 

Have you gone from "I am introvert, leave me alone and let me code" to figuring it how you can get over yourself long enough to teach things to others. I can imagine there are different ways to go about it, progressive more effortful:

Recording screencasts
Recording videos 
Speaking in front of a small classroom
Speaking at a conference type setting with large audience 

It is matter of practice. When tackling a new skill, I believe in starting small and keeping things simple. Does anyone have any experience with any of the above or any other practical resources they'd recommend for practicing this new skill (for the sake of teaching).