teleren/devto huggingface dataset:
How to serve WebP images with a Drupal 8/Drupal 9 site
Tags: drupal, webp, imageapi
Published: 2020-12-11 08:46:13

## Requirements
### PHP
Your web server needs to support WebP through PHP. 
PHP 5 >= 5.4.0
GD Library

#### Check your PHP setup
How to check if everything is working as expected:
```php -i | grep 'WebP'```

If everything is working fine you should see
```WebP Support => enabled```

We should be ready to go on, yay 🎉

_If you get another output, you might need to enable/install libgd and enable it in your PHP.ini._

### Drupal
This tutorial only works with Drupal 8/9. As a start you'll need to enable/install some modules:

#### ImageAPI Optimize
https://www.drupal.org/project/imageapi_optimize
The module has built in support for core Image styles and a service allowing use in third party modules.

#### ImageAPI Optimize WebP
https://www.drupal.org/project/imageapi_optimize_webp
⚠️ Make sure to enable the "ImageAPI Optimize WebP Responsive" submodule if you're using the Responsive Image module in Drupal Core.

#### ImageAPI Optimize Binaries
https://www.drupal.org/project/imageapi_optimize_binaries
This module is optional but it provides support for popular binary image processors like JpegOptim, PngQuant, AdvPNG etc.

## Drupal Configuration
Head over to `/admin/config/media/imageapi-optimize-pipelines` for the Image API configuration.

![The Image Optimize configuration page should look similar to this one. Note that you might only see the "Local Binaries" Pipeline first (if you installed it)](https://dev-to-uploads.s3.amazonaws.com/i/1ck4yaadh2ptuwjq9v67.png)

### Let's create a new pipeline
1. Add a new optimization pipeline
By clicking on `+ Add optimization pipeline`

2. Name your pipeline
I will call the pipeline `optimize images` but you can name it whatever you would like.

3. Choose your processor
We choose `WebP Deriver`.

4. Set image quality
You can set the image quality here, 80–90% should serve with good overall quality. 100% will be lossless.

5. Save
Click on "Save configuration" and you're done.
⚠️ Don't forget to clear the Drupal cache after this.

_You should place the WebP processor before any other compression processors to avoid multiple compression of an image. This can have an inverse affect and provide a lower quality image at a larger file size._

Enjoy WebP images with your Drupal site!
Solves 0 function found on Azure Function - Linux Consumption plan
Published: 2020-12-11 08:25:31

I encounter an issue related archive. I trip to Japan. I use a desktop machine in Seattle, however, now I'm using my old laptop. I replaced the laptop with the desktop as my main machine. 

The behavior is, I use the same Azure Functions sample. I crone the repo, In this case, the app is Java. I build it with `mvn clean package` then I archive it to a zip file. like this. 

```powershell
# Create a zip file
$currentDir = pwd
$zipFile = join-path $currentDir sample-cold.zip

Compress-Archive -Path '.\target\azure-functions\sample\*' -DestinationPath $zipFile -Force
```
I use the same logic and create an archive. However, the archive I created on my desktop works, but not for a zip from laptop. 

When I test both archives, extract these, it looks the same. I move the archive to WSL2 and extract these with unzip. It looks the same. According to the Azure Functions Host log, it says

```bash
0 functions found
``` 

It is the issue of the archive. I did `docker exec` and find the root cause. When I go to `/home/site/wwwroot` I found the files that is downloaded and extracted zip file. 

```bash
root@658408192cc6:~/site/wwwroot# ls -l
total 57867
-rw-rw-r-- 1 app app      354 Dec 10 11:51 'HttpTrigger-Java\function.json'
-rw-rw-r-- 1 app app     5267 Dec 10 11:51  codeless-azure-function-Test-1.0-SNAPSHOT.jar
-rw-rw-r-- 1 app app       24 Dec 10 19:42  host.json
-rw-rw-r-- 1 app app   317195 Dec 10 11:51 'lib\FastInfoset-1.2.16.jar'
-rw-rw-r-- 1 app app    30035 Dec 10 11:51 'lib\accessors-smart-1.2.jar'
-rw-rw-r-- 1 app app    62983 Dec 10 11:51 'lib\activation-1.1.jar'
-rw-rw-r-- 1 app app    94485 Dec 10 11:51 'lib\adal4j-1.6.2.jar'
-rw-rw-r-- 1 app app    17079 Dec 10 11:51 'lib\adapter-rxjava-2.4.0.jar'
-rw-rw-r-- 1 app app   136324 Dec 10 11:51 'lib\aether-api-1.0.2.v20150114.jar'
-rw-rw-r-- 1 app app   172998 Dec 10 11:51 'lib\aether-impl-1.0.2.v20150114.jar'
-rw-rw-r-- 1 app app    30705 Dec 10 11:51 'lib\aether-spi-1.0.2.v20150114.jar'
```

It is weird, It was not the directly. 

# Solution

I found the issue was `Compress-Archive` command let version. The version I had issue is

```powershell
> $Host.Version

Major  Minor  Build  Revision
-----  -----  -----  --------
5      1      19041  610
```
I update the version to 

```powershell
> $host.version

Major  Minor  Build  Revision
-----  -----  -----  --------
7      1      0      -1
```
This version looks work. Now I can see the directory. 

The problem of the extract zip only happens with Azure Functions Host. Probably it is because of the library on C#.

I can see several `Compress-Archive` command let issue with Linux. 
[Compress-Archive on linux creates zip files with no file permissions](https://github.com/PowerShell/Microsoft.PowerShell.Archive/issues/93).  

Happy coding with Azure Functions!
Error Handling Responsibility Principles
Tags: errors, handling, responsibility, principle
Published: 2020-12-11 08:20:26

---
title: Error Handling Responsibility Principles
published: true
description: 
tags: error, handling, responsibility, principle
---


#### Principle 1

> The code closest to the source of the error is responsible for **providing as much detail** about the error and if possible **classifying it** if such is needed.

**Motivation:** The further you get from the error the harder this becomes.


#### Principle 2

> Code further up in the call stack is responsible for **deciding** on how to act on the error given the current context.

**Motivation:** Called code has no idea of the context.

#### Example

A DB error is thrown. The code closest to the error classifies it as a socket time out. This is bubbled up in the call stack which then decides to not retry because a user has decided that the query is no longer relevant.

#### Special Note

These principles apply not only within an in-memory call stack but also across e.g. micro-service boundaries.

Do you disagree? I would love your input.
What's your opinion about Framer Motion vs React Spring?
Tags: discuss, react, animation, opinion
Published: 2020-12-11 08:00:33

#Intro
After the javascript Framework Vue.js, React.js is my favorite Javascript library to work with. React.js is flexible, the most used library and has a big community.
 
React also has a lot of libraries for transitions and animations like [Framer Motion](https://www.framer.com/motion/) and [React Spring](https://www.react-spring.io/). I've read a lot about those two libraries but I can't decide which to use for my future projects.

#Question
What's your opinion about it?

I am wondering about how you think about those two libraries and what are the pros and cons of both? Lets discuss in the comments below.
How to Enable Wrap Text Feature in Excel Office 365? – Quick Steps
Tags: excelbasics, excel365tutorials, wraptextinexcel
Published: 2020-12-14 12:19:37

---
title: How to Enable Wrap Text Feature in Excel Office 365? – Quick Steps
published: true
date: 2020-12-11 08:00:20 UTC
tags: ExcelBasics,Excel365Tutorials,WrapTextinExcel
canonical_url: https://geekexcel.com/how-to-enable-wrap-text-feature-in-microsoft-excel-365/
---

The wrap Text feature enables you to write multiple lines inside a single cell. The Wrap Text feature automatically applies the line break while you typing the content.

In this article, we will demonstrate the **wrap text feature in Excel Office 365 ** with simple and quick steps. Let’s get into this article!!
## Enable Wrap Text Feature in Excel:

- Open a **New Excel Sheet**.
- Type a paragraph in the cell. You can find that the lines are not fit into the single cell.
- Now, select the cell.

![Wrap Text example 1](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/03/Screenshot_11.png)<figcaption id="caption-attachment-4556">Wrap Text example 1</figcaption>

- You will need a line break to type multiple lines in a single cell. You can enable this feature by clicking the **Wrap Text Option** which is available in the **Home Menu.**

![Wrap Text example 2](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/03/Screenshot_1-26.png)<figcaption id="caption-attachment-4557">Wrap Text example 2</figcaption>

- Just click on the **Wrap Text Option.**
- Now, you can find changes in the paragraph that you have typed.

![Wrap Text example 3](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/03/Screenshot_2-23.png)<figcaption id="caption-attachment-4558">Wrap Text example 3</figcaption>

## A Quick Synopsis:

We hope that this article helps you to know about **wrap text in Excel 365**. Please share your comment in case of any **queries.** Your **valuable suggestions** are always welcome. Stay connected to get instant updates. Thank you for visiting our Website [**GeekExcel**](https://geekexcel.com/).

## Related Articles:

- [**How to change the font size in Excel?**](https://geekexcel.com/how-to-change-font-size-in-microsoft-excel-365/)
- [**change the font color in Excel?**](https://geekexcel.com/how-to-change-font-color-in-microsoft-excel-365/)
- [**How to change the font style in Excel?**](https://geekexcel.com/how-to-change-font-style-in-microsoft-excel-365/)
Guida ai React Hooks
Tags: javascript, react, reacthooks
Published: 2021-10-12 09:07:28

---
title: Guida ai React Hooks
published: true
date: 2020-12-11 08:00:00 UTC
tags: javascript,React,ReactHooks
canonical_url: 
---

![Ract Hooks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlw4n53uat3zd5tpu0yq.png)

Se fai un lavoro come il mio, l’approfondimento è una delle regole da seguire nel quotidiano. Nell’ultimo periodo mi è capitato di approfondire i **React Hooks** e ho deciso di scrivere per il blog dell’azienda in cui lavoro una guida su questo tema. La **guida ai React Hooks** , divisa in 3 parti nella quale ho presentato alcuni hooks di uso più comune e qualche altro utile al fine di migliorare le prestazioni delle vostre app in React.

> Grazie agli Hooks siamo in grado di usare lo stato nei componenti funzionali stateless senza creare necessariamente un componente di classe per utilizzarlo

* * *

Nella [prima parte della guida ai React Hook](https://medium.com/webeetle/guida-ai-react-hooks-parte-1-510693ea60f8) approfondisco il perché e il come sono stati introdotti gli hooks e l’utilizzo dei più comuni _useState_ e _useEffect_.

L’ **hook useState** consente di gestire lo stato locale nei componente funzionali.

L’ **hook useEffect** viene utilizzato per gestire gli [effetti collaterali](https://it.wikipedia.org/wiki/Effetto_collaterale_(informatica)) nei componenti funzionali.

* * *

Nella [seconda parte della guida ai React Hooks](https://medium.com/webeetle/guida-ai-react-hooks-parte-2-c4cce979a65d) presento altri due hooks utili alla gestione dello stato.

L’ **hook useReducer** può essere utilizzato in alternativa a _useState_, è ideale per la gestione di stato e transazioni di stato più complessi.

L’ **hook useContext** ti fa risparmiare lo stress di dover fare affidamento su un consumer _[Context](https://it.reactjs.org/docs/context.html)_ e ha un’API più semplice rispetto all’API di _[render props](https://it.reactjs.org/docs/render-props.html)_.

* * *

Nell’[ultima parte della guida ai React Hooks](https://medium.com/webeetle/guida-ai-react-hooks-parte-3-8541657ff5d5) introduco altri due hooks utili per ottimizzare le prestazioni delle app in React.

L’ **hook useMemo** usato per memorizzare i valori.

L’ **hook useCallback** usato per memorizzare le funzioni.

All’interno della guida ho condiviso esempi di codice per ogni hook illustrato e per i quali ho inserito i link ai relativi repository.

> Buona lettura!

The post [Guida ai React Hooks](https://www.mainickweb.com/guida-ai-react-hooks/) appeared first on [MaiNick Web](https://www.mainickweb.com).
Installing Yarn on WSL 
Tags: wsl, yarn, wsldev
Published: 2020-12-11 07:45:52

---
title: Installing Yarn on WSL 
published: true
description: A guide on installing yarn for WSL
tags: WSL, Yarn, WSLdev
//cover_image: https://direct_url_to_image.jpg
---

So I had my harddisk formatted and had to redo all my WSL dev environment setup. 
I went to the yarn website to install yarn, and was left confused af. I didn't know which way to install yarn, there were so many different ways. Finally I found how to, and want to save it here as a blog post so that I won't have to go through it again.

So here's the magical command :
```
curl -o- -L https://yarnpkg.com/install.sh | bash
```

Yep that's it. Copy it to your WSL terminal (fyi I had Ubuntu 20.04 installed) and yarn will be installed.

Now just restart the wsl terminal and type
```
yarn --version
```
If yarn installed successfully, then the current installed yarn version number is returned.

Have a good day!
Build a photo mozaic in 4 Simple Steps.
Published: 2020-12-11 07:45:04

This is a project I did a while ago. 

It creates a photo mozaic in 4 Simple Steps.

Really good for a Christmas Present :D

Have a look and please write in the comments what you think

https://www.youtube.com/watch?v=ozCJGzLqXl8&feature=youtu.be
How to clone the same environment I have on the local machine to the deployment environment?
Tags: php, postgres, laravel, vagrant
Published: 2020-12-11 07:34:08

Hello , 

Let me first talk about my local env  :

I work on a Laravel project using the vagrant: (PostgreSQL 12.4 + PHP 7.4.10 )

The problem is I discovered that some results are not not the same between my local and the prod env especially when about the eloquent requests (results are not the same some times)

so, my question as the title said, how to clone my local env to the prod server ?


thanks
Advent of Code - Day 3
Tags: javascript, adventofcode, algorithms, challenge
Published: 2020-12-11 07:23:14

This is day 3 of the Advent of Code challenge. Here is my solution:

```javascript
const data = $("pre").innerText.split("\n");
data.pop();

const toboggan = ([right, down]) => {
  let yPos = 0;
  let xPos = 0;
  let colLength = data.length - down;
  let rowLength = data[yPos].length - right;
  let result = [];

  for (let i = 0; i < data.length / down; i++) {
    result.push(data[yPos][xPos]);
    yPos += down;
    xPos >= rowLength ? (xPos -= rowLength) : (xPos += right);
  }

  return result.filter((item) => item === "#").length;
};

[
  [1, 1],
  [3, 1],
  [5, 1],
  [7, 1],
  [1, 2],
]
  .map((config) => toboggan(config))
  .reduce((a, b) => a * b, 1);
```

Thoughts on the challenge:
- I saw people online use modulo loop and I should work towards it
- The question statement are really confusing lol
Advent of code - Day 10
Tags: javascript, typescript, adventofcode
Published: 2020-12-11 07:20:39

Are you participating in the [Advent of code](http://adventofcode.com) this year?

If you don't know what the advent of code is, it's a website where you'll find a daily challenge (every day it gets harder). It's a really fun event, you should participate!

I try to solve the exercises using either JavaScript or TypeScript and will share my solutions daily (with one day delay so no one can cheat!). I only share the solution for the second part.

I'm already happy I managed to finish it. I know there are some incredible solutions out there (a colleague of mine solved is with a math equation 🤯), but all I could do was a brute-force. As I often say, IIWIW (If It Works It Works)!

Here is my solution for day #10:
```js
const cache = [];

function valueFor(code, currentValue) {
  if (cache[currentValue]) return cache[currentValue];
  cache[currentValue] = resolve(code, currentValue);
  return cache[currentValue];
}

function resolve(code, currentValue = 0) {
  if (!code.length) return 1;
  const [first, second, third] = code;
  let result = 0;
  if (first - currentValue > 0 && first - currentValue <= 3)
    result += valueFor(code.slice(1), first);
  if (second - currentValue > 0 && second - currentValue <= 3)
    result += valueFor(code.slice(2), second);
  if (third - currentValue > 0 && third - currentValue <= 3)
    result += valueFor(code.slice(3), third);
  return result;
}

resolve(input)
```

Feel free to share your solution in the comments!

________________________

Photo by [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
Angular 11 Firestore CRUD: add/get/update/delete documents with AngularFireStore
Tags: angular, firebase, firestore, crud
Published: 2020-12-11 07:19:54

In this tutorial, I will show you how to build Angular 11 CRUD App with Firebase Cloud Firestore that uses `AngularFireStore` service to get/add/update/delete documents in a collection.

## Angular 11 Firestore CRUD Overview
We’re gonna build an Angular 11 Firestore App using @angular/fire library in which:
- Each Tutorial has id, title, description, published status.
- We can create, retrieve, update, delete Tutorials.

Here are the screenshots:
– Create a new Tutorial:

![angular-11-firestore-crud-app-create-tutorial](https://dev-to-uploads.s3.amazonaws.com/i/qsx8yzg8j088rr68xflc.png)

Cloud Firestore after the Create Operations:

![angular-11-firestore-crud-app-cloud-firestore-data-view](https://dev-to-uploads.s3.amazonaws.com/i/oumgjz5yd9fv4cizca38.png)

– Retrieve all items:

![angular-11-firestore-crud-app-retrieve-tutorial](https://dev-to-uploads.s3.amazonaws.com/i/3eflb5wk2zpzsar356hp.png)

– Change status to **Published**/**Pending** using **Publish**/**UnPublish** button:

![angular-11-firestore-crud-app-update-status-tutorial](https://dev-to-uploads.s3.amazonaws.com/i/9vy744ixkho18syuinx7.png)

– Update the Tutorial details with **Update** button:

![angular-11-firestore-crud-app-update-tutorial](https://dev-to-uploads.s3.amazonaws.com/i/cneg8rqjrf2fey2h563n.png)

– Delete the Tutorial using Delete button:

![angular-11-firestore-crud-app-delete-document](https://dev-to-uploads.s3.amazonaws.com/i/o3qcxqbg6jhhbesx4w40.png)

## Technology
- Angular 11
- firebase 8
- @angular/fire 6
- rxjs 6

## Project Structure
![angular-11-firestore-crud-project-structure](https://dev-to-uploads.s3.amazonaws.com/i/hcmh4bdl1ux88frd5ntd.png)

For more details, please visit:
[https://bezkoder.com/angular-11-firestore-crud-angularfirestore/](https://bezkoder.com/angular-11-firestore-crud-angularfirestore/)

Related Posts:
- [Angular 11 Firebase CRUD Realtime DB | AngularFireDatabase](https://bezkoder.com/angular-11-firebase-crud/)
- [Angular 11 Firebase Storage: File Upload/Display/Delete example](https://bezkoder.com/angular-11-file-upload-firebase-storage/)
Advent of Code 2020: Python Solution Day 11
Tags: adventofcode, algorithms, python, challenge
Published: 2020-12-11 07:17:24

I took a help from [here](https://www.reddit.com/r/adventofcode/comments/kaw6oz/2020_day_11_solutions/gfd5bgs?utm_source=share&utm_medium=web2x&context=3) so huge credit goes to the author. My [repository](https://github.com/q-viper/Adevent-Of-Code-2020) contains a notebook where I have updated previous day's challenges also.

**My solution is below lets share yours.**
## Challenge 1
```python
with open("day11.txt", "r") as fp:
    lines = [line.rstrip() for line in fp.readlines()]
    lines = [list(line) for line in lines]

rows, cols = len(lines), len(lines[0])
deltas = [(-1,-1),(-1,0),(-1,1),(0,-1),(0,1),(1,-1),(1,0),(1,1)]

def count_occupied(r, c, grid):
    count=0
    for i,j in deltas:
        xi,xj=r+i,c+j
        if 0<=xi<rows and 0<=xj<cols and grid[xi][xj]=='#':
            count+=1
    return count

        
def check_occupied(lines, thresh = 4):
    while True:
        valid = True
        temp_grid=[r.copy() for r in lines]
        for i, r in enumerate(temp_grid):
            for j, c in enumerate(r):
                count = count_occupied(i, j, temp_grid)
                if c=='L' and count==0:
                    lines[i][j]='#'
                elif c=='#' and count>=thresh:
                    lines[i][j]='L'
                valid&=(r[j]==lines[i][j])
        if valid:
            break
    ans=0
    for i in range(rows):
        for j in range(cols):
            if lines[i][j]=='#':
                ans+=1
    print(f"There are {ans} valid seats.")
check_occupied(lines)
```
## Challenge 2
```python
with open("day11.txt", "r") as fp:
    lines = [line.rstrip() for line in fp.readlines()]
    lines = [list(line) for line in lines]

def count_occupied2(r, c, grid):
    count=0
    for i,j in deltas:
        xi,xj=r+i,c+j
        while 0<=xi<rows and 0<=xj<cols:
            if grid[xi][xj]=='#':
                count+=1
                break
            elif grid[xi][xj] == 'L':
                break
            xi+=i
            xj+=j
    return count

def check_occupied2(lines, thresh = 5):
    while True:
        valid = True
        temp_grid=[r.copy() for r in lines]
        for i, r in enumerate(temp_grid):
            for j, c in enumerate(r):
                count = count_occupied2(i, j, temp_grid)
                if c=='L' and count==0:
                    lines[i][j]='#'
                elif c=='#' and count>=thresh:
                    lines[i][j]='L'
                valid&=(r[j]==lines[i][j])
        if valid:
            break
    ans=0
    for i in range(rows):
        for j in range(cols):
            if lines[i][j]=='#':
                ans+=1
    print(f"There are {ans} valid seats.")
check_occupied2(lines)
```
## Challenge 2