teleren/devto huggingface dataset:
Using the new and better CSS!
Tags: css, webdev, tailwindcss
Published: 2022-01-16 08:44:55

**Tailwind CSS** has taken quite a rapid growth in the last few months... Surely many of us find CSS to be hard and confusing on times. But wait, what about a backend developer? The same happened with me, I am a backend developer and I find it difficult to use CSS for making responsive websites...

Recently I came across a CSS framework called [**Tailwind CSS**](https://tailwindcss.com/).

Trust me, once you use this, you will forget what CSS used to be like.

## Getting Started
Let's get started by installing **Tailwind CSS**.
Follow the steps below -

- Create a new project. Let's name the fonder `tailwind_css`.
- Run `npx tailwindcss init` in the folder.

> This will be good if you are making static websites and don't want `node_modules/` in your project listing.

The command above will create the file `tailwind.config.js`.
- Now let's say you have your project files in the sub-folder `home`.

So, this shall be the project listing...
![Directory Listing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvt7ul2qs12oukdrqo7y.png)

- Now edit the `home/index.html` codes like this to use `tailwindcss` perfectly.
```html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/tailwind.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>
```

- Run the following command.
```bash
npx tailwindcss -i ./home/tailwind.input.css -o ./home/tailwind.css --watch
```
>> Now open the file in browser and you will see the responsive UI with only class names as inputs.
swift - parse JSON Data from API
Tags: swift
Published: 2022-01-16 08:39:30

JSON stands for JavaScript Object Notation. It’s a popular text-based data format used everywhere for representing structured data. Almost every programming language supports it with Swift being no exception.

In Swift, parsing JSON is a common necessity. Luckily, working with JSON is easy in Swift. It doesn’t even require setting up any external dependencies.


To convert this JSON to a Swift object, let’s store this JSON data in a structure.
To start off, let’s create a structure that conforms to the Decodable protocol to store all the listed properties found in the JSON data:

```swift
struct Slip:Codable{
    var slip:Advice
}

struct Advice:Codable{
    var id:Int
    var advice:String
}
```
## Key terms
- URLSession
An object that coordinates a group of related, network data transfer tasks.
- JSONDecoder
An object that decodes instances of a data type from JSON objects.

Creating getSlip function to fetch data from an Url

```swift

let url = "https://api.adviceslip.com/advice"

func getSlip(from url:String){

    URLSession.shared.dataTask(with: URL(string: url)!, completionHandler:{ data,response,error in
        guard let data = data else
        {
            print("Something went wrong")
            return
        }
        var result:Slip?
        do{
             result = try JSONDecoder().decode(Slip.self,from:data)
        }catch{
            print("Failed decoding data")
        }
        guard let json = result else{
            return
        }
        print("ID: \(json.slip.id)")
        print("Advice: \(json.slip.advice)")

    }).resume()
}

getSlip(from: url)
//ID: 134
//Advice: The person who never made a mistake never made anything.
```
What is an IIFE in Javascript?
Published: 2022-01-16 08:37:33

## IIFE 

An IIFE is (Immediately Invoked function Expression) that runs as soon it is defined.

```
(function () {
  var number = Math.random() * 10
  console.log(number >= 5)
})()
```
 
It is a design pattern also known as self executing anonymous function and contains two major parts

1. The first is the anonymous function with lexical scope enclosed withing the grouping selector (). This Prevents accessing variable withing the IIFE idiom as well as polluting the global scope.

2. The second part is the Immediately invoked function expression (). through which javascript engine will interpret the function

## uses of IIFE 

```
(function () {
  var Num = 17;
  console.log(1 + Num)
})

console.log(Num) // This will throw an error 

```
- A common use of an IIFE is that a function or a Variable declare inside of a IIFE block cannot be accessed outside of an IIFE block, thus preventing global scope from getting polluted. Also help us manage memory in efficient way.
Writing unit tests for EF Core
Tags: dotnet, testing
Published: 2022-01-16 09:07:21

---
title: Writing unit tests for EF Core
published: true
date: 2022-01-16 08:21:00 UTC
tags: dotnet,testing
canonical_url: https://jason.sultana.net.au/dotnet/testing/2022/01/16/writing-unit-tests-for-ef-core.html
---

G’day guys!

It’s been a while since I’ve had a good look at Entity Framework, since for the last couple of years I’ve been professionally living in mostly NoSQL-land. Earlier today though, I thought I’d crack open an old hobby project and add some unit tests for it. That’s easier said than done though unless you know what you’re doing, since `DbContext` by default is not easily unit testable.

### Bro, do you even Moq?

![](https://jason.sultana.net.au/static/img/bro-do-you-even-mock.jpeg)

I hear ya! It should be as simple as extracting an interface out of your context, mocking it with Moq and you’re done! The problem essentially is the `DbSet<T>` that you use to define your tables. Firstly, `DbSet<T>` is abstract, so it can’t be newed. On top of that, there are a whole plethora of methods on it that are a pain to mock - `ToListAsync()`, `Where()` chaining, `IQueryable<T>` logic, unions and other set operations and more. If I remember correctly, there was a [Microsoft article](https://docs.microsoft.com/en-us/ef/ef6/fundamentals/testing/mocking#testing-with-async-queries) published years ago which gave you an implementation for what was essentially a mockable `DbSet<T>`, but I’ve found a better solution: `Moq.EntityFrameworkCore`.

You can have a look at the official howto on [Github](https://github.com/MichalJankowskii/Moq.EntityFrameworkCore), but the gist of it is:

```
        var mock = new Mock<IYourDbContext>();
        mock.Setup(m => m.Customers)
            .ReturnsDbSet(_customers); // This magic comes from Moq.EntityFrameworkCore

```

And that’s it! Admittedly I haven’t tested it thoroughly, but for the simple-ish test cases that I have, it works like a dream. Looking at the [source code](https://github.com/MichalJankowskii/Moq.EntityFrameworkCore/tree/master/src/Moq.EntityFrameworkCore/DbAsyncQueryProvider) interestingly looks quite similar to the Microsoft article, but even if it is just taking what Microsoft gave us and packaging it into a nice, easily-consumable chunk of nuget (I’m dreaming of Tim Tams), it’s much appreciated.

Anyway, that’s all from me - this might be my shortest post yet. Happy mocking!

Catch ya!
A first look at Prisma Studio
Tags: database
Published: 2022-01-16 08:07:37

Ever since I started showing interest in Prisma, the Studio element kept showing up everywhere.

Prisma studio is basically a GUI for the data in your database.
I haven't used it myself at the time of writing, so we'll be learning what it can do together.

For this, we'll use the project we just created, and you can follow along by using this [GitHub branch](https://github.com/rebelchris/local-prisma/tree/part-2).

## What is Prisma Studio

Prisma Studio is a visual interface to the data in your database.

You can use this to quickly visualize data and work with the data in there.

![Prisma studio](https://cdn.hashnode.com/res/hashnode/image/upload/v1641449124818/38UArvTsP.png)

The cool part is that it runs in your browser, and you don't need to set up any connection as it's already available in your project.

> Note: You can download a desktop app as well if your prefer

You can quickly open all the models your application has and interact with it the CRUD way from the tool.

`CRUD` stands for: Create, Read, Update, Delete.

You can also use filters and sorting options, making it super easy to navigate through your data.

## Launching Prisma Studio

I've never seen a database GUI that was so easy to launch. Literally all you have to do is run the following command from a Prisma project.

```bash
npx prisma studio
```

It will automatically open `localhost:5555`, where you can see your data.

![Local Prisma studio](https://cdn.hashnode.com/res/hashnode/image/upload/v1641449171487/uJP7qiMBGB.png)

Alternatively, you can download a native app from the Prisma website.

[Download the Prisma Studio app](https://www.prisma.io/studio)

## Conclusion

Definitely cool we can launch a GUI without any setup needed.
I will 100% use this if I need a quick visualization of my data.

Will you be trying out Prisma Studio?

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
A Quick 10-Second Programming Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-01-16 08:00:00

---
title: "A Quick 10-Second Programming Joke For Today"
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/5e125947cfb29.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:___ An Agent died unexpectedly. How was the crime solved?

___A:___ By looking at the Stack Trace.
 -->
Here's how I made a  simple Chrome extension for Gmail notifications
Tags: javascript, webdev, programming, react
Published: 2022-01-16 06:23:23


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkn5ziwgx0r8sidhcev9.gif)](https://chrome.google.com/webstore/detail/blue-bell-gmail-notificat/dokpofkkaggijbeeaeijobkhjfdijjec?hl=en-GB&authuser=0)
[**Blue Bell Gmail™ notification tool**](https://chrome.google.com/webstore/detail/blue-bell-gmail-notificat/dokpofkkaggijbeeaeijobkhjfdijjec?hl=en-GB&authuser=0)

I was searching for a simple extension that would allow me to quickly view new e-mails received. I found some of the greatest extensions. But what impressed me the most is their ability to show my Gmail without asking for my password explicitly. Honestly, this was a real shock to me.

These extensions can display my email without even asking for my password, which made me both fearful and curious. I eventually ended up at Gmail's feed API. 

**Gmail Inbox Feed**

The Gmail Inbox Feed will output your Inbox as an XML document. You can use an RSS aggregator to view this, or you can consume the feed with your own app.

> GET https://mail.google.com/mail/feed/atom


**Solution** 

1. A feed atom API call returns unread emails and total unread emails in an inbox that is logged in.

2. In order to show an unread email when it is opened, the extension will call api and display it in the proper format

3. Unread email listeners must notify. It is necessary to have a background script when we want to run anything in the background for an extension. 
 
4. In that case, the feed API is read every minute if there is an unread email update extension badge with a count.

**Permission Required**

 `"content_scripts": [
    {
      "matches": ["*://mail.google.com/*"],
      "js": ["contentScript.bundle.js"]
    }
  ]`

**[Demo 🚀](https://chrome.google.com/webstore/detail/blue-bell-gmail-notificat/dokpofkkaggijbeeaeijobkhjfdijjec?hl=en-GB&authuser=0)**

Feel free to contribute on **[GitHub](https://github.com/midhunz/gmail-notifier)**

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tlk0givomcszyr1hx6r.png)](https://github.com/midhunz/gmail-notifier)


Please comment on your ideas and thoughts, Geeks 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k93jg7rd6gj9gbsnjox2.gif)
Thinking in React
Tags: react, javascript, webdev, programming
Published: 2022-01-16 07:54:35

**One of the many great parts of React is how it makes you think about apps as you build them.**

Not a contribution from my side but have a look at this piece from react official docs. I was reading it today morning and thought it will be good if you guys have a read too!

[Thinking in React](https://reactjs.org/docs/thinking-in-react.html)
Continuing Open Source
Published: 2022-01-16 07:52:52

As I continue my journey through open source for another semester, there are more things that I want to explore and hence use this post to set goals for the semester. 

First, I want to continue working on the Searchbar for Telescope. So far, I put up the backend of the API for Elasticsearch. My goal now is to create the UI for the search bar so that we can have more refined searches. 

My main goal is to keep working away in React. This may not sound so exciting - however, I want to become more comfortable and proficient in React. Whether this means getting more front or back end code in - it is something I want to add to my resume and never hesitate to answer "How comfortable are you with React?" in an interview. 

I am very comfortable with front end work and don't have much exposure to back end services and such. However, I am alright with taking up more front end work, as it will slowly introduce me to more areas of the repository. This is another goal - to become more familiar with the code in the repository for Telescope. 

There's a lot to work on in the repository, and as a result there are many services and dependencies. Just as I got involved in Elasticsearch and nginx, I want to get involved with more! This was honestly one of the most scary things I did last semester. For nginx - I had no idea where to start. The change was literally 4 lines of code, but I learned so much. Elasticsearch was a bit more code, and again, I had absolutely no idea what I was doing, however after reading A LOT of the documentation, I went from playing with one file, to understanding there are more files involved. 

I also want to have better time management. Yes I work better under pressure, but there's no reason to put the "pressure" on the deadlines. I should set my own deadlines before the due date and work towards that. 

Lastly, as most of the students in this round have taken the previous course, I hope to work on an issue with another student(s). I want to be more involved and share ideas with others as we tackle issues.
The best free resources to get started with ethereum, dapps, solidity, NFTs & beyond in 2022
Tags: blockchain, beginners, tutorial, ethereum
Published: 2022-01-16 07:45:02

## Table Of Contents
  * [Docs](#docs)
  * [Youtube](#youtube)
  * [Others](#others)

      
---

## Docs <a name="docs"></a>

_Trust me docs are the great way to learn anything with much deeper way and gain more knowledge._

####Official documentations
 * [What is ethereum ?](https://ethereum.org/en/what-is-ethereum/)
 * [How ethereum works ?](https://preethikasireddy.medium.com/how-does-ethereum-work-anyway-22d1df506369)
 * [Eth hub](https://docs.ethhub.io/)
 * [Eth wiki](https://eth.wiki/)
 * [Whitepapaer](https://ethereum.org/en/whitepaper/)

 * [What is NFT ?](https://ethereum.org/en/nft/)

 * [What is smart contract ?](https://ethereum.org/en/smart-contracts/)
 * [Solidity official docs](https://docs.soliditylang.org/en/v0.8.11/)
 
 * [CryptoZombies - CryptoZombies is an interactive school that teaches you all things technical about blockchains. Learn to make smart contracts in Solidity by making your own crypto-collectibles game.](https://cryptozombies.io/)

## Youtube <a name="youtube"></a>
* [eattheblocks](https://www.youtube.com/eattheblocks)
* [solidity](https://www.youtube.com/playlist?list=PL16WqdAj66SCOdL6XIFbke-XQg2GW_Avg)
* [dapp university](https://www.youtube.com/channel/UCY0xL8V6NzzFcwzHCgB8orQ)

## Others <a name="others"></a>
* [Web3 Playlist -- Youtube](https://www.youtube.com/watch?v=8rhueOcTu8k&list=PLS5SEs8ZftgVV6ah1fo2IvlHk1kTCy6un)
* [Solidity Playlist -- Youtube](https://www.youtube.com/watch?v=MnSmc7Hto2k&list=PLS5SEs8ZftgUq-aMMYeKf8nPqHrNqa3Iu)
* [ETHEREUM FUNDAMENTALS -- Free course](https://learn.kba.ai/course/ethereum-fundamentals/)
* [Into the ethere -- Podcast](https://podcast.ethhub.io/)






> If you are reading this & liked above resources share it, you can also contribute to this post, To contribute add your comment for best resources out there to learn ethereum i will add it !!
Trick for the Binary Search Data Structure
Tags: algorithms, programming, cpp
Published: 2022-01-16 07:05:53

A short and effective tip for clearing test cases in competitive programming.
As we know when we search the given elements in binary search either iterative or recursive way we need to find mid value.
So to find mid value we simply use 
**int mid = low + end / 2** but sometimes it will fail one of the given test cases so instead of this use 
**int mid = low +(end - low) / 2**

Why 🤔

Because as we know integers can hold 10^9 values so if we use **int mid = low + end / 2** 
that means **10^9 + 10^9** here it will exceed the memory. 

So instead of this we use above method.

Thanks for reading.
Hope it's helpful to you🤗
var vs let & const.
Tags: javascript, tutorial
Published: 2022-01-16 07:05:36

## Redeclaration of variable 
You can redeclare a variable with `var`, but not with `let` and `const`:

```js
var foo = 34;
var foo = 46;

foo; // 46
```
However, if we try to redeclare a variable with `const` and `let`, we will get a syntax error:

```js
var foo = 34; 
let  foo =46;

foo;  
// SyntaxError: Identifier 'foo' has already been declared.
```
## Global scope & function scope vs block scope 
`var` only has knowledge of global scope and function scope. This means that if you declare a var variable inside an `if` statement, you can still access it from outside of that if statement. However, you can't do the same with `let` and `const`. For example:
```js
var name = "Max"; 

if(name === 'Max'){
  var hobbies = ['Sports', 'Cooking']; 
  console.log(hobbies)  // [ 'Sports', 'Cooking' ]
}

console.log(name, hobbies)  
// 'Max' [ 'Sports', 'Cooking' ]
```
Notice that you can still access hobbies from outside of the if block. But in the case of let and const, we can't do that since both `let` and `const` are block-scoped.
```js
var name = "Max"; 

if(name === 'Max'){
  let hobbies = ['Sports', 'Cooking']; 
  console.log(hobbies)  // [ 'Sports', 'Cooking' ]
}


console.log(name, hobbies) 
// ReferenceError: hobbies is not defined

```
As you can see, we get a ReferenceError. `let` and `const` only care about curly braces (except for curly braces of an object). You can't access a variable defined inside a child block from outside. Also, you can't access a variable that you defined inside a nested block.
```js

var name = "Max"; 

if(name){
  {
    let test = 34;
  }

console.log(test)  
// ReferenceError: test is not defined
}

```
## Hoisting: var vs let & cost
When it comes to `var`, JavaScript initializes the hoisted variable as `undefined`:
```js
console.log(name); //'undefined'

var name = "Rob"
```
When it comes to let and const, the declarations remain uninitialized:
```js
console.log(name);        // ReferenceError: 

//Cannot access 'name' before initialization

var name = "Rob"
```
OSD700: Maintaining Telescope
Tags: opensource, javascript, typescript, node
Published: 2022-01-16 07:01:21

Thi semester I got a privileged to be one of the maintainer of the [Telescope](https://telescope.cdot.systems/)

## I'm back

This course in my point of view is like a cool job. "Cool job" in my term paid you for what you love to do and this class marked your work base on what you willing to do and learn. This course get as hard as you willing to push yourself.

## My goal for the project 

> Make the entire app easier for new people to setup, debug, and develop. There's too much secret knowledge and too many manual steps right now.

I would love to work on this part where I want to shred more light and hope to make [Telescope](https://github.com/Seneca-CDOT/telescope) easier to navigate

I try to learn `React` eveyrday as my 2020 goal. Because of that I want to contribute more in the front end of the project. I also have a long story with being a mobile developer. I used to work for a tiny startup and create their app myself using `java`. I know it is not the same but I'm exciting to start it as we go.

But I want to learn as much as I can, either about cloud, backend as I want to have a decent knowledge to make it to the workforce :)
Global progress bar for htmx
Tags: html, programming, css
Published: 2022-01-16 06:54:42

## Introduction

One of the cool features of htmx is that it lets you add a progress bar to your ajax requests with ease.
The [request-indicator (hx-indicator)](https://htmx.org/docs/#indicators) toggles the target element's (progress indicator element) opacity to `1` during the request and to `0` when the request ends.

> When htmx issues a request, it will put a htmx-request class onto an element (either the requesting element or another element, if specified). The htmx-request class will cause a child element with the htmx-indicator class to transition to an opacity of 1, showing the indicator.

This post is about adding a global progress bar for htmx. This way, you can define the progress bar once and attach it to all your htmx requests.

## Progress bar

Add the following progress bar to the top of the base template.

```html
<div class="progress" style="height: 3px; background-color: white;">
      <div class="indeterminate" style="background-color: red;"></div>
</div>
```

The associated css:

```css
.progress {
  position: fixed;
  top: 0;
  z-index: 1000;
  height: 4px;
  width: 100%;
  border-radius: 2px;
  background-clip: padding-box;
  overflow: hidden;
}
.progress .indeterminate:before {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
    infinite;
  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress .indeterminate:after {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
    infinite;
  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
    infinite;
  -webkit-animation-delay: 1.15s;
  animation-delay: 1.15s;
}
.progress {
  display: none;
}
.htmx-request .progress {
  display: inline;
}
.htmx-request.progress {
  display: inline;
}
@-webkit-keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}
@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}
@-webkit-keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}
```

Then, add a progress attribute to all your htmx requests `hx-indicator=".progress"`

## Demo

{% codesandbox infallible-euclid-gtevo %}