teleren/devto huggingface dataset:
Emoji in the TOR Browser
Published: 2021-02-22 06:09:15

The TOR browser has to limit the emoji characters it displays since the range of fonts available varies between computers and can be used to deanonymize a user.

Typically the browser displays a tofu character, and nothing is useful anymore, but since TorBrowser is based on Firefox, we can use a font specifically designed for firefox usage, and embed it in the page.

Steps to get it on the page:

First Grab the firefox font from https://github.com/mozilla/fxemoji

Find an emoji that is different in chrome to the fxemoji, so can know the page is loading it correctly.

Twitter color emoji can be used, but this is very heavy to download Can bang that down to a 256kb woff2 font file using: https://onlinefontconverter.com/

Use stylesheet:

```css
@font-face {
  font-family: 'Firefox Emoji';
  src: url('FirefoxEmoji.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
```

Tools used: https://wakamaifondue.com/ Extraordinarily helpful too to see fonts working in Tor before going thru deployment.

Links to terminal to see it in action.
GitHub... it's only tough if you make it tough
Published: 2021-02-22 06:04:45

Have you ever coded a project and tried to get other people to collaborate on it? 
The hardest part about collaboration on a project is sharing the project in a way that's simple and efficient. GitHub is where we can make that happen.

####*What is GitHub?*
GitHub is a version control environment that makes collaboration simple and minimizes errors. It runs on the git language to add, change or remove files from the community repository.

####*Why use GitHub?*
GitHub has been growing over the past several years and is now used by a good majority of large and small companies. Once we learn the git language, using GitHub is as simple as can be. Beyond the benefits of collaboration and added error protection, the service also provides analytics that range from contribution statistics, to the traffic of the repository. The repository can be made public for other users of GitHub to see and possibly help, or private if the repo should be kept within a circle of collaborators.

####*What can we do with GitHub?*
Check out this [video] (https://youtu.be/0xFFYA1-MAM) that goes through a couple different ways to commit files and file changes to git and how to set up a repository.
Set if not null Java
Tags: java
Published: 2021-02-26 00:55:30

---
title: Set if not null Java
published: true
date: 2021-02-22 06:00:00 UTC
tags: java,java
canonical_url: https://jsedano.dev/java/2021/02/22/set-if-not-null-java.html
---

Simple ways to check if a value is null before setting it to some object in Java.

You can find the complete code for this here: [SetIfNotNull.java](https://github.com/jsedano/examples/blob/main/java-snippets/SetIfNotNull.java)

Consider you have a class `Movie` with an attribute `title` along with the correspondent setter, and you want to set some new value for the `title` but only if such value is not null.

- A very traditional way:

```
if (title != null) {
    movie.setTitle(title);
}
```

- Using ternary operator, in the case `title` is null you would be placing the same value on the Object which may look a little ugly.

```
movie.setTitle(Objects.nonNull(title) ? title : movie.getTitle());
```

- Very elegant way, although you are creating a new Object with the `ofNullable` call, but I guess it’s ok.

```
Optional.ofNullable(title).ifPresent(movie::setTitle);
```

- Creating a little helper method which receives the value and a `Consumer` that sets the value in the object.

```
public static <V> void setIfNotNull(V value, Consumer<V> setter) {
    if (Objects.nonNull(value)) {
        setter.accept(value);
    }
}
```

and you call it like this:

```
setIfNotNull(title, movie::setTitle);
```

That last one only makes sense if you are using it a lot.

Download the complete code from this post here [SetIfNotNull.java](https://github.com/jsedano/examples/blob/main/java-snippets/SetIfNotNull.java).
Web 傳輸的摩斯密碼，base64介紹
Tags: ruby, base64, chinese, binarydata
Published: 2021-02-22 05:11:58

因為看到 ruby3 的 release note 裡特別有講把 base64 放上 rubygems.org
[https://github.com/ruby/base64](https://github.com/ruby/base64)
也讓我想到好像至今沒有真的了解base64在做什麼...。
就是每次處理非純文字的資料時，
都是把檔案轉成 base64 的字串表示。
比如在 rails 上傳圖片時，圖片在 `params` 中就是 base64 的形式，
而且另個疑問是，為什麼要稱那些資料為 Binary data 呢？

> 預設你已了解 bit 跟 byte 還有字的編碼如 ASCII，讀起來較易理解

# 參考資料
當然是 Wiki [Base64 - Wikipedia](https://en.wikipedia.org/wiki/Base64)

# base64
base64 可以想成「用 64 種字元」去代表所有的資料的一種方式

因為電腦其實只認 0 跟 1
所以資料不論是何種類型，到最後一定會變成是 0 跟 1 的組合。例如：
* 數字 6 會轉成二進位的 110
* 字元 A 是 100 0001(因為 ASCII 裡 A=65，而65的二進位是 100 0001)
* 字串是字元連起來的，所以是一長串的 01 組合

base64 是把 01 這種二進位的資料，以 6 個為一組呈現的方式
任 6 位數 2 進位，如 `000 001`, `001 101`
總共會有64種組合，所以命名為 base64

給每種組合一個代表的「字元 Char」，
就可以用那64種字元去代表所有的字串了, 
(如果bits數不能被 6 整除，會用 `=` 去代替)
下表是 wiki 上列出這64個字元：
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8y0m3pgx8h7bqgd3kpiu.png)

以 Wiki頁 上的例子 `Man` 這個字串來說, 
ASCII 是用 8 bits 存的，所以 共有 24 bits
轉成 base64：
* M 是 010011 01, 前面6 bit  010011依上表 是 `T` ，然後剩 2  bit `01`
* a 是 0110 0001，前面的4 bit 配上 M 後 2 bit, 010110 是 `W`
* 依續做可得 `TWFu`
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfvrx4xq6tts97npg196.png)

我們可以用這個方式拆解中文`我`試看看：
```ruby
'我'.unpack("B*")[0]  # 將 String 轉二進位
# "111001101000100010010001"
```
`我`剛好是 3 個 byte 也就是 24bits 所以用 base64 恰好是 4 個字元顯示 
  ![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rm7thxtq4k1bu06wmkp.png)
```ruby
require 'base64'
puts Base64.encode64('我')
# 5oiR

# 注意decode base64時，它不知道那是 utf-8 所以要自己轉回去
Base64.decode64('5oiR')
# "\xE6\x88\x91" 
Base64.decode64('5oiR').encoding
# #<Encoding:ASCII-8BIT> 
Base64.decode64('5oiR').force_encoding('UTF-8')
# "我"
```
而那些根本不是任何「文字」的檔案，比如說圖片、音樂、影片，
根本不能轉成文字，但依然可以以 0 跟 1 表示，
可以寫成超長的`011010101010....`的字串，
就稱它們為 **Binary data**。

在傳送檔案時，就可以用 base64 去表示任何檔案，
又因為 base64 轉回來時只是一般的 ASCII，所以才為什麼一定要加註
Content-Type 或副檔名。


# Q&A
## base64 最終還不是會換為 0 與 1，為什麼不直接傳 01 就好了？
可參考這篇答案，老實說我也是驚覺xD 
[algorithm - Why do we use Base64? - Stack Overflow](https://stackoverflow.com/questions/3538021/why-do-we-use-base64)
~~主要原因還是希望傳輸的內容人易看懂，即使 base64 是不可讀的，但英數真的比較容易分辨2串字一不一樣~~
>感謝網友指正，因為某些通訊協定或資料格式直接規定訊息內不能放 binary data，比如最常拿來舉例的就是 email 格式的 MIME，直接規定只允許 ASCII 的字元。那圖片跟其它附加檔案都是 binary data 怎麼辦？用 base64 即可將 binary data 轉成 ASCII 並附在 email 的訊息中。

此外，
避免不同系統對不同的編碼解讀不同。
如用 base64 傳輸資料，即使兩邊系統解讀不同，
至少可以同意「資料本身」是兩邊一致的，
以 Stackoverflow 上的例子來說，傳兩行的訊息時：
```
Hello
world!
```
ASCII 的編碼是長
```
72 101 108 108 111 10 119 111 114 108 100 33
```
那個換行符號 10, 在不同的作業系統解讀是不一樣的
如果用 base64
```
SGVsbG8Kd29ybGQh
```
一樣都是 ASCII，但都是較「安全」的，也就是所有系統都一致的
```
83 71 86 115 98 71 56 75 100 50 57 121 98 71 81 104
```

不過這則留言還是滿好笑的xD
> 問題留言有一位 Martin 回
> We use base64 because it's more readable than Perl
> 笑死xD

## 為何不干脆來個 base128, base256? 不是能變更短
這問題也非常有意思，我也這樣想過
[encoding - Why is base128 not used? - Stack Overflow](https://stackoverflow.com/questions/6008047/why-is-base128-not-used)
因為base64的字元其實都是 ASCII 中英文數字這類較「安全」的字元，
就是為了所有電腦都能顯示。
從上面的程式碼例子也知道 decode 完預設是 ASCII 的編碼。
base128 的話 勢必會用到 ASCII 裡的控制碼了，
換行 `\n` 或讓電腦叫一聲那種，這在每個作業系統的意義可能不同，
這樣就失去互通性了

希望有幫助到大家理解喔
Back to the basics - Java By Example (Invoice)
Published: 2021-02-22 05:13:33

---
title: Back to the basics - Java By Example (Invoice)
published: true
description: In this video, I get back to the basics and show you how to use the code from my series Java By Example to read data from an excel spreadsheet in order to populate your invoice PDF.
tags:
cover_image: https://i.ytimg.com/vi/H72oFiIDnSQ/maxresdefault.jpg
---

{% youtube H72oFiIDnSQ %}

In this video, I get back to the basics and show you how to use the code from my series Java By Example to read data from an excel spreadsheet in order to populate your invoice PDF.
Hoisting
Tags: javascript, devjournal
Published: 2021-02-22 05:04:32

JavaScript variables can be declared after they have been used.

Before jumping into examples and how hoisting effects programming, you must know what hoisting means. Hoisting is JavaScript's default behavior to moving all declarations to the top of the current scope, whether that is the script or the function you are working within. Functions can also be hoisted, but there are two types of functions;
1. Function declarations
2. Function expressions

Function declarations can be hoisted to the top, here is an example

    hoist(); // Output: "A hoisted function'"

    function hoist() {
     console.log('A hoisted function');
    };

A function expression cannot be hoisted to the top

    expression(); //Output: "TypeError: expression is not a 
    function

    var expression = function() {
       console.log('Will this work?');
    };

Function definition hoisting only occurs for function declarations, not function expressions.

Var initialization can be hoisted and let and const are hoisted to the top of the block, but not initialized The code knows of the variables existence, but it CANNOT be used until it has been declared.

Var:
    b = 20; // Assigns 20 to b

    elem = document.getElementById("demo"); // Find an element
    elem.innerHTML = x;        // Display x in the element

    var b; // Declares b

Let:

    carName = "Volvo";
    let carName;

    //ReferenceError
Could not find tools.jar
Tags: errors, mac, reactnative, jdk
Published: 2021-02-22 05:00:47

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

<b>Problem:</b>
Execution failed for task ':react-native-gesture-handler:compileDebugJavaWithJavac'.
> Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation.

<b>Solution:</b>
1. Go to your project, open android folder > gradle.properties file > add below line
`org.gradle.java.home=/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home` // path to JDK
2. run your project again
`react-native run-android`

Thanks
Testing react components
Tags: javascript, react, testing
Published: 2021-02-22 04:41:48

> As usual, opinions are personal and may contain some bias.

Over the years I found a common recurring pattern wherein React component tests are done by asserting on the internal behaviour of the function rather than the actual output.

Frontend unit tests must treat the test subject, our React Component as a black box just like how an end user might.
For example, when I am filtering apartments in Airbnb, I only care about the information I see on the screen and how it reacts to the filters I apply. At no point do I need to know if the underlying React component state has updated or if the text is an  `h2` or `bold`.

2 popular ways I know of, using which we can unit test React components:
1. Enzyme
2. React Testing Library

> **TL;DR** I would use React Testing Library approach for writing meaningful unit tests.

---

## What are we testing?

{% codesandbox devto-testing-0jtt1 runonclick=1 %}

{% gist https://gist.github.com/rohanBagchi/768301c7efb6a536158682104147abed %}

Here, how we render the joke is an implementation detail. The fact that the joke gets fetched and rendered on click of the button is the behavior.

For example, later on we could render the joke inside a `<p/>` tag. The behavior of the component would remain unchanged and as such we should not have to touch our tests for this change.


## Enzyme test
{% gist https://gist.github.com/rohanBagchi/a9659f4d851c66edbc1102669611d780 %}

Here, you will see we are extracting text content of the `<h3/>` element using `wrapper.find('h3').text()`. So based on our contrived example above, if we were to convert the `<h3/>` into a `<p/>`, our test will break. For a larger, more complex component, the changes will increase exponentially. This makes refactors hard.

## React Testing Library Test
{% gist https://gist.github.com/rohanBagchi/3ed43263738fb24ef0f70f726b9ba111 %}

Here, we are only testing for the behavior. So, as long as the behavior stays same, an update in how we render the joke for this case makes no difference. For larger projects with lot more complexity, passing tests across refactors will give developers confidence and help them move fast.

### Full repo here

{% github rohanBagchi/devto-testing %}

---

Thank you for reading this far. Let me know what you feel in comments.
Firebase Cloud Functions
Published: 2021-02-22 04:15:46

Cloud functions are great way to operate a serverless backend. They are functions you can create with JS or typescript and then they are stored on google cloud to preform actions based off HTTP request or firebase features. They are pretty easy to setup, once you have everything setup its just a specific call to create a cloud function. Looks like this:

```
 const functions = require("firebase-functions");
```
then
```
exports.functionName = functions.https.onRequest((request, response) => {})
```

After you create your function and set up what ever logic you want to happen, you'll then want to deploy your function up to firebase. As long as there are no errors in your code your function will now be hosted on google cloud/firebase. You'll be provided with a url that you can now send request to in order to preform the function you created. 

Typically these cloud functions are going to be used for firebase features like authentication or google services like cloud storage. Here is an example function that will grab a specific user from our firestore collection of users. 

```
exports.getUser = functions.https.onRequest((request, response) => { 
    cors(request, response, () => { 
        
        const userId = request.body.userId;

        const userRef = db.collection('users').doc(userId);
        userRef.get()
        .then(snapshot => {
            if (snapshot.exists) {
                response.send(snapshot.data())
            } else {
                response.send("User not found")
            }
        }).catch(error => response.send({errors: error}));
    });
});
```

onRequest() allows you to use the cloud functions you create with http request. Giving us access to both the request and response. The request can be used to receive information that you might use in order to find specific data entry, for instance in the example above we grab the userId out of the request body. Then we are able to send back whatever information is needed back through the response with response.send(). 

These are the basics to firebase cloud functions. They can be really useful for working with a firebase project. There is very little maintenance required after creating them. It will take a little time to get use to working with them but once you do it seems to be pretty smooth sailing. Hope you were able to take away something from this and I hope you have a great day!
How to set up GitLab Using ReclaimCloud
Published: 2021-02-22 04:15:29

**What is GitLab and how is it different?**

GitLab is a Git repository that really provides privates and free repositories, issue following capabilities, and wikis. It allows for professionals to perform all the task they need to for a project. This can range from source code management all the way to project planning and security. But how is this different than GitHub? A easy way to put is that GitHub has better availability and really puts its focus on infrastructure performance. GitLab is a little different as it focused more on giving the users a more integrated feature based platform to work from.

**How to start**

**Step 1--**The first step in install GitLab is going over to the install instance. This then will send you a confirmation email. This is the same for Reclaim Cloud. Make sure to check your spam folder for the conformation email.
**Step 2--** You have to open Reclaim and click on marketplace to install the GitLab environment.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o7suvc9ugnwnc60l79v.png)
**Step 3--** Then go to application on reclaim and install GitLabs and type in your email. Next go to the user dashboard.
**Step 4--**You then must configure the working environment in docker. Drag the blue bar as far up as it will go.  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxfn3ee7vscd1ypeik51.png)
**Step 5--**You can now edit GitLabs as much as your heart desires.  

Video Tutorial --- https://www.youtube.com/watch?v=Is7O7NEhtFo&feature=youtu.be
Git Away From Me
Tags: github, codenewbie
Published: 2021-02-22 04:10:36

##Git isn't Github?##
I thought these were the same thing up until maybe a week ago. Apparently they aren't. I had some trouble trying to distinguish the two. During my research, I also learned Java is not similar to, or related to Javascript. Whoever decided to name these things so similar, you suck. Be unique.  
Git is an extremely popular version control system. It has a branching model that allows people to create independent branches in the code. So like the original code is the trunk of the tree, and people can create tree branches off the trunk to make the tree bigger and better. That analogy could be wrong, but the tree branch thing makes too much sense. Git is downloaded to a local machine.

GitHub makes using Git easier. GitHub is a Git repository hosting service. GitHub is cloud based. Clouds are better. GitHub allows for collaboration on projects in real time. GitHub seems to be very useful for projects, but I have never used it so I cannot confirm that. GitHub uses commits to make changes. The workflow on GitHub is "commit, pull, push". "Commit" is the changes you made, "pull" reviews the changes, "push" makes the official changes. 
This [article](https://blog.devmountain.com/git-vs-github-whats-the-difference/) helped me learn more about the differences of Git and GitHub. 
##Commits##
Commits are what I consider to be save points in a code's history. Commits are used to update code. Undoing a commit could cause problems. If someone deletes a commit, you still have that commit. When the changes get pushed, the most common response from Git is to put the deleted commit back in the history. 
![git meme](https://preview.redd.it/2163t1t0lky11.png?auto=webp&s=5589b962e6768ac4daed6e74bd2b2e8817a939f6)
Praying this is funny because I don't know what it means.

##Version Control##
Version Control allows you to keep track of your code, and the changes that you have made. This is something pretty critical to have when you are working on a group project. People can be making changes to the code at any time, and I imagine it is helpful to be able to see all of the changes. You will have access to online backups, thanks to version control.

[Here lies the Youtube video, may it rest in peace](https://www.youtube.com/watch?v=B4-rJmK_LP4)




If you didn't like this blog post ![git meme 2](https://lh3.googleusercontent.com/proxy/GVYZQaItl4lpo1Dc90zrJcNH2V8NU0WYZ-07f1XfB9VIZ8NfIlBuYbwPciRlkvkx9xXt4Ez3xBDiMYg1EMTo4mU8b-mu5Ec5HV4Qy49J4WZ-xK48ngKxSD9bkEFwlFuTiR47-2mkUNrw2nREl0OeNZ7rtkgH85b7i1O1yw)
Makerwork 005 includes an open-source text-based programming language for music composition
Tags: clojure, music, rust, makerwork
Published: 2021-02-27 01:10:56

---
title: Makerwork 005 includes an open-source text-based programming language for music composition
published: true
date: 2021-02-22 04:00:06 UTC
tags: clojure,music,rust,makerwork
canonical_url: https://makerwork.netlify.app/posts/makerwork005/
series: Makerwork
---

Hey Makers! 👋

Welcome to **Digest 005** of the newsletter. Our featured maker, Dave, is the author of a text-based programming language for music composition. 🏆

As a programmer and as a composer, Dave felt that there are a couple of fundamental problems with GUI music notation software: it’s distracting and it’s limiting.

While some people may be put off by a wall of textual code, text-based languages are both very compact and open. To help beginners overcome this, Dave has put a lot of thought into making the syntax as intuitive and beginner-friendly as possible.

Dave is envisioning a world where both programmers and non-programmers alike can create all sorts of music, from classical to chiptune to experimental soundscapes, using only a text editor and the **Alda** executable. ⭐️

If you like to know about the maker, I interviewed Dave of **Alda** in this week's roundup of makers for makers. This week's issue also includes an open source and privacy-focused productivity suite **Bloom** and a web-based multiuser time-tracking application **Kimai** free for everyone.

[SUBSCRIBE FREE](https://makerwork.substack.com)

*The Makerwork newsletter includes interviews with makers featured in the email sharing their insights about open-source, their product, blog and work.*
When Javascript need to use multiple pages with a selector (Short Tutorial)
Tags: javascript, webpages, html, css
Published: 2021-02-22 03:59:28

---
title: When Javascript need to use multiple pages with a selector (Short Tutorial)
published: True
description: 
tags: javascript,webpages,HTML,CSS
//cover_image: https://direct_url_to_image.jpg
---
Hi Namaskar,
Imagine below the code

```
let box = document.querySelector('.box')
box.innerHTML = 'I am box'
```
Typically we follow that away but
if there is no box HTML class else we will see

<span style="color: red"> **Uncaught TypeError: Cannot set property 'innerHTML' of null** </span>
That is not a good way to use and it will break our javascript code.
Sometimes we are using one javascript file on multiple pages and we have to use the right away so that we can avoid bugs.
we can call the `box class selector` like below to avoid bugs.

```
let box = document.querySelector('.box')
if(box){
  box.innerHTML = 'I am box'
}
```
you see we used if condition to avoid that type of bugs,
also, we can use logical AND condition

```
box && (
 box.innerHTML = 'I am new box'
)
```
for multiple times to use the box 

```
box && (
 box.innerHTML = 'I am new box',
  box.setAttribute('style', 'width: 200px; height: 200px;'),
  box.style.background = 'red'
)

```

{% codepen https://codepen.io/nikhilroy2/pen/qBqPRQJ default-tab=js,result %}

you notice we use comma instance of semi-colon because of parenthesis.
That is our short tutorial today,
if you need more like these short tutorials don't forget to write your valuable comment.
Thanks all.
[challenge] Règles de routeur personnalisées
Tags: blog
Published: 2021-03-18 11:37:52

---
title: [challenge] Règles de routeur personnalisées
published: true
date: 2021-02-22 03:15:20 UTC
tags: Blog
canonical_url: 
---

### POURQUOI ?
Ce projet a commencé grâce à un challenge qu'un ami joomler a posté sur le JUG Breizh sur FB le 16 Février 2021. Voici le challenge: Pour une url ayant la structure suivante: /categorie-parente/sous-cat-a/article-1 /categorie-parente/sous-cat-a/article-2 /categorie-parente/sous-cat-c/article-7 Comment faire pour que les urls fonctionnent aussi sous cette forme: /categorie-parente/article-1 /categorie-parente/article-2 /categorie-parente/article-7 En d'autres mots sans les sous-catégories.
### QUOI ?
La réponse à ce délicieux puzzle est de créér des règles de routeur personnalisées.
### COMMENT ?
TLDR; Des règles de routeur personnalisées injectées via un plugin système lors de l'événement onAfterInitilise juste après que Joomla! est "démarré"
<!-- Free download -->
[Télécharger](https://github.com/alexandreelise/plg_system_rewritenosubcategories.git "Télécharger")
<!-- Contact me -->
[Contacter Alexandre](https://coderparlerpartager.fr/contact "Contactez votre développeur web, conseiller et spécialiste Joomla! Je suis là pour vous aider dans la réalisation de votre projet eb sous Joomla!")