teleren/devto huggingface dataset:
JavaScript and JQuery: I have three problem about movement and collision detection.
Tags: html, javascript, jquery, help
Published: 2019-12-01 12:12:13

Hi Guys!
I have two problems about the movement and a problem about the collision detection(this is the code https://pastebin.com/k4QEnrtm) :

1- The button must be clicked two time to work, but I want that it works on a single click;
2- By "Down" button, the div teleports up before going down, and I don't know why;
3- The collision detection make always the text change from "true" to "false" and vice versa if the dives collide or not, and if the write is "true" the "Down" button must be disabled. The problem is that by clicks it works, but on mouse down it doesn't work.
Can you tell me how to solve these problems?
"git nah" and more handy Git aliases
Tags: git, productivity
Published: 2019-12-01 12:09:02

A while ago I posted an article on [undoing changes in Git](https://michaelzanggl.com/articles/undo-changes-in-git), but some of these arguments or flags just don't want to stick in my head or, I use them so often I don't want to write them out every time. Luckily Git provides us with the ability to create our own custom commands.

For example, if you want to just do `git c` instead of `git commit` you could register the following alias:

```bash
git config --global alias.c "commit"
```

---

With that being said, I want to introduce my top three git aliases:

## git nah

Did you ever write something out and then felt like "nah...". Now you can put your thoughts into action with this handy alias. Reset any local and staged changes as if nothing happened.

```bash
git config --global alias.nah "!git reset --hard && git clean -df"
```

> Notice the exclamation mark. It needs this so we can run custom commands. This allows us to combine two git commands.

## git amend

Sometimes you just miss committing something. Adding more changes to the latest commit was never easier. It doesn't even open vim for you to change the commit message, it just appends to the latest commit.

```bash
git config --global alias.amend "commit --amend --no-edit"
```

## git update

While working on a feature branch, more than often, by the time you want to merge back into the main branch (develop/master), that main branch already has a few new commits. Keeping your local branch up to date will help avoiding big merge conflicts. I use this one daily.

```bash
git config --global alias.update "pull --rebase origin develop"
```


## bonus

Adding "-n" when committing allows you to skip precommit hooks like linting. This is sometimes necessary when working with legacy code. The following alias at least makes you feel bad about it.

```bash
git config --global alias.commit-crime "commit -n"
```

Last but not least here is a handy alias to list all aliases. Let's name it "alias".

```bash
git config --global alias.alias "! git config --get-regexp ^alias\. | sed -e s/^alias\.// -e s/\ /\ =\ /"
```

---

If this article helped you, I have a lot more tips on simplifying writing software [here](https://michaelzanggl.gumroad.com/l/intent-driven-development).
TIL #002: iFrame fact and the Pragmatic Programmer Book
Tags: todayilearned, iframe, book
Published: 2019-12-01 11:50:52

---
title: TIL #002: iFrame fact and the Pragmatic Programmer Book
published: true
description: New book to read!
tags: til, iframe, book
---

Another day, another TIL post. Today I just found out that you cannot put an iFrame inside an iFrame and expect it to work. You cannot nest it. I found out about this from a half-finished website I visited earlier. Their homepage has an iframe with the homepage inside it. I noticed that the iFrame inside the iFrame was empty and when I searched for it, it really is not possible.

I've also started reading the Pragmatic Programmer earlier and I'm learning a lot. I'm just 30 pages in but it's already interesting.

That's it for today's TIL!
Redesigned my Resume to get a Dark Mode, cause why should apps have all the fun! [Critique Please]
Tags: career, resume, design, figma
Published: 2019-12-01 10:18:47

I think it's been a while since I had last designed my resume, the print version. It was around 2 years ago, and I was a completely different person back then. I've heard the saying, a resume is like a reflection of oneself, so if I'm bound to change, so should that nifty little document.

Hence, here's my latest resume, and like most apps on the interwebs, even it has caught the dark mode fever. I'm also finally moving away from the one-page resume to a three-page CV, with the cover letter. This may be a sign of growth? No idea, but it looks heavy!

Some things I focused on while making the resume, 1) make sure it can be parsed, 2) make sure it is easy to edit once you have a new field and 3) make sure looks GOOD! (and you can be the judge of that)

![Screenshot of Figma Design Board](https://thepracticaldev.s3.amazonaws.com/i/v0r1b53wy34xzjj4dzw4.png)

It was designed entirely from scratch in Figma, and I will be making the files open source so you can use the template to design your own resume, or even mix-match colors as well. Drop me your email address if interested and I'll share the file with you.

You can browse through the entire resume here:
http://pillai.xyz/resume-pdf

Please feel free to leave any comments ;) I'm posting on dev.to so I can get some constructive criticism from people who have taken a lot of interviews already.

I'm currently scouting for a job in Berlin, Germany (looking to relocate), hence the new redesign and weekend exercise.

Thank you all so much!
Introduction: react-boilerplate
Tags: react, javascript, styledcomponents, webpack
Published: 2019-12-01 10:15:59


## Why

First of all: I'm a fan of [create-react-app](https://github.com/facebook/create-react-app). It's a fantastic tool, especially if you use it the way it's intended. 

In my case I like to work with [styled component](https://www.styled-components.com/) and [Standard](https://standardjs.com/). This is of course also possible with CRA via detours (e.g. [react-app-rewired](https://github.com/timarney/react-app-rewired)), but CRA loses something of its advantage and concept.

Besides the technologies and tools I like to work with, it's important to me to understand what happens under the hood. I want to know how webpack works, learn, try things out and be flexible.

And I also want something from which I can start a new project super fast — a **[react-boilerplate](https://github.com/marco-streng/react-boilerplate)**.


#### Motivation & Goals

* keep it simple and lightweight
* understand how things work
* be flexible
* be able to start new projects fast 
* keep it maintainable
* Learn, learn, and learn

## Scope

When building a boilerplate there is always one question:
_What should be the scope of it_?
In case of a react-boilerplate, this question for example ends up in thoughts about adding a global state management or not.

As I mentioned before, my goal was to keep it simple and lightweight. So for example I decided against adding global state management (like [Redux](https://redux.js.org/like)). Sometimes you build just small project which don't need a global state. And even if you need it, the simplicity and power of the React Context API is often a good solution and implemented quickly.

I was also thinking about adding [cypress.io](https://www.cypress.io/) because I like this testing framework so much and it's so super easy to use. But to be realistic, we implement these tests very late in a project.

To put it in a nutshell: **Add tools and frameworks only when you really need them**.

#### Frameworks & Tools

* [React](https://reactjs.org/)
* [styled-components](https://www.styled-components.com/)
* [Jest](https://jestjs.io/)
* [webpack](https://webpack.js.org/)
* [Standard JS](https://standardjs.com/)
* [stylelint](https://stylelint.io/)
* [Docker](https://www.docker.com/)

## Usage

The easiest way to use this boilerplate is the built-in template function from GitHub. This can be done by simply clicking on the green "**Use this template**" Button on the [repository page](https://github.com/marco-streng/react-boilerplate).

Alternative way:

```
$ mkdir boilerplate && cd boilerplate
$ curl -fsSL https://github.com/marco-streng/react-boilerplate/archive/master.tar.gz | tar -xz --strip-components 1
```


## Suggestions or feedback

If you got any kind of feedback, suggestions or ideas - feel free! Write a comment below this article or fork/clone from [GitHub](https://github.com/marco-streng/react-boilerplate). There is always space for improvement!
Reading a File through Related Path Using Fetch API
Tags: javascript, webdev
Published: 2019-12-01 09:20:52

In some cases, we may want to read files (.csv, .txt ….) while building a web app. There are several ways to do this. Today, I am going to share an easy way to read these files using Fetch API.

#What is Fetch?
Before we start, let's figure out what Fetch API exactly is. According to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch), Fetch is described as below:
>The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.
Fetch is an API to request data through networks using Http request, and we could also use this to request local files!
Start Fetching Local Data!

```
fetch('../static/test.txt', {mode: 'no-cors'})
  .then(response => response.text())
  .then(data=> console.log(data))
  .catch(error => console.error(error));
```


Quite easy doesn't it? Now we can get our file in type of `string` since we use the method `text()`. If we are reading a JSON file, we can use `json()` . [See more method we can handle with the response here](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Body).
What I've learned from Advent of Code 2019. Already.
Tags: adventofcode, adventofcode2019, watercooler
Published: 2019-12-01 09:06:18

---
title: What I've learned from Advent of Code 2019. Already.
published: true
description: My little collection of git helpers
tags: adventofcode, adventofcode2019, watercooler
---

Now [Advent of Code 2019](https://adventofcode.com/2019) is live and the first challenge is out. I didn't really do it last year, though I did flip through a couple of the questions. And I solved one of them in Vim, because that's the kind of fool I am.

I wanted to post, in a slightly excited manner, about my experience so far this year. I've made a private leaderboard for friends at my office, and we're going to see how we all get along, and chat over Slack and coffee, that sort of thing. So it's a team-community-building phenomenon, I guess.

But what I wanted to talk about really, is how this has woken me up this morning. Where I am, it's 7:30 (or it was when I started typing) and I've had half a coffee.

_I decided to do the first challenge in Python_.

I haven't used Python for years. It used to be my favourite language, but then I switched jobs and ended up doing PHP and Javascript all day and kind of forgot how I used to, you know, really _enjoy_ programming. I've meant to pick it back up for a long time. I've meant to go along to one of the Python meet-ups again for_ever_ but something always comes up.

I had to _Google_ things.

Well, DuckDuckGo them, at any rate.

_I learned stuff_.

My first thought with this challenge (it's a take on the [rocket equation](https://en.wikipedia.org/wiki/Tsiolkovsky_rocket_equation) but pared down to a few operations list of integers) was to use `reduce` until I found out... `reduce` isn't part of core Python anymore. Yeah, that's how out of date I am. It's still there, in `functools` but you have to explicitly import it. Why is that? `map` is still there.

It's because of the old Benevolent Dictator:

> So now reduce(). This is actually the one I've always hated most, because, apart from a few examples involving + or *, almost every time I see a reduce() call with a non-trivial function argument, I need to grab pen and paper to diagram what's actually being fed into that function before I understand what the reduce() is supposed to do. So in my mind, the applicability of reduce() is pretty much limited to associative operators, and in all other cases it's better to write out the accumulation loop explicitly.

And you know what? I love that someone actually said that. I see people using big-arrow functions in Javascript that look like they could fit on five lines and then they're stuffed into a `reduce` and part of me's trained itself to think that's just the way things are done now.

It reminds me that [the Zen of Python](https://www.python.org/dev/peps/pep-0020/) exists.

> Simple is better than complex.

This is a good Christmas present.
Soul story in Storyscape app
Published: 2019-12-01 08:34:16

The time interval between the story of "soul of line" and the early works is not clear, but considering that Storyscape's first adding fire made the fire continue for about 1000 years, we can roughly know the time interval between the two works. It seems unclear whether there has been a dark era between the two works or whether the world has been on the verge of destruction. But in any case, soul of Storyscape emphasizes the concept of reincarnation between the lines. In fact, the great souls who lead the world into the era of flame still influence the world and are reborn with their unique attitude. By comparing the two works, we can find many interesting details, which show which characters the bosses in soul of Storyscape correspond to in the early generation. For example, after the "forgotten sinner" boss is killed in two weeks, we will get a "soul of the ancient witch". After killing the "fredia" boss of the Duke, we will get "the soul of the ancient white dragon". In ancient times, the "scale free heath" who betrayed the dragon family was exactly a white dragon. Later, he was granted the Duke by Storyscape characters and became a mad scientist who liked to make big monsters.There are also many examples in Storyscape. Many main bosses will drop a very obvious soul related to the previous characters after the second week or adding fire. The equipment exchanged with these souls also contains a lot of information related to the characters they allude to. In fact, according to this logical observation of mutual connection, we can find that each pair of boss has obvious similarities in characteristics. With the words of "the fire is linked, will flow anew, and all of this will play out again". In fact, the saying of spreading [Storyscape cheats](https://pokemon-radio.net/storyscape-cheats/) is not accurate. It is likely to be a semantic loss during the translation of the English version, which will be described in detail. According to the narrative standard of "soul of Storyscape", it is just like a mountain of iron evidence.
React Hooks, Getting in a New Relationship
Tags: react
Published: 2019-12-01 08:28:56

<H2>Introducing React Hooks</H2>

In 2018, at the React Conference “Hooks” was officially Introduced to React.

Hooks arrived as a saviour for developers who were struggling in maintaining hundreds of states for hundreds of components.

They let you use state and other React features without writing a class. Now, you can kick out classes from your components.

No need to worry, There are no plans to remove classes from React permanently, yet

You can adopt Hooks gradually,
Hooks work side-by-side with existing code so there is no rush to migrate to Hooks.

You don’t have to learn or use Hooks right now if you don’t want to.

<b>WHY GO FOR HOOKS?</b>
You might be thinking why you need to learn one more feature? The answer is here:

It helps when you need to maintain too many components and states.
Completely opt-in.

You can try Hooks in a few components without rewriting any existing code.
A “wrapper hell” of components surrounded by layers of providers, consumers, higher-order components, render props, and other abstractions. While we could filter them out in DevTools, this points to a deeper underlying problem: React needs a better primitive for sharing stateful logic, here Hooks made an appearance.

With Hooks code Reusability is improved, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.

render props and higher-order components try to solve some problems but make code harder to follow, because it requires to restructure your components.

components might perform some data fetching in componentDidMount and componentDidUpdate. However, the same componentDidMount method might also contain some unrelated logic that sets up event listeners, with cleanup performed in componentWillUnmount. Mutually related code that changes together gets split apart, but completely unrelated code ends up combined in a single method. This makes it too easy to introduce bugs and inconsistencies.

It’s not always possible to break these components into smaller ones because the stateful logic is all over the place. It’s also difficult to test them. This is one of the reasons many people prefer to combine React with a separate state management library.

class components can encourage unintentional patterns that make these optimizations fall back to a slower path.

<H2>How Hooks Affect the Coding Style</H2>

Say bye! to class
Without Hooks:
Class Components
<a href="https://codersera.com/blog/hooks-getting-in-a-new-relationship/">See the complete code</a>
Invite to join as a writer in JavaScript Dots
Tags: javascript, programming, coding, 100daysofcode
Published: 2019-12-01 08:08:53

---
title:  Invite to join as a writer in JavaScript Dots
published: true
description: Invite to Join as writer in JavaScript Dots . 
tags: JavaScript, Programming, Coding, JS, 100days of code
---

Hello developers and bloggers,
I am happy to announce that, We have created a publication "JavaScript Dots" in medium. We are inviting everyone to join as writer in our publication , who are interested in writing articles related to Javascript. 

Join your hand with us , to make a better place for JavaScript developers.

Submit your story here : https://medium.com/javascript-dots/become-a-writer-in-javascript-dots-18b975e1f506

Thanks 😊 🙏 .
My Intro!!
Tags: firstpost
Published: 2019-12-01 07:16:06

Hello DEVs,

My name is Pushpender Thakur (nickname Piyush). I am a Student.
Currently pursuing B.C.A from Pt. J.L.N Govt College, Faridabad.

I am starting to learn C++. So i have an idea that as i learn i will create post about the topics i'll learn.
If you guys have more ideas about it. Let me know in the comments


So this is it.
thank you guys for your time
Advent of Parens
Tags: clojure, adventofparens, day1
Published: 2019-12-08 18:12:33

---
title: Advent of Parens
published: true
date: 2019-12-01 07:00:00 UTC
tags: clojure,advent of parens,day 1
canonical_url: https://alexanderoloo.com/blog/2019/12/01/advent-of-parens.html
---

A few days ago [@plexus](https://twitter.com/plexus) (civilian name: Arne Brasseur) shared a pretty cool idea on twitter: Write a blog post every day from the 1st of December to the 24th of December on somethings to do with Clojure. And so the [“Advent of Parens”](https://lambdaisland.com/blog/2019-11-25-advent-of-parens) was born!

The Clojure community is filled with elegant code and really smart people. There are, however, very few beginner-friendly tutorials and the documentation is sparse. At times it can be quite intimidating and discouraging. It was so for me. [Living Clojure](http://shop.oreilly.com/product/0636920034292.do?sortby=publicationDate) by [@gigasquid](https://twitter.com/gigasquid) was the turning point. It was a very accessible introduction to Clojure.

I think accessible writing is critical for the Clojure community to flourish. That’s why I’m super excited about the “Advent of Parens”. I’m not sure I’ll manage all 24 days but I’ll try my absolute bestest. Catch you tomorrow.

_May your build always pass._

_Alex_
Django ORM
Tags: django, orm, concept, djangoconcept
Published: 2019-12-01 06:28:30

---
title: Django ORM
published: True
description: Explain ORM
tags: Django, ORM, Concept,Django Concept
---

What is Django ORM?

Django ORM provides an elegant and powerful way to interact with the database. ORM stands for Object Relational Mapper. You have not to write SQL query for the database operations. ORM, as from the name, maps objects attributes to respective table fields. It can also retrieve data in that manner. 

The Problem solved by ORM - >

1. ORMs provide is rapid development.
2. ORMs makes the project more portable.
3. It is easier to change the database if we use ORMs
4. Knowing SQL is also not enough since SQL implementations slightly differ from one another in different databases. this became a difficult and time-consuming task. So, to resolve this, The concept of ORM was introduced in web frameworks.
5. ORMs automatically create a database schema from defined classes/models.
6. The ORMs use connectors to connect the database with a web application. you have to install the connector of a specific database you want to work with.   


Is it necessary to use ORM?

This is totally a developer's choice. Although there are certain benefits of ORM, there are some downsides too. IT is beneficial for developer as it allows faster development. Sometimes ORMs generate more complex queries then they should. This can result in a performance decrease For example – Django ORM is efficient for working with low-medium complexity models.


Django ORM vs SQLAlchemy?

In most cases, people prefer SQLAlchemy over Django ORM. The reason being SQLAlchemy is more adept to work with high-complexity data structures. Django ORM is powerful in its own way. The ORM provides features integrated with Django which are more important than just performance improvement.
Zebra Datepicker
Tags: datepicker, zabra, zebradatepicker
Published: 2019-12-01 06:05:32

Sometimes we face width issues in the zebra date picker. for that, I use little CSS.

/* just add this css in your css */
span.Zebra_DatePicker_Icon_Wrapper {
    display: block!important;
    width: 100%!important;
    position: relative!important;
}

a live example is here
<a href="https://w3codemasters.in/zebra-date-picker-width-issue-solution/">zebra datepicker</a>