teleren/devto huggingface dataset:
page rides up when the content updates
Tags: scrolltop, jquery
Published: 2019-11-25 17:34:50

Hi, i have a page scroll issue. When ever i change the image to text, the page rides up. When the button clicked, i set  window.scrollTop -= image.scrollTop, but that didnt work... could someone give me a hint, please? 

Demo
https://jsbin.com/xogupiweyo/7/edit?html,css,js,console,output
Happy Christmas status for WhatsApp | Merry Christmas status

Tags: happychristmasstatus, merrychristmasstatus
Published: 2019-11-25 17:33:46

**[Happy Christmas Status for WhatsApp](https://skyblessings.com/happy-christmas-status-for-whatsapp/)** | Merry Christmas status: If you looking for happy Christmas status for WhatsApp, merry Christmas status for WhatsApp, Christmas WhatsApp status, merry Christmas status, merry Christmas msg for WhatsApp, happy Christmas status. Then, I might say yours in the right place. Here is the list of merry Christmas quotes, which you will like the most. Without wasting any time let’s get into it.

Merry Christmas! It’s the most wonderful time of the year, don’t you think? With so many heartfelt traditions, today’s sweetest moments look a little different for all of us, but they are really sweet – dreaming of ice, drinking, opening gifts under the tree, volunteering at local soup kitchens. To perform. No matter the tradition, one thing never changes: The love of the family surrounds us and engages us in every beautiful moment. Love these memories
##Happy Christmas status for WhatsApp | Merry Christmas status
![Happy Christmas status for WhatsApp](https://sayyestoarticles.com/wp-content/uploads/2019/11/The-gifts-of-time-and-love-are-really-the-essence-of-my-Christmas.%E2%80%9D-%E2%80%93-Peg-breakin.jpg)
![Happy Christmas status for WhatsApp](https://sayyestoarticles.com/wp-content/uploads/2019/11/The-gifts-of-time-and-love-are-really-the-essence-of-my-Christmas.%E2%80%9D-%E2%80%93-Peg-breakin-1.jpg)
![Happy Christmas status for WhatsApp](https://sayyestoarticles.com/wp-content/uploads/2019/11/The-gifts-of-time-and-love-are-really-the-essence-of-my-Christmas.%E2%80%9D-%E2%80%93-Peg-breakin-2.jpg)
![Happy Christmas status for WhatsApp](https://sayyestoarticles.com/wp-content/uploads/2019/11/The-gifts-of-time-and-love-are-really-the-essence-of-my-Christmas.%E2%80%9D-%E2%80%93-Peg-breakin-3.jpg)
![Happy Christmas status for WhatsApp](https://sayyestoarticles.com/wp-content/uploads/2019/11/The-gifts-of-time-and-love-are-really-the-essence-of-my-Christmas.%E2%80%9D-%E2%80%93-Peg-breakin-4.jpg)
##Conclusion:
So, there was all about **happy Christmas status for WhatsApp**, merry Christmas status for WhatsApp, Christmas WhatsApp status, merry Christmas status, merry Christmas msg for WhatsApp, happy Christmas status. Here was the list of merry Christmas quotes. If you liked it then please don’t forget to share it with your fellows. If you having any question then feel free to comment below.
[free sheet music](https://kongashare.com)
if else Statements In JavaScript vs Ruby And Deep Equals In JavaScript
Tags: javascript, ruby, ifelse
Published: 2019-11-25 17:11:15

# Comparing if else In JavaScript and Ruby

## Ruby Syntax

```rb
if [conditional statement]
  [some code]
elsif [conditional statement]
  [some code]
else
  [some code]
end
```

## JavaScript Syntax

```js
if([conditional statement]){
  [some code]
}else if([conditional statement]){
  [some code]
}else{
  [some code]
}
```

## Differences

In JavaScript our conditional statement has to be within parenthesis where in Ruby you don't need them. Ruby also cuts down on a few characters in the 'else if' statement by calling it 'elsif' as one word. Lastly the code execution blocks in JavaScript are defined by curly braces where as in Ruby they are defined by the next statement or the 'end' keyword if it is the last statement.

## JavaScript Shorthand Trick

Take our JavaScript syntax example from above:
```js
if([conditional statement]){
  [some code]
}else if([conditional statement]){
  [some code]
}else{
  [some code]
}
```

In this case, assuming [some code] is only one line of code, we can use a shorthand version of 'if else' in JavaScript. If the code in your block is only one line, the curly braces can be omitted! Like this:

```js
if([conditional statement])
  [some code]
else if([conditional statement])
  [some code]
else
  [some code]
```
JavaScript will automatically detect and determine that there is only one line of code in each block and execute the code perfectly fine. However, if you need to use multiple lines of code in the block you will need the curly braces to avoid an error.

## Why You Should Be Weary About Using The JavaScript Shorthand

Firstly, the curly braces, at least in my opinion, increase the readability of the code. Secondly, if you have to add more lines of code to your blocks, you will also have to add the curly braces. If you're adding more lines to a statement with a ton of 'else if's, that is quickly going to turn into a painstaking nightmare. This can be very cumbersome for yourself or other developers that have to work with your code. Lastly, it's 2019 and if your IDE doesn't add the closing curly brace for you, you should probably find a new one.

## JavaScript Deep Equals

When comparing in JavaScript as a developer you must be careful about which comparator operator you are using. Most of the time you will be using the triple deep equals '===' comparator. The difference between the triple equals and the double equals is as follows. A double equals is loose, which means that JavaScript will try to convert the objects being compared to the same type. So for instance if we had 
```js
"11" == 11;
//=> true
```
it would evaluate to true. When using the triple deep equals, comparing the same things would resolve to false.
```js
"11" === 11;
//=> false
```
And when we have
```js
11 === 11;
//=> true
```
it evaluates to true! So in conclusion you will generally always be using the deep equals comparator unless for some reason you don't want the types of your variables compared as well as the value.
A Very Nice CSS Parallax Video
Tags: css
Published: 2019-11-25 16:52:30

# This is not my video
I just thought it was really helpful so I thought I would share it here.

The props go to [Red Stapler](https://redstapler.co/css-parallax-scrolling-effect/)


{% youtube ln5BWnYMSQA %}

## The code involved

This CSS wrapper is dead simple and the video explains it well so I won't go into too much detail here - but if you just want to see the code involved, here it is:

### HTML

```html
    <body>
            <div class="navbar"><span>CSS Parallax Scrolling Tutorial</span></div>  
            <div class="parallax-wrapper">
                <div class="content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                       ....
                       .... 
                       Donec in justo eu ligula semper consequat sed a risus.</p>
                </div>
            </div>
            <div class="regular-wrapper">
                <div class="content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                       ....
                       .... 
                       Donec in justo eu ligula semper consequat sed a risus.</p>
                </div>
            </div>
    </body>
```

### CSS

```css
    html {
        overflow: hidden;
    }
    body {
        margin: 0;
        font-size: 26px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: #ffffff;
        height: 100vh;
        perspective: 1px;
        transform-style: preserve-3d;
        overflow-x:hidden;
        overflow-y:auto;
    }
    .parallax-wrapper {
        width: 100vw;
        height:100vh;
        padding-top:20vh;
        box-sizing: border-box;
        transform-style: preserve-3d;
    }
    .parallax-wrapper::before {
        content:"";
        width: 100vw;
        height: 100vh;
        top:0;
        left:0;
        background-image: url("/trianglify.png");
        position: absolute;
        z-index: -1;
        transform:translateZ(-1px) scale(2);
    }
    .regular-wrapper {
        width: 100vw;
        height:100vh;
        padding-top:20vh;
        background-image: url("/trianglify2.png");
        z-index: 2;
        position: relative;
    }
    .content {
        margin: 0 auto;
        padding: 50px;
        width: 50%;
        background: #aaa;
    }
```

What I like about this method is that it's pure CSS and it's easy to replicate. I'm currently building a Vue component that will use this method nicely.
Custom error types in Node.js
Tags: javascript, node
Published: 2019-11-25 16:33:59

Custom error types in node can provide a clearer picture of a failure. Relying on generic errors often leaves us guessing what had happened down the chain. Custom errors can help us identify certain, well known sets of failures and even subclass them for a more generalized handler functions.

In this series of posts we'll go from constructing a simplest possible custom error(this post) to defining a few, well known HTTP errors and using them inside an [Express.js HTTP server framework](https://expressjs.com/) to craft automatic error responses.

Simplest way to create a custom error type is to just extend an Error's prototype and initialize the original Error through a constructor:
```javascript
class MyError extends Error {
  constructor(message) {
    super(message)
  }
}
```

That's it!

The message we pass from the constructor to the "super" call is actually the same parameter you'd pass with the `new Error('Something failed!')`. Message is just forwarded to the same constructor to set up an error with a message and a stack trace.

There are 2 small things to fix though. If you log out the error created with *MyError* class:

```javascript
const error = new MyError('problem')
console.log(error)
```

You'll notice that error type is logged as "Error":

```
Error: problem
    at <anonymous>:1:15
```

To fix this we just need to augment our error object with a "name" property inside constructor:

```javascript
  constructor(message) {
    super(message)
    this.name = 'MyError'
  }
```

Now if we try previous example we'll see something like:

```
MyError: problem
    at <anonymous>:1:15
```

1/2 fixed. The only thing remaining is that our stack trace might include the mention of our custom error class constructor. We don't want to see an error creation in our stack frames, only the real code that caused the issue. Fix is simple, single additional line in the constructor will take care of that:

```javascript
  Error.captureStackTrace(this, MyError)
```

This will omit all of the stack frames invoked by code inside MyError itself.

The final code is:

```javascript
class MyError extends Error {
  constructor(message) {
    super(message)
    this.name = 'MyError'
    Error.captureStackTrace(this, MyError)
  }
}
```

In next post we'll go from custom error type to a custom error subtype that will enable us to treat all of our custom error types in a generic way.
Project Corner: Building the Conference Sponsorship Feature with Gatsby, Sanity.io, and GraphQL
Tags: javascript, webdev, react, showdev
Published: 2019-11-25 16:26:49

In a new series for the [Bytesized Code channel](https://www.youtube.com/channel/UC046lFvJZhiwSRWsoH8SFjg) that I'm calling **Project Corner**, check out my unedited process as I build new features and projects using a variety of programming tools and frameworks.

{% youtube eQeIfTim4UQ %}

In today's edition of Project Corner, I'm building the Sponsorships section of the Bytesized website. I recently announced Byteconf GraphQL 2020 (check it out here: https://www.bytesized.xyz/graphql-2020) and in this video, I add support for showing sponsors on an event page, using GraphQL, Sanity.io, React, and Gatsby.js. 

This is a new format, and if you enjoyed it, I'd love to hear about it! Make sure to like and subscribe... the usual stuff. :)

📣 **Byteconf GraphQL 2020 is a free GraphQL conference, streamed online on January 31st, 2020!** RSVP to get your free ticket: https://www.bytesized.xyz/graphql-2020

{% link https://dev.to/bytesizedcode/announcing-byteconf-graphql-a-free-graphql-conference-streamed-online-2a0b %}

💌 **If you enjoyed this video, check out Bytesized Weekly!** It's a free weekly newsletter where I share what's new and cool in the web development world, as well as any new videos and announcements from Bytesized Code. No spam, you can unsubscribe at any time, and I know you'll get a lot of value from it. Join here: https://www.bytesized.xyz/newsletter

🐦 [Follow Bytesized Code on Twitter](https://twitter.com/bytesizedcode)
🐦 [Follow your host Kristian on Twitter](https://twitter.com/signalnerve)

---

💛 [Bytesized Code](https://www.bytesized.xyz) is building a developer community for everyone! We publish weekly programming tutorials and guides, and also produce the unique online conference Byteconf, where developers around the world learn in a live-streamed, 100% free dev conference.
I want to become a UI God
Published: 2019-11-25 16:23:06

Hello, I brushed off HTML 5 and almost all of css in February. But I rather took a digital marketing training afterwards. My ambition is to combine my stronger digital marketing skill with web development to produce  the most conversion effective websites or apps the world has ever known. But I am barely getting started with Java script. Which part would be right?  Can I find a mentor here to help me work hard and achieve my dream?
Understand JWT in 3 minutes
Tags: webdev, security, javascript
Published: 2019-11-25 16:06:54

I'm going to avoid jargon here as much as I can. So let me explain things in simple words.

## What is JWT?

It's a token, or let's say it's a string that if you, the user of the app, own it, then you can access or update certain things on the server.

For example, if you want to update your profile picture, you should have the token that allows your account to update that profile picture.

## Where does the user get this token from?

The server generates it for the user.

## When does the server generate it?

When the user proves to the server that he or she can get one. This typically happens when the user logs in to the app.

So when the user fills in the username/password and presses log in, the server checks that they are correct, and if so, the server generates the token and sends it in the response of that log-in request.

## What should the user do with the token?

The user should embed it with every request sent to the server. (Or at least with the requests that require authorization.)

## How to embed it?

Typically, you would include it in the header of the request, specifically the `Authorization` field.

## If I have to include this token with every request, where should I store it?

You can use localStorage to store it, but that would open your app to XSS attacks. A better choice is cookies.

# If I don't store it, should the user log in every time the page is reloaded?

Yep!

## How can the server know that the included token can access a specific user's resources?

When the server generates the token, it includes the user's email, username, etc (anything it can identify the user with). So, for example, if the token contains your email address, then you can access only stuff related to the user with your email address.

## So can the token hold data?

Yes it can, inside the payload section.

## If someone stole my token, can they access my stuff?

Yes they can!

## How can the server be sure that the user's token wasn't modified before it's sent?

When the server generates the token, it digitally signs it with a secret key.

I can dive further into what a digital signature is and how it's generated, but let's keep things simple here and just keep in mind that if you have a token and you modified it, the server won't give you access to anything because the token has been changed.

## If I tried to use this token after 10 years, would it still work?

Yes, it will be valid forever unless the server specifies an expiration time when generating it.

## That's it!

If you have any questions, ask them in the comments.

For more tips and tutorials like this, follow me on Twitter [@tahazsh](https://twitter.com/tahazsh) or subscribe to my blog's [RSS feed](https://api.tahazsh.com/feed).
<Hello CodeCast />
Tags: startup, product, software, learning
Published: 2019-11-25 16:05:07

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lht6cqpwefj42xevsp7z.png)

Hello CodeCast Beta 👋 We’ve been testing it with a limited set of users for the past six months and we are very excited to open it up to everyone now.

## Why CodeCast?

As a coding instructor, I love to live-code lessons to my students, to slowly reveal coding concepts line by line. Coding to me is a process and a way of thinking. When students get that, they are on their journey to becoming professional developers.


I have always strived to deliver an excellent experience to students so I kept looking for anything that I felt was hindering that. Students sometimes have a hard time keeping up 100% if they are coding along or even if they are not. This happens usually because as a developer you work on multiple files at a given time and while switching from a file to another. Some students may get lost and miss some code in a particular file and this can leave them stuck.


I was teaching at a Vancouver Bootcamp I founded called CodeCore and a graduate built the first crude prototype of what is now CodeCast. Since it was introduced in the classroom, CodeCast has become an indispensable tool at CodeCore and part of what made it the top quality Bootcamp in Vancouver with amazing graduates that are an integral part of the tech community in the city.


CodeCast allows you to point to a folder on your computer and share it in real-time with students. It captures changes as files are saved and it broadcasts them to all students who are connected on a web page where the entire project tree can be viewed. It integrates with normal developer workflow so it’s super easy to set up. You set it and forget it. Desktop screen or webcam can be recorded alongside code changes for later replay as well.


After we started to see how powerful CodeCast is, we realized it could be a lot more than a classroom tool. Our goal is to build an amazing developer community around CodeCasts. Coders around the world sharing their ideas, processes, techniques by streaming live and recording their sessions. We are excited for the journey to come to take code learning to the next level.


## We are all teachers, we are all learners

As developers, we all have something to teach and we are all on a never-ending learning journey. This is what makes coding a great life-long profession. We made it super easy to create and share content with CodeCast. Download the app and give it a try and we would love to have your feedback on it.
My Journey To Become A Microsoft Certified: Azure Developer Associate 
Tags: azure, developer, microsoft, az203
Published: 2019-11-25 15:58:40

---
title: My Journey To Become A Microsoft Certified: Azure Developer Associate 
published: true
description: 
tags: Azure, Developer, Microsoft, AZ-203
---
Ok, here is the thing, to achieve my goal and have fun doing it, I've decided to start blogging and sharing my journey, imitating all my favorites YouTubers and bloggers, I hope it turns out to be like in the movies: easy and awesome.

A little bit of context of the reason why I've decided to do this: all my life I had problems trying to keep what I've read in my memory, in order to overcome that problem I started to write summaries of everything I study, It's difficult for me to memorize something without practicing or writing it.

I'll be sharing my notes starting this week with a series of articles on dev.to and medium.com going through all the free documentation I can find, wish me luck.

At last, apologies for the rusty English and keep in mind this will be my first time writing posts, constructive criticism will be well-received, thanks in advance for reading.
Urgent Requirement: Senior Data Lake Engineer/Developer-Tech Lead
Published: 2019-11-25 15:49:49

Title: Senior Data Lake Engineer/Developer-Tech Lead
Duration: 6 months CTH
Location: New York

Job Description:

Hands-on Tech lead responsible for designing a large Datalake, managing data flows that integrate information from various sources into a common pool implementing data pipelines based on the ETL model. Strong Tech lead in Development, problem-solving skills, and algorithms.

Must Haves:

Strong experience in Big Data Technologies such as Hadoop

Data Management Tools for ingesting Data, integrating data streams from SAP, MQ etc is required.

Experience with Apache Spark, Hive, Mapreduce is required

AWS Cloud experience is a big plus

Development using either Python or Java is needed
Monitor Projects with a nice animation using gource
Tags: gource, repo, git, projects
Published: 2019-11-25 15:44:04


Today one of the guys in our company show the development of one of our projects using gource.

so i thought it will be nice to share this with you guys

```gource is a Software that shows an animated tree with the root directory of projects at its centre.

Directories appear as branches with files as leaves.

Developers can be seen working on the tree at the times they contributed to the project.

Gource includes built-in log generation support for Git, Mercurial, Bazaar and SVN.

Gource can also parse logs produced by several third party tools for CVS repositories.```

you can download it from here

https://gource.io/

and here is a video that shows the whole idea

{% youtube NjUuAuBcoqs %}

hope you like it
The Building an Indie Business Podcast- Product Update: Forum Edition part 2
Tags: podcast, javascript, webdev
Published: 2019-11-25 15:27:15

In this episode I discuss the latest update in the progress of the forum, back-end ✅

[Revenue Research](https://revenueresearch.co/)
[Episode Page](https://baib-podcast.com)
https://overcast.fm/+RG5jxmukw
Top Performance Tips for React App 2019
Tags: react, performance, productivity, webpack
Published: 2019-11-25 15:26:23

**Picture this** : You have to increase the performance of your React App. To achieve a better performance what measures you should take care while developing and deploying the app?
React does a great job in terms of performance, but, if you have a complex application, you may start to see issues with it. You can still do something to improve its performance which are categorized as below:
##1.Development
##2.Deployment

###Tips for Development Process

####1.Avoiding & Measuring Render Time
First of all we must avoid re-rendering of our components without any requirement. Also we need to calculate the rendering time so that we can decrease it. A simple way is to use Use-Timing-API. Additionally you can check for react rendering in browser with below options.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wmztu0q64t28x8xfokhp.png)

####2. Use Pure Components
To avoid the Reconciliation process of React, We must use Pure-Components as , there is already a default implementation of, shouldComponentUpdate() with a shallow prop and state comparison. So, a pure component is a component that only re-renders if props/state is different from the previous props and state.

####3. Dynamically Load Long List
If you have a long list of items which you want to render it on your page, then breakdown it in smaller list and render it on scrolling or any other event listener. You can do it with react-window & react-virtualize.

####4. React Concurrent Mode
If Performance is the utmost priority in your react app, then you must go for react concurrent mode. One of the simplest way to achieve concurrency is with React suspense and Lazy loading of components.

For full post you can read it on : [Medium Post](https://medium.com/@vinodc45/top-performance-tips-for-react-app-c688fc4942dd)