teleren/devto huggingface dataset:
Using CSS with Javascript to create a Read-More button
Tags: beginners, javascript
Published: 2020-01-19 06:28:53

There are instances in Website-Development when you need to create a webpage in which we need to describe a product or show reviews of a product and sometimes even display a glimpse of a post.

The Read More or View More or Show More button comes handy in that situation.
This article helps you in creating such a Read More and Read Less Button.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3pir1p8vuu9mgm0fl9b0.PNG)



We will wrap our text within a *<p>* paragraph tag and create few *<span>* elements within the *<p>* paragraph tag which have an id attribute that will later be used by JS function and create a button which invokes the JS function.

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

Using CSS we can hide the span which contains our extra text(using display:none).
  
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wrdc2jtzhi2f3v0q5ure.png)


The readMore() function holds the entire logic to hide and display the extra text. In this function, we get the reference of useful HTML elements using DOM.
We can modify the styling of the element through Javascript. So whenever the readMore function is invoked, if the dots span element has a display property of none which means the extra text is visible, we then hide the extra text element and change the inner text of the button to Read More and change the style property of dots to inline and if the dots are visible which the extra text is not visible, we than hide the dots and display the extra text and change the inner text of the button to Read Less.




Using the following snippets you can try out this example.
Deploying with ZEIT Now
Tags: ziet, webdev, hackcbs
Published: 2020-01-19 06:08:47


ZEIT Now can certainly be defined as the easiest way to deploy websites, regardless of what the prerequisite are.  It is a cloud platform for Static sites and Server less Functions which enables developers to host websites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration. 

The primary focus of professionals at ZEIT Now is to make cloud computing accessible to everyone. Currently ,it deploys websites, without having to manually configure DNS, SSL, CDN or hosting. It is a push-to-deploy platform which works with the developer’s web framework, integrates with GitHub and GitLab with Free Automatic SSL so as to avoid tedious renewals and DNS which a seamless experience for the user.Getting started with Now is easy and takes just a few steps to get up and running with new projects in less than a minute.

### These steps will present you how to get initiated quickly:
1) **Use Quick starts :** a variety of Quick starts paired with their guides and a deploy control is available on their  website to let you get a swift initiation with your project.
2) **Deploy Project Locally:** If doing things manually is your way, then you can deploy with ZEIT Now over your terminal with any local project.

i) ***Install Now CLI*** 
For deploying with ZEIT over your terminal, you’ll need to install Now CLI, 
a frequently updated, and open-source, command-line interface available at 
either npm or Yarn, the javascript package manager.
ii) ***Create a project & deploy***
The alternate way is to create a new next.js application and move it into 
the directory and then deploy your app with a single command through your 
terminal. Once deployed, you will get a preview URL that is assigned on each deployment to share the latest variations under the same address.

Any technology that can be served over HTTP and distributed through their CDN network can be deployed to ZEIT Now. This includes:Static websites and static generators like React, Vue, Angular, etc. Code that renders HTML on the server-side. API  endpoints that query databases or web APIs and return dynamic data.
ZEIT Now makes serverless effective for your team with tools and workflows, that make the underlying cloud infrastructure useful, productive and configuration-free.
ZEIT Now provides the framework to avoid refurbishing everything from scratch, which is feasible. The merit of serverless today is you can deploy popular client-side frameworks (like Next.js, create-react-app, Vue), Node.js or Go APIs as a monorepo with nearly zero configuration.

All these features and facilities make using ZEIT Now proves why it’s said to be the easiest way to deploy websites currently anywhere on the internet.
Hence, ZEIT Now makes it a lot easier for developers to deploy their static web apps with zero configuration and full assurance.
Streak broken
Published: 2020-01-19 04:31:57

## whelp.

So I was going really well on [my 30 day challenge](https://dev.to/jsegal205/31-days-of-commits-4kga) and I broke the streak. 

I can make all the excuses in the world but honestly I forgot / preoccupied.

What actually happened was I had a late night deploy the night prior so I was up late which lead to me taking a nap. Then I had to rush to get ready to meet some family for dinner **AND** after dinner I had another late night deploy that was top of mind. 

## Regardless

I'm going to continue on and aim to finish out the month strong with commits for updating my site. I have lots of ideas to finish out the month strong and maybe beyond :fingers_crossed:.

I'm very proud that I'm able commit to committing way more than I initially thought I would this month.

I'll likely have a "how did Jim do on the challenge" write at the end of the month.
A graphic overview of the 'binary' with respect to R packages
Tags: r, datascience, programming
Published: 2020-01-22 09:15:24

---
title: A graphic overview of the 'binary' with respect to R packages
published: true
date: 2020-01-19 04:28:00 UTC
tags: R, datascience, programming
canonical_url: https://shreyas.ragavan.co/post/graphic-overview-binary/
---

Recently there was a question as to what a Binary is, building off a question [posted on the Rstudio community forum](https://community.rstudio.com/t/meaning-of-common-message-when-install-a-package-there-are-binary-versions-available-but-the-source-versions-are-later/2431). I’ve always found these aspects interesting, and a little hard to keep track of the connections and flow - So I’ve made a flowchart that will help me remember and hopefully explain what is happening to a noob.

In this process, I was able to remember [One of the first](http://www.tldp.org/HOWTO/Unix-and-Internet-Fundamentals-HOWTO/) documents I really enjoyed reading when I started learning how to use Linux. I would recommend that article for anybody starting out. The document is meant for people with a non-technical background, but I think it is technical enough.

So: Lets pretend the binary is a capsule to be swallowed by the computer to gain superpowers :D : The capsule is in a sense off-the-shelf and made for your System. When the capsule is not available, it has to be manufactured (compiled) by your machine locally for which it needs certain tools and dependencies, etc and this varies from package to package, and possibly between hardware architectures as well and more. Please feel free to let me know if there are any discrepancies in the flowchart !

Binaries can be built and maintained if you desire. There should be people maintaining their own binaries or frozen versions as well. The question is - who is going to maintain them and how many binaries can you build.

[![](https://shreyas.ragavan.co/img/binaries-source-code-11.jpg)](https://shreyas.ragavan.co/img/binaries-source-code-11.jpg)
Javascript Trivia V1
Tags: javascript, codenewbie
Published: 2020-01-19 04:00:54

## What is Array in Javascript?

Arrays are special data structure, which are used to store data in sequential order. Turns out, that array in javascript are nothing but plain objects with properties named as numbers instead of a proper name.
```js
    typeOf [];
    "object"
```
We can even use the Object method on array to get the data.
```js
    var a = ['a', 'b', 'c'];
    Object.keys(a);
    ["0", "1", "2"]
```
If we want we can define array as plain objects instead of using the array syntax.
```js
    var b = { 0:'a', 1:'b', 2:'c'};
    b[1];
    "b"
```
----
## Square Bracket Selector
We can't access this property value using the dot operator (.) as its a number. So we have to use the square brackets ([]). The difference between accessing the property using dot operator and using square brackets is that when we use dot operator, the name after dot is literally the name of the property, whereas when using the square brackets, the expression between the brackets is evaluated to get the property name.

The following statements will produce the same results
 ```js   
    b[1];
    b[3-2];

	const getNum = (a, b) => b-a;

	b[getNum(5,6)];
```
##Index as Properties
We can also check if the array has the index using the property validation functions like Object.hasOwnProperty or the 'in' method.
```js
	var a = ['a', 'b', 'c'];
	1 in a;
	true

	Object.hasOwnProperty(a);
	true
```
We can even delete the array index with the delete method (which remove the property value)
```js
	var a = ['a', 'b', 'c'];
	delete a[1];

	1 in a;
	false;

	Object.keys(a);
	(2)["0", "2"];
```
Doing this will set the value of a[1] to undefined.
```js
	a[1];
	undefined.

```
## Credits
Most of the knowledge shared in this blog is from the book 'Eloquent Javascript' by Marijn Haverbeke with my own experimentations and thoughts included. I would recommend people to pick up this book as it has a lot more information than what I have shared.

----
## Thanks
My CSS text won't show ellipsis
Tags: css
Published: 2020-01-19 03:24:13

Try adding the magic three: *white-space, overflow and text-overflow* first. Note that a width must be specified. Use a percentage to get dynamic ellipses as the screen shrinks against uneven text lengths.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3x4jy5961s6dswaju0rv.PNG)

Finally, don't forget a :block or :inline-block display value.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hsouen22rxa5o1pc28ri.PNG)
I Built My Personal Website
Tags: html, css, javascript, webdev
Published: 2020-01-19 03:21:50

It's been a fairly long time since i posted here. I was working on my website for about 2 days. In this short journey i learned some new things. The most important thing is that this work made me more confident of my skills as a junior developer and i feel happier for what i have achieved. If you started to struggle like - did i learn enough to apply for a job or can i make more styled things etc. *you really really must give a try to make a website for yourself.* Because it is your portfolio and you try nearly your best to make a good impression. Eventough if you are stressed or not in a good hype to start something new, you find yourself trying hard and enjoying by the time you build it. Long story short www.batuhangulgor.dev is my website and these are the stats i got as you can see below.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3fmj3uw1jygvmne94en7.PNG)

I do look forward to get your comments about the site <3

May the bugs not be with you.
The power of display:none;
Tags: css
Published: 2020-01-19 02:47:35

When trying to build a responsive web page, we often find that the responsiveness just stops prematurely. When the width or height is increased or decreased, the responsive page should always follow suit.

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

In the image above we took out the red arrow markup and replaced it with the green. That fixed the issue.

But finding it was a bit more of a challenge as we had lots of components, and didn't know which one was causing the whole page to stop flowing prematurely when the width was lessened.

We started first by using *display:none* on all but the element that seemed to have the issue.  When we determined it was flowing properly, we then added one element at a time until, we found the problem shown above. That bug was seven elements deep. And quickly found by using *display:none*!
Some Pandas handy snippets for Data Scientists 
Tags: python, tutorial, beginners, machinelearning
Published: 2020-01-19 02:14:09

## Iterate through rows
```python
import pandas as pd

for index, row in df.iterrows():
    pass
```

## Count unique values in dataframe
```python
df.labels.value_counts()
```

## Style max value in a row or column
```python
# Inspired by https://stackoverflow.com/a/45606572/2874139
def highlight_max(data, color='yellow', isBold=True):
    # Styling
    attrs = []
    if color is not None:
        attrs.append(f'background-color: {color}')
    if isBold:
        attrs.append('font-weight: bold')
    attrs = '; '.join(attrs)
    
    if data.ndim == 1:
        is_max = data == data.max()
        return [attrs if value else '' for value in is_max]
    else:
        is_max = data == data.max().max()
        return pd.DataFrame(np.where(is_max, attrs, ''), index=data.index, columns=data.columns)
    
df.style.apply(highlight_max, axis=1) # Max in row
df.style.apply(highlight_max, axis=0) # Max in column
```

## Display 1000 rows and columns
```python
# source: fast.ai material
def display_all(df):
    with pd.option_context("display.max_rows", 1000, "display.max_columns", 1000): 
        display(df)
        
display_all(df)
```

## Save dataframe as CSV file
```python
# index specifies whether to add a sequential index to the saved file
df.to_csv(csv_path, index=False)
```

## Create dataframe form python dictionary
```python
all_questions = []  # rows of column 'all_questions'
all_good_answers = []  # rows of column 'all_good_answers'
all_bad_answers = []  # rows of column 'all_bad_answers'

qa_dict = {'question': all_questions, 'good_answer': all_good_answers, 'bad_answer': all_bad_answers}

# Create a dataframe with 3 columns: question, good_answer and bad_answer
df = pd.DataFrame(data=qa_dict)
```

## Parse dates in dataframe
```python
df = pd.read_csv("train.csv", low_memory=False, parse_dates=["createddate"])
```

---

I am working on a project called **ML Studio**, want to get early access to and product updates? Subscribe [here](https://mlstudio.substack.com/) or follow me on [twitter](http://twitter.com/mgazar_).
Path Sum
Tags: python, leetcode, beginners, algorithms
Published: 2020-01-19 01:51:17

This is part of my series where I memo learning from Leetcode. If you have better solutions or ideas, please leave a comment!

## Problems

[Path Sum](https://leetcode.com/explore/learn/card/data-structure-tree/17/solve-problems-recursively/537/)  

>Given a binary tree and a sum, determine if the tree has a root-to-leaf >path such that adding up all the values along the path equals the given >sum.
>
>Note: A leaf is a node with no children.

>Example:
>
>Given the below binary tree and sum = 22,

```
      5
     / \
    4   8
   /   / \
11  13  4
 /  \        \
7    2        1
```
>return true, as there exist a root-to-leaf path 5->4->11->2 which sum is >22.

We want to know the sum of the value of the route from root to leaf.  
In the above example, root is 5 and leaves are 13, 7, 2 and 1, so we have to check the route `5->8->13`, `5->4->11->7`, `5->4->11->2` and `5->8->4->1`.


## Approach
We are gonna check the four route by BFS(breadth first search).   
In the above example, the BFS order is [5, 4, 8, 11, 13, 4, 7, 2, 1].  

We are able to get the sum of the value of the route by adding the value of node to the value of its children. That's say, when the root's value is 5 and the children's values are 4 and 8, we make the children's values are 9 and 13 by adding the root's value and repeat it until the child is a leaf.



## Solution
```python
from collections import deque
class Solution:
    def hasPathSum(self, root: TreeNode, sum: int) -> bool:
        if root is None:
            return False
        
        queue = deque([root,])
        
        while queue:
            node = queue.popleft()
            if node.left is not None:
                node.left.val += node.val
                queue.append(node.left)
            if node.right is not None:
                node.right.val += node.val
                queue.append(node.right)
            if node.right is None and node.left is None and node.val == sum:
                return True
        return False 
```

Thank you for reading this article!
I always welcome your feedback, question, and idea.
The Never Ending Learning Cycle
Tags: career, productivity
Published: 2020-01-19 01:41:09

I wanted to take a moment and just talk about how I continue to push myself in this crazy development world. Between job searching, keeping up with design trends through front-end looks, or even keeping my head above the code to keep a straight face. There is so much that can happen in a week. 

I'm sure as those who are looking for a new role, their first role, or just exploring what's out there, we continue to run into the endless cycle of looking for jobs, applying for that job, reaching out to those who could be involved with that role, meeting others at meetups; it just gets tiring at times. So how do we keep our spirits up, especially when we don't hear any responses? 

For myself, it's really just to continue to learn something new or continuing to push myself to keep fresh with the sites, apps or whatever I'm interested in making. 

Every Friday, I tell myself to step away from the world of job hunting, and build something new. If it's something big, small, whatever it may be. I have to open VSC and make something.

I find this helps me just get the frustrations and feeling crummy about no responses out of my head and have fun. Because that's what we all got into this world for, was to have fun and create cool stuff! 

So really this is for others who may be in my situation, or others who may see this and have more tips and tricks. (if you do, please leave them in the comments below) If you have cool things you want to show off, then let me see them, maybe we can work on something together!
Some Python handy snippets for Machine Learning Engineers
Tags: python, machinelearning, tutorial, beginners
Published: 2020-01-19 01:33:50

## Get file name and extension
```python
from pathlib import Path

path = Path("dir/file.xml")

file_name = path.stem  # file
file_extension = path.suffix  # .xml
```

## Iterate through directory contents
```python
from pathlib import Path

data_root = Path("/imgs")
for item in data_root.iterdir():
    print(item)
```

You can also use [`glob`](https://docs.python.org/3/library/glob.html)
```python
from pathlib import Path

data_root = Path("/imgs")

# Get all png images in this directory level
data_root.glob("*.png")
# Get all png images in this directory including sub-directories
data_root.glob("*.png", recursive=True)
```

## Inverse dictionary key/value => value/key
```python
inversed_dict = {v: k for k, v in some_dict.items()}
```

## Flatten a list of lists
```python
import operator

flat_list = reduce(operator.concat, some_list)
```

## Map string list to int list
```python
elements = ["1", "2", "3"]

elements = list(map(int, elements))
```

## Count unique values in list and their total
```python
from collections import Counter

elements = ["1", "2", "3", "2", "3", "3"]

# Unique values in list
keys = Counter(elements).keys()

# Frequency of their appearance
values = Counter(elements).values()
```

## Sort dict by value
```python
for key in sorted(confidences, key=confidences.get, reverse=True):
    print(f'key {key}')
```

## Format f strings
```python
print(f'2 decimal points {some_variable:.2f}')
```

## Batch an iterable
```python
def batch(iterable, n=1):
    l = len(iterable)
    for index in range(0, l, n):
        yield iterable[index:min(index + n, l)]
        
# and call it like
for x, pred in enumerate(batch(preds, 32), 1):
    pass
```

---

I am working on a project called **ML Studio**, want to get early access to and product updates? Subscribe [here](https://mlstudio.substack.com/) or follow me on [twitter](http://twitter.com/mgazar_).
JS DOM API for Beginners: Removing all elements with a certain class
Tags: javascript, beginners
Published: 2020-01-19 00:14:52

---
title: JS DOM API for Beginners: Removing all elements with a certain class
published: true
description: If you're familiar with CSS, you can use the same selector syntax to target all matching elements in JavaScript.
tags: #js #beginner
---

If you're familiar with CSS 🎨, then you can use the same selector syntax to target all matching elements in JavaScript 💻.

```js
window.document.querySelectorAll('.box')
```

Notice the selector is the same in CSS, representing elements with a `box` class.

This returns a special kind of array-like object for DOM elements called a NodeList.

What if we wanted to remove all the elements with a `box` class?

One way is to call `.remove()` on each of the elements. To do this, we need to loop over each element.

NodeLists aren't technically arrays, so they don't have a `.forEach()` method 😫 but they are iterable, meaning they can be converted to regular arrays 🤓

Here's the syntax for the conversion:

```js
[...window.document.querySelectorAll('.box')]
```

Now we can use `.forEach()` to remove each item:

```js
[...window.document.querySelectorAll('.box')].forEach(node => node.remove())
```

It can be any valid CSS selector, such as `.boxes li.box.circle[aria-selected="true"]`

You could also use `.map()` or `.reduce()` on a list of DOM elements this way.

🤟
How to add Disqus to your GitHub Pages
Tags: github, jekyll, tutorial, disqus
Published: 2020-01-20 17:30:26

---
title: How to add Disqus to your GitHub Pages
published: true
date: 2020-01-19 00:00:00 UTC
tags: github, jekyll, tutorial, disqus
canonical_url: https://wpanas.github.io/tools/2020/01/19/disqus.html
---

# Add a partial with Disqus

Create a file `_includes/disqus.html` with following content. Then you need to replace `YOUR_DISQUS_NAME` with shortname that is identifying your website on [Disqus](https://disqus.com/).

```html
{% if page.comments %}
<div id="disqus_thread"></div>
<script>
var disqus_shortname = YOUR_DISQUS_NAME;
var disqus_config = function () {
this.page.url = "{{page.url | absolute_url }}";
this.page.identifier = "{{page.id}}";
};

(function() {
var d = document, s = d.createElement('script');
s.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
{% endif %}
```

# Create a layout with comments

In folder `_layouts` create a new HTML file `blog.html`. This layout will be extending default post layout with previously created partial.

```
---
layout: 'post'
---

{{ content }}

{% include disqus.html %}
```

# Configure the new layout for all your posts

Now all you need to do to enable Disqus in your post is:

- set `blog` as default layout for your posts,
- enable flag `comments` by default.

To do so append file `_config.yml` with that configuration.

```yml
defaults:
  -
    scope:
      path: ""
      type: "posts"
    values:
      layout: "blog"
      comments: true
```

# How to disable comments in selected post

Change `comments` flag to `false` at the begging of post file.

```
---
title: "My post without comments"
comments: false
---
```