teleren/devto huggingface dataset:
Difference between JavaScript, jQuery and anything else you can write in JavaScript
Tags: javascript, jquery
Published: 2019-06-10 12:19:56

---
title: Difference between JavaScript, jQuery and anything else you can write in JavaScript
published: true
description: this article will help anyone who is confused what is the difference between JavaScript and other libraries
tags: JavaScript, jQuery
---

In 2014 when I first started building UIs with HTML and CSS at some point I needed something dynamic and it obviously there was only JavaScript who can do the job! but because I needed to build some animation stuff in my UIs I learned jQuery instead of JavaScript Vanilla, and for a long time I thought that I'm using JavaScript and jQuery is JavaScript !

So that post will only help people who are confused like I was :)

JavaScript is a programming language for the web, which means If you want to build a UX in your web page, JavaScript is the first thing or the least you can use.

jQuery in the other hand is a JavaScript library, which means It's created on top of JavaScript and you should use only when you need it.

If you use some JavaScript frameworks you will probably not need jQuery because those frameworks will handle almost any interactions with your DOM elements.

When I used to work with PHP frameworks like Laravel I used jQuery a lot, any UX related thing I only use jQuery because it was fast and easy to use, and now I work with MeteorJS and I dont use jQuery anymore because for first MeteorJS handle the events and the rendered of your UIs and even If you can use jQuery to get value of your fields for example! you dont wanna use, plain JavaScript will do the job clean and fast.

##To Sum Up##

If you are new to the web development like I was it's better to learn how to use the language (JavaScript) first instead of the libraries (jQuery).


Alright this is my first post here or anywhere, I hope this is helpful for some people and thanks for reading.
dev.to seemed to like my app tripcoster.com. Yesterday it made its first € 🙌🙌🙌
Tags: showdev, javascript, webdev, vue
Published: 2019-06-10 12:17:54

---
title: dev.to seemed to like my app tripcoster.com. Yesterday it made its first € 🙌🙌🙌
published: true
description: my side project tripcoster.com just made it's first €
tags: showdev, javascript, webdev, vue
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9pu4yk9w6rhthimm45aa.png
---

Just sharing a (very) small win. Two weeks ago I [shared with you guys](https://dev.to/chipd/my-girlfriend-likes-to-travel-i-like-to-know-how-much-it-s-gonna-cost-vue-node-and-some-apis-later-i-give-you-tripcoster-com-1cja) an app I built in the last couple of months - [tripcoster.com](https://tripcoster.com?r=devto). It gives you the entire cost of a trip from anywhere, to anywhere, using live data for flights and accommodation. 

Well, just last night it got it's first little bit of referral revenue. Someone had clicked a link in my app and gone on to make a booking. 

The percentages mean that this sale only makes me €13, but to say I'm excited is an understatement. Really really eager to see where I can take this little app in the coming months. 

That's all, just wanted to share! :)
Var and Function Scope In Javascript
Tags: beginners, javascript, webdev
Published: 2019-06-10 12:08:27

---
title: Var and Function Scope In Javascript
published: true
description: The difference between the two with examples.
tags: #beginners #javascript #webdev
---
Time to talk scope.

Scope determines visible and accessible variables. *Block scope* is scope within a set of curly braces. Most programming languages have block scope. That being said, for you Javascript newbies out there, what is *function scope* and how does it work?

It's okay if you don't know. I didn't at first either. Let me explain.

As the function part of the name implies... anytime we create a `var` inside of a function, it becomes scoped to the function.

Example time! We just need to make it clearer with code:

```javascript
function dog () {
  var name = "Fido"
}

console.log(name) //name is not defined
```

You can't access `name` outside of the function. Now, let's try it again, with a block.

```javascript
var dog = true
if (dog) {
  var name = "Fido"
}

console.log(name) // returns Fido
```

Even through the `name` variable was declared inside of the block, we can access outside. 

How do the `let` and `const` keywords play into this? Well, rewinding to our last example, we'll refactor the code a little to see.

```javascript
const dog = true
if (dog) {
  const name = "Fido"
}

console.log(name) //name is not defined
```
Note: this would work the exact same way with the `let` keyword as well.

The variable can't be accessed, as it's scoped to the `if` statement's block, trapped inside of its curly bracket prison, with no hope of escape. Not like its older brother `var`, who is free in this instance. 

For most seasoned Javascript devs this is probably well known and really basic information.

I learned ES6 variable keywords and got the impression never to touch `var`. As time went on I stopped seeing it as some forbidden relic of the past. It's a tool, just like all the other keywords in the language.

I've been expanding my knowledge about Javascript, getting down to the nuts and bolts. Part of the journey has been playing with `var`, to cement the difference in my mind. I think it helps when looking at older code, or code made to be compatible for older browsers. 

For the newbies out there, I hope my explanation and examples help you avoid the head scratching `var` caused me.

Play around with the keyword yourself, get comfortable. Fear not! You'll be crossing its path eventually, better to be prepared as they say.

Check out [Hoisting] (https://dev.to/steelvoltage/hoisting-in-js-the-quick-and-dirty-162m) to get a better feel for how that works, I think its a natural progression from understanding `var` and function scope.
How do you balance side project coding with your job during the workweek?
Tags: discuss
Published: 2019-06-10 11:58:32

---
title: How do you balance side project coding with your job during the workweek?
published: true
description: Do you do different kinds of coding during the week, do smaller bits of coding, or something else? Share your tricks to keeping it up and running!
tags: #discuss
---
Uninformed: nostalgically simple forms for React & Preact
Tags: react, javascript, rails
Published: 2019-06-10 11:57:08

---
title: Uninformed: nostalgically simple forms for React & Preact
published: true
description: Uninformed: simple forms for React & Preact
tags: react, javascript, rails
cover_image: https://images.unsplash.com/photo-1554224155-1696413565d3?ixlib=rb-1.2.1&auto=format&fit=crop&w=2700&q=80
---

Forms in Rails do two useful things automatically that I miss when I'm working in other frameworks:

1. They submit data without reloading the page.
2. They disable themselves on submit, so that you can't accidentally submit data twice by double-clicking.

These are great defaults! In a web app in 2019, I should have to write code to _disable_ this behavior -- but I've found myself re-implementing it from scratch in several React projects.

I wrote [Uninformed](https://github.com/chrisfrank/uninformed) to bring these defaults to the React ecosystem. Here's how to use Uninformed in an app:

```jsx
import { Form } from 'uninformed';
import React from 'react';

const SignupForm = props => (
  <Form action="/api/signups" onSuccess={props.handleSuccess}>
    <input type="email" name="email" required />
    <input type="submit" value="Sign Up" />
  </Form>
)
```

That’s it! No `onChange` handlers, no `Input` components, just a lightly-enhanced HTML form that disables itself on submit, sends data to a server via an `XMLHttpRequest`, and re-enables itself after the server responds. When you need more power -- for setting request headers, running input validation, etc -- Uninformed lets you customize its behavior by passing functions as props. See the [README](https://github.com/chrisfrank/uninformed) for more info.

Uninformed is brand new, and I'd love to hear your ideas for how to improve it! Please feel free to file [issues](https://github.com/chrisfrank/uninformed/issues), [pull requests](https://github.com/chrisfrank/uninformed/pulls), or ask questions in the comments below.

(Cover image by [Kelly Sikkema](https://unsplash.com/photos/tQQ4BwN_UFs) via Unsplash)
Challenge: do nothing
Published: 2019-06-10 11:56:41

*Cover photo by Guillaume de Germain via Unsplash.*

## Do you ever feel like you're too busy, but at the same time, you're never doing *enough*?

If you feel absolutely none of that, you won't get much out of this. Take the next few minutes off or something ¯\\\_(ツ)_/¯

But for me and many of my colleagues, we're always pushed to do more. Sometimes it's a boss, sometimes it's our own inner monologue making us nervous when we aren't doing something productive.

So your challenge today is to sit still and *do nothing* for one minute, and examine your thoughts before, during, and after the process.

[Here is a one minute timer.](https://timer.onlineclock.net/timers/1minute/)

It's just one minute. Should be easy, right? You can spare one tiny minute.

For this challenge, you are allowed to keep your eyes open or closed, fidget, etc, but you aren't allowed to do or think-hard-about anything "productive" during this one minute. Also no netflix or youtube or whatever other distractions, you tricksy engineers. Try to not watch the timer. (This isn't a meditation, so don't worry about your thoughts or breath or anything; this is an exercise about focus of action rather than focus of thought.)

### Ready... set... go!

![An hourglass](https://thepracticaldev.s3.amazonaws.com/i/jzpofuvsha1asxga2gcy.jpg)
*Photo by Aron Visuals via Unsplash.*

#### Okay, everybody back?

If you're anything like me, that minute of doing nothing was an eternity. I had become so used to pushing myself to 100% capacity, every moment of every day, that I had no time for anything but the grind. Taking time off for anything that wasn't "productive" was seen as a waste of time and money. Self-care wasn't even on the list of priorities.

But ask yourself, if this resonates with you:

* Can I keep up this pace for the next year? For the next five years? For the rest of my working years? Until I die?
* What is my goal? What am I working towards? Is working at a breakneck pace actually getting me closer to what I truly want?
* Am I actually *really doing* something, or am I just keeping busy?
* Will you ever truly reach the "someday" you're hoping for, doing what you're currently doing?

You don't need to be obsessed with busyness and the #hustle. You can take one minute to reflect. It's just one minute, right?
What is Digital Transformation?
Tags: writing, beginners
Published: 2019-06-10 11:43:14



## Digital transformation explained
  * [What is Digital Transformation?](#what-is)


___

## What is Digital Transformation? <a name="what-is"></a>
* Digital transformation is the integration of digital technology into all areas of a business, fundamentally changing how you operate and deliver value to customers.
* It's also a cultural change that requires organizations to continually challenge the status quo, experiment, and get comfortable with failure.


![Top 8 Statistics On Digital Transformation](https://thepracticaldev.s3.amazonaws.com/i/ne6gjkkncia4f3ac2dm8.jpg)
Explain your front-end framework to a React developer
Tags: help, javascript, webdev
Published: 2019-06-10 11:38:32

---
title: Explain your front-end framework to a React developer
published: true
description: Try to explain why would I want to try another frontend framework
tags: [help, js, webdev]
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ru3xigqzva7ibb5cn4kk.jpg
---

Hi, I'm React developer. I'm not a React fanboy. I don't think we need to built-in React inside browsers. I don't think you need to use React for landing pages (with barely any interaction). First time I saw JSX I thought "oh no XML again". I work with React day to day (recently; before it was Ruby). **I hope I'm more or less open-minded.**

Given this, **try to explain why would I want to try another frontend framework**. What are the sweet spots? What do you enjoy about your framework?

PS. I have tried different frameworks like Angular and Ember a long time ago, so my understanding is most likely pretty outdated.

> Photo by Kylie Haulk on Unsplash
What parts of CSS confuse you?
Tags: discuss, css, beginners
Published: 2019-06-10 10:56:28

This discussion serves two purposes for me: 1) I'm truly curious to see what sorts of questions on CSS exist and 2) I'm working on creating more content around CSS, so I'm looking for good tutorial and blog ideas.

We find ourselves in a Renaissance of the CSS specification, but a lot of the basic fundamentals of CSS get left behind. This can be especially true for beginners. Those of us who have been writing CSS for a while focus on the "NEW" that's come out and don't often talk about the basics enough.

What are you biggest questions on CSS? Is it something with new CSS like Grid, Flex or Custom Properties? Is it a fundamental question about the CSS Box Model? Happy to discuss any of them in the comments and then also discuss them at length in future blog posts!
Practical Rust Web Development - Cors
Tags: actixweb, rust, cors
Published: 2019-06-10 10:52:20

In order to make our lives easier and move on to the series, let's make a statement, our API will be public, anyone can connect to us through a token, so, this means we should modify the way we handle Cors, allowing all accesses. 

We need to modify our main file to handle all requests in our cors configuration.

`src/main.rs`:

```rust
            cors::Cors::new()
                .send_wildcard()
                .allowed_methods(vec!["GET", "POST", "PUT", "DELETE"])
                .allowed_headers(vec![header::AUTHORIZATION,
                                      header::CONTENT_TYPE,
                                      header::ACCEPT,
                                      csrf_token_header.clone()])
                .expose_headers(vec![csrf_token_header.clone()])
                .max_age(3600)
```

Reference in [source code](https://github.com/practical-rust-web-development/mystore/blob/v3.2/src/main.rs#L33)
Help, I’ve imported environment from environment.prod!
Tags: tslint, angular, environment, automation
Published: 2019-06-18 04:26:02

---
title: Help, I’ve imported environment from environment.prod!
published: true
tags: tslint,angular,environment,automation
canonical_url: 
---

i.e. the Angular environment file that gets replaced at build time.

![](https://cdn-images-1.medium.com/max/1024/1*YN5ZOFuixpYzH4wW6jgQGA.png)

How to automate the ‘never-again-import-environment-from-environment.prod’ vs staying vigilant and angry when people import it by mistake? Because VS Code and modern Typescript make it really simple to do this mistake. Just Ctrl + . and Enter on top of the squiggly underlinedenvironment and we get the environment. Usually, we get

import{environment} from ‘../environments/environment’;

But sometimes we get

import{environment} from ‘../environments/environment.prod’;

And what’s the **difference** you might ask? Well in the **second case** the module/component that we want to use the **environment** to make a logical decision, we always take the prod choice — no matter if in prod, staging or dev/QA. Even worse, when it’s from ‘../environments/environment.qa’ then the issue only manifests itself in production! Not cool!

All right so the answer is — be **careful** when importing — yes? Well, that might work in 99% of the cases. And it will bring sorrow and anger in that 1% when someone forgets and omits it.

So - how do we automate that?

The answer is [**tslint**](https://palantir.github.io/tslint/) **.** And if you are not yet using it — this might be the time to start. It does static analysis on your code and can help with automating various checks. Including [black-listing imports](https://palantir.github.io/tslint/rules/import-blacklist/).

{% gist https://gist.github.com/gparlakov/635d8df79b100a4109baee818045c416 %}

Here we have a CoreModule that imports the wrong environment. And a tslint.json that specifies the rule that all imports from prod, staging, etc. are blacklisted — not allowed. Be careful that you use a current version of tslint as older versions do not support regex.

Then we can do ng lint and we’ll get an error:

```
ERROR: c:/Users/myUser/test/src/app/core/core.module.ts:1:30 - This import is blacklisted by /\/.\*environment\.(prod|staging|demo|local)/
```

If we do this as part of our CI, then no more code with this import will be allowed in production. And the best part is — it’s automated and we won’t rely on everyone being **careful** when importing.

For older tslint versions, where upgrading is not an option one could potentially list many of the permutations of the import, based on how deep the import is :

```
"../environment/environment.prod",
"../../environment/environment.prod",
"../../../environment/environment.prod",
"../../../../environment/environment.prod",
and so on 
```

* * *
Lesson 1 : Introduction 
Published: 2019-06-10 10:20:30

_A programming language_ is a formal computer language designed to communicate instruction to a machine , particularly a computer . Programming languages can be used to create programs or algorithms to control the behavior of the machine .

__Java :__
Java is a programming language that is class-based and object-oriented . Java was originally developed by _"James Goseling"_ in 1995 . 
Java is used to develop mobiles app , web apps , desktop apps , games and much more .

__Why Java ?__
_Java is popular :_
- In the top 3 (if not the most popular)
- 3 billion devices run 
- Platform independency (write once , run anywhere )
- wide usability
- very well paying jobs
JavaScript Array Methods reference
Tags: beginners, javascript
Published: 2019-06-10 09:38:25

---
title: JavaScript Array Methods reference
published: true
description: A reference to some useful array methods in JavaScript
tags: Beginner, JavaScript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/m27ypl0r9gkyl4l6hefd.jpg
---

There are a ton of array methods that JavaScript provides. Here is a reference to some useful ones in different categories

## To add/remove elements:

- `push(...items)` – adds items to the end of the array
- `pop()` – extracts an item from the end of the array
- `shift()` – extracts an item from the beginning of the array
- `unshift(...items)` – adds items to the beginning
- `slice(start, end)` – creates a new array, copies elements from position start till end (not inclusive) into it.
- `concat(...items)` – returns a new array: copies all members of the current one and adds items to it. If any of items is an array, then its elements are taken.

## To transform an array

- `map(func)` - creates a new array from results of calling `func` for every element.
- `sort(func)` - sorts the array in-place, then returns it.
- `reverse()` - reverses the array in-place, then returns it.
- `split/join` - convert a string to array and back.
- `reduce(func, initial)` - calculate a single value over the array by calling `func` for each element and passing an intermediate result between the calls.

## To search in an array

- `indexOf/lastIndexOf(item, pos)` - look for `item` starting from position `pos`, return the index or `-1` if not found.
- `includes(value)` - returns `true` if the array has `value`, otherwise `false`.
- `find/filter(func)` - filter elements through the function, return first/all values that make it return `true`.
- `findIndex` - is like `find` but returns the index instead of a value.

## Iterating in an array

- `forEach(func)` -- calls `func` for every element.

For a more detailed reference about arrays and array methods check out [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenaace/Global_Objects/Array)
AMA, Sam 10-yr Googler in Web DevRel
Tags: ama, webdev
Published: 2019-06-10 09:31:35

---
title: AMA, Sam 10-yr Googler in Web DevRel
published: true
description: Sam has worked for Google for ten whole years. Ask him things!
tags: ama, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/w5mq9n80izjn8c19zusc.jpg
series: Blog-A-Day in June
---

As of June 2019, I've worked for Google in Sydney 🇦🇺 for ten years, starting after I graduated university. So I'll celebrate by answering your Qs! 🔟🎉

I'm part of the Web Developer Relations team. We provide guidance on performance, tooling, new web features, ... you name it! We also do some project work like conference websites and internal tools. I aim to support the "long tail" 🐍: my videos, [talks](https://www.youtube.com/playlist?list=PL5vCN4IjFTd40C6QRiHfs6h4MOdjbRo3B), [blog](https://dev.to/samthor) [posts](https://medium.com/@samthor), etc, are themed about what the _web platform_ can do for you. 🤔💬

<hr />

**What should you ask**? Well, ask your developer questions about the web, especially its future! Or about some of the projects I've worked on:

* [**Santa Tracker**](https://santatracker.google.com): I'm the engineering lead, and we build fun things like Santa to show what the web can do (and because Santa! 🎅🎄🎁)
* [**Emojityper**](https://emojityper.com): Because when your job is to talk about PWAs, it's nice to have one to demonstrate! 😂
* **Events**: I work on events like Chrome Dev Summit, and I/O 🎫

And some past highlights, before Web DevRel—as a Software Engineer:

* **Maps**: I worked on Google Maps for iOS, joining the team six months before it launched. Yes, that app! 🍎📱

* **Keep**: Part of a team who built [Google Keep](https://keep.google.com). I remember building the first prototype of notes having different font sizes based on how much text was in each 🧓

* **Wave**: Yes, that wave! 🌊 I built [the Wave protocol](https://youtu.be/v_UyVmITiYQ?t=4132). If you have an hour (or 30m on 2x!), the whole video is a great watch, even years later 😎

<hr />

Since `new Date` is a scary thing for a new JS dev (_and_ I'm on long leave, while sleep-deprived with a 👶), here's a timer showing when I'll be around to answer Qs: ⏳

{% codepen https://codepen.io/samthor/pen/QXLMKL %}

10 👋
MEAN or MERN Stack?
Tags: javascript, webdev, discuss, stack
Published: 2019-06-10 09:25:15

---
title: MEAN or MERN Stack?
published: true
description: MERN or MEAN or LAMP
tags: javascript, webdev, discuss, stack
---

Which Stack do you prefer?
* MEAN
* MERN
* LAMP
* WAMP
* JAM
* LWJP

M  -  MongoDB
E  -  Express.js
A  -  Angular/Angular.js
R  -  React.js
N  -  Node.js

L  -  Linux
W  -  Windows
A  -  Apache
M  -  MySQL
P  -  PHP

J  -  Javascript
A  -  API
M  -  Markup

L  -  Linux
J  -  Java
W  -  Windows
P  -  PostgreSQL

[Percentage Calculator](https://www.rapidtools.co/percentage-calculator.html)
Is it worth to switch from Medium to Dev.to?
Tags: blogging, medium, devto
Published: 2019-06-10 08:50:37

---
title: Is it worth to switch from Medium to Dev.to?
published: true
description: 
tags: blogging, medium, devto
---
I want to continue make posts about programming. More like tutorials. Medium was ok for that, but there is Dev.to. I want to ask you about advantages of this platform and how popular is it nowdays?