teleren/devto huggingface dataset:
How to display multiple blank lines in Markdown
Tags: writing, markdown
Published: 2021-11-17 00:58:33

Ever wished you could space out your blocks of text in markdown a bit more without using non-markdown tags?

According to markdown rules multiple empty lines are collapsed into a single empty line or just a start of a new paragraph, [depending on the flavour](https://github.github.com/gfm/#blank-lines).

#### Example
```
*Line 1*
  


  

*Line 2*
```
is collapsed into

*Line 1*
  


  

*Line 2*

----

However, this seemingly identical example
```
*Line 1*
 

 

 

*Line 2*
```
retains its white space:

*Line 1*
 

 

 

*Line 2*

----

Both examples look the same to a naked eye in markdown and have no special markup.

#### The difference in the second example is in an invisible Unicode character ` ` followed by a new line.
It fools the rendering code into adding a visually empty `<p> </p>` tag giving you an extra empty line. You can add as many of them as you need alternating with an empty line.

According to [emptycharacter.com](https://www.emptycharacter.com/) there are 16 types of those "invisible characters". I found that *Medium Mathematical Space* ([U+205F](https://unicode-table.com/en/205F/)) works best here, on GitHub, Reddit or sites produced by [Hugo static site generator](https://gohugo.io/). It looks like this:
# ` `

----

Happy
 


              writing
 


                              !
 

                                                    :)
How to mock nanoid
Tags: javascript, testing, react, jest
Published: 2021-11-17 00:43:10

---
title: How to mock nanoid
published: true
description: Use jest to mock nanoid
tags: javascript, testing, react, jest
canonical_url: https://monicagranbois.com/blog/webdev/how-to-mock-nanoid/
---

This short blog post describes how to use [Jest](https://jestjs.io/) to mock [nanoid](https://github.com/ai/nanoid). The nanoid function generates a unique string id. I used it to generate an id for an object. However, I wanted a stable id when unit testing the code. To accomplish this, I mocked the nanoid module and function by doing the following:

```javascript
jest.mock("nanoid", () => {
  return { nanoid: () => "1234" };
});
```

<!--more-->

The above code does the following:

* <code>jest.mock("nanoid"...)</code> - This part mocks the nanoid module.
* <code>return { nanoid: () => "1234" };</code> - This part mocks the nanoid function. "1234" is returned when the nanoid function is called.

Below, is a simple example of a React app using the nanoid function and a unit test mocking it.


#### **`App.js`** 
```javascript
import { nanoid } from "nanoid";

class Item {
  constructor(name, price) {
    this.id = nanoid();  //use nanoid to generate a unique id
    this.name = name;
    this.price = price;
  }
}

function Display({ item }) {
  return (
    <div>
      <h2>Item</h2>
      <p>id: {item.id}</p>
      <p>name: {item.name}</p>
      <p>price: {item.price}</p>
    </div>
  );
}

function App() {
  const item = new Item("apple", 2);
  return (
    <div className="App">
      <h1>Nanoid Unit Test Example</h1>
      <Display item={item} />
    </div>
  );
}

export default App;
export { Display, Item };
```

#### **`App.test.js`** 
```javascript
import { render, screen } from "@testing-library/react";
import { Display, Item } from "./App";

jest.mock("nanoid", () => {
  return { nanoid: () => "1234" };
});

describe("test the Display", () => {
  it("should display the item info", () => {
    let item = new Item("Orange", 5);
    render(<Display item={item} />);
    expect(screen.getByText(/id: 1234/i)).toBeInTheDocument();
    expect(screen.getByText(/name: Orange/i)).toBeInTheDocument();
    expect(screen.getByText(/price: 5/i)).toBeInTheDocument();
  });
});
```

Note: As of this writing CodeSandbox [does not support Jest mocks](https://github.com/codesandbox/codesandbox-client/issues/513).

## References:
* [Jest Mock Functions](https://jestjs.io/docs/mock-functions#mocking-partials)
100 días de código: 12, 13 y 14. Ocupaciones de familia
Tags: spanish, 100daysofcode, webdev
Published: 2021-11-17 00:33:13

¡Hey hey hey!

Pensaron que estaba desaparecido en combate pues ¡no!.
He estado bastante ocupado en estos días anteriores y apenas conseguía tiempo para codificar asi que me dedicaba a ello aunque no pude escribir en el blog.

La familia, a veces, puede absorber mucho del tiempo pero gracias a ello he pensado que debería crear un programa que me permita crear una forma rápida de escribir el blog aunque sea con una plantilla en caso que no tenga tiempo.

Pero despues de tanta charla tengo que ponerme al día y contarles que es lo que he hecho...

### Dia 12:
- Practique **touch typing** durante 30 minutos.
- Logre resolver algunos ejercicios mas en Hacker Rank los cuales resuelvo por hobbie.
- Añadí mas estilos a mi pagina web.
- Ayude a construir un gallinero para la familia.

### Ayer:
- Mejore el gallinero.
- Practique **touch typing** durante **30 minutos** y ahora ya puedo utilizar la mayor parte de mis manos para escribir.
- Avance con los estilos de mi pagina web.
- Avance con el curso **The Odin Project**, termine la sección de HTML y comencé la de introducción a CSS.

### Hoy:
- Casi termino con la sección de Css de The Odin Project, solo me falta el proyecto final.
- Practique **touch typing** durante **30 minutos**.
- Termine los ejercicios de Css de The odin project.
- Practique un poco mas de Flexbox para mejorar mis habilidades.

*"El tiempo pasa rápido... Dedícaselo a lo que te gusta."* 
*-David Alonso Ruiz*

Realmente no he avanzado mucho mas que en el curso, pero siento que debo dedicarle mas tiempo a mi pagina asi que se convertirá en mi prioridad.
También debo realizar la revisión de mi sprint semanal pero me gusta la idea de comenzarlo en lunes asi que esperare hasta el siguiente para comentarlo.
Y esto es todo por hoy queridos amigos, que tengan mucho éxito en sus proyectos.
Adiós mundo!

#### Links de referencias:
- [The Odin project](https://www.theodinproject.com/)
- [Pagina para practicar touch typing](https://www.typingstudy.com/)
Learning Workflows: Workflows Dashboard Overview
Tags: nocode, workflows
Published: 2022-02-16 23:10:00

---
title: Learning Workflows: Workflows Dashboard Overview
published: true
date: 2021-11-17 00:30:42 UTC
tags: NoCode,Workflows
canonical_url: https://maxkatz.org/2021/11/16/learning-workflows-workflows-dashboard-overview/
---

In this video you will learn about Workflows dashboard and its various views.

[![Workflows dashboard](https://katzmax.files.wordpress.com/2021/11/learningworkflows_dashboardoverview.png?w=1024)](https://katzmax.files.wordpress.com/2021/11/learningworkflows_dashboardoverview.png)

{% youtube WlXosM2FBe8 %}



Want to learn more? Watch other videos in the [Learning Workflows series](https://www.youtube.com/playlist?list=PLSAWywyhniCM6CKkp5vIiD0-pxSbdX71y).
Nhìn Bữa Sáng Chồng Tưởng Đậu Phụ, Hóa Ra Vợ Làm Từ Chiếc Bánh Quen Thuộc, Vị Ngon Miễn Chê
Published: 2021-11-17 00:28:10

Món ăn chút hơi giòn, thơm ngon, béo ngậy nhìn thôi đã thấy thèm

Nguyên liệu

- 4 lát bánh mì sandwich nguyên cám, 2 quả trứng, mayonnaise

Nhìn bữa sáng chồng tưởng đậu phụ, hóa ra vợ làm từ chiếc bánh quen thuộc, vị ngon miễn chê - 1
Cách làm:

Dùng dao hoặc kéo cắt bỏ các viền bánh sau đó chi từng lát bánh mì thành 4 phần bằng nhau.

Nhìn bữa sáng chồng tưởng đậu phụ, hóa ra vợ làm từ chiếc bánh quen thuộc, vị ngon miễn chê - 3

Bóp một ít sốt mayonnaise lên từng miếng bánh mì nhỏ. Bạn cũng có thể thay thế bằng sốt khác như dầu trứng hoặc loại bạn thích.

Nhìn bữa sáng chồng tưởng đậu phụ, hóa ra vợ làm từ chiếc bánh quen thuộc, vị ngon miễn chê - 4

Sau đó dùng 1 miếng bánh mì úp lên miếng kia, làm lần lượt đến hết.

Nhìn bữa sáng chồng tưởng đậu phụ, hóa ra vợ làm từ chiếc bánh quen thuộc, vị ngon miễn chê - 5

Đập trứng ra bát, đánh tan sau đó nhúng từng cặp bánh chìm vào trong bát trứng rồi cho bánh vào khay nướng có lót sẵn giấy nến.

Nhìn bữa sáng chồng tưởng đậu phụ, hóa ra vợ làm từ chiếc bánh quen thuộc, vị ngon miễn chê - 6

Cho bánh vào chảo có phết chút bơ mỏng, chiên cho đến khi 4 mặt bánh đều có màu sém vàng là xong.

Nhìn bữa sáng chồng tưởng đậu phụ, hóa ra vợ làm từ chiếc bánh quen thuộc, vị ngon miễn chê - 7

Ăn kèm bánh mì kiểu này với sốt mayonnaise và tương cà đều vô cùng hấp dẫn. Bánh mì sandwich kẹp sốt chiên kiểu này vừa có chút hơi giòn, thơm ngon, béo ngậy nhìn thôi đã thấy thèm. Đảm bảo đây là bữa sáng tuyệt ngon ai ăn cũng sẽ thích!

Nhìn [bữa sáng ngon](https://monngonchuanvi.com/nhin-bua-sang-chong-tuong-dau-phu-hoa-ra-vo-lam-tu-chiec-banh-quen-thuoc-vi-ngon-mien-che-a147894.html) chồng tưởng đậu phụ, hóa ra vợ làm từ chiếc bánh quen thuộc, vị ngon miễn chê - 8


Chúc các bạn thành công!
When is a pull request too big?
Tags: pullrequests, codereview, github
Published: 2021-11-24 12:52:59

---
title: When is a pull request too big?
published: true
date: 2021-11-17 00:00:00 UTC
tags: pullrequests,codereview,github
canonical_url: https://jhall.io/archive/2021/11/17/when-is-a-pull-request-too-big/
---

Smaller pull requests are faster to write and [easier to review](https://jhall.io/archive/2021/03/17/4-tips-to-jump-the-pr-review-queue/). But how do you know when your pull request is getting “too big”?

There’s no hard and fast rule, but here are a few “yellow flags” for your consideration. If you start to see your PR crossing one of these thresholds, ask if you can push what you’ve done, and save the rest for another PR.

- Does the PR have more than 50-100 lines of changes?
- Does the PR touch more than 5-10 files?
- Does the PR contain more than 5-10 commits?
- Does the PR contain changes written more than 8 hours apart?

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2021-11-16 23:40:27

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 

## Sharing the wheel with Copilot

GitHub Copilot, that is! Thanks to @thenomadevel for sharing this breakdown of what this tool does... and doesn't do (i.e. steal your job). 

{% link https://dev.to/thenomadevel/what-is-github-copilot-will-it-take-your-jobs--33p5 %}

## Once more with feeling

@lorena built a machine learning model that detects emotions from speech in a data science bootcamp. Pretty incredible, right? Read all about it here. 👇 

{% link https://dev.to/lorena/detecting-emotions-from-speech-with-neural-networks-in-python-3ioe %}

## Making the leap

@maxritter wrote about making the move from being employed by a corporation to working independently as a freelancer. If you've ever considered doing the same, check this out!

{% link https://dev.to/maxritter/becoming-self-employed-a-personal-journey-and-best-practices-for-making-the-leap-1phm %}

## We are paid to solve problems not to write code.

@dvddpl explains why we need to learn how to love problems and not mistake our own ego as the entire point as programmers.

{% link https://dev.to/dvddpl/the-screw-and-the-hammer-love-the-problems-not-your-solutions-2i0a %}

## The art of the possible

@0shuvo0 created a pretty amazing app that allows you to draw on a canvas in multiple colors, clear it, and save your creation as an image. Best of all, they provide the code so you can build the same app yourself!

{% link https://dev.to/0shuvo0/lets-create-a-drawing-app-with-js-4ej3 %}

## Which conditional statement to use when 

@sumusiriwardana took a problem they used to frequently encounter and turned it into a helpful resource for others. Great stuff, Sumudu.

{% link https://dev.to/sumusiriwardana/if-else-or-switch-case-which-one-to-pick-4p3h %}


## The No-Code Movement

"To reach an age of absolute no-code," writes @study_web_dev "we need to outdo ourselves with artificial intelligence before anything else." More fantastic insights into where we're headed with "no-code" and the factors involved in that trajectory in this post. 

{% link https://dev.to/study_web_dev/is-no-code-the-future-of-creating-websites-4pjn %}



_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
GREYOS - World's first Meta-OS
Tags: javascript, php, programming, opensource
Published: 2021-11-16 23:36:48

Hello all, it's been too long but this is the time to tell you about GreyOS!

GreyOS is an open source Meta-OS (nothing related to metaverse, facebook, etc.). I have been developing this since 2013.

GreyOS introduces the new computing era with the Cloud Computer (CC), which is always on, available, fast and secure.

Please check the details at https://github.com/g0d/GreyOS

I am looking for contributors, developers and testers to do so much more, create new integrated apps and reshape the computing landscape into something fresh!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awwzi81zfcboah2bt9q7.png)
Done for now
Tags: blog
Published: 2021-11-16 23:17:45

Well, the website is up and I'm happy with it for now. The contact page might be a bit janky but I'll iron out the kinks over the course of this week. 

I'm going to do a bit of a write-up in the project section to talk about why I decided to redesign and rebuild my website.

Short story, Next.js is awesome and it has been totally worth switching over for me.

I learned a lot from the official documentation but the real MVP for me is [this guy](https://wallis.dev/). James has been writing about how to work with Next for a while and I used his blog posts to help me guide my decisions in building out this website as well (Thank you!).
Automate your Mobile App building, testing, code styling, code analysis and your distribution
Tags: actionshackathon21, ci, cd, firebase
Published: 2021-11-16 23:12:21

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow
If you are stuck how to automate your building, testing, code styling, code analysis or distribute your building with firebase. 
 
I'll share with you an awesome and documented [readme](https://github.com/MohamedGElsharkawy/Android-CICD/blob/master/README.md) for the workflows. So let's go into the process of building the those amazing jobs with this awesome service [Github Action](https://docs.github.com/en/actions/quickstart)


### Submission Category: 
**Phone Friendly**


### Yaml File or Link to Code
You can have a look for the repository which built with github actions {% github https://github.com/MohamedGElsharkawy/Android-CICD %}

[pre_check](https://github.com/MohamedGElsharkawy/Android-CICD/blob/master/.github/workflows/pre_check.yml) YML file for how to run and work with every pushing on master branch 
   * Check code styling then upload artifact report to github actions
   * Run your unit tests then upload artifact report to github actions
   * Build code analysis for security and bug issues then upload it to [sonarcloud](https://sonarcloud.io/) 

Don't worry for integration with `sonarcloud`, I've documented  [How to integrate sonarcloud](https://github.com/MohamedGElsharkawy/Android-CICD/blob/master/Sonar-Cloud.md) 

Are you curious, how to share build APK with your testers group, here is you can check out [build](https://github.com/MohamedGElsharkawy/Android-CICD/blob/master/.github/workflows/build.yml) this YML file which runs with every pull request on master branch
     * Build APK then upload the artifact to github actions
     * Upload the artifact APK to firebase distributions


### Additional Resources / Info
[Checkout](https://github.com/marketplace/actions/checkout) ` This action checks-out your repository`

[Setup Java JDK](https://github.com/marketplace/actions/setup-java-jdk) `This action to set up the java version`

[Setup Java JDK](https://github.com/marketplace/actions/setup-java-jdk) `This action to set up the java version`

[Upload Artifact](https://github.com/marketplace/actions/upload-a-build-artifact) `This action to upload artifacts from your workflow allowing you to share data between jobs and store data once a workflow is complete.`

[SonarCloud](https://sonarcloud.io/) `To automate your analysis for code quality and security`

[Upload to firebase distribution](https://github.com/wzieba/Firebase-Distribution-Github-Action) `This action uploads artifacts (.apk,.aab or .ipa) to Firebase App Distribution`

[firebase distribution](https://firebase.google.com/docs/app-distribution) ` makes distributing your apps to trusted testers painless. By getting your apps onto testers' devices quickly, you can get feedback early and often`

**I'm interested to get your feedback, feel free to contribute with changes, issues, or improves.**
Java/ Extract Text from a Word Document
Tags: java, word, txt, api
Published: 2021-11-15 07:07:42

TXT is a common text format that  can be used on many computers and  mobile devices. The TXT document is known for its small size, and it makes the storage of text content more convenient. This article will demonstrate how to extract the text content in a Word document and save it as .txt format by using Free Spire.Doc for Java.

**Import JAR Dependency to Your Java Application**
**Method 1:** Download the [Free Spire.Doc for Java](https://www.e-iceblue.com/Download/doc-for-java-free.html) and unzip it. Then add the Spire.Doc.jar file to your Java application as dependency.
**Method 2:** You can also add the jar dependency to maven project by adding the following configurations to the pom.xml.
```xml
<repositories>
   <repository>
      <id>com.e-iceblue</id>
      <name>e-iceblue</name>
      <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
   </repository>
</repositories>
<dependencies>
   <dependency>
      <groupId>e-iceblue</groupId>
      <artifactId>spire.doc.free</artifactId>
      <version>3.9.0</version>
   </dependency>
</dependencies>
```

**Extract Text**
```java
import com.spire.doc.Document;

        import java.io.FileWriter;
        import java.io.IOException;

public class ExtractText {

    public static void main(String[] args) throws IOException {

        //Load Word document
        Document document = new Document();
        document.loadFromFile("Island.docx");

        //Get text from document as string
        String text=document.getText();

        //Write string to a .txt file
        writeStringToTxt(text," Extracted.txt");
    }

    public static void writeStringToTxt(String content, String txtFileName) throws IOException{

        FileWriter fWriter= new FileWriter(txtFileName,true);
        try {
            fWriter.write(content);
        }catch(IOException ex){
            ex.printStackTrace();
        }finally{
            try{
                fWriter.flush();
                fWriter.close();
            } catch (IOException ex) {
                ex.printStackTrace();
            }
        }
    }
}
```
![Extract text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6b5vfo0xglecnc6efzlb.png)
Modern Web Dev - Intro
Tags: beginners, webdev, javascript
Published: 2021-11-16 22:58:27

I was a professional web developer from 2009 to 2015. As I'm getting ready to get back into it, I thought I'd write about the process of catching up with modern web dev. You don't need to be in the same place as me to benefit from this blog, though. I imagine, the biggest skills that will transfer over for me, will be my core knowledge of HTML, CSS, and JavaScript. If you're also at the place where you feel confident with your knowledge of these three foundational technologies of the web, and are thinking about what the actual job of doing web development in 2021 looks like, then this article series is for you.

OK, that's a big statement so let me qualify it further by saying that I will focus only on a few parts of this job that I'm most interested in pursuing for myself. I've split up my study plan (and hence the blogs that I will write here) into three parts:

1. Responsive web design and UI
Also known as the front of the frontend, this is reflected in job titles that include the word UI.

2. Data fetching and state management
This will be react-specific (sorry?). Job titles here include the word engineering.

3. Rendering strategies and deployment
I need this for my own sanity. Now you too can know about the wonders of SSG vs SSR vs ISR!!! And this disconnect between the perfectly set up local environment and where it will all be deployed, is a world away from live editing the files on your bluehost "server", so we'll talk about that as well.

Other than the above limitations, narrowing down both the business and tech sides, you should benefit from reading these three articles no matter which part of frontend development you end up working in. For example, knowing the above will be helpful whether you get to work as a solo freelancer, with an agency, or get a full-time job maintaining a single web product for the long term.

Also, these blog posts will just be scratching the surface of what the corresponding subfields entail. If you plan on getting a job with "engineering" in the title, don't think that you're wasting your time reading the first blog. It will not make you a UI expert by any means. It will just give you a better understanding of the field, which translates, among other things, into being a better teammate.

A last note on the format of these articles. I will be writing them as I'm actually reviewing all these concepts myself. It's me documenting my process of learning, kind of like a livestream. But since an actual livestream of that would be unendurably boring, I'm hoping this written format will be a nice middle ground: informative, (hopefully) not too much rambling, while still staying true to the non-linear process that is learning to become a self-taught web developer.
How to style markdown with Tailwind CSS
Tags: beginners, css, javascript, tutorial
Published: 2021-11-16 22:51:58

Tailwind CSS comes with "an opinionated set of base styles" called Preflight. A helpful CSS reset built on top of [modern-normalize](https://github.com/sindresorhus/modern-normalize).

Margins, headings, lists, and many others get stripped from their defaults. Thus, achieving cross-browser consistency and an easier adaptation of your design system.

It all sounds helpful, until you need those defaults to style a markdown post.

In comes `@tailwindcss/typography`, a plugin with sensible typographic styles. It adds a set of `prose` classes to style content blocks like the one you are reading.

You can install it via npm or yarn:

```bash
# Using npm
npm install @tailwindcss/typography

# Using Yarn
yarn add @tailwindcss/typography
```

Then add the plugin to your `tailwind.config.js` file:

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}
```

Finally, you can use the `prose` class to apply the markdown styling:

```html
<article class="prose lg:prose-xl">
  <h1>Welcome to Mars!</h1>
  <p>
    Although life on Mars is perfect in every single way, you might have some questions.
  </p>
  <p>
    Of course there’s air! Just don’t breathe it. And, with the crazy gravity situation, everyone can dunk!
  </p>
  <!-- ... -->
</article>
```

More information about the `prose` class and its modifiers can be found in the [repository](https://github.com/tailwindlabs/tailwindcss-typography).