teleren/devto huggingface dataset:
Which has a better NEED and a future? REACT OR VUE?
Tags: react, vue, django, python
Published: 2020-12-08 13:52:10

Which one is better to start with and learn? Or, focus on? 
I’ve been using React for a while, to get better at JavaScript as well. 
I started with Vue, but wasn’t using it right at all really, but then got started with react. 

Is it ok to focus on Vue? Or do you need to know React well?
Running a project in podman (example)
Tags: podman, docker, containers, learning
Published: 2020-12-08 13:45:57

As discused in my previous post [So, you want to write your first container?](https://dev.to/fernand0/so-you-want-to-write-your-first-container-3jjf) I was not able to run *Docker* in my Fedora system. 
[Somebody](https://twitter.com/vrruiz) recommended me to test [podman](https://podman.io/). I installed it (`sudo dnf install podman`) read [Transitioning from Docker to Podman](https://developers.redhat.com/blog/2020/11/19/transitioning-from-docker-to-podman/) and started changing my *Dockerfile*. Main changes are the image (fedora), the instructions for updating and installing needed software and it worked fine:

    # our base image
    FROM fedora
    
    #RUN  sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys <PUBKEY>
    # Download latest listing of available packages:
    RUN dnf update
    # Upgrade already installed packages:
    #RUN apt -y upgrade
    # Install a new package:
    RUN dnf install python python-pip
    RUN dnf install libxml2 libxslt
    
    # Install python and pip
    #RUN apt -y install py-pip

    # upgrade pip
    RUN pip install --upgrade pip
    
    ## install Python modules needed by the Python app
    #COPY requirements.txt /usr/src/app/
    #RUN pip install --no-cache-dir -r /usr/src/app/requirements.txt
    
    # copy files required for the app to run
    COPY socialModules /usr/src/app/socialModules
    RUN pip install --no-cache-dir -r /usr/src/app/socialModules/requirements.txt
    
    
    # tell the port number the container should expose
    EXPOSE 5000
    
    # run the application
    CMD ["/usr/bin/python", "/usr/src/app/socialModules/moduleTwitter.py"]
Color Contrast Accessibility Checker (WCAG)
Tags: html, php, css, color
Published: 2020-12-08 13:42:54

Color contrast is a very important component of creating a more accessible web for all users. To make your text easy to read, the contrast between the text and the background should be high. Use this color contrast checker to determine whether or not your color combinations are accessible or not. **[Color Contrast Checker](https://hexcolor.co/color-contrast-checker)** tool uses the WCAG 2.0 (the world’s authority on web accessibility) formula for color contrast. For level AA compliance, your text should have a contrast ratio of 4.5:1 (don’t worry, our tool will figure this out for you!). For level AAA compliance your text should have a contrast ration of 7:1—however, if your text is large (18+ point or 14 point if the text is bold), then your ratio can be 3:1 for AA compliance and 4.5:1 for AAA.

## How does it work Color Contrast Checker?
Contrast is the difference in luminance or colour that makes an object (or its representation in an image, icon or display) distinguishable. In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view. On a web page, the amount of contrast required varies with different parts of the page. You usually want a high contrast between text and its background color. But too high contrast between design elements might give an unsettled and messy impression. Contrast is important because it allows designers and marketers to actually guide the attention of visitors who come to their websites, and this is done with and without color. **WCAG 2 Level AA** requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text or for user interface components. **WCAG 2 Level AAA** requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (18.66px) and bold or larger, or 18 point (24px) or larger.

**https://hexcolor.co/color-contrast-checker**
List Of Top 6 YouTube Tools To Boost Video Marketing
Published: 2020-12-08 13:28:33

When people talk about social media, the first networks that come to mind are usually Facebook, Instagram, and Twitter. While YouTube may not be your first thought, it needs to become a priority for you moving forward. As because Video marketing is one of the most effective ways to boost your marketing standards and YouTube is the second biggest search engine in the world. Here are some best tools to enhance your email marketing by using these plugins which are listed below :


6 Best Tools for Video Marketing
1.Google Trends 
Google Trends is a tool which will help you find out the search traffic on the topics and titles world as well as in particular countries. Not only that it also gives you an option to get you the results from past to present by which you can analyze the search rate of that particular topic. Read More at - https://www.devopsschool.com/blog/best-tools-video-marketing-youtube-top-6/
Average Joe's Guide to Success
Published: 2020-11-26 09:54:16

1. Finish the thing

The most important part is finishing the thing. All the other points in this list aim to make this point easier. (Usually) the best way to learn the thing is to do the thing and the only way to do the thing is to _actually do the thing_. You can't put your name on something if you don't finish it.

2. Keep it simple

Take (safe) shortcuts and drop features that are going to take time. Whether you're trying to learn a lot of things at once or hone in on one particular skill, being able to finish 10 things in an acceptable way will give you more variety of experience than spending 10 times as long on one thing that has to be perfect.

3. Repeat step 1

[This article about pottery](https://aliabdaal.com/pottery/) covers this point. If you're focusing on quantity over quality, you'll end up better at doing the thing, since you'll have done it so many times.

---

For me, the thing that I did was write this blog post. It's probably not perfect and I'm sure in its brevity I missed many things, but I'm a blogger now, and if I keep going, it will only get better. Now to hit that Publish button...
What to do when you get stuck on a problem?
Published: 2020-12-08 13:24:28

A very useful tip for developers

When you are stuck trying to fix something but you passed many hours working on it but still you don’t know the source of the problem/error … you checked the logs and still nothing, try this:

Go! leave it for a bit of time, I’m not saying take a break, because you should take a break that’s for your health, but what you should try, is leave the issue and work on another thing ;) Use your mind to work on something totally different to the issue for a few minutes or hours, then get back to the original problem and you will just easily find the source of the problem then the solution as simple as that! It’s like when someone needs some “space” to breathe.

I used this technique many times and it really helped me solve some problems. Sometimes we are just tired not physically but our minds are tired from working on the same thing! Give you mind some space let it breathe. When you succeed at doing something else your mind feels that it is better and can solve more problems than before.

Try this technique and see if it works for you :)
Solution to Fish task by codility 
Tags: stacks, python, programming
Published: 2020-12-08 13:19:01

This task is a training on how to use stacks https://app.codility.com/programmers/lessons/7-stacks_and_queues/fish/

The two main important things to notice so you can complete the task are:
1. A fish going upstream will NEVER meet a downstream fish that comes next
2. A upstream fish can ether eat all the downstream fish or die

This is a possible solution using one stack:
```python
def solution(A,B):
    alive = len(A)
    downstream = []
    for size,direction in zip(A,B):
        if direction == 1:
            downstream.append(size)
        else:
            while downstream:
                if size < downstream[-1]:
                    # upstream fish is eaten
                    alive = alive - 1
                    break
                else:
                    # upstream fish eats the other one
                    downstream.pop()
                    alive = alive - 1
    return alive
```
Solving day 8 of Advent of Code 2020 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2020-12-08 13:13:44

---
title: Solving day 8 of Advent of Code 2020 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2020 (day 8)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2020 in Javascript
---

{% youtube K9MTZoQ6cmY %}
Recursive File List from Google Drive
Tags: gdrive, spreadsheet
Published: 2020-12-08 13:03:13

{% youtube aokn0TbNpu0 %}

## Script Code 
```javascript
function onOpen() {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var searchMenuEntries = [{
        name: "Create a File List from Folder",
        functionName: "start"
    }];
    ss.addMenu("File List", searchMenuEntries);
}


function start() {
    var sheet = SpreadsheetApp.getActiveSheet();
    sheet.clear();
  //Comment below enable it if you need one sheet
    sheet.appendRow(["Name", "Folder", "Type", "Date", "Size", "URL" ]);

    var folderName = Browser.inputBox("Enter Folder Name (this will destroy the current spreadsheet):");
    //var folderName = "Safety Subdomain Assets";

    var folder = DriveApp.getFoldersByName(folderName);

    if (folder.hasNext()) {
        processFolder(folder);
    } else {
        Browser.msgBox('Folder not found!');
    }


    function processFolder(folder) {
        while (folder.hasNext()) {
            var f = folder.next();
            var contents = f.getFiles();
            addFilesToSheet(contents, f);
            var subFolder = f.getFolders();
            processFolder(subFolder);
        }
    }

    function addFilesToSheet(files, folder) {      
        var data;
        var folderName = folder.getName();
      //Delete this two lines below if you need one Sheet
//      sheet.appendRow(["Folder: " + folder]);
//      sheet.appendRow(["Name", "Folder", "Type", "Date", "Size", "URL" ]);
        while (files.hasNext()) {
            var file = files.next();
            Logger.log(file.getName());

            sheet.appendRow([
      file.getName(),
      folderName,
      file.getMimeType(),
      file.getDateCreated(),
      file.getSize()/1024,
      file.getUrl()  
      
    ]);
        }
    }
    
}
```
Daily Developer Jokes - Tuesday, Dec 8, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-12-08 13:00:21

---
title: "Daily Developer Jokes - Tuesday, Dec 8, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Tuesday%2C%20Dec%208%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12593b1b51e.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
A programmer was arrested for writing unreadable code. They refused to comment.
 -->
Product development in uncertain times: Interview with a visual app builder Product Manager
Tags: webdev, interview, startup, development
Published: 2020-12-08 13:00:05

An interview with the #UIBakery web app builder Product Manager, Tatiana Yudina, is out on startup.info! 💥

What's inside: product development tips on how to get through uncertain times with your business & innovate on the way.

Check it out 🦄 https://startup.info/tatiana-yudina-ui-bakery?utm_campaign=ui_bakery%20-%20startupinfo%20-%20article%20-%20cacq%20-%20tanya_interview%20-%20traffic&utm_source=DevTo&utm_medium=startups&utm_content=article_announce
How to create Apple like slideup panels in VueJS
Published: 2020-12-08 12:54:48

It’s no secret that Apple design and UI/UX is very good and beautiful, so you don’t have to reinvent the wheel if you want to use some of the iOS features, i.e. slide up panels.

As I was working on my app, which is just a plain web app but responsive for mobile, I constantly had this idea of pulling up the ‘modal’ or some kind of popup when users have to select something, like selecting the user, tennis court (in my case) or something else. So I had a little bit more options and I didn’t want to have all in one ‘view’. The first idea was a slide menu from left, like what all mobile apps are using for the pulling up menu. It worked pretty well, but I still felt that this wasn’t what I wanted, so I searched for something more appealing. As I’m working with VueJS, I oftentimes visit http://vuejsexamples.com which is a great source of new plugins for Vue, and I stumbled upon <a href="https://vuejsexamples.com/a-vue-3-wrapper-for-cupertino-library/">‘A Vue 3 Wrapper for Cupertino Library’</a> — exactly what I needed but it’s only for Vue 3 and I needed this plugin for Vue2. So I’ve done a little bit of research and saw that <a href="https://github.com/roman-rr/cupertino-pane">cupertino-pane</a> has great api which suits perfectly for me. I struggled a little bit to make it work, but in the end, it’s pretty simple, so I wanted to share this with you.

This is kinda starting point and you can basically copy and paste this code to get your pane in working mode.

I hope this helped you a little bit. If you read docs, you will find that there is a lot’s of options so make your hands dirty.

```
<template>
   <div class="panel">
     <h1>Header</h1>
     <p hide-on-bottom>Content</p>
   </div>
</template>
<script>
import { CupertinoPane } from 'cupertino-pane';
export default {
   data() {
      return {
        settings: {},
        drawer: {},
      };
    },
    mounted() {
        this.drawer = new CupertinoPane('.panel', this.settings);
        setTimeout(() => this.drawer.present({animate: true}));
    },
    methods: {
        presentDrawer() {
            this.drawer.present({animate: true});
        },
        destroyDrawer() {
            this.drawer.destroy({animate: true});
        },
        hideDrawer() {
            this.drawer.hide();
        },
        isHiddenDrawer() {
            console.log(this.drawer.isHidden());
        }
    },
};
</script>
<style>
</style>
```
Binary Search
Tags: algorithms, datastructures
Published: 2020-11-21 00:00:00

---
title: "Binary Search"
date: "2020-11-21T00:00:00.000Z"
---

A [binary search](https://en.wikipedia.org/wiki/Binary_search_algorithm) employs a divide and conquer strategy to find the position of a target value in a sorted list. A binary search is also known as a half-interval search, logarithmic search, or binary chop.

For binary search to work the __list must be sorted__ (sorting is a discussion for another time).

Given a sorted list from which we want to find the number `35`:

![Binary search](https://dereklawless.ie/69bb39999d686cd5bd658fac8257de59/binary-search-1.svg)

Begin by splitting the list into two halves, disregarding the half that is less than, or greater than, `35`:

![Binary search](https://dereklawless.ie/a4f92fc39596aa6c3f6cef2d1a4fad19/binary-search-2.svg)

Split the remaining half into two -- again disregarding the half that is less than, or greater than, `35`:

![Binary search](https://dereklawless.ie/2dcba72c5d77abc7e08d8c8eda740681/binary-search-3.svg)

Repeating again finds `35` at position `5` in the list:

![Binary search](https://dereklawless.ie/41dafd7eea649cc91cf036e642dcf6a8/binary-search-4.svg)

## Complexity
🔔 Complexity is considered in terms of worst case.

### Time
| |Notes
|- |-
|Θ(log n) |

### Space
| |Notes
|- |-
|Θ(1) |Requires three pointers to the list elements, regardless of list size

## An implementation
~~~typescript
// TypeScript
export interface IBinarySearchResult {
	position: number;
}

export function binarySearch<T>(values: T[] = [], target: T): IBinarySearchResult {
	let low = 0;
	let high = values.length - 1;

	while (low <= high) {
		const middle = Math.floor((low + high) / 2);
		if (values[middle] === target) {
			return {
				position: middle,
			};
		}
		if (target < values[middle]) {
			high = middle - 1;
		} else {
			low = middle + 1;
		}
	}

	return {
		position: -1,
	};
}
~~~

### A recursive alternative
~~~typescript
// TypeScript
export function binarySearchRecursive<T>(
	values: T[] = [],
	target: T,
	low: number = 0,
	high: number = values.length - 1): IBinarySearchResult {

	if (low <= high) {
		const middle = Math.floor((low + high) / 2);
		if (values[middle] === target) {
			return {
				position: middle,
			};
		} else if (target < values[middle]) {
			return binarySearchRecursive(values, target, low, middle - 1);
		} else {
			return binarySearchRecursive(values, target, middle + 1, high);
		}
	}

	return {
		position: -1,
	};
}
~~~

[Code on Github](https://github.com/dereklawless/algorithms-and-data-structures-katas/tree/master/src/algorithms/searching/binary-search)
Code conventions
Tags: programming, discuss, productivity, writing
Published: 2020-12-08 12:45:45

I'm thinking about this conventions, tell me what you think about that:
1) Use LBYL when you can, EAFP when you must.
2) In every function you can throw exceptions in order to explicit software bugs.
3) Error labels in the interface only to explicit user errors, included in the software working domain.
4) One or some optional very big try catch in order to save log data, and then crash.
5) Logs must be divided in two types: standard logs, and warning logs. (software errors are explicited only from exceptions)
REACT JS  DATATABLE
Published: 2020-12-08 12:26:06

I made a datatable in which i get data from API.
I want to click the rows components and then like if i click 3rd id then it goes to next page and shows full data of only  that particular 3rd ID employee  , and what now i get is all employees  data by click any row's ID 
how can i fix  this??
Advent of Code 2020-06 with R
Tags: rstats, adventofcode
Published: 2020-12-15 20:36:38

---
title: Advent of Code 2020-06 with R
published: true
date: 2020-12-06 00:00:00 UTC
tags: rstats, adventofcode
canonical_url: https://colinfay.me/aoc-2020-06/
---

Solving Advent of Code 2020-06 with R.

[Disclaimer] Obviously, this post contains a big spoiler about Advent of Code.

## Instructions

Find the complete instructions at:[https://adventofcode.com/2020/day/6](https://adventofcode.com/2020/day/6).

## R solution

### Part one

```r
library(magrittr)
library(purrr, warn.conflicts = FALSE)
# Read the data
readLines("2020-06-aoc.txt" ) %>% 
  # pasting everything into one big character string
  paste(collapse = "\n") %>% 
  # splitting where there are two \n\n (new lines)
  strsplit("\n\n") %>% 
  .[[1]] %>%
  map_dbl(~ {
    # Removing the new lines of each group
    .x <- gsub("\n", "", .x)
    # Splitting the string
    strsplit(.x, "") %>%
      .[[1]] %>% 
      # Computing the number of unique answer
      unique() %>%
      length()
  }) %>%
  sum()

## [1] 6534
```

### Part two

```r
library(dplyr, warn.conflicts = FALSE)
# Read the data
readLines("2020-06-aoc.txt" ) %>% 
  # pasting everything into one big character string
  paste(collapse = "\n") %>% 
  # splitting where there are two \n\n (new lines)
  strsplit("\n\n") %>% 
  .[[1]] %>%
  map_dbl(~ {
    # Removing the new lines of each group
    x <- strsplit(.x, "\n")[[1]]
    # Getting the group size
    ngroup <- length(x)
    # Splitting the original string
    strsplit(.x, "")[[1]] %>%
      data.frame(
        x = .
      ) %>%
      # Counting the number of occurrences of each letter
      count(x) %>%
      # Keeping only the questions that occur in all
      filter(n == ngroup) %>%
      nrow()
  }) %>%
  sum()

## [1] 3402
```
Fun and usefull links
Tags: security, devops
Published: 2020-12-08 12:20:05

If you are looking for short and usefull links to watch during your lunch time or limited free time have a look at the list below.

The list contains short 2-5 minute videos of usefull links on the web. The topics range from security, development or just making your day better links ( of course in general all related to web development)

Have a look, leave your comments and if you have suggestions do write any time.

https://www.youtube.com/watch?v=PO9e7v-NyT8&list=PLNQq42pqd-rxFiAmg-f-ckS2x_HC_XKM7
Try to use cl-lzma
Tags: commonlisp, lzma
Published: 2020-12-08 12:09:38

---
title: Try to use cl-lzma
published: true
description: 
tags: #commonlisp #lzma
//cover_image: https://direct_url_to_image.jpg
---

I tried to use cl-lzma. I didn’t know that the vector should be static-vectors:vector instead of vector.  Anyways, now I know.

```Lisp
(ql:quickload 'cl-lzma)
(use-package :cl-lzma)
(use-package :static-vectors)
(setq a (multiple-value-list 
                  (with-static-vector 
                              (v 100 :initial-contents (loop for i from 0 below 100 collect 8)) 
                    (lzma-compress v))))
(apply #'lzma-decompress a)
```

And, finally, it got 

```Lisp
#(8 8 8 8 8 8 8 8 8 8 8
 8 8 8 8 8 8 8 8 8 8 8 8 
8 8 8 8 8 8 8 8 8 8 8 8 8
 8 8 8  8 8 8 8 8 8 8 8 8
 8 8 8 8 8 8 8 8 8 8 8 8 8 
8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8
 8 8 8 8 8 8 8 8 8 8 8 8 8 8
 8 8 8 8 8 8 8 8 8)
```

for decompression, which is correct!
Commit and Branch Name Generator for Git
Tags: git, javascript, clitool, devtool
Published: 2020-12-08 11:47:31

Hey!

Recently, my friends and I developed a CLI tool for Git. It generates commit titles and branch names for you. It ensures that open-source contributors don't violate a project's commit and branch name guidelines. It also suggests emojis for commit titles based on what you're working. You can check it out here: https://www.npmjs.com/package/gitg0.

Here's the Github repository if you want to report something: https://github.com/dotrachit/gitg0.

Thank you.
How I can ensure that no bots visit the links that I generate and send via email?
Tags: help, web, links
Published: 2020-12-08 11:21:32

In my application I generate links in the following form:

https://example.com/^token^

Where token is a 5 byte cryptographically-secure random token.

As I ask via:

https://webmasters.stackexchange.com/questions/132427/how-i-can-ensure-that-a-link-sent-via-email-is-oppend-only-via-a-mail-client

I need to prevent bot visits towards these links. So I want to ask:

* Is `robots.txt` and `nofollow,noindex` meta enough to prevent the bots from crawling the content?
* Does the token length makes bot's life hard to brute-force links?
* Is there a way to ensute that a link is oppened via mail client either web or traditional (SMTP/POP3/IMAP based one)?
Setting up recurring CloudWatch alarms
Tags: aws, cloudwatch, reinvent
Published: 2020-12-08 11:35:44

In this post we will see how to turn a single-fired CloudWatch alarm into a recurring reminder. 

We will explore two different solutions using native AWS services, with detailed implementation and when you should use one or the other.

🎁 BONUS: both implementations are available using Serverless Framework


---


👉 [CONTINUE READING HERE](https://mklein.io/2020/12/08/recurrent-alarms/)