teleren/devto huggingface dataset:
FREE Startup Agency React Landing Page Template
Published: 2021-01-20 13:19:45

Great news for hump day - a new, absolutely FREE React Landing Template has just rolled off our presses! This time, it's designed with Startup Agencies in mind. But as always, the design is universal enough for anyone to adopt, really!

For our longtime supporters - you know the drill (thanks and much love to you guys - we wouldn't be here without you!). For new friends, here's the deal:

The Startup Agency React landing template is designed to be minimalistic yet functional. Thanks to utilizing a Next JS and Gatsby JS based framework, this landing page template is fast, secure and SEO friendly right off the bat. We have also included Mailchimp integration so that life gets easier when it comes to keeping in touch with your leads.

And if this React Landing template is not what you're looking for, be sure to watch this space as we keep adding to our already comprehensive range of absolutely FREE React landing page templates!

Don't forget to give us a shoutout at:

👉Facebook: https://www.facebook.com/StartupLanding
👉Twitter: https://twitter.com/startuplanding

and check all the templates from:

👉 Check it live here: https://startuplanding.redq.io/
👉 Check it on Github: https://github.com/Startup-Landing/Startup-Landing
👉 Check it on Producthunt: https://www.producthunt.com/posts/startup-landing
Everkey - no more passwords (for your home also) - brilliant
Tags: news, security, todayilearned
Published: 2021-01-20 13:06:02

Hi there

Have you heard about EverKey. 

[Everykey](https://bit.ly/geteverkey) is a Bluetooth device that replaces your keys and passwords. Using military grade security , Everykey unlocks your phone, laptop, tablet, house door, car door, and other access-controlled devices when you are nearby, then locks them back down when you walk away. Everykey also generates secure passwords for your website accounts, then automatically logs you in when you visit a website. If you lose your Everykey, you can remotely freeze it, so no one else can use it."

Seems very very smart - did you try it?
[More info](https://bit.ly/geteverkey)
Calculating the number of seconds until midnight
Tags: python, programming, productivity, beginners
Published: 2021-01-20 13:03:25

I know this might be very straight forward for some developers but I found this a pretty intriguing and fun quick problem to solve, it also might help some beginners furthermore. 

How can you find the number of seconds until midnight ?....with python...in an elegant way.

My first approach to this was to subtract from the 24 hours the number of hours that passed today, and so multiply with 60 to get the number of seconds. 

```python
from datetime import datetime

number_of_seconds_until_midnight = (24 - datetime.now().hour) * 60 * 60
```

The pros of this formula is that is fast, but it lack the readability of python coding. By using `datetime` package from python you can increase the readability and the code follows as this:

```python
from datetime import datetime, timedelta, time

now = datetime.now()
midnight = datetime.combine(now + timedelta(days=1), time())
seconds_until_midnight = (midnight - now).seconds
```

`midnight` is calculated by combining tomorrow date with time, which will strip the time to 00:00.
`seconds_until_midnight` subtract from midnight `datetime` the now `datetime` to get the time-frame between these two.

You can also add all this to a method:
```python
from datetime import datetime, timedelta, time

def seconds_until_midnight() -> int:
   '''Calculate seconds until midnight'''
   now = datetime.now()
   midnight = datetime.combine(now + timedelta(days=1), time())
   
   return (midnight - now).seconds

```
Daily Developer Jokes - Wednesday, Jan 20, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-01-20 13:00:18

---
title: "Daily Developer Jokes - Wednesday, Jan 20, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Wednesday%2C%20Jan%2020%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259b29fe07.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ How do JavaScript developers break up?

___A:___ They always promise to callback
 -->
"Scaling" up as a Beginner in programming 
Tags: react, programming, beginners, coding
Published: 2021-01-20 12:57:20

Hmmm... I want to keep it natural, I'm a beginner programmer in JavaScript and react. Was not easy tho, having so many things to learn at the same time. For every beginner reading this I want to share how I scaled up to do more in the past three months... on a subsequent post, I would share a project I built.
=> TIPS
1. You are the only one that can believe in your own ability
2. Don't be afraid to DO IT. Just do it 
3. You would feel so intimidated, but right there make your mistakes and learn from them not to make them again 
4. Be a savage at it.
5. Wake up each day as if coding is your breath and reason for existence.
6. Be fulfilled and satisfied each day by doing something challenging

THAT'S IT FOR ME
UI/UX Design Tips: Emphasize by de-emphasizing
Tags: ux, uiweekly, design, webdev
Published: 2021-01-20 12:56:57

Often with Front End Development, or UI and UX work, you will notice that some important element is just not getting the attention it deserves, but you feel like you cannot adjust the element anymore to emphasize it more.

You try to make fonts bolder or you change color to make it stand out a bit more. Like in the following example, you try giving the vote count a heavier to attract more attention to it. But as you can see, it doesn't add all that much emphasis on the most important features of this component

<figure>
  <img src="https://karsvaniersel.com/blog-images/emphasize-by-de-emphasizing/wrong-example-1.webp" alt="Wrong example of how to emphasize important content">
  <figcaption>Wrong example of how to emphasize important content</figcaption>
</figure>

When you find yourself in this situation, try to de-emphasize the less important elements. You will see that you need to do very little to emphasize the important elements now.

<figure>
  <img src="https://karsvaniersel.com/blog-images/emphasize-by-de-emphasizing/good-example-1.webp" alt="A clear example of how de-emphasizing makes important content stand out">
  <figcaption>A clear example of how de-emphasizing makes important content stand out</figcaption>
</figure>

You will see that the important content now draws way more attention to itself. A lot of people focus on emphasizing the important parts, while it is way easier to de-emphasize the less important elements! By doing very few changes, you can achieve a lot.

Now to emphasize a bit more, and add some extra touch to your important elements, try adding a color. Of course, it should be in-line with your brand colors. Try using your accent color to make those important items stand out!

<figure>
  <img src="https://karsvaniersel.com/blog-images/emphasize-by-de-emphasizing/good-example-2.webp" alt="Emphasize even more by incorporating brand colors">
  <figcaption>Emphasize even more by incorporating brand colors</figcaption>
</figure>

These types of changes take less than 5 minutes to implement but make your components stand out to your users. Not only will this trick make your website a lot easier to navigate it will also help to make your site look clean. 

As you can see from the before and after shots, it adds a lot of readability for your user.

<figure>
  <img src="https://karsvaniersel.com/blog-images/emphasize-by-de-emphasizing/comparison.webp" alt="The clear difference between the two">
  <figcaption>The clear difference between the two</figcaption>
</figure>

If you liked this post let me know in the comments! Always interested in feedback. Also if you want to keep up-to-date on my weekly designs tips, consider <a href="https://twitter.com/karsvaniersel" target="_blank">following me on twitter</a>.
Cyclist coders please help!
Tags: android, javascript, googlecloud
Published: 2021-01-20 12:45:23

Hello Coders!

Here I just started a open source project to help touring cyclists. Here cyclists can estimate time required for routes. As well. Route costs and equipment required. 

www.tourismcycling.com

Never the less. The site is far away for optimal. I am an amateur cyclist who knows how to code. but I wonder. If there is people who want to contribute?. Is there any cyclists who knows how to code who may want to build digital tools for cyclists? It is an github based open source project. 

There is a need to optimize UX. 
Accuarcy and usability for map route / cost generator. 
As well. May some want to help me to bring this idea to an android app?. 


thanks. If some wants to help. Please welcome!.
Forward hooks in PyTorch
Tags: deeplearning, machinelearning, tutorial, python
Published: 2021-01-20 12:42:51

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

Forward hooks are custom functions that get executed right after the forward pass. Among other things, one can use them together with TensorBoard to visualize activations of any layer.

# Motivation
When using `torch.nn.Module`, did you ever wonder what the difference between the `forward` and the `__call__` methods is?
One can roughly say that `__call__` = `forward` + execution of various hooks.

# Hooks?
Hooks are custom functions that get executed at specific moments during the forward/backward phase. They allow us to inspect what is going on inside of the network. The specific use cases are:

* Debugging
* Logging
* Visualizing (this post)

If you are interested to learn more about hooks checkout the [official docs](https://pytorch.org/tutorials/beginner/former_torchies/nnft_tutorial.html#forward-and-backward-function-hooks).

# Tell me more about forward hooks!
Forward hook is a function that accepts 3 arguments
* `module_instance` : Instance of the layer your are attaching the hook to
* `input` : tuple of tensors (or other) that we pass as the input to the forward method
* `output` : tensor (or other) that is the output of the the forward method

Once you define it, you need to "register" the hook with your desired layer via the `register_forward_hook` method.
Once registered, the hook will be executed right after the forward method. You do not have to worry about triggering it manually!

# Too vague,… I need to see an example!
I created a hands-on video tutorial where I explain step by step how to use forward hooks together with TensorBoard. The goal is to visualize activations of any layer of choice (=creating a histogram of its values for a given sample / batch).

{% youtube 1ZbLA7ofasY %}

The tutorial does not talk about several related (interesting) topics.

* backward hooks
* forward pre hooks

I would encourage the reader to learn more about them:)

# Conclusion
Hooks are hidden gems of PyTorch. Specifically, the forward hooks allow you to debug and visualize what is going on inside of your network. This post provided a first look into what they are and how one can use them.

# Credits 
Cover photo https://unsplash.com/@steve_j
Top RPA Interview Questions 
Published: 2021-01-20 12:41:52

Top RPA Interview Questions

Q1. What is Robotic Automation Process?

Ans: Robotic process automation (RPA) is a business process automation technology in which the robots simulate and mimic human actions for executing tasks without any human intervention in a business process. An RPA software robot even costs less than the budget spent on an employee and never makes mistakes.

Robotics: The entity which mimics the actions of humans.

Process: It is a step by step procedure which leads to an effective activity, for example, the process of building a house.
Automation: It is defined as a process which is performed by robots without human involvement.

Q2. What are the steps involved in the RPA life cycle?
Ans: RPA life cycle is defined in 4 phases:

Analysis: This is the beginning phase of the RPA lifecycle which analyzes the business processes for RPA development. 
Bot Development: Development team works on fulfilling the requirements for the automation tasks.
Testing Phase: Development team performs quality checks for bots.
Deployment and Maintenance: Bot is deployed and maintained by the team.

Q3. How to create an RPA bot?

Ans: To create an RPA bot, we need to follow the below-mentioned steps:
Record a task
Perform the bot implementation
Test the bot
Upload the bot to execute the automation tasks

Q4. What are the characteristics of RPA?
Ans: The following are the characteristics of RPA:

User-friendly: Robotic Process Automation Softwares are usually very easy to use and understand. There is no need to have special or extra knowledge for users to use RPA.

Not Disruptive: The process transformation in RPA is very simple and straightforward. 

Coding is not required: No coding is required for the employees who 
work on RPA. They only need to have knowledge regarding how the RPA works.

More efficient results in less time: They never make mistakes as humans do. Once you provide them with the right data along with rules and regulations, they will execute the same without any errors.
Easy to use: The code required for automating tasks is minimal and not required anymore. So it can be done by simply dragging and dropping into the system.

For More Information Visit <a href="https://mindmajix.com/rpa-interview-questions">here</a>

Want to become RPA Professional? then Visit <a href="https://mindmajix.com/rpa-training">RPA Certification Training Online</a> Institute
Architecture - The Pancake Theory
Tags: architecture, infrastructure, software, pancakes
Published: 2021-01-20 12:35:41

It's very easy to get technical when discussing architecture,  
But I believe that's not how you suppose to play that game at all.

The most important thing when building a layered system is to have a clear vision that is agreeable by all team members.  
A clear vision helps us stay consistent in the way we think and approach those layers.

## Pancakes
As a B2C SaaS company we decided to break down our architecture layers the following way:

![Sanga Layered System diagram](https://dev-to-uploads.s3.amazonaws.com/i/55la33i58np0hysqf667.png)

As we see it, each layer is defined by its core purpose and expose an interface to be consumed by the layer above it.  
> e.g The services layer holds Sanga microservices and expose resources that are being consumed by the client layer via restful api.

## Maple & Butter.
@#$% yeah, lets put some maple & butter on those pancakes 😉

Similar to how restful api acts as the tunnel that the services layer expose to the client layer above it (no news here 🤷‍♂️),  
The infrastructure layer does the same by exposing the resources it creates to be consumed by the services layer via kubernetes (e.g Database, S3 Bucket).  
That means that when a service is being deployed,  
it looks for the resources it needs in Kubernetes secrets (big news here 🤯).

### Thank you for reading, look for our next Byte
_Made with ❤️ by [Sanga](https://www.sanga.app)_
Just Published an NPM Package 🔥
Tags: node, opensource, javascript, showdev
Published: 2021-01-20 12:31:57

Hey there.🚀 I just published another NPM package on npmjs.com. The npm package converts the subtitle file (.srt) into a readable and well-standard JSON format. 

Check out the NPM link [SRT-Convert-JSON](https://www.npmjs.com/package/srt-convert-json)

## Install

```
$ npm install srt-convert-json
```

This package can be used to convert Movies Subtitle to JSON format

## Usage

```js
const convert = require('srt-convert-json')

convert.process("INPUT_FILE_PATH","OUTPUT_FILE_PATH")
// convert.process("./data.srt","./subtitle.json")
```

For Example, this is an SRT File

```
1
00:02:38,910 --> 00:02:40,161
English! I'm English!

2
00:05:40,049 --> 00:05:41,801
It's grenadiers, mate.
```

After converting, the output will be 

```
[
    {
        "position": 1,
        "start": "00:02:38",
        "timer1": "910",
        "end": "00:02:40",
        "timer2": "161",
        "text": "English! I'm English!"
    },
    {
        "position": 2,
        "start": "00:05:40",
        "timer1": "049",
        "end": "00:05:41",
        "timer2": "801",
        "text": "It's grenadiers, mate."
    },
]
```
OpenAPI for Docusaurus! 📘
Tags: openapi, docs, react, documentation
Published: 2021-01-25 20:49:58

---
title: OpenAPI for Docusaurus! 📘
published: true
date: 2021-01-19 17:30:00 UTC
tags: openapi, docs, react, documentation
canonical_url: https://rohit.page/blog/projects/openapi-for-docusaurus/
---

Introducing "Redocusaurus": [Redoc](https://github.com/redocly/redoc) for [Docusaurus](https://v2.docusaurus.io/)

### [Redocusaurus](https://npmjs.com/package/redocusaurus/)

[![npm downloads](https://img.shields.io/npm/dw/redocusaurus)](https://npmjs.com/package/redocusaurus/)

## What is it?

It is a preset that allows you to easily integrate OpenAPI documentation into your docs site made with docusaurus. It has 2 main components:

- [docusaurus-theme-redoc](https://github.com/rohit-gohri/redocusaurus/tree/main/packages/docusaurus-theme-redoc)

Using Redoc as a React component, this provides 2 theme components, `@theme/ApiDoc` and `@theme/Redoc`. You can use them directly in js pages in Docusaurus.

- [docusaurus-plugin-redoc](https://github.com/rohit-gohri/redocusaurus/tree/main/packages/docusaurus-plugin-redoc)

This creates routes from your OpenAPI files or URLs and renders with the components provided by the theme.

## How to set it up?

1. 

Install the preset

```
npm i --save redocusaurus

```
2. 

Add it to your `docusaurus.config.js`:

```
module.exports = {
 // ...
 presets: [
   // ... Other preset configs
   [
     'redocusaurus',
     {
       specs: [{
         route: '/api/',
         spec: 'https://redocly.github.io/redoc/openapi.yaml',
       }],
     }
   ],
 ],
 // ...
};

```

3. Rebuild your site and you will have your OpenAPI docs available at the `/api/` route.

## Extra features over directly using Redoc

The theme includes redoc settings and some custom css to make it match the `@docusaurus/classic` theme. Along with support for **Dark Mode** and **Server Side Rendering**.

## Docs

Find the docs and examples at the website : https://redocusaurus.vercel.app/ 

## Github Repo

Find the source and know more on [Github.](https://github.com/rohit-gohri/redocusaurus)
 
[![github badge](https://img.shields.io/github/stars/rohit-gohri/redocusaurus?style=social)](https://github.com/rohit-gohri/redocusaurus)
Horoscope Web App
Tags: html, css, javascript, aztroapi
Published: 2021-01-20 12:25:35

**Hello Dev's**,
I created a Horoscope Web App using HTML, CSS, Javascript, Jquery, and **aztro** API.

**Aztro API** allows developers to access and integrate the functionality of aztro with other applications. The API retrieves daily horoscopes for yesterday, today, and tomorrow.

#####Demo - image
![Demo image](https://dev-to-uploads.s3.amazonaws.com/i/6fvzqyjnaalvbsoalju4.png)

**App Link:-** https://arwazkhan189.github.io/Horoscope-app/
**Code Link:-** https://github.com/arwazkhan189/Horoscope-app
**Aztro API Link:-** https://aztro.readthedocs.io/en/latest/
My web dev journey.
Tags: webdev, css, html, javascript
Published: 2021-01-20 12:22:25

Web development has always been more of a curiosity for me. I never thought that I would take it on up until I built an interest for it sometime in June 2020. I had just saved enough to get myself a laptop so I could learn how to edit photos because photography was my main focus at the time. 

The real journey to web development began when I stumbled upon a crash course on web design on YouTube by this bald headed guy, "Bring your own laptop". The Video lasted for about 3 hours and then I was hooked! Then I thought to myself hey, I can actually do this. Fast forward to today and I just started learning JavaScript after getting access to udemy courses and just pure consistency on my part to practice almost every day, getting familiar with HTML and CSS and building a few projects, some of which are in my GitHub. 

It has been quite a journey so far and I am looking forward to where this road leads. I'm open to tips from anyone who is willing to share.
Welcome to Sanga Bytes
Tags: firstpost, sanga
Published: 2021-01-20 12:09:18

This is exciting...  
Every big journey start with one small step,  
and this is the very first (and very small) step of [Sanga](https://www.sanga.app)'s [tech blog](https://www.dev.to/sanga).

## Let us introduce you to our Byte size concept.
![Alt text of image](https://media.giphy.com/media/McgWV3RzDQZZNdFWRA/giphy.gif)

The theme of our company's tech blog is to share with the dev community the concepts we came to refine during our journey of developing Sanga.

We aim to share ideas and ignite a thought process.  
You will not find tutorials, or a very detailed step by step posts on how to write your first microservice or how to use Combine with Swift UI.

Instead, you will find a very concise concept written in a Byte size format.  
Meaning, **no more than a couple of paragraphs and an image**.  

We hope that this format will increase the relevancy of each post to all sort of backgrounds and stacks.  
And we are positive that reading a Byte size post is easier than a Gigabyte one.

### Thank you for reading, look for our next Byte
_Made with ❤️ by [Sanga](https://www.sanga.app)_
PrimeVue 3.2.0-rc1 with Vite Support
Tags: vue, webdev, javascript
Published: 2021-01-20 12:06:20

[PrimeVue](https://www.primefaces.org/primevue/showcase) 3.2.0-rc.1 is released with first class support for [Vite](https://github.com/vitejs/vite), the new build tool from the create of Vue, Evan You. See the [Vite-PrimeVue starter app](http://github.com/primefaces/primevue-quickstart-vite) for an example.

**New Build** 

Up until now, PrimeVue can only be used with environments that support single file components, with 3.2.0-rc.1 the npm distribution contains native **ES modules**, **IIFE** format and **CommonJS fallback** so that it can be used with Vue CLI, Vite, a custom build with vue-loader enabled and directly within the browser with script tags. 

**Changelog**
 
The highlight of this release is compatibility with the rest of the Vue ecosystem however we've managed to add numerous quality improvements reported by the users. View the [changelog](https://github.com/primefaces/primevue/blob/master/CHANGELOG.md) for details. 

**Live Demos** 

Visit [PrimeVue](https://www.primefaces.org/primevue/showcase) documentation to get started now or take a look around the [showcase](https://www.primefaces.org/primevue/showcase). 

**Roadmap** 

Now the new build is out of the way we'll start adding the following features for 3.3.0;

*   [Advanced Filtering](https://primefaces.org/primeng/showcase/#/table/filter) like in PrimeNG.
*   Standalone [VirtualScroller](https://primefaces.org/primeng/showcase/#/virtualscroller) component as in PrimeNG.
*   New VirtualScroller for table and select components like PrimeNG has.
*   Grouping option for Select components.

Always bet on Prime!