teleren/devto huggingface dataset:
2.2 Python as a calculator
Tags: python, beginners, webdev, github
Published: 2019-11-02 18:49:32

=>> This is 2.2 section of Python  tutorial, and i am going to tell u about Python as a calculator. yes,we can use Python shell  or any Python IDE as a calculator.

Link of previous linked tutorial
-> 2.1 : https://dev.to/mohit355/python-basics-3cjd
-> 1.2 : https://dev.to/mohit355/download-and-install-python-3-x-1boo

=>> Python is perfectly suited to do basic calculations. 

**Along with addition, subtraction, multiplication and division, there is also support for more advanced operations such as:

  1. (+) : Addition
  2. (-) : Subtraction
  3. (*) : Multiplication
  4. (/) : Float division     ,return decimal  value as output
  5. (//) : Integer division  ,return integer value as output
  6. (%) : Modulo ,it will gives reminder
  7. (**) : Exponent
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8opi6lpvaj2z4xjlhb6g.png)In above figure some addational operations shown but don't worry these are function which is predefined in Python that will be discussed later in this series.

#Why Python as a Calculator ?
  #Ans- .This is because we need not to code many number of line to sum two number or divide or multiply.
we can directly print it using print function.  (print function is  already discuss in previous post).

For example,
  1. I want to add three number 2,3 and 4. so we directly use print(2+3+4) and its output is 9 as shown below.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p6pvvzjrt4ajry0b7l5h.png)
  2. let's perform following operations : 2+3-4/2
we can simply done this by print(2+3-4/2) and its output is shown below.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wi7sbjy0guigvet958ej.png)Its print 3.0 because here we use float division and it always return a decimal value

  3. 4%2  output is 0 (% used for the reminder) 4%2 means when 4 is divided by 2 what is the reminder left.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1c8l4hmj0pugayj5ltob.png)
   
  4. let's perform 4**2 means 4 to the power 2 and the output is 16.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/s18mgt0l4822uc7mrxyq.png)

=>> So we can do any type of mathematical calculation using simply print function.

=> If you have any problem let me know that in comment box.

Thank You...
JQuery: I have a problem with a changement of class on click
Tags: jquery, javascript, html, help
Published: 2019-11-02 17:47:42

Hi guys! I have a problem.
https://pastebin.com/LxDbhGP3
In this code there are two clickable paragraph: "7" and "8".
And by jquery, when I click one of them, the background of the button change, and after 2 seconds the first background returns.
The probelm is that it works only for a click: when I run the code, I click "7" and the function works, but if immediately after I click "8" it doesn't work. And vice versa if I start with "8" on run.
It's a weird problem, can you help me to find a solution?
📚 Awesome links from dev.to and around the web #4
Tags: career, webdev, frontend, podcast
Published: 2019-11-02 17:20:09

Hey fellow developers and designers 👋🏽

How have your week been? I hope you are all well and no one is suffering from burn out. This week I compiled some interesting articles on career, entrepreneurship and technical topics.

Happy reading :)

## ✍🏽 Links you might find interesting
⭐ [My journey to landing my dream job at amazon](https://dev.to/arelyskywalker/my-journey-to-landing-my-dream-job-at-amazon-2a39) - @arelyskywalker
⭐ [Firefox and other browsers will be making better use of the height and width attributes for modern sites](https://dev.to/ben/firefox-and-other-browsers-will-be-making-better-use-of-height-and-width-attributes-for-modern-sites-4kpm) - @ben
⭐ [Do design systems prevent creativity?](https://dev.to/justaashir/do-design-systems-prevent-creativity-8pa) - @justaashir
⭐ [How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify](https://www.freecodecamp.org/news/building-jamstack-apps)
⭐ [How are people making money selling knowledge on the internet](https://crazypolymath.substack.com/p/how-are-people-making-money-selling)


---
## ✨ Random delights from around the world
[Podhunt.App](https://podhunt.app) - Pod Hunt is a daily curation of the best new podcasts (Like Product Hunt, but for podcasts). Discover the latest podcasts that everyone is listening to.
[Be the valley](https://bethevalley.com) - If you like Silicon Valley (the TV series) this website gives you the ability to create your own custom title sequence.
[SWR By Zeit](https://swr.now.sh) - SWR is a React Hooks library for remote data fetching. Visit the site to learn more about it.

---
## 🙈 Shameless Plugs

Today I am not going to plug anything for myself. If you are building cool stuff you can share in the comments.

---

> ![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/iw3sdgh0lzvqsqqy0v4f.jpg)

---

Cheers 🥂
[@kudapara](https://twitter.com/kudapara)
NYT API
Tags: vanillajavascriptaccademy, beginners, codepen
Published: 2019-11-02 16:31:09

---
title: "NYT API"
published: true
description: The simpler the better
tags: vanillaJavaScriptAccademy,  beginner ,codepen
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9dwyeakl9om3g21tp719.png
---



{% codepen https://codepen.io/giandomenico/pen/pooWBYO %}
Simple VUEX Guide
Tags: vue
Published: 2019-11-02 16:00:59

# Vuex

Vuex is a **state management pattern + library** for Vue.js applications. It serves as a centralized store for all the components  in an application, with rules ensuring that the state can only be  mutated in a predictable fashion.



## Interacting with the Store



### mapState

```javascript
import { mapState } from 'vuex';

computed: {
  ...mapState([
    'title'
  ])
}
```



### mapGetters

```javascript
import { mapGetters } from 'vuex';

computed: {
  ...mapGetters([
    'title'
  ])
}
```



### mapMutations

```javascript
import { mapMutations } from 'vuex';

methods: {
  ...mapMutations([
    'ADD_SOMETHING'
  ])
}
```



### mapActions

```javascript
import { mapActions } from 'vuex';

methods: {
  ...mapActions([
    'DO_SOMETHING'
  ])
}
```





## The Store itself



### State Object:

This is how the state object could look like

```js
state: {
	todos: [
		{id: 1, name: 'Do my Homework', done: false},
    {id: 2, name: 'Clean my Room', done: true},
	]
}
```



### Getters:

```javascript
getters: {
  doneTodos: state => {
  	return state.todos.filter(todo => todo.done)
  }
}
```





### Mutations:

```js
mutations: {
  increment (state, payload) {
    state.count += payload
  }
}
```



### Actions:

Actions are similar to mutations, the differences being that:

- Instead of mutating the state, actions commit mutations.
  

```js
actions: {
  increment ({context, state}, payload) {
    context.commit("increment", payload);
  }
}
```





## Persistent Store



```js
// store.js
// yarn add vuex-persist
import VuexPersist from 'vuex-persist'

const store = new Vuex.Store({
  //...initialization
  plugins: [vuexPersist.plugin]
})
```
Emoji Lover 😍😍😍???
Tags: emoji, lover, emoticon, productivity
Published: 2019-11-02 15:51:32

Well, I was not a big Emoji Lover previously because I don't know too much about it. 
But now I have something for you if you are an Emoji Lover😍😍😍.

Actually One of my Girlfriend told me that I am Emoji hater that hurts me.
So I decided to know about emoji and guys, you have no idea what I get 🤔🤔🤔?
I found that 90% or more than 90% people don't know the real meaning of emoji and using it like a pro but they are not a pro 😏😏😏.

Even you have no idea what is the real meaning of it but still, you are using. So I am not going to let you live in the dark.
Here I found something great.
Did you guys ever listen about Wikipedia?
🙄🙄🙄
If your answer is yes then you can read further otherwise you can enjoy another blog.
🤐🤐🤐

Today I am talking about Emojipedia. 
Wait what? 🤔 
Yes, you read it Right.
It is Wikipedia of Emoticon (Emoji) where you can know real mean of Emoji and you can use emoticon perfectly.

You can also challenge or punctuate them at any point which shows that how much smart you are.
But don't be too smart because some people are just to be stupid you can't change them.

Link - https://emojipedia.org/

Bouns tip - In Windows, you can use Emoji directly by pressing 
Window key + Period (.)
Why is "npm start" bad for production?
Tags: npm, beginners, todayilearned, node
Published: 2019-11-02 14:52:08

A large number of documentation and blogs recommend running the server code through `npm start`, and Amazon AWS documentation is no exception.

### Why is it bad?
Let's create a project with common package.json
```json
"sripts": {
  "start": "node server.js"
}
```
and start our server: `npm start`.

The server runs, but what about our processes?

![npm and node](https://thepracticaldev.s3.amazonaws.com/i/ekebwwae5c850cgekkdz.png)

OMG! The npm process is not only alive but also uses almost the same amount of memory as our server!

Moreover, if we create our package.json with several tasks:
```json
"sripts": {
  "_serve": "node server.js"
  "start": "config-something.sh && npm run _serve"
}
```
![2 npms and node]
(https://thepracticaldev.s3.amazonaws.com/i/49et4tiqh7o9kztlx2pa.png)

They are twins...

###Solution
Using npm is a great solution for configuring, building, and other short processes. But for the product server, it is better to use node.js directly.

![only node](https://thepracticaldev.s3.amazonaws.com/i/y8lo9mv50964x0uwixaj.png)
Daily Challenge #105 - High-Sum Matrix Drop
Tags: challenge
Published: 2019-11-02 14:35:03

---
title: Daily Challenge #105 - High-Sum Matrix Drop
published: true
series: Daily Challenge
description: Find the path down the matrix with the highest sum. 
tags: challenge
---
You have a square matrix of unsigned integer values. Say, 5 + 5.
Each row of that matrix contains numbers from 1 to 5 (or to whatever length of the matrix), randomly sorted. 

You can move through the matrix only one step at the time - either straight down, left-down or right-down. 

Your challenge is to write a code that will start at the middle of the top row, and find the path down with the highest sum.

*Example:*
For the following matrix, you start in c/0. For this matrix the best path would be: c/0, d/1, d/2, e/3, d/5 which scores 4+4+5+4+5 = 22.  
<pre>
+---+---+---+---+---+---+
|   | a | b | c | d | e |
+---+---+---+---+---+---+
| 0 | 2 | 1 | 4 | 5 | 3 |
+---+---+---+---+---+---+
| 1 | 5 | 2 | 1 | 4 | 3 |
+---+---+---+---+---+---+
| 2 | 1 | 3 | 2 | 5 | 4 |
+---+---+---+---+---+---+
| 3 | 1 | 5 | 2 | 3 | 4 |
+---+---+---+---+---+---+
| 4 | 3 | 2 | 1 | 5 | 4 |
+---+---+---+---+---+---+
</pre>

Good luck!

***
_This challenge comes from [peledzohar](https://dev.to/peledzohar) here on DEV. Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Mutability in Clojure
Tags: clojure, todayilearned
Published: 2019-11-02 14:33:01

# Introduction
![](https://media.giphy.com/media/8dYmJ6Buo3lYY/giphy.gif)
## Clojure is Functional, What does that mean?
Functional language is a programming paradigm. Development is based on function results and programming is done with expressions, as if functions were objects. In this approach, the output value depends only on the input arguments. That way, it doesn't matter what environment or scenario the system is in. Thus, the output of the output is always the same for the same input arguments.

Simply put, this would be state-immutable programming, since functions have the same value and behavior throughout the process. Thus, functional language becomes totally inherent in situations of parallelism, distribution and very high competition and criticality.

### Immutability X Mutability 
![](https://media.giphy.com/media/FQabbU8rG7OWA/giphy.gif)
#### Immutability
*It's the quality of not being able to change.*
A clear example is a **ROM** memory
#### Mutability 
*Characteristic of what is easily changeable or variable; also called variability;*
A concise example is **RAM** memory

# How it's work on Clojure?

By default every symbol in clojure is unchanging
```clojure
(def myArray [1 2 3 4])

(print(update myArray conj 5)) ;returns 1 2 3 4 5

(print myArray) ;returns 1 2 3 4
```

That is, when you try to add values ​​to a symbol you get a clone with the value added, a dumb way to persist with that value would be to set another symbol with that return as a value, but as we are *clean coders* we will not do that.
How could we have a persisted value then?

## Atoms ⚛
Atoms provide a way to manage shared, synchronous, independent state. They are a reference type like refs and vars. 

You create an atom with atom, and can access its state with `deref/@`. 

Like `refs` and `agents`, atoms support validators. To change the value of an atom, you can use `swap!`. 

A lower-level compare-and-set! is also provided. 

Changes to atoms are always free of race conditions.

```clojure
(def myArray (atom [1 2 3 4]))

(swap! update myArray conj 5)

(print myArray) ;returns a ref to an atom, is ugly to see

(print @myArray) ; prettier way to print an atom
```
🚨 Every time you see `!` in final of a method in Clojure, that's refer to side a effect.

Now You are able to use mutability and immutability in Clojure 🤓

Thanks to read, until the next!

![](https://media.giphy.com/media/YybKRCSHL1OBW/giphy.gif)
Three ways to use reduce in javascript
Tags: javascript, tutorial, beginners, webdev
Published: 2019-11-02 13:40:08


In this video we explore the reduce method and demonstrate three different use cases you can use in your next JavaScript project.

{% youtube 6nWzYwqVwoI %}

Data used 
```
export const eg1 = [1, 45, 2, 3, 34, 4];
export const eg2 = [
  {
    gender: "male",
    name: "Ed"
  },
  {
    gender: "male",
    name: "Bob"
  },
  {
    gender: "female",
    name: "Sarah"
  }
];
export const eg3 = [
  1,45,2,3,34,4,1,2,
  3,4,5,6,3,2,9
];

```

1 - sum all items in array

```
const one = eg1.reduce(
  (prev, current) => prev + current,0
);
console.log(one);
//outputs 189
```

2 - group items by type

```
const two = eg2.reduce(
  (obj, item) => ({
    ...obj,
    [item['gender']]: [
      /** check if exists
       * if it doesn't start with blank array
       */
      ...obj[item['gender']] || [],
      item
    ]
  }),
  {} //default value
);
console.log(two)
//outputs {male: Array[2], female: Array[1]}
```

3 - count how many times item in array

```
const three = eg3.reduce(
  (tally, item) => ({
    ...tally,
    [item]: (tally[item] || 0) + 1
  }),
  {}
);
console.log(three);
//outputs Object {1: 2, 2: 3, 3: 3, 4: 2, 5: 1…}

```
Explain React to Me
Tags: explainlikeimfive, react, beginners, javascript
Published: 2019-11-02 13:20:51

React first came on the scene and introduced some new concepts, like State and Props. But mostly it introduced idea of declarative rendering based on the state of the program.

Since then React has evolved and expanded. Lots of new terms, and new concepts.

Can you explain React in 2019 to me, from a conceptual point of view?
Android Developer Conference - DroidCon UK 2019 - [VLOG Video]
Tags: android, techtalks, linux, career
Published: 2019-11-02 12:14:12

## My Droidcon UK experiences
Long story very very short myself and a colleague went to London to attend Droidcon UK (Oct 24th-25th, Business Design Centre). Its a amazing convention/conference (whatever they are called) all about android development!

This video is not supposed to be an educational piece, showcasing the talks and their content, but more of a flavour of the experience and the fun that is Droidcon and also a brief summary of each talk that I personally attended during the two days in order to serve as a glimpse into the convention and the wonderful things/talks/activities that were going on there.
Of course this hopefully will also act as a sort of quick positive advert to anyone that is considering attending future Droidcons, if thats you then absolutely do so! It is by far the best dev convention/conference that I have been to...

Enjoy...

## video
{% youtube 1qQcLAHyY3k %}

Link to skill cast videos from Droidcon 2019...
https://skillsmatter.com/skillscasts

Link to Droidcon UK...
http://uk.droidcon.com

## Onwards

If you have ANY feedback at all please let me know in the comments below or reach out to me on twitter:

[My Twitter (@ben_kadel)](https://twitter.com/ben_kadel)

Thanks for reading and possibly watching!
Maren (simple theme based static site generator)
Tags: javascript, theme, markdown, blog
Published: 2019-11-02 12:00:26

---
title: Maren (simple theme based static site generator)
published: true
description:
tags:
 - javascript
 - theme
 - markdown
 - blog
---

Hi friends, I have created this static site generator, Maren (https://maren.io) that converts Markdown files to HTML using a theme.

The main difference to other SSG is in "Themes". Themes are separated, live by their own, and can be developed by any template library of choice (there's no limitation to that).

Any customization to the theme is easy, also reusability of its parts. There are no scaffolds to follow, no layout files, scortcodes, custom tags, or other structure dictated by other SSG.

Please, let me know your thoughts on this. Also, if you'd like to help me out to make it more generally available, please, send me a message. Thank you in advance.

All best! :)
Pavel

https://maren.io
https://discord.gg/VNVHa7r
"The Beauty of the COBOL Programming Language"
Tags: cobol, todayisearched
Published: 2019-11-02 11:28:30

I was searching on [TechURLs](https://techurls.com/) again using the search string `Programming Language OR interpreter OR compiler OR scripting language` and came up with a really nice one on COBOL called (wait for it ...) [The Beauty of the COBOL Programming Language](https://devops.com/the-beauty-of-the-cobol-programming-language-v2/). Unlike many COBOL articles, this one goes into some detail about the language.

At the bottom are more links to COBOL articles: [COBOL: Completely Obsolete But Omnipresent Language](https://devops.com/cobol-completely-obsolete-omnipresent-language/) and [Why COBOL Still Matters After 60 Years](https://devops.com/why-cobol-still-matters-after-60-years/). The latter articles says

>While much of the programming world has moved onto JavaScript, Python, PHP and even C and C#, COBOL can not be ignored. It continues to evolve and remains relevant, even in the age of the cloud. Simply put, it still has some chops to it. 

and then lists some of those chops. Good articles all. And all from, interestingly, DevOps.com. DevOps is a thing. And some DevOps seem to think that COBOL is a thing too.
read picture folders, sort them into sets and output them with a loop
Published: 2019-11-02 11:09:37

how can i do it ever <img> takes the right picture sets

here the picture directory (img):

 - example_start.jpg
 - example-A_small.jpg
 - example-A_small_2x.jpg
 - example-A_medium.jpg
 - example-A_medium_2x.jpg
 - example-A_large.jpg
 - example-A_large_2x.jpg
 - example-B_small.jpg
 - example-B_small_2x.jpg
 - example-B_medium.jpg
 - example-B_medium_2x.jpg
 - example-B_large.jpg
 - example-B_large_2x.jpg


        // Get Pictures
        $imgDir = 'img';
        $imgs = glob($imgDir.'/*{[!_start*].jpg}', GLOB_BRACE); // without _start image!
        asort($imgs); // sort: ABC…


caption.php file:

    $imgCaption = array('example-A is nice','example-B is blue');



    require_once 'caption.php'; // picture caption data
        foreach($imgs as $files => $img){
            if(!isset($imgCaption[$files])){$imgCaption[$files] = '';}
                 echo'
                      <img
                        src="'.$_SERVER['REQUEST_URI'].$img.'"
                        srcset="
                          '.$_SERVER['REQUEST_URI'].$img.' 734w,
                          '.$_SERVER['REQUEST_URI'].$img.' 1472w,
                          '.$_SERVER['REQUEST_URI'].$img.' 1068w,
                          '.$_SERVER['REQUEST_URI'].$img.' 2136w,
                          '.$_SERVER['REQUEST_URI'].$img.' 2016w,
                          '.$_SERVER['REQUEST_URI'].$img.' 4032w," 
                        sizes="(min-width: 640px) 50vw, 100vw" width="100%" height="100%"   
                        alt="'.$imgCaption[$files].'">
                    ';

expected Output


     <img
       src="img/example_A-small.jpg"
       srcset="
         img/example-A_small.jpg 734w,
         img/example-A_small_2x.jpg 1472w,
         img/example-A_medium.jpg 1068w,
         img/example-A_medium_2x.jpg 2136w,
         img/example-A_large.jpg 2016w,
         img/example-A_large_2x.jpg 4032w," 
       sizes="(min-width: 640px) 50vw, 100vw" width="100%" height="100%" alt="Example A">
     <img
       src="img/example_B-small.jpg"
       srcset="
         img/example-B_small.jpg 734w,
         img/example-B_small_2x.jpg 1472w,
         img/example-B_medium.jpg 1068w,
         img/example-B_medium_2x.jpg 2136w,
         img/example-B_large.jpg 2016w,
         img/example-B_large_2x.jpg 4032w," 
       sizes="(min-width: 640px) 50vw, 100vw" width="100%" height="100%" alt="Example A">
Github gist + Github pages
Tags: github
Published: 2019-11-02 11:00:12

---
title: Github gist + Github pages
published: true
description: 
tags: github
---

I host my personal website on Github pages, Every time whenever I wanted to update website I had to update code, because data was part of repo. 

Recently I learned that we can access gist by api, So now I am hosting my data on gists and loading it dynamically with API call. Which is pretty cool.

Without Database and backend now I can update website anytime without actually updating code.

Here is sample code 

``` 
let url ="https://api.github.com/gists/9052ef9a070e0d5ab046fa3464d026c4";
fetch(url).then(response => {
   response.json().then(data => {
     let profileData =JSON.parse(data.files["personalData.json"].content)
   })
 })
```



{% twitter 1190574901217726465 %}