teleren/devto huggingface dataset:
Notebook with Tailwind Css and JS pure
Tags: codepen, tutorial, javascript, programming
Published: 2022-06-19 12:19:53

<p>Create a notebook and use local storage
In this project, Tailwind CSS is used to design UI
Javascript pure has been used to implement the project</p>

<p>GSAP JS was used to create the animation
This project has a modal created with GSAP JS, Tailwind  CSS 
The design is responsive
Thanks for your likes and comments</p>

{% codepen https://codepen.io/mazdevelop100/pen/BaYvXqm %}
How to install Android Studio on Linux? | Snap Package
Tags: android, debian, linux, ubuntu
Published: 2022-06-19 12:18:48


We will install Android studio by snap package. I'll show you how to do it on Debian or Ubuntu. 

But first: **What is Android Studio?**  

Android Studio is the official Integrated Development Environment (IDE) for Android app development, based on IntelliJ IDEA. 
A lot of fancy words.

Android Studio provides a unified environment where you can build apps for Android phones, tablets, Android Wear, Android TV, and Android Auto. 

And **Snap Package**? What is it? Is safe? I can remove if I want to? 
 
Snaps are self-contained applications running in a sandbox with mediated access to the host system, work across a range of Linux distributions and allow upstream software developers to distribute their applications directly to users.

Is safe as long as you uses the official repository.

Here I'll install the latest version of Android Studio:
Chipmunk | 2021.2.1


![Android Studio: Chipmunk](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2c215th7bq6ztpc16rlq.png)

To install snaps app, we need Snapd. 

#Ubuntu 

```bash
$ sudo apt update 
$ sudo apt install snapd 
```
 
To install Android Studio, just execute this line

```bash
$ sudo snap install android-studio –classic 
```


#Debian

On Debian 9 and newer, snap can be installed directly from the command line:  

```bash
$ sudo apt update 
$ sudo apt install snapd 
$ sudo snap install core 
```

Before install Android Studio, you can search for the latest version with this command:

```bash
$ snap find "android-studio"
```


![Terminal showing snap versions of Android Studio description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xi272ud3a9jdu93rjq3u.png)

To install Android Studio, simply use the command: 

```bash
$ sudo snap install android-studio --classic 
```

The download will start. Upon completion, simply follow the on-screen instructions.
Easy peasy lemon squeezy. 
 

How to Update?  

```bash
$ sudo snap refresh android-studio –classic 
```

How to Remove?  

```bash
$ sudo snap remove android-studio –classic 
```

If you have some doubts, text me.
Cheatsheet for Web Developers
Tags: javascript, webdev, beginners, programming
Published: 2022-06-19 12:06:04

If you are searching for cheatsheet, here I am sharing all the cheatsheet which will definitely going to make you life easy 😉

**Checkout the amazing Cheatsheet here 👇**


1️⃣ [HTML Cheatsheet](https://htmlcheatsheet.com/)

Online interactive HTML Cheat Sheet contains useful code examples and web developer tools, markup generators, and more.

![HTML Cheatsheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crmwl3e9oc2wvd3hx07c.png)
 
&nbsp;
2️⃣ [CSS Reference](https://cssreference.io/)

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, etc.

![CSS Reference](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5ui73sausakwcwihqzh.png) 

&nbsp;
3️⃣ [Git Sheet](https://gitsheet.wtf/)

This cheat sheet features the most important and commonly used Git commands for easy reference. INSTALLATION & GUIS.

![Git Sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oskpvc26vjxnnshozqfl.png)

&nbsp;
4️⃣ [OverAPI](https://overapi.com/)

OverAPI.com is a site collecting all the cheatsheets, all!

![OverAPI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mpl70or3znvwa5w3aon.png) 
 
&nbsp;
5️⃣ [Dev Hints](https://devhints.io/)

This is a modest collection of cheat sheets for ES6, SASS, etc.

![Dev Hints](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ro2yoksl2ljjlfzoqtiq.png) 

&nbsp;
6️⃣ [Cheatography](https://cheatography.com/)

Cheatography is a collection of 5047 cheat sheets and quick references in 25 languages for everything from programming to travel!

![Cheatography](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmsfy8prbgkcdlu44xli.png)



<a href="https://www.buymeacoffee.com/suprabhasupi" target="_blank"><img src="https://i.imgur.com/4t25pJE.png" alt="Buy Me A Coffee" /></a>

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        📚 <a href="https://gum.co/css-pseudo-class-elements"> Ebooks</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>
Fetching Medium Posts And Showing In GitHub Profile
Tags: javascript, webdev, node, github
Published: 2022-06-19 11:11:47

I created a nodeJS app that fetches medium posts from medium rss and converts to svg, json or html.

With svg version you can easily add to your github profile.

For adding GitHub profile just add this to your README.


```
![Alt text here](https://nodejs-medium-fetcher.vercel.app/?username=atakde&limit=5&responseType=svg)(https://medium.com/@atakde)
```

**Note:** Do not forget to replace username.

For other usage you can get response in json type with replacing &responseType=svg part with &responseType=json.

For detailed information you can check git repository.

**Git:** https://github.com/atakde/nodejs-medium-fetcher
Day 1 of #100DaysOfCode
Tags: php, 100daysofcode, opensource, c4rl3
Published: 2022-06-19 11:11:46

I can't wait to start with #PHPoC
how can i do to get a PHPoC IoT #hardware platform?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxpzfzgs7yja5ioruj5o.png)
#CaParleDev 
#PHP #PHPtrends
How I got into coding: via my dad
Tags: programming
Published: 2022-06-19 11:01:46

It's Father's Day in the UK, so I thought I'd talk about my father, since he's the reason I got into coding in the first place.

His story starts at university, back in the days where a computer took up a whole room. He learnt programming, but wrote it all on paper. Which strikes me as a hard way to write it: there's no auto-completion and no way to know if what you've written is correct.

And then we jump forward in time to when we got an Amstrad PCW. He wrote games in BASIC and sent them to the relevant magazine. I got mentioned in there for my bug testing of them.

I took it as read that programming was possible and easy. And I wanted to do it too. I learnt some basic BASIC, but never really did a lot with it. As far as I was concerned a computer was for playing games.

Later, we got a PC and Dad moved on to Visual Basic. I would see him with a form open that had buttons and inputs and text on it and I thought that was so cool. Not that I did any of it - computers were still for playing games, as far as I was concerned. And we only had one in the house, so you had to use your time on it wisely (ie to play games).

But I did know enough about how programming worked (maybe just by watching Dad) to write a program on my graphics calculator as soon as I got one for Maths A level (although everyone in the class did the same - I was just following the herd there).

At university I learnt Pascal and when I came home for the holidays, Dad pointed out it was like Visual Basic. At which point I then actually did some Visual Basic programming.

Sometime after I left university and had a job that closed for the three working days between Christmas and New Year I didn't know what to do with myself with all that time off. Dad handed me a PHP book, so I spent the time learning that. And then didn't use it and immediately forgot it all. He, though, is still all about the PHP.

In the present day, Dad is everyone's computer helpline (it's rare that he doesn't get a call or message from someone needing help when I'm visiting). We had a conversation at Christmas about using tables in HTML. Mum once said that he liked me visiting because he had someone to talk to about computers.

And the way I knew I had made it as a developer was the day he messaged me to ask me what the opposite of visibility: visible was. He could have got a quicker answer if he'd googled it, but he didn't need to, because he knew I'd know the answer.
Experience Of Virtual Internship
Published: 2022-06-19 10:54:47

Hello Folks!

I am really happy to write about my internship experience at **LetsGrowMore(LGM)** Community under the virtual internship program in June 2022.

It is very good platform for exploring your existing knowledge and expand your knowledge.

I would like to thanks to **Aman Kesarvani Sir** and **LetsGrowMore(LGM)** Community for giving me this opportunity to explore my talents and skills.

**Please visit below given website:**
http://letsgrowmore.in/
http://letsgrowmore.in/vip
This Keyword
Published: 2022-06-19 10:17:27

```javascript
const student = {
    id: 101,
    name: "faisal",
    firstSkill: function(id,name){
        console.log("My name is "+this.name);
        console.log(this);
    },
    secondSkill: () => {
        console.log(this);
    },
    thirdSkill: function(){
        const myArrow= () => 
            console.log(this);
            myArrow();
        
    }
     
}

function add(){
    console.log(this);
}

```

**Some Rules**

> This হচ্ছে execution context.

> Regular method হলে বাম পাশে যে আছে সেটাকে context হবে।

> Arrow function হলে উপরের level অনুসারে context ধরবে।(Arrow function immediate context ধরতে পারে না।) 

> কোনো dom এর element এ click করলে, সেই event টাই this বুঝাবে। 

> Dom এর element এর event টা কোনো event handler হলে (যেটা পরে execute হবে), তাহলে function টা calling এর উপর this নির্ভর করবে। 
 



firstSkill normal function er jonno, this output ta, student er all property gula pay

secondSkill arrow function er jonno, this output ta, tar immediate level student er all property pay na. tar uporer level pay. eikhane tar uporer level hosse, window.

thirdSkill normal function er vitore myArrow namer ekta arrow function ase, arrow function er khetre same rules, this output ta, tar immediate level thirdSkill er property pay na. tar uporer level er all property pay. eikhane tar uporer level hosse, student.

add() function jodi index.html er kono event er moddhe thake call kora hoy, jmn---> ; tahole add normal niyome hobe. Jemon-> add() function window te ase, tai this er output hobe, window.

add() function jodi index.html er kono event er moddhe thake call kora na hoy, jmn---> Click Me ; tahole add normal niyome hobe na. eitar output hobe, oi element ta. jemon eikhetre Click Me hobe output.
Fix "None Type is not iterable " in Django
Tags: django
Published: 2022-06-19 10:16:30

## Error Message
![image-20220614174318585](https://image-1256777099.cos.ap-beijing-fsi.myqcloud.com/2022/image-20220614174318585.png)

According to the breakpoint debug, I found it's caused by the context processors that I had defined.

Comment it first. 

```python
# settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates', os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                # 'food.context_processors.access_realtime_cart_count'
            ],
        },
    },
]
```

## Reason
Comment this line, the application turned into a normal state.

It seems that the context processor changed the context that login page needed. 

We are in an **unauthorized** state when we enter the system for the first time. So we need to handle this situation.

## Solution

The right way to declare a context processor is below:
```python
### food/context_processors.py
from .models import OrderItem, Order


# the order item number of you current cart
def access_realtime_cart_count(request):
    if request.user.is_authenticated:
        try:
            active_order = Order.objects.get(user__username=request.user.username, status=1)
        except Order.DoesNotExist:
            newOrder = Order(user=request.user, total_price=0.0, status=1)
            newOrder.save()
            active_order = newOrder
        cart_count = OrderItem.objects.filter(order_id=active_order.id).count()
        return {'realtimeCartCount': cart_count} # you can access the "cart_count" variable in any tempaltes of your projec
    else: # handle the unlogin 
        return {'realtimeCartCount': 0}
```
IntelliJ Community で Ktor のプロジェクトの作成を失敗した
Tags: kotlin, ktor
Published: 2022-06-19 09:42:16


## 前提

前回、IntelliJ Community Editon をインストールして
Kotlin のプロジェクトを作成し
自動生成の Hello World アプリの実行結果を確認できた。

---

## 今回やること

サーバー作成用の Ktor という kotlin FW を使い
サーバーを作って、ブラウザからアクセスしてみる。

---

## 結論

迷ったら **英語の** 公式ページを参照すべき。
日本語のサイトは抜け漏れが放置されていることが多い。

---

## Ktor を選択して Ktor プロジェクトをスタートできない

https://jp.ktor.work/quickstart/index.html#

Ktor 公式のチュートリアルには

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zk1yydgabspiz8nn0w9q.png)
 
プロジェクト作成時に左側に Ktor のタブがあると書いてある

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4x0obksbq2c5go297u2f.png) 

しかし、自分のプロジェクト作成画面には、Ktor などはない。

---

## Plugins から Ktor をインストールできない

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96vzs2x92f87iloxqohm.png)

Plugins のページから検索してみても、

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2x9s4ajrpo4l8554okm.png)

Ballest という、関係ないプラグインしかヒットしない。
Ball っていうか Nuts! 

---

## IntelliJ の日本語公式ページをみるも、Ktor を選べとしか書いてない

https://pleiades.io/help/idea/ktor.html

IntelliJ での公式ページ(日本) では同じように
Ktor を選べとしか書いてなかった。
無いんだよなぁ、それが。

---

## IntelliJ の英語公式ページをみて無料版では Ktor プロジェクトが作れないことを確認する

https://pleiades.io/help/idea/ktor.html

一方、英語版の公式ページを見ると、

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1al4ohiex63si9olw10m.png)

事前要件として、

> IntelliJ の有料版であるアルティメットが必要。
> 無料版の Community は Ktor で生成できない。
> web 版で生成して来い

としっかり書かれていた。 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yf9d2faq0tz6091tg8q.png)

日本語での公式サイトにはその項目はなかった。 

---

## 今後やること

この状態から進めるには 3 つ手段がある。

1. IntelliJ 有料版の購入とライセンス適用
2. IntelliJ Web Project Generator を使って Ktor プロジェクトを生成して、DL して無料版で編集実行する。
3. Gradle でプロジェクトを生成してから Ktor を適用する

2, 3, で無料版で使うにしても、 ktor の拡張はない。
補完やハイライトは適用されるのだろうか？
適用されずに、使いにくいのだろうか？

https://rinoguchi.net/2020/04/kotlin-ktor-clean-architecture.html

3 はこれを参考にして
rino guchi さんのように、Gradle で作ってから
Ktor をあとから呼ぶ方法に変える
Organize how to study & practice algorithm
Published: 2022-06-19 09:25:13

Study at least two these per day.

1. Follow this flow: https://www.techinterviewhandbook.org/algorithms/study-cheatsheet/

2. Leetcode practice: At least 1-2 problems at a day. https://leetcode.com/study-plan/algorithm

3. Watch codeit video lessons to make sure i understand the fundamental knowledge (cuz the videos explain in a very easy way for beginners)
Starting my 100 days of code
Tags: react, css, javascript, tutorial
Published: 2022-06-19 09:06:29

Today I would be starting my 100days of code with Reactjs, Typescript, Next and Vue. I would be starting with a minimal functionality to a potential website. 
I love to reflect on what I have learn so far from the documentation.
I hope by posting this will keep me motivated to go further in learning. Would love to hear comments from you.
Ex-Meta Engineer answers Coding Interview Questions
Tags: career, webdev, programming, tutorial
Published: 2022-06-19 08:25:28

Former E5 Meta engineer answers questions about coding interviews. We hosted a Q&A style event that you can watch [HERE](https://www.youtube.com/watch?v=_Fu2oiGHyVU). 

Questions like the below are discussed in detail - 

[5:03](https://www.youtube.com/watch?v=_Fu2oiGHyVU&t=303s) - What’s your take on how preparing your data structures/leetcode knowledge applies towards software engineering actually on the job?

[9:19](https://www.youtube.com/watch?v=_Fu2oiGHyVU&t=559s) - What are some things I can put on my software engineering resume if I am a senior in college but I do not have any internship/experience?

[19:08](https://www.youtube.com/watch?v=_Fu2oiGHyVU&t=1148s) - How should the interview process be different for senior engineers? For example someone who has 10+ years of experience?

[26:13](https://www.youtube.com/watch?v=_Fu2oiGHyVU&t=1573s) - For the behavioral interview do you recommend a resource?

[34:08](https://www.youtube.com/watch?v=_Fu2oiGHyVU&t=2048s) - Being self-taught what was your path to Facebook?

[35:44](https://www.youtube.com/watch?v=_Fu2oiGHyVU&t=2144s) - How did you know and how did it feel when you were well-prepared and felt likely to pass your technical interview?

[46:41](https://www.youtube.com/watch?v=_Fu2oiGHyVU&t=2801s) - How important is Github/personal profile of projects?

[46:55](https://www.youtube.com/watch?v=_Fu2oiGHyVU&t=2815s) - What was the thing you benefitted most from mock interviews?

[48:33](https://www.youtube.com/watch?v=_Fu2oiGHyVU&t=2913s) - What would be the mini roadmap to knowing the ADM 2 specific math?

Let us know if you have any additional questions in the discord: [https://discord.gg/Xsbnmt4N](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqa1I5TVY3c2xvbnBQUzNsY21uT1lGODBqUXYwZ3xBQ3Jtc0tucEJqY0hyb1BvTmxJSDU1U0hUNmF0OVpTRGpVWEY1M18xZjBtY2I2WWhNMGNsRXF0TVEwdE9Jdm9QRmc4QTBXSmtadnpScFcwN3JtMXVfMmpRcnluekxoVDlUSmJDTVBpSC1LYk1EeWQ1RUFrWkZjWQ&q=https%3A%2F%2Fdiscord.gg%2FXsbnmt4N&v=_Fu2oiGHyVU)

### **Join the community**

Looking for a study partner? Hackpack is the most active community of engineers studying for programming interviews. We hold each other accountable, provide support, and fight burnout to study more efficiently and get the job faster.

Apply [Here](https://www.hackpack.io/) 

[Events](https://discord.gg/VQkMr234zk?event=970275330294153257) | [Youtube](https://www.youtube.com/channel/UCfotE5RL1pfhIZ0fv2kAN9Q) | [Twitter](https://twitter.com/hackpack_) | [LinkedIn](https://www.linkedin.com/company/hackpack-io/?viewAsMember=true) | [Newsletter](https://fangprep.substack.com/)
Generate PDF and Epub files using Pandoc
Published: 2022-06-19 11:56:55

---
title: Generate PDF and Epub files using Pandoc
published: true
date: 2022-06-19 08:22:12 UTC
tags: 
canonical_url: https://dcblog.dev/generate-pdf-and-epub-files-using-pandoc
---

I write my books using Markdown. Using a tool called [Pandoc](https://pandoc.org/) you can convert Markdown files into PDF's and Epub files. Lets take a look at the commands.

## Install Pandoc with Homebrew

```
brew install pandoc
```

Converte a .md file to .pdf aka generate a PDF

```
pandoc demo.md --pdf-engine=xelatex -o demo.pdf
```

> Note when generating a PDF the option --pdf-engine is required.

The syntax is pandoc followed by the source file add any options with the -- flag. Set the output location and filename with the -o flag.

if you encoutner this error:

> pandoc: /Library/TeX/texbin/pdflatex: createProcess: posix\_spawnp: illegal operation (Inappropriate ioctl for device)

It means xelatex is not installed on the machine.

To install xelatex:

```
brew tap homebrew/cask
brew install basictex
eval "$(/usr/libexec/path_helper)"
sudo tlmgr update --self
sudo tlmgr install texliveonfly
sudo tlmgr install xelatex
sudo tlmgr install adjustbox
sudo tlmgr install tcolorbox
sudo tlmgr install collectbox
sudo tlmgr install ucs
sudo tlmgr install environ
sudo tlmgr install trimspaces
sudo tlmgr install titling
sudo tlmgr install enumitem
sudo tlmgr install rsfs
```

Running the command again:

```
pandoc demo.md --pdf-engine=xelatex -o demo.pdf
```

You may see:

> [WARNING] Missing character: There is no (U+251C) (U+251C) in font [lmmono10-regular]:!

You can either install a font that supports the symbols, often caused by emoji's for example

Once the above has been corrected you will be able to generate PDF from Markdown files using:

```
pandoc demo.md --pdf-engine=xelatex -o demo.pdf
```

To add a table of contents use the option --toc in the command

Make PDF:

```
pandoc demo.md --pdf-engine=xelatex --toc -o demo.pdf
```

Make Epub:

```
pandoc demo.md --toc -o demo.epub
```

## Front Matter

When working with PDF/Markdown you can specify YAML tags in the markdown to set the book title, author and event the cover image with working with EPUB

This should be at the top of the file, it will not be printed.

```
---
title: Demo Book
creator:
- role: author
  text: David Carr
cover-image: cover.jpg
---
```

## Write a book

Here is a basic markdown file; this has chapters designated by # (h1) sub headings can be added by using ## (h2)

```
---
title: Demo Book
creator:
- role: author
  text: David Carr
cover-image: cover.jpg
---

# Chapter 1

An example chapter.....

# Chapter 2

This is super basic

## Sub chapter that belongs to chapter 2

>Markdown is awesome!

# Chapter 3
```

Convert this to a PDF or Epub file to produce:

![ebook](https://cdn.hashnode.com/res/hashnode/image/upload/v1655626638046/aiUcdKzkE.png)
Shortcuts Visual Studio Code
Tags: webdev, programming, beginners, laravel
Published: 2022-06-19 08:19:13

Most of us use Visual Studio Code as an excellent code editor for him that helps him write code in his daily tasks, but it is always better to know the abbreviations and even learn them because they help to shorten the time and make you a professional programmer

- https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

- https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

- https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf


See these links, learn and enjoy the code.
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes
Published: 2022-06-19 08:00:27

---
title: "Today's Daily Dose of Programming Humor"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125894734cf.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

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

<!--
Joke text:
___Q:___ What diet did the ghost developer go on?

___A:___ Boolean
 -->