teleren/devto huggingface dataset:
Creating an Animated 404 Page
Tags: html, codepen, css, codenewbie
Published: 2021-01-13 17:51:43

Creating an Animated 404 Page using HTML & CSS | Responsive Web Design

demo ==> https://codepen.io/Bilal1909/pen/QWyZOqV


<img src="https://i.postimg.cc/W1JGy6kK/screenshot-codepen-io-2021-01-13-22-47-44-705.png">
MERN or MERN-Apollo/ql 
Tags: graphql, react, express, mongodb
Published: 2021-01-13 17:46:03

Which iS a typical stack to use? Or is asked for? 
Is MERN + Apollo/GraphQL used together often? 
Or just MERN? 
Is there a “line” of when you need more data or options for a project that determines what you use?
Upcoming Demo Jam and The Latest Articles - 13 January 2020
Published: 2021-01-26 19:40:02

---
title: Upcoming Demo Jam and The Latest Articles - 13 January 2020
published: true
date: 2021-01-13 17:22:00 UTC
tags: 
canonical_url: 
---

#  Upcoming Demo Jam and The Latest Articles - 13 January 2020

## Upcoming Demo Jam (Ask Live Questions of Pierre) - 21 Jan

[https://www.cloudera.com/about/events/webinars/demo-jam-live-returns-build-data-flow-with-apache-nifi.html?utm\_medium=tspann](https://www.cloudera.com/about/events/webinars/demo-jam-live-returns-build-data-flow-with-apache-nifi.html?utm_medium=tspann)

## Your Top 5 Apache NiFi Questions Answered By Experts

[https://blog.cloudera.com/top-5-questions-about-apache-nifi/](https://blog.cloudera.com/top-5-questions-about-apache-nifi/)

## Apache NiFi - The Data Movement Enabler in Hybrid Cloud

[https://blog.cloudera.com/apache-nifi-the-data-movement-enabler-in-a-hybrid-cloud-environment/](https://blog.cloudera.com/apache-nifi-the-data-movement-enabler-in-a-hybrid-cloud-environment/)

## Real-Time Transit Information Ingest

[https://www.datainmotion.dev/2021/01/flank-real-time-transit-information-for.html](https://dev.to/tspannhw/flank-real-time-transit-information-for-ny-nj-ct-transcom-5f7k)

## Using Kudu as a Cache for REST Streams

[https://www.datainmotion.dev/2021/01/flank-using-apache-kudu-as-cache-for.html](https://dev.to/tspannhw/flank-using-apache-kudu-as-a-cache-for-fda-updates-4knj)

## Simple Change Data Capture with SQL

[https://www.datainmotion.dev/2020/12/simple-change-data-capture-cdc-with-sql.html](https://dev.to/tspannhw/simple-change-data-capture-cdc-with-sql-selects-via-apache-nifi-flank-19m4)

## Ingesting Websocket Data Live

[https://www.datainmotion.dev/2020/12/ingesting-websocket-data-for-live-stock.html](https://dev.to/tspannhw/ingesting-websocket-data-for-live-stock-streams-with-cloudera-flow-management-powered-by-apache-nifi-4oom)

## Smart Stock Processing with Apache NiFi

[https://www.datainmotion.dev/2020/12/smart-stocks-with-flank-nifi-kafka.html?es\_id=1fb9486166](https://www.datainmotion.dev/2020/12/smart-stocks-with-flank-nifi-kafka.html?es_id=1fb9486166)

## More Apache NiFi Resources

[https://github.com/tspannhw/EverythingApacheNiFi](https://github.com/tspannhw/EverythingApacheNiFi)
What Are the Best Magento 2 B2B Features?

Tags: ecommerce, magento2, webdev, b2b
Published: 2021-01-13 17:00:24

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vshoeaw3skl1z5vuo9ut.png)

The updated Magento 2 version has a lot of features to improve B2B websites performance. 

Let’s overview the best Magento 2 features for B2B business that might come in handy for your business strategy:

* **Built-on self service tools**. Magento 2 allows you to optimize your store’s user accounts without a necessity to integrate extra plugins. Thus, your clients will be able to enjoy the convenience of their accounts management, and your interaction with customers will become better as well. You will receive full-fledged feature set out of the box to group your audience and conduct other actions to treat your customers in an individual way;

* **Advanced account configurations**. It includes an option of assigning multiple users to the same account. Also, you can set up various rules for chosen accounts, which is a good way to run two kinds of business on the same eCommerce website;


* **Quote requests management**. In contrast to the Magento 1 version, which required additional extensions to interact with buyers, Magento 2 has got everything planned down to the last detail. Now you don’t need to integrate extra modules. Besides, all setting prices options are also available in the Magento 2 version by default;


* **Refined shipping options**. Magento 2 offers much easier ways to arrange shipping processes properly;


* **Mobile-friendliness**. The updated Magento version provides more capabilities to develop the Mobile first strategy for any eCommerce business. With up-to-date technologies every business owners can create their own mobile app using the same tools, needed for a website building.

Find out more about the best features your B2B eCommerce store certainly should have, [reading this article](https://dinarys.com/blog/magento-2-b2b-feature-list-for-ecommerce).
Tabela HTML com as cores das linhas alternadas
Tags: braziliandevs, codepen, html, css
Published: 2021-01-13 16:58:52

Olá pessoal, hoje irei mostrar uma dica rápida e bem legal para deixar sua tabela em **HTML** mais bonita.

Podemos aplicar o efeito das linhas da tabela alternando as cores com apenas **CSS**, utilizando a pseudo-classe `:nth-child()`, que possibilita selecionar os elementos de acordo com sua posição.

No exemplo abaixo utilizei a pseudo-classe `:nth-child()` com o valor `even` para pegar os elementos `tr` (linha da tabela) com as posições pares, mas também podemos utilizar `odd` para selecionar as posições ímpares.

{% details Código **HTML**: %}
```html
<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Idade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Wesley</td>
      <td>26</td>
    </tr>
    <tr>
      <td>João</td>
      <td>80</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>52</td>
    </tr>
    <tr>
      <td>Tereza</td>
      <td>36</td>
    </tr>
    <tr>
      <td>Carlos</td>
      <td>29</td>
    </tr>
    <tr>
      <td>Monize</td>
      <td>22</td>
    </tr>
    <tr>
      <td>Zé</td>
      <td>63</td>
    </tr>
    <tr>
      <td>Carla</td>
      <td>21</td>
    </tr>
    <tr>
      <td>Isabel</td>
      <td>31</td>
    </tr>
    <tr>
      <td>Fernando</td>
      <td>14</td>
    </tr>
    <tr>
      <td>Rafael</td>
      <td>33</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Média das idades</th>
      <td>37</td>
    </tr>
  </tfoot>
</table>
```
{% enddetails %}

{% details Código **CSS**: %}
```css
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

table {
  text-align: center;
  font-family: Montserrat, Arial, sans-serif;
  background:#fafafa ;
  margin: 0 auto;
  width: 80%;
}

tr:nth-child(even) {
  background:lightgray;
}
```
{% enddetails %}


{% codepen https://codepen.io/franciscochaves/pen/NJVNpZ default-tab=result %}

Pronto pessoal, aprendemos como deixar as linhas da tabela com cores alternadas, valeu 😎✌!
Chap_APP_Server(BY PYTHON)
Tags: python, socketprogramming
Published: 2021-01-13 16:58:29

Created an Chat Server and data server by using the Socket Programming by creating the both server and Client Machine as Sender and Receiver Both ( By the UDP Protocol)

--> Link- 
https://www.linkedin.com/posts/shashwatsing_github-python-socketprogram-activity-6754615251150401536-2KvG 

--> Github Link - 
https://github.com/Shashwatsingh22/Chat-Server-App-
Storing Desktop App Data
Published: 2021-01-13 16:51:40

I like to think of my PC’s document directory as a sacred place. As its name suggests, the documents directory is where I store my documents, in a neatly organised set of subdirectories.

It is not a dumping ground for random files and folders; this is what I use my desktop for!

I find it somewhat aggravating that so many desktop applications developers pollute the divined documents directory with their application-specific data. I hope that after reading this post, any offending developers will reconsider their choices and make better decisions on their next app.

## Special Folders
Microsoft was kind enough to grace our hard drives with special folders such as My Music and My Pictures. These are just two of the 48 special directories defined in the [‘Environment.SpecialFolder‘](https://docs.microsoft.com/dotnet/api/system.environment.specialfolder?view=net-5.0&WT.mc_id=dotnet-desktop-mijam)
 enum, part of the ‘System‘ namespace.

Two of my most used SpecialFolders are **_ApplicationData_** and **_CommonApplicationData_**. *ApplicationData* is for application-specific data for the current roaming user, and *CommonApplicationData* is for application-specific data that is used by all users.

So, when you build your next fantastic desktop application, I implore you to consider using one of these special folders for your application-specific content, rather than polluting your user’s document directory. It’s super easy to use!

#### Show me the code! 
```csharp
public void CreateApplicationSpecificGuff(string directoryName)
{
	var appDataPath = Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData));
	var myAppsDataDirPath = Path.Combine(appDataPath, directoryName);
	Directory.Create(myAppsDataDirPath);
}
```

### How to deal with existing pollution?
When I find applications that absolutely must have their app-specific data in the document’s directory, I tend to set their directories to Hidden. Out of sight, out of mind.
AutoCalc - Calculator and Unit Convertor App
Published: 2021-01-13 16:41:27

Download Link👉: https://shorturl.at/yMRZ3

AutoCalc will do the math for you. All new all-in-one calculator for you.
Regular, scientific, and programmer calculator, as well as currency and unit converters and much more, are all here in one place.

1. Basic calculator: Edit history and view previous results in the regular calculator.
2. Scientific calculator: Find trigonometric functions, logarithms, and more additional features in the scientific calculator.
3. Currency converter: Daily updated exchange rates in the universal currency converter.
4. Programmer Calculator: Convert Data between Hexadecimal, Binary, Octal, and much more features.
5. Converters: Freely convert units of length, area, volume, speed, time, mass, and much more in the unit converter
Styling vs Scripting. Which one is the hardest to learn/control?
Tags: javascript, discuss, css, question
Published: 2021-01-13 16:27:27

If you're a common web developer or even when you just started, you'd probably already have heard about the terms `Javascript` and `CSS`. Both are meant for different purposes and both (most of the time) are necessary for delivering the product.

However, many (web) developers have a prefer to pay more attention to one of the two sides. `Javascript` is a programming/scripting language that allows you to implement complex features on web pages. Think of **data fetching** or **interactive UI** (like modals, triggers etc.). By programming in Javascript you'll have to think logically and sometimes be creative with solutions/functions. With `CSS` in that case, a stylesheet language, it is not possible to implement features like we just mentioned. However that doesn't mean `CSS` is **not** important or even complex. The opposite is true! Many software developers who started once with their career as programmer, chose for backend programming because of the complexity of `CSS`. You have to think about a lot of things by styling with `CSS`. Think of responsive web design, mixins, spacing, positioning etc.

For both many developers/companies have introduced frameworks & libraries to make life for webdevelopers easier. Think of React.js (JS), Vue.js (JS), Bulma (CSS), Tailwind(CSS).
But the fact remains that many developers still prefer one over the other.

**So what's your opinion about it?** Is scripting in Javascript harder or styling in CSS? And why you prefer one over the other? Let me know in the comments below!
Promise.race()
Tags: javascript, webdev, codenewbie, beginners
Published: 2021-01-13 16:10:48

Returns the first resolved promise from the list.

```js
const getAnyItem = async (itemId1, itemId2) => {
  return Promise.race([
    fetch(`https://jsonplaceholder.typicode.com/albums/${itemId1}`),
    fetch(`https://jsonplaceholder.typicode.com/albums/${itemId2}`),
  ]).then((item) => {
    // ...
  });
};
getAnyItem(2, 5);
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Data Structures and Algorithms in Javascript - Part 3
Tags: mostfrequent, array, chunks, nestedarray
Published: 2021-01-13 16:07:47

This is Part 3 of my series of posts on [Data Structures and Algorithms in Javascript...to get you started](https://dev.to/jeenajohn/data-structures-and-algorithms-in-javascript-to-get-you-started-4hel).

In Part 3, we will cover 

* Most frequently occurring item in an array
* Sum of elements of a nested array
* Array chunks




**1. Find the most frequently occurring item in an array**

Here, a hash table is used to store each element of the array and its frequency (count) as key-value pairs. 


```javascript
let array = [2, 4, 1, 6, 1, 40, 1, 2, 4, 10, 1];

function mostFrequent(arr) {
  let hashMap = {};
  let mostFreq = { value: undefined, count: 0 };
  for (let i = 0; i < arr.length; i++) {
    if (!hashMap[arr[i]]) {
      hashMap[arr[i]] = 1; //set count to 1 initially
    } else {
      ++hashMap[arr[i]]; //increment count
    }
    if (mostFreq.count < hashMap[arr[i]]) {
      //make the new element the most frequent one
      mostFreq.value = arr[i];
      mostFreq.count = hashMap[arr[i]];
    }
  }
  return mostFreq.value;
}

console.log(mostFrequent(array));
```



**2. Find the sum of elements of a nested array**

Recursion is used to find the sum.

```javascript
let array = [1, 2, 3, [4, 5], [6, 7, [8, 9]]];

function findSum(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].length > 1) {
      sum += findSum(arr[i]); //nested array
    } else {
      sum += arr[i];
    }
  }
  return sum;
}

console.log(findSum(array));
```


**3. Split an array into chunks**


```javascript
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function chunkArray(arr, size) {
  let chunk = [];
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (chunk.length < size) {
      chunk.push(arr[i]);
    } else {
      result.push(chunk); //add chunk to result
      chunk = []; // reset chunk
      chunk.push(arr[i]);
    }
  }
  if (chunk.length > 0) {
    result.push(chunk);
  }
  return result;
}

console.log(chunkArray(array, 3));
```
Jan 13: DEV Daily Discovery
Tags: discuss, bestofdev
Published: 2021-01-13 15:53:51

Hey folks!

I want to try something new.

Please make a comment to this thread with a DEV post that you think deserves to be read more broadly. If it's your own post that's fine.

It could be recent, or it could be classic.

And then read through the thread and ❤️ posts where you like. I'm hoping that the wisdom of the crowds can help unearth some great content every day.

The feed already works this way, but I think this could be a fun way to complement the feed for a different kind of discovery.

Use the post's `link` liquid tag to display it fully, i.e.:

```liquid
{% link https://dev.to/devteam/for-empowering-community-2k6h %}
```

And feel free to add _why_ you want to want to give it more love.

Don't worry about whether you've picked _the best post_, let the readers decide if it should rise to the top.
REST Client - VS Code Extension Highlight
Tags: webdev, productivity, vscode
Published: 2021-01-13 15:46:51

---
title: REST Client - VS Code Extension Highlight
published: true
description: Testing and debugging APIs within Visual Studio Code is made a lot easier with the REST Client extension. Send HTTP requests to RESTful, GraphQL and other APIs fast and save your configurations for later use. In this video we demo some amazing features and discuss the customization options available.
tags: webdev, productivity, vscode
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/im5xuadzk7saahvoyij8.png
---

{% youtube CLfz_CDnSV4 %}

Testing and debugging APIs within Visual Studio Code is made a lot easier with the REST Client extension. Send HTTP requests to RESTful, GraphQL and other APIs fast and save your configurations for later use. In this video we demo some amazing features and discuss the customization options available.
Temporary mail address forwards incoming mails to you
Tags: spam, email, tempmail, emailforwading
Published: 2021-01-13 15:32:19

---
title: Temporary mail address forwards incoming mails to you
published: true
description: Protect your email address from being sold or spammed
tags: spam, email, tempmail, emailforwading
cover_image: https://miro.medium.com/max/704/1*l_XazJkhzPy2Afpd-tfY2g.jpeg
---
There are dozens of services or apps that require a more or less extensive registration to be used — whether it makes sense or not. So it happens quickly that your own email address is entered in dozens of databases and, depending on the terms of use, is also often used for advertising purposes. If you want to prevent this or use services a little more anonymously, you can fall back on temporary mail addresses. Such services have been around for years and they all actually work on the same principle: generate mail, confirm registration, deactivate mail. The latter usually happens automatically after a time that varies depending on the service. The service [altmails](https://altmails.com) belongs to the category of such mail service providers, but without time restrictions and with a response option.

On the website, you can create any number of randomly generated mail addresses. In contrast to the alternatives mentioned, this one is linked to your correct email address. This has the advantage that incoming emails are automatically forwarded to your inbox. In this way it is also possible to answer e-mails: For this purpose, a further random address is generated for each forwarded e-mail, which is then used when answering and is only valid once. If you no longer need a generated email address or if emails are forwarded, you will find a link in every forwarded email, which you can use to unlink the link with your real email address — then all emails wander in digital nirvana.

[altmails](https://altmails.com) takes a slightly different route than the usual temp mail providers. It is emphasized that your data will not be passed on. Incoming and forwarded emails are not saved on the server, which means that deleted emails cannot be restored. At the moment the service is completely free of charge, one or the other paid premium feature is planned for the future, which will then also finance the service. Always important to know if you are to trust a free service. I find it very interesting for some application purposes and if you prefer to use classic disposable mail, you can use [TempMail](https://tempmail.altmails.com) as an alternative service.

altmails service: https://altmails.com
TempMail service: https://tempmail.altmails.com
Day 13 - Boats to Save People
Tags: leetcode, python, challenge
Published: 2021-01-13 15:31:43

>The `i`-th person has weight `people[i]`, and each boat can carry a maximum weight of `limit`.

>Each boat carries at most 2 people at the same time, provided the sum of the weight of those people is at most `limit`.

>Return the minimum number of boats to carry every given person.  (It is guaranteed each person can be carried by a boat.)

__Example 1:__

```
Input: people = [1,2], limit = 3
Output: 1
Explanation: 1 boat (1, 2)
```

__Example 2:__

```
Input: people = [3,2,2,1], limit = 3
Output: 3
Explanation: 3 boats (1, 2), (2) and (3)
```

__Example 3:__

```
Input: people = [3,5,3,4], limit = 5
Output: 4
Explanation: 4 boats (3), (3), (4), (5)
```

__Note:__

* `1 <= people.length <= 50000`
* `1 <= people[i] <= limit <= 30000`

## My Tests

[Link to code](https://github.com/ruarfff/leetcode-jan-2021)

```python
import pytest
from .Day13_BoatsToSavePeople import Solution

s = Solution()


@pytest.mark.parametrize(
    "people,limit,expected",
    [
        ([1, 2], 3, 1),
        ([3, 2, 2, 1], 3, 3),
        ([3, 5, 3, 4], 5, 4),
        ([2, 2], 6, 1),
        ([3, 1, 7], 7, 2),
        ([2, 4], 5, 2),
    ],
)
def test_num_rescue_boats(people, limit, expected):
    assert s.numRescueBoats(people, limit) == expected
```

## My Solution

[Link to code](https://github.com/ruarfff/leetcode-jan-2021)

```python
from typing import List


class Solution:
    def numRescueBoats(self, people: List[int], limit: int) -> int:
        people.sort()
        boats = 0
        i = 0
        j = len(people) - 1
        while i <= j:
            i = i + 1 if people[i] + people[j] <= limit else i
            boats += 1
            j -= 1
        return boats
```

## Analysis

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ti70za12xuqscjj6ju6k.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/91h5iyu8p518u02qi3d4.png)

## My Commentary

I tried every which way to not have to sort the list for this. I tried crazy stuff like using a HashMap to store calculations but if there's a better performing solution where you don't have to sort the list first, I am not currently capable of figuring it out. 

In the above solution, we first sort the people by weight, lightest to heaviest. Recall there was a requirement:

>Each boat carries at most 2 people at the same time

This kind of makes our job easier since we only need to check if the heaviest person + the lightest person can fit. If `heaviest + lightest > limit` then no other combination of `heaviest` and anything else can work.

Given that fact, we look at the heaviest and lightest in each iteration. If they both fit, we count one boat. If not, heaviest gets their own boat because __It is guaranteed each person can be carried by a boat__. We keep the index at the lightest person if that's the case and check them with the next heaviest person. 

`people.sort()` is `log N` here and we go over the list once more to count the boats giving `O(N log N)`.
Using a Graph Database for Better Understanding of Unfamiliar Code
Published: 2021-01-13 15:21:10

Like [Dustin](https://dev.to/dustinbyrne/uncovering-critical-data-access-using-appmaps-3fn3), I worked on a project for the AppLand Hackathon. I was particularly interested in understanding how to make the visualizations generated from recordings in [AppMaps](https://github.com/applandinc/appmap) easier to understand. 

The basic structure of code can be somewhat hidden by its use of trivial helper classes. Theses are classes with simple functions (getters, setters, predicates, etc) that don't use other classes. I wanted to see if there was a way to use a graph database to help identify such classes in an unfamiliar code base.

I put together a simple JavaScript [program](https://gist.github.com/apotterri/5d4014f47e3dbd4c000ec4920835280a#file-load-js) that uses the [CallTree](https://github.com/applandinc/models-js/tree/master/src/callTree) class from the [AppMap model code](https://www.npmjs.com/package/@applandinc/appmap-models) to a graph in a [Neo4j](https://neo4j.com/) database. For each function in the call tree, it creates a node for the class that contains the function. It creates an edge from that class to the classes containing each of the functions called.

Once that's in place, a [cypher](https://neo4j.com/docs/cypher-manual/current/) query shows all the "leaf" classes, i.e. those that don't call methods in other classes:

```
MATCH(n)
WHERE NOT (n)-[:CALLS]->()
RETURN n 
ORDER BY n.defined_class 
LIMIT 10;
```

This query returns 10 classes that don't have a `CALLS` relationship with any other classes. 

These are the simple classes I was looking for, and excluding them from AppMaps definitely improved the visualizations.

You can read more about my Hackathon project [here](https://appland.org/code-gallery/querying-appmap-data/), and check out the [code](https://gist.github.com/apotterri/5d4014f47e3dbd4c000ec4920835280a), too.