teleren/devto huggingface dataset:
Stuck in the middle with Me
Tags: opensource, madness
Published: 2020-12-06 15:49:06

This post will serve as an update on my first (of three) [release 0.4 blog post](https://dev.to/chrispinkney/dawn-of-the-final-day-3-releases-remain-i1n). I've made my first PR [re-adding the about page](https://github.com/Seneca-CDOT/telescope/pull/1487) on Telescope's new frontend using NextJS. It utilizes this neat library called MDX which allows NextJS to read and parse markdown files. But more importantly it allows `.md` files to have JSX code run directly inside the md file. I imagine this library was made mostly for a blogging platform using NextJS but for our uses I think it works really well. I had to configure it a bit to get it to work with TypeScript but it wasn't too bad.

I'm currently stuck on my second PR which [readds the logo icon](https://github.com/Seneca-CDOT/telescope/issues/1481) to the project. I'm trying to make it into a component so it can be called and rendered anywhere. I'm also trying to make use of [NextJS's image optimization](https://nextjs.org/docs/basic-features/image-optimization). I'll get it eventually.

Regrettably this might be my last PR. Ideally I wanted to do 3-5 PRs for release 0.4. I just don't have the time, and it's really upsetting. We'll see what happens after Wednesday when all my exams are done (although I **still** have two projects to finish by Friday *#ThanksSeneca*).

I'm fine. How are you?
Algorithmic walkthrough: Merging 2 Packages
Tags: algorithms, python
Published: 2020-12-06 19:32:12

So, let's say we have an algo problem with the following statement
> Given a package with a weight limit `limit` and an array `arr` of item weights, implement a function `getIndicesOfItemWeights` that finds two items whose sum of weights equals the weight limit `limit`. Your function should return a pair `[i, j]` of the indices of the item weights, ordered such that `i > j`. If such a pair doesn’t exist, return an empty array.

## Problem Analysis
Before writing any code in an interview or an algorithmic problem try to explain it in plain English or pseudocode.
### Parameters
1. limit
2. arr

### Requirements
1. Finding two items in arr whose sum is `limit`
2. Returning the indices of these items 
3. The bigger index should be the first in the returned array.

The basic idea is finding a pair that adds up to the limit `limit`. The first solution you may think of is having a nested `for-loop` where we try to find a pair that sums up to limit.

## Naive Solution

{% replit @Vicradon/algo-walkthrough-merging-2-packages-naive %}

Notice how we used
```py
for index in range(numIndex+1, len(arr)):
```
in the second for-loop? We don't want to compute the same pair twice, so we set the second loop to be an index ahead of the first. So for an array: `[2, 4, 1, 5]`, we have the following pairs
```
2, 4
2, 1
2, 5
4, 1
4, 5
1, 5
```
### Time complexity
The implementation above has a time complexity of `O(n^2)` (quadratic) because of the for-loop. In the worst case, we will have to compute the last pair before returning an answer. 

## More efficient solution
We aim to reduce the time-complexity from quadratic time to linear or logarithmic time. One way to approach this is to eliminate the nested loop. This means storing the results of the computation somewhere. A hashmap will be a good data structure for this. Since we are using python, we will use a dictionary.

{% replit @Vicradon/algo-walkthrough-merging-2-packages-efficient %}

The idea here is to transverse the array once and find the weight's complement `limit - weight` at each iteration. We check if that complement is in the array. If it is, we know we have succeeded. Remember the ultimate goal is to find a weight-complement pair that adds up to `limit`. So if the complement exists in the array, we can proceed to return
1. The weight's index
2. The complement's index

This algorithm can be classified as a non-greedy algorithm. We try to return a result as soon as possible.

### Time complexity
The time complexity of this algorithm is `O(n)` because we transverse the array once. 
### Space complexity
Hashmaps have an `O(n)` space complexity because their size increase with the number of entries. 

## Conclusion
You have learned a use case of hashmaps and how to move from a nested `for-loop` to a cleaner solution using a hashmap. The hashmap uses more space but offers faster implementation. Thanks for reading. Adios ✌🏾🧡.
How to deploy a repository with private submodules on Heroku 
Tags: heroku, node, docker, git
Published: 2020-12-06 19:14:19

A few days ago, I was trying to deploy a NodeJS application on Heroku. When I was trying to push the same to Heroku using the Heroku CLI, I got an error stating that the deployment failed, since the CLI could not access the private submodule.
The [Heroku documentation] (https://devcenter.heroku.com/articles/git-submodules#protected-git-submodules) provides a workaround for this to allow it to resolve Private Submodules in non-local environments —

>For instance, to add the FooBar submodule using an HTTP basic authentication URL scheme (note the presence of the username:password tokens):

`git submodule add https://username:password@github.com/myusername/FooBar`

**_The problem with the method is that git submodule references are stored in plaintext in the `.git/submodules` directory, and thus, it can be a security issue._**


Heroku allows us to deploy an application using a container as well.
Thus, I created a simple Dockerfile to build my project and then push it to Heroku's Container Registry. 
This example uses a NodeJS project to show the same.

{% gist https://gist.github.com/siddhantvirus/53cdc53791cf5d749c1fd459fd226f16 %}

This `Dockerfile` needs to be added to the root folder of your NodeJS folder.

You also need to add a `.dockerignore` file as follows: 

{% gist https://gist.github.com/siddhantvirus/bec0fe0be34d5e0a21a17ea98ea33002 %}

Heroku will always ignore the PORT you have set for your project, and thus your NodeJS app must use the value 
` const PORT = process.env.PORT || 5000 ` to ensure that the project runs both locally and on the Heroku deployment.

After this follow the given steps using [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli#download-and-install)


```
$ heroku login
$ heroku container:login 
$ heroku create <optional app name>
$ heroku container:push web
$ heroku container:release web
```
Here we first login to our Heroku Account and then the [Heroku Container Registry](https://devcenter.heroku.com/articles/container-registry-and-runtime), followed by creating a new Heroku app and then building the Docker image using `push` and then using the `release` command to "release" the image to your app.

You can then use `heroku open` to access your application!

Congratulations :tada:, you have now deployed your project on Heroku using Containers and even avoided having to copy the submodules to a new Repository or compromising your security by saving the password in plaintext.

You can repeat the given steps every time you have a new build!

I hope this helps someone :smile:






### Credits : 
1. <span>Cover Photo by <a href="https://unsplash.com/@hckmstrrahul?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Rahul Chakraborty</a> on <a href="https://unsplash.com/s/photos/docker?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
2. [Heroku Dev Center](https://devcenter.heroku.com/categories/reference)
Predefined C/C++ macros for cross-platform development
Tags: c, cpp
Published: 2020-12-06 19:10:09

I do a lot of cross platform development in C/C++, targeting Linux, Windows, macOS, using GCC, MSVC, clang etc.

In order to have cross platform support, it is sometimes needed to add platform dependent or compiler dependent code. I compiled a list of the most important macros I use. This might be helpful for some others as well.

| Macro | Definition |
| ----- | ---------- |
| `__linux__` | Linux and Linux-derived |
| `__ANDROID__` | Android |
| `#if defined(__linux__) && !defined(__ANDROID__)` | Linux (non-Android) |
| `__APPLE__` | Darwin (macOS and iOS) |
| `_WIN32` | Windows (32- and 64-bit) |
| `_WIN64` | Windows 64-bit |
| `_MSC_VER` | Visual Studio |
| `__GNUC__` | gcc |
| `__clang__` | clang |
| `__EMSCRIPTEN__` | emscripten |
| `__MINGW32__` | MinGW 32, MinGW-w64 32-bit |
| `__MINGW64__` | MinGW-w64 64-bit |
| `ARM9` (1) | Nintendo DS (ARM9) |
| `_3DS` (1) | Nintendo 3DS |
| `__SWITCH__` (1) | Nintendo Switch |

(1) These are defined by the makefiles provided by [devkitpro](https://devkitpro.org/) using the `-D` option, they are not built into the inofficial compilers.
CSS Community Dev Logo, CSS Houdini version
Tags: codepen, css, houdini, csshoudini
Published: 2020-12-06 19:08:53

---
title: CSS Community Dev Logo, CSS Houdini version
published: true
tags: codepen, css, houdini, csshoudini
---

[**Medellín CSS**](https://twitter.com/medellincss) community launched a [challenge](https://twitter.com/medellincss/status/1332729019830333441) to make the [**CSS Community Dev**](https://twitter.com/csscommunitydev) logo with CSS code.

And here my **CSS Houdini** version.

{% codepen https://codepen.io/nucliweb/pen/QWKjZeY %}

## Source Code

Take a look to the [source code](https://github.com/nucliweb/csscommunitydev-logo), this is the Paint Worlet code.

```js
registerPaint(
  'csscommunitydev',
  class {
    paint(ctx, geometry) {
      const {width: w, height: h} = geometry

      // Background
      ctx.beginPath()
      ctx.arc(w / 2, h / 2, w / 2, 0, 2 * Math.PI)
      ctx.fillStyle = '#6F0E96'
      ctx.fill()

      // Shadow
      const grShadow = ctx.createRadialGradient(
        w / 2,
        h / 2,
        0,
        w / 2,
        h / 2,
        w / 3.2
      )
      grShadow.addColorStop(0, 'rgba(0,0,0,0.6)')
      grShadow.addColorStop(1, 'rgba(111, 14, 150, 1)')
      ctx.beginPath()
      ctx.arc(w / 2, h / 2, w / 2.4, 0, 2 * Math.PI)
      ctx.fillStyle = grShadow
      ctx.fill()

      // Semi circle
      const grSemicircle = ctx.createLinearGradient(
        h * 0.133,
        w * 0.47,
        w * 0.47,
        h * 0.864
      )
      grSemicircle.addColorStop(0, '#975DF5')
      grSemicircle.addColorStop(1, '#6F0E96')
      ctx.beginPath()
      ctx.arc(w * 0.47, h / 2, w * 0.37, Math.PI * 0.5, Math.PI * 1.5)
      ctx.fillStyle = grSemicircle
      ctx.shadowColor = 'rgba(0,0,0,0.3)'
      ctx.shadowBlur = h * 0.06
      ctx.shadowOffsetX = w * 0.1
      ctx.shadowOffsetY = 0
      ctx.fill()

      // First triangle
      const grFirstTriangle = ctx.createLinearGradient(
        w * 0.56,
        h * 0.327,
        w * 0.786,
        h * 0.456
      )
      grFirstTriangle.addColorStop(0, '#43DCC9')
      grFirstTriangle.addColorStop(1, '#05F2C7')
      ctx.beginPath()
      ctx.moveTo(w * 0.56, h * 0.327)
      ctx.lineTo(w * 0.786, h * 0.197)
      ctx.lineTo(w * 0.786, h * 0.456)
      ctx.fillStyle = grFirstTriangle
      ctx.shadowColor = 'rgba(0,0,0,0.5)'
      ctx.shadowBlur = h * 0.06
      ctx.shadowOffsetX = w * -0.02
      ctx.shadowOffsetY = h * 0.08
      ctx.fill()

      // Second triangle
      const grSecondTriangle = ctx.createLinearGradient(
        w * 0.56,
        h * 0.412,
        w * 0.56,
        h * 0.802
      )
      grSecondTriangle.addColorStop(0, '#FFD900')
      grSecondTriangle.addColorStop(1, '#FF6A19')
      ctx.beginPath()
      ctx.moveTo(w * 0.56, h * 0.412)
      ctx.lineTo(w * 0.9, h * 0.606)
      ctx.lineTo(w * 0.56, h * 0.802)
      ctx.fillStyle = grSecondTriangle
      ctx.shadowColor = 'rgba(0,0,0,0.5)'
      ctx.shadowBlur = h * 0.08
      ctx.shadowOffsetX = w * 0.04
      ctx.shadowOffsetY = h * 0.08
      ctx.fill()
    }
  }
)
```
Module Create in Angular 10
Tags: angular, beginners, module, typescript
Published: 2020-12-06 19:03:32

---
title: Module Create in Angular 10 
published: true
description: Module Creation in Angular 10 
tags: angular, beginners, module, typescript 
//cover_image: https://direct_url_to_image.jpg
---

I am using VS **Angular Files** extension for creating **Module**

Step 1: Right click into project folder where you want to create module then showing right panel and click on the **Generate Module**

Step 2: Showing a **Input Box**. Write here your module name. 
`Ex: in`. Then create a four file like (ex: in.modules.ts, in.component.ts. in.component.html, in.component.css)

Step 3. Initially Register this module at first **app.modules.ts** file

```
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
    {
        path: 'in',
        loadChildren: () => import('../app/features/in/in.module').then(m => m.InModule)
    }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }
``` 

Step 4: Create a **Routing** file like **InRoutingModule** 

and import routing module file into this **in.module.ts** file.  

`import { InRoutingModule } from './in-routing.modules';` 


and import **InRoutingModule**

**in.module.ts** file:

```
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { InComponent } from './in.component';
import { SupplierComponent } from './components/supplier/supplier.component';
import { InRoutingModule } from './in-routing.modules';

@NgModule({
  declarations: [
    SupplierComponent
],
  imports: [
    CommonModule,
    InRoutingModule
  ]
})
export class InModule { }
```

**in-routing.modules.ts** file: 

```

import { Routes, RouterModule } from "@angular/router";
import { NgModule } from '@angular/core';
import { SupplierComponent } from './components/supplier/supplier.component';


const routes: Routes = [
    {
        path: '', component: SupplierComponent,
        children: [
            { path: '', redirectTo: 'supplier', pathMatch: 'full'},
            { path: 'supplier',  component: SupplierComponent }
        ]
    }
]
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class InRoutingModule { }
```

Step 5: Also create **SupplierComponent** component as per **Angular Files** extension instruction. Which already added into routing file into **routes**.  

**supplier.component.ts** code :

```
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-supplier',
  templateUrl: './supplier.component.html',
  styleUrls: ['./supplier.component.scss']
})
export class SupplierComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
```

**Project Module Structure**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/85rig8uvat11bhye9amv.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ip78cmt99qvs8wh7xgp6.PNG)

**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qh4xp77ehu7tcqqabgib.PNG)
Amazone-clone using Reactjs-firebase & stripe payment Integration
Tags: react, javascript, frontend
Published: 2020-12-06 18:51:34

This a live link to my amazon clone using firebase with stripe payment integration https://clone-1b332.web.app .if you want to scale up fast from a Reactjs beginner to an expert you can clone my GitHub   https://github.com/1Busayo/amazone-clone.
CSS Houdini: Lines Worklet
Tags: codepen, css, houdini, csshoudini
Published: 2020-12-06 18:30:31

---
title: CSS Houdini: Lines Worklet
published: true
tags: codepen, css, houdini, csshoudini
---

A CSS Houdini Worklet to show parallel lines and you can control the colors, widths, gaps and rotation via custom properties.

{% codepen https://codepen.io/nucliweb/pen/abmzjjK %}

### An implementation sample

In combination with `background-clip` and `-webkit-text-fill-color`.

{% codepen https://codepen.io/nucliweb/pen/vYXEaVq %}
Detect AVIF image support to use in your CSS
Tags: css, avif, images, imageperf
Published: 2020-12-06 18:16:52

---
title: Detect AVIF image support to use in your CSS
published: true
description: Implement the new AVIF image format in the `background-images` of your CSS
tags: css, avif, images, imageperf
//cover_image: https://direct_url_to_image.jpg
---

AVIF is a next generation image format, in the moment to write this post, the support is only by Chrome 85 and Firefox 77 under a flag.

**W3C** are working in the [CSS Images Module Level 4](https://drafts.csswg.org/css-images-4), and the new module will have an interesting feature, `image-set` and we'll can define the image type.

```css
.element {
  background-image: image-set( "image.avif" type("image/avif"),
                               "image.webp" type("image/webp"),
                               "image.jpg" type("image/jpeg") );
}
```

With `image-set` we'll can define different format and the browser render the first image format supported.

Until we have this awesome feature in the browsers, we can use JavaScript to detect the support, we'll to do a sample with the AVIF format.

## The CSS

```css
body {
  background-color: #000;
  background-repeat: no-repeat;
  background-size: cover;
}
body.avif {
  background-image: url(./images/lions.avif);
}
body.no-avif {
  background-image: url(./images/lions.jpg);
}
```

> I know that you can put the image in JPEG format directly in the body and overwrite the background-image if the browser supports it, but for the example I think it's clearer.

## The JavaScript

```js
async function supportsAvif() {
  if (!this.createImageBitmap) return false
  const avifData =
    'data:image/avif;base64,AAAAFGZ0eXBhdmlmAAAAAG1pZjEAAACgbWV0YQAAAAAAAAAOcGl0bQAAAAAAAQAAAB5pbG9jAAAAAEQAAAEAAQAAAAEAAAC8AAAAGwAAACNpaW5mAAAAAAABAAAAFWluZmUCAAAAAAEAAGF2MDEAAAAARWlwcnAAAAAoaXBjbwAAABRpc3BlAAAAAAAAAAQAAAAEAAAADGF2MUOBAAAAAAAAFWlwbWEAAAAAAAAAAQABAgECAAAAI21kYXQSAAoIP8R8hAQ0BUAyDWeeUy0JG+QAACANEkA='
  const blob = await fetch(avifData).then((r) => r.blob())
  return createImageBitmap(blob).then(
    () => true,
    () => false
  )
}
;(async () => {
  const classAvif = (await supportsAvif()) ? 'avif' : 'no-avif'
  document.body.classList.add(classAvif)
})()
```

## Demo

{% codesandbox condescending-colden-o1gse module=/js/index.js view=split %}

## Thanks

I want to thank [Jon Sneyers](https://twitter.com/jonsneyers) and [Kornel](https://twitter.com/kornelski), true magicians of image coders/decoders, for their help with the option of a `base64` of an image of **AVIF** format as optimized as possible.
Fake it till you make it
Published: 2020-12-06 18:08:01

---
title: Fake it till you make it
published: true
description: Start from a broken system, use values as stand-in for functionality, then replace the fake with the real service
tags: 
//cover_image: https://direct_url_to_image.jpg
---
Imagine a situation where you've decided to write a service that will create something (a product, for example). As is customary, the first thing you do is describe your expectation in an executable form (i.e. a test). Now, how would you describe that expectation?

You expect that a service which does not exist yet will do some work for the calling client. So the calling client (i.e. your expectation, your test) is the first customer of your as of yet non existent service. This customer of yours needs to express their expectation.

Sidebar: (sounds like I'm beating around the bush, but bear with me; we're slowly circling around a very important topic). 

Back to the issue: how will the customer express their expectation, in an executable form, of a service that does not exist yet?

Kent Beck to the rescue: fake it till you make it!

The only way at that point in time that the customer (i.e. an executable test) can express their expectation is by fabricating a value (or some values). In other words, you hard-code expected value(s) in your test. You fake it.

You fake it in such a way to set it up for a fall. Why would you be so mean? Because it is super important to start your work with a broken system. TDD is based on always starting with a broken system.

So you run your test and watch it fail. Now you roll up your sleeves & fix it.

How do you fix it? By defining an end-point of your 'create 'product' service. You then teach your test to send a request to that end point.

What happens next? The end point receives the request, does some work, and --wait for it-- returns VALUE!

Now imagine if instead of returning some value(s), the endpoint returned VOID. How would your test feel? It would feel deflated, cheated. Your test would have no idea whether the endpoint actually did anything or not.

Furthermore, you may get worried if the endpoint did something unsavoury. Maybe after receiving your request the endpoint didn't do anything (what a waste), or worse yet, it did something that may cause all kinds of issues & calamities. You have no way of knowing.

Returning VOID is always bad, and is to be avoided (no pun intended). We should rely on clearly defined values in any of our engineering endeavours, no matter how tiny & insignificant they may feel.
Always on Top: An Often Ignored But Handy Feature in Linux Desktop
Tags: linux, tutorial, todayilearned
Published: 2020-12-06 17:57:53

**"Always on Top"** is one of those handy features which people are either unaware of or didn't understand the use of.

I was also one of the above people till I came across it 👏.

Usually, when we open an application it gets the focus and is placed in the screen above all running applications. 

1. But with `Always on Top` the selected application window remains always visible no matter whatever applications we open.

2. In circumstances like when we want to keep a terminal window always visible while working, such a feature makes it very handy to do so.

3. **Always on Top** 💫 is available in almost all application in Linux distributions.



#### Using **"Always on Top"** in **Ubuntu**

* It's as simple 🤸 as right-click on the window and select `Always on Top`

![Enable: Always on Top](https://dev-to-uploads.s3.amazonaws.com/i/mndjghfw3bd4oey8p5d7.png)



* To undo 🧙 it: Right-click on the window and unselect `Always on Top`

![Disable: Always on Top](https://dev-to-uploads.s3.amazonaws.com/i/6zuq6z78jntwhxs524fv.png)



Comment it you already Knew it 🧙.
Learn cyber security: TryHackMe Advent Of Cyber
Tags: security, beginners
Published: 2020-12-06 17:54:21

In the spirit of the advent of code challenges this month, I thought I'd let y'all know about a similar series of exercises: [TryHackMe](https://tryhackme.com/) is a platform to learn about offensive and defensive security _things_.

This month is their second "Advent of Cyber," in which each day they teach you about a new security topic and provide you some free challenges to try them out yourself - they provide a video walkthrough every day as well because the intent is for you to learn. 25 days in total following the month of December.

Part of my job (unrelated to TryHackMe) involves putting together good application security training resources for our developers, and this year's Advent of Cyber is looking like a really excellent introduction to a lot of cyber topics. On Day 2, you execute a reverse shell. On Day 5, you execute SQL injection. The later days in the schedule look like we'll be hitting packet inspection and reverse engineering.

Check it out!

<https://tryhackme.com/christmas>
Video based course or text/article based?
Published: 2020-12-06 17:48:08

I am writing a project oriented nuxtjs course. I wanted to know what do you guys prefer, course with videos/screen recordings or write a ebook styled course, something like https://nextjs.org/learn/


Here's a small peak of what I am creating, still wip, started making the landing page recently.

https://nuxtjscourse.com/