teleren/devto huggingface dataset:
How to get google client ID and client Secret
Tags: webdev, api
Published: 2020-04-05 15:43:34

These are the easy steps in creating your own google client ID and google Secret.
1. Go to console.developers.google.com. 
2. Click on new project.
![New Project](https://dev-to-uploads.s3.amazonaws.com/i/fh887n3fjkp54q3cglhn.png)
3. Add project name and click on create.
![Project name](https://dev-to-uploads.s3.amazonaws.com/i/x9w97xz1qj89a7bk67wj.png)
4. Make sure the project you are on is the newly created one.
![Newly Created](https://dev-to-uploads.s3.amazonaws.com/i/e51jskuz6uprl40t3k9k.png)

5. Click on the hamburger icon, navigate to api services and choose credentials. 
![Credentials](https://dev-to-uploads.s3.amazonaws.com/i/sy2ommkam44ji3v5iq29.png)
Then click on create credentials and click on oauth client ID.
![client id](https://dev-to-uploads.s3.amazonaws.com/i/vhiteluglgoz6rcig011.png)
6. Before you can create client ID, you need to configure consent screen.
![consent screen](https://dev-to-uploads.s3.amazonaws.com/i/4lala14diwgbfbqxcxfi.png)
click on configure consent screen.
7. Click on external and create.
 ![External](https://dev-to-uploads.s3.amazonaws.com/i/o5i1vo89jeb3j1weewr4.png)
8. Type in the application name. You can fill out the form if you like, it is not required. Make sure the application name does not have the word 'google' in it.
![App name](https://dev-to-uploads.s3.amazonaws.com/i/rk09wkv0rpfricb7rl8v.png)
9. Go back to the dashboard and click on enable Apis and services. 
 ![Enable](https://dev-to-uploads.s3.amazonaws.com/i/ucs4ptd5oxng98037x31.png)
For google, it is google plus api.
![Google plus](https://dev-to-uploads.s3.amazonaws.com/i/tdn91a077fartyobso2i.png)
click on enable.
10. Go back to credentials, click on create credentials then navigate to oauth client ID.
11. Click on web application. if you are using localhost, follow the image instruction below for authorized javascript origin and redirect uri. then click on create.
 ![web app](https://dev-to-uploads.s3.amazonaws.com/i/qyuhg9g277pg2ib9427l.png)
12. Your oauth client ID and client Secret is successfully created. 
![id and secret](https://dev-to-uploads.s3.amazonaws.com/i/c0hrihjloe0w3ol8vir1.jpg)
RoR Tips & Tricks Series – #1
Published: 2020-04-05 15:22:29

Link: https://blog.joshsoftware.com/2017/01/11/ror-tips-tricks-1/

I am staring this series of blog posts. This will cover few tips and / or tricks from ROR. We as developer come across a situation, where we struggle to solve the problem. Once solved we realise that, in our trial and error efforts we have found some trick, which is not documented.

This blog post is an effort to  collect such tips and tricks and make developers life easy !!!
How to use the spread operator
Tags: es6, spread, javascript, beginners
Published: 2020-04-05 15:22:09

When I first stumbled upon the `...` operator it looked confusing and I didn't really know what to do with it. Javascript already had built in functions that were doing the exact same thing as this new operator so the need to integrate it in my code wasn't very clear to me. Today, after I used it for quite a while, it's one of my favorite ES6 features and it helps me manipulate arrays and strings much easier than before.

**MDN says that:**

*"Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected."*

Pretty simple, no? In plain English this means that this operator spreads the items inside an iterable (be it string, array, set or anything that we can loop through really) inside a receiver (a receiver is something that receives the spread values).

Now that we got the definition out of the way, what exactly can we do with this operator?

**1. Copy an array**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c9pegqjaqytlvr7ox9p3.PNG)

**2. Copy an array and add new elements to it**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/otkluv4xf8bewgeb6yqs.PNG)

**3. Concatenate arrays**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w640zsntz9wx6x7y98ql.PNG)

This works with arrays holding different types or mixed arrays, like so.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lk9hks78hgyzph6nzrn1.PNG)

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

**4. Spread elements on function calls**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g64q2plnhf9n6irwmgus.PNG)

**5. Copy object literals**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hu64votoywtll3mzpvtm.PNG)

**6. Concatenate and add new properties to object literals**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/13if3t6cka0cwnltzo02.PNG)
What’s your alternative solution? Challenge #12
Tags: challenges, discuss, javascript, codenewbie
Published: 2020-04-05 15:15:09

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Create a function that receives an array of numbers and returns an array containing only the positive numbers

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge12a

function getPositives(ar)
{
    var ar2 = [];
    
    for(var i = 0; i < ar.length; i++)
    {
        var el = ar[i];
        
        if (el >= 0)
        {
            ar2.push(el);
        }
    }
    
    return ar2;
}

var ar = [-5, 10, -3, 12, -9, 5, 90, 0, 1];
var ar2 = getPositives(ar);

println(ar2);

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-04-05 15:10:54

day 27/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today learning n implement what is local state and app-wide state
https://github.com/triyono777/100-days-of-code/blob/master/log.md
JavaScript Primitive vs Reference Types
Tags: javascript
Published: 2020-04-05 15:02:41

<p>I started taking the course <a href="https://www.udemy.com/course/javascript-bootcamp-2016/" target="_blank">Accelerated JavaScript Training</a> by Maximilian in Udemy and I found very interesting the why he explained the difference between those types in JavaScript, so I decided to write about that.</p>

<p>In JavaScript, values can have different types and those types can be categorize into 2 categories: Primitive and Reference.</p>

<h2>Primitives</h2>

<p>Primitive values are simple types like <b>Boolean</b>, <b>String</b> and <b>Number</b>.</p>

<p>When you assign a variable to another variable, then the new value will actually be a copy of the first one. This means that if you change the first variable value, the second variable value(the copy one) will not be changed.</p>

<p>You can do this example in your browser console.</p>

![JavaScript Primitives](https://dev-to-uploads.s3.amazonaws.com/i/8vs61qkre6ef6om8eofa.PNG)

<h2>Reference Types</h2>

<p>Reference Types are more complex ones like <b>Object</b>, <b>Arrays</b> and <b>Functions</b>.</p>

<p>When it comes to Reference Types, what we have is not a copy of the value. In this case the value doesn't actually store the data but it only stores a pointer to a place in memory, where data is stored.</p>

<p>Therefore, if you copy a reference type, you copy the <b>pointer</b>. <mark>If you change the value of the first value, the value of the second one will also be changed since you changed the data in the memory. The pointer is still the same</mark>.</p>

![Reference Types JavaScript](https://dev-to-uploads.s3.amazonaws.com/i/p9ngjej7vuvuulna141o.PNG)

<p>So if we try to check if arrayA is equal to arrayB, it will be true, but in a case that we create a new array arrayC with exactly the same values as arrayA and we check for equality, we will get false.</p>


![JavaScript Reference Types](https://dev-to-uploads.s3.amazonaws.com/i/oq297v0s1munm0nnl9ix.PNG)

<p>Because in arrayC case, we also create a value, an array and we store this in memory too. It's not the same storage place as arrayA, since a new array was created. We know that is exactly the same, but JavaScript doesn't. And that is a good thing because we can add a new value to this array and all of a sudden it wouldn´t be the same anymore.</p>

<p>When we are comparing the objects, we are actually comparing the pointers, and the pointers, point to different locations in memory.</p>

![Javascript Reference Types Diagram](https://dev-to-uploads.s3.amazonaws.com/i/1lgrbku7e1h8onfc7bhf.png)

<p>I hope you found these tips helpful.😊</p>
Connect with teammates without leaving your terminal
Tags: twiliohackathon
Published: 2020-04-05 14:46:37

For the Twilio hackathon, I'm thinking of building a terminal chat application with python using Twilio's programmable chat api - kinda like Slack with private and public channels, direct messaging, etc but all in the terminal.

I'm still reading through the docs. I'll be documenting my progress here as I discover and implement what the api is capable of.
Hellin' Worki - Now, Joe's just a shout away - TwilioHackathon
Tags: twiliohackathon, career, beginners, webdev
Published: 2020-04-05 14:43:18

Hellin Worki is a video conferencing platform which seamlessly dials your coworkers when you call out their name, a  "Yes" and you are connected. 

## Problem

Telling your coworkers to be constantly connected on 4 hour long video calls is obtrusive, awkward and plain weird. You could stay connected and disable your video, but then they would still hear your chair squeak, the pigeons out the window and the traffic outside. Nothing quite emulates the comradery of your cozy old office, does it?

Nothing quite replaces sitting across the table from each other and collaborating, does it? 

Nope, but Hellin' Worki changes that. 

## Working

1. You and your coworker Joe join a Room.
2. Both enter their usernames
3. The microphone listens and waits for you to say "Hey Joe!"
4. When you do, Joe is notified and he can say, "Yes!" to pickup the call.

That's it!

## Advantages

* Calling out your coworker by their names is natural, uninstructive and seamless
* Responding to calls is as simple and easy
* You don't have to stay connected to the video call for hours on end.
* Your privacy is maintained as you are connected only when you respond.

## Tech Stack

* Twilio Video for the actual Video Conferencing

* Flask Web Framework with Python for the backend.

* Simple HTML and Vanilla JS for the frontend

  and more. 

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

## The Build!

  How far along am I?

  I just got the video conferencing demos by Twilio and the Hotword Detection working, so far so good!



  {% github CT83/Hellin-Worki %}
Kafka Connect JDBC connector: installing a JDBC driver
Tags: kafka, apachekafka, tutorial, database
Published: 2020-04-05 14:37:43

*Ever hit that pesky "SQLException: No suitable driver found…" in Kafka Connect's JDBC connector? You're not alone* 😅

💥I wrote up and recorded a quick tutorial on how to fix it, both local and Docker. Enjoy!
🎥https://rmoff.dev/fix-jdbc-driver-video
✍️https://rmoff.dev/fix-jdbc-driver

Getting this error? 

    Caused by: java.sql.SQLException: No suitable driver found for jdbc:oracle:thin:@10.10.10.10:1954/MYSERVICE

tl;dr: 

* Put the JDBC driver in the *same folder as the Kafka Connect JDBC plugin*.
* Restart the Kafka Connect worker

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

The tutorial shows how to do it with both a 'bare metal' install of Apache Kafka or Confluent Platform, as well as on Docker. 

🎥https://rmoff.dev/fix-jdbc-driver-video
✍️https://rmoff.dev/fix-jdbc-driver

Tutorial covers: 

* Determining the Kafka Connect JDBC plugin folder
* How to find the Kafka Connect worker log
* Viewing the data in Confluent Control Center
* Installing JDBC driver for Kafka Connect running on Docker
* Docker - Installing the JDBC driver at runtime vs baking an image
* Listing installed Kafka Connect plugins
* Using kafkacat to view the topics and data
Top Interview Questions on Arrays - Part 1
Tags: beginners, coding, programming, interview
Published: 2020-04-05 14:17:12

---
title: Top Interview Questions on Arrays - Part 1
published: true
description: Coding Interview Questions
tags: beginners, coding, programming, interview
---
In continuation to my previous post on "Guide to Problem Solving", this post talks about the most popular coding interview questions on the topic Arrays. 

This is part 1 to Arrays and there will be videos on other topics as well eg Trees, Graphs, DP. So, if you are looking to crack an interview and want to quickly get through the top questions, this is one of the best methods. Do like the video and subscribe my channel if you find the video helpful 😊

{%youtube XUN4vhmVx0k %}

Suggestions for improvements are most welcome. 😊 Also please leave in comments if you want me to create a playlist on a specific topic.
Next.js with tailwindcss
Tags: react, nextjs, javascript, starter
Published: 2020-04-05 14:17:01


Hey Folks,

First post and i don't like long intros, so mine will be short. Searched for next.js and tailwindcss templates, found a lot, some outdated, some without purging, some too much boilerplate stuff, etc.

So i created my own and here it is:

{% github andybroger/nextjs-tailwindcss %}

### some notes

**styles/main.css**
The styles/main.css files includes tailwindcss imports and also supports global styles. It is processed by postcss and with postcss-preset-env supports nesting and other cool stuff.

**postcss.config.js**
The configuration file for postcss. The purgecss plugin is configured to scan the \*.js files in the pages/ and components/ folder.

**tailwind.config.js**
You should know that file, its the default config generated with `npx tailwindcss init`. It's where your tailwindcss config goes.

**pages/\_app.js**
Here we integrate `styles/main.css` into the app.

Please feel free to comment, if you have any questions.
Help: Handing off Images in Design Tools?
Tags: help, design, productivity, discuss
Published: 2020-04-05 13:50:01

## TLDR

Has anyone found a good solution to getting the original images in Sketch / FramerX / Figma files?

## Problem

I'm primarily a UI developer so a lot of my daily work involves referencing UI designs. The software for these has been really competitive over the last few years, but most projects these days have been in one of:

- Sketch
- Figma
- FramerX

These tools are great because I can easily inspect measurements, colors, typography, and more.

Unless I'm missing something though, **there is a giant hole in handing off designs in these tools: images.**

Often I'll get a design that has background images (photos or illustrations) that  have been cropped or resized for the screen at hand. Maybe the design includes a Hero image at 1200x675 and a gradient overlay. In all of these tools I can just "export" the frame into a PNG and get that exact image, but often the overlay needs to be animated or the I need some image bleed because it can be shown at different aspect ratios or with parallax.

![Screenshot of Figma](https://dev-to-uploads.s3.amazonaws.com/i/3u16g1814ubzmjxafnxh.png)

> For example, in this screenshot of Figma you can see the original image is a square, but it only exports the designed landscape image.  How do I access the original square image?

I generally need the original image so I can get the bleed and manage overlays and styles at different screen sizes, in different contexts, and for animations.

### Hacky Solution

For some of these I've found I can inspect the project file as a directory and find all images (sometimes a hundred or so) at their original sizes with hashed names that are completely unsearchable, but it seems like there should be a better way.

### Recommendations?
Has anyone found a good solution to getting the original images in Sketch / FramerX / Figma files?

*Photo by Sean Lim on Unsplash*
3D Architectural Walkthrough Services
Tags: 3d
Published: 2020-04-05 13:47:52

 <a href="https://www.3dvfxarch.com/3d-walkthrough-services">3D Architectural walkthrough</a> company in India that gives the fastest delivery of 3D walkthrough animation for architects, builders and real estate developers. We are providing exclusive  <a href="https://www.3dvfxarch.com/3d-walkthrough-services">3D walkthrough animation services</a> which will really enhance your project and take it to a different level.

 <a href="https://www.3dvfxarch.com/3d-walkthrough-services">3D walkthrough animations</a> are the best way to market your projects. It helps any investor before making any major financial investment in any property project. Even 3D <a href="https://www.3dvfxarch.com/3d-walkthrough-services">architectural walkthrough</a> services helps the client to understand the minute details of the project and this affects the purchase decisions of the purchasers. If your project walkthrough is explanatory and realistic then it can attract more buyers than the other means.

With our <a href="https://www.3dvfxarch.com/3d-walkthrough-services">3D walkthrough video</a>, you’ll deliver the project flow to the project development group with none difficulty. The  <a href="https://www.3dvfxarch.com/3d-walkthrough-services">3D walkthrough Charges</a> is a wonderful method show your imagination during a live 3D animated form. it’s also referred to as 3D walkthrough animation services and 3D flythrough rendering and is that the most ordinarily used method speed up your imagination.
Before Vue 3 is Released
Tags: vue, javascript
Published: 2020-04-05 13:04:47


<h1 class="code-line" data-line-start=0 data-line-end=1 ><a id="Before_Vue_3_is_Released_0"></a>Before Vue 3 is Released</h1>
<p class="has-line-data" data-line-start="2" data-line-end="3">Vuejs is a lightweight JavaScript framework for building Single Page Applications and beautiful User interfaces. 💙</p>
<p class="has-line-data" data-line-start="4" data-line-end="5">Personally I have been using this framework for about two years now and it's really great</p>
<p class="has-line-data" data-line-start="6" data-line-end="7">While We are all eager and waiting anxiously for the release of  Vue 3, it’s good to dig into the framework to understand some of its advanced concepts I will be leaving a list of awesome articles and concepts that will be helpful</p>
<ul>
<li class="has-line-data" data-line-start="8" data-line-end="9">Reactivity in Vuejs - models makes state management simple and intuitive lt will be great to understand how it works. <a href="https://vuejs.org/v2/guide/reactivity.html">Read</a></li>
<li class="has-line-data" data-line-start="9" data-line-end="10">Custom directives - directives are vue commands prefixed with “v-” it helps you control the DOM.  <a href="https://css-tricks.com/power-custom-directives-vue/">Read</a>  this awesome article.</li>
<li class="has-line-data" data-line-start="10" data-line-end="11">Vue Pluggins - creating Vuejs pluggins is a great way to add global functions to your Vue app… <a href="https://alligator.io/vuejs/creating-custom-plugins/">Read</a></li>
<li class="has-line-data" data-line-start="11" data-line-end="12">Security - What should you avoid to prevent vulnerability of your vuejs app what are the most fundamental security rule when using Vue ?  <a href="https://vuejs.org/v2/guide/security.html">Find out more</a></li>
<li class="has-line-data" data-line-start="12" data-line-end="13">Virtual DOM and Render Process - Almost all recent front end JavaScript frameworks use the Virtual DOM… Check out how Vue uses the Virtual DOM <a href="https://medium.com/@koheimikami/understanding-rendering-process-with-virtual-dom-in-vue-js-a6e602811782">here</a></li>
<li class="has-line-data" data-line-start="13" data-line-end="15">Higher Order Components -  a HOC is a function which takes a component as an argument and returns that component with extra powers or functionalities… it’s is a great pattern that helps reduce code repitition… <a href="https://medium.com/bethink-pl/do-we-need-higher-order-components-in-vue-js-87c0aa608f48">check it out</a></li>
</ul>
<p class="has-line-data" data-line-start="15" data-line-end="16">📚 Please if You have more recourses and more advanced concept share in the comment section… Let’s learn Together ❤️</p>
My favorite Front-end hack! What's yours?
Tags: css, javascript, webdev, frontend
Published: 2020-04-05 12:59:44

```css
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }
```

**CREDITS**: [https://dev.to/gajus/my-favorite-css-hack-32g3](My favorite CSS hack) @gajus

A day ago @luqih posted his hack:
[https://dev.to/luqih/my-favorite-front-end-debugging-hack-4p5d](My favorite front-end debugging hack)

```js
setTimeout(() => { debugger; }, 3000);
```

I felt inspired to share mine #1 hack. This will help you easily determine the size and spacing of all elements on your website.

Here is JS console version if you don't have access to CSS files:

```js
// create a bookmark and use this code as the URL, you can now toggle the css on/off
// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
javascript: (function() {
	var domStyle = document.createElement("style");
	domStyle.append(
			'* { color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }\
            * * { background-color: rgba(0,255,0,.2) !important; }\
            * * * { background-color: rgba(0,0,255,.2) !important; }\
            * * * * { background-color: rgba(255,0,255,.2) !important; }\
            * * * * * { background-color: rgba(0,255,255,.2) !important; }\
            * * * * * * { background-color: rgba(255,255,0,.2) !important; }\
            * * * * * * * { background-color: rgba(255,0,0,.2) !important; }\
            * * * * * * * * { background-color: rgba(0,255,0,.2) !important; }\
            * * * * * * * * * { background-color: rgba(0,0,255,.2) !important; }'
	);
	document.body.appendChild(domStyle);
})();
```

![hack](https://i.imgur.com/d93Zh8J.png)

**Source:** [css-layout-hack.js](https://gist.github.com/growthboot/5c189cf854c6609d3113355c75527c1c)


 Happy coding ;)!