teleren/devto huggingface dataset:
BFE coding challenge #1 implement curry()
Tags: javascript, challenge
Published: 2020-08-21 00:12:06

> https://bfe.dev is like a LeetCode for FrontEnd developers. I’m using it to practice my skills.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3gzqlf50feqgud2tuj3y.png)

This article is about the coding problem [#1 implement curry()](https://bigfrontend.dev/problem/implement-curry)

First let’s decide the input and output of our function from the examples.

```js
const  join = (a, b, c) => {
   return `${a}_${b}_${c}`
}

const curriedJoin = curry(join)

curriedJoin(1, 2, 3) // '1_2_3'

curriedJoin(1)(2, 3) // '1_2_3'

curriedJoin(1, 2)(3) // '1_2_3'
```

Obviously `curry()` should return a function, which accepts arbitrary arguments, and do the following:

1. if arguments are enough, call join and return the result
2. if not enough, then return a new function which does 1.
Key is above point 2.

`curriedJoin(1,2)` should return a new function, which will insert 1,2 before the argument 3 , this could be done by `Function.prototype.bind()`

```js
function curry(func) {
  return function curried(...args) {
    // 1. if enough args, call func 
    // 2. if not enough, bind the args and wait for new one
    if (args.length >= func.length) {
      return func.apply(this, args)
    } else {
      return curried.bind(this, ...args)
    }
  }
}
```

Ok, passed!

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

Hope it helps. See you next time.
How I post an article
Tags: heroku, ci, cd
Published: 2020-09-21 17:18:13

---
title: How I post an article
published: true
date: 2020-08-21 00:00:00 UTC
tags: Heroku, CI, CD
canonical_url: https://greg.nokes.name/2018/02/26/how-i-do-it/
---

I think that the workflow I have developed for this blog is pretty interesting, so I decided to write up how I currently approach it.

The first step is to write an outline. I currently use [Textmate 2](http://macromates.com), but I am thinking about trying out [Visual Studio](https://code.visualstudio.com), as a few friends have been gushing about it. On my iPad I will use [Working Copy](https://workingcopyapp.com).

![Getting Started](https://greg.nokes.name/wp-content/uploads/2018/02/textmate-getting-started.png)

The second step is to create a local branch for the article:

![Local Branch](https://greg.nokes.name/wp-content/uploads/2018/02/local-branch.png)

The third step is to push the branch to Github and create a pull request:

![Push To Github](https://greg.nokes.name/wp-content/uploads/2018/02/push-to-github.png) ![Open Pr](https://greg.nokes.name/wp-content/uploads/2018/02/open-pr.png)

Since I have a [pipeline](https://devcenter.heroku.com/articles/pipelines) set up on Heroku with review apps enabled, once the PR is opened on Github you will notice that Heroku automatically creates an app tied to that PR.

![Pr Opened](https://greg.nokes.name/wp-content/uploads/2018/02/pr-opened.png) ![Review App Created](https://greg.nokes.name/wp-content/uploads/2018/02/review-app-created.png)

I can hand out review app to folks that I want to get feedback from. Also, as I revise the app and push those changes to my PR, those changes automatically appear in the review app.

![Merge PR](https://greg.nokes.name/wp-content/uploads/2018/02/Merge-PR.png)

Once I am done with the article, I can push it into staging. I do this by simply merging the PR into my master branch. Once the PR is merged or deleted, the review app is disposed of.

If the PR is merged into the master branch, my staging app detects the new code, and automatically deploys it. If I had unit tests written, I could hook up Heroku CI to automagically run my tests previous to the deploy.

![Building Staging](https://greg.nokes.name/wp-content/uploads/2018/02/Building-Staging.png)

Once I am happy with the article, I can promote it into production.

![Promote To Production](https://greg.nokes.name/wp-content/uploads/2018/02/Promote-to-Production.png)

What is super nice about this workflow is when I want to do larger changes (for example, swapping out the theme) I can do that with out a fear of breaking the running app. When I used to host on Wordpress, I would often be making larger changes live on my site, with exciting results.

You can read about how to create a pipeline on [Heroku’s Devcenter](https://devcenter.heroku.com/articles/pipelines).
How to use CSS variables or CSS custom properties?
Tags: css
Published: 2020-08-21 00:00:00

---
  title: How to use CSS variables or CSS custom properties?
  published: true
  tags: CSS
  date: Fri Aug 21 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/css-custom-properites
  cover_image: https://melvingeorge.me/_next/static/images/main-c035042c7972b85ea7abeecb2cac3346.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/css-custom-properites)
  
CSS custom properties or more commonly called CSS variables are a way to use CSS properties throughout a single CSS file using an identifier.

CSS variables work best when you have a lot of duplicate CSS properties and want to combine them into a single variable.

We can define CSS variables globally or scope to certain elements.

- Variables should be in the format `--your-variable-name` where the symbol `--` in front of it is mandatory.
- To use the variable value in CSS you need to use the `var()` CSS function in elements.

## Global CSS variables

- To use CSS variables globally first you have to define a selector called `:root`.
- Then you have to define your CSS variables inside this selector in the format `--your-variable-name`.
- The `--` symbol is mandatory to define a CSS variable.

```css
/* :root selector */
:root {
  /* defining a global variable : --main-background-color */
  --main-background-color: #fff;
}
```

After defining this you can use the CSS global varible values in elements uisng the `var()` CSS function like this,

```css
/* :root selector */
:root {
  /* defining a global variable : --main-background-color */
  --main-background-color: black;
}

/*using variable in h1 tag element using the var() CSS function*/
h1 {
  background-color: var(--main-background-color);
}

/* using the same varible in .article class elements */
.article {
  background-color: var(--main-background-color);
}
```

## Scoped CSS variables

Scoped CSS variables can be defined in the element itself and not in the `:root` selector.

Let's define a scoped CSS variable `--article-bg-color` in the article class.

```css
.article {
  --article-bg-color: #fff;
  background-color: var(--article-bg-color);
}
```

Now you may think why would I create a variable here when I can define the property directly.

Since CSS styles are cascaded, so scoped variables are passed down to the children elements also.

Suppose you have a `p` tag inside the `.article` class element.

You can use the `-article-bg-color` scoped variable inside that `p` tag also.

```css
/* Scoped variable */
.article {
  --article-bg-color: #fff;
  background-color: var(--article-bg-color);
}

/* 
    Using Scoped variable 
    Inside the descenetent element p tag
    using the var() css function
*/

.article p {
  color: var(--article-bg-color);
}
```

Link to **[JSBIN](https://jsbin.com/cehutulili/edit?html,css,output)**.

### Feel free to share if you found this useful 😃.

---
TIL: The navigation timing API includes the type of the current navigation
Tags: javascript
Published: 2020-08-27 11:35:24

---
title: TIL: The navigation timing API includes the type of the current navigation
published: true
date: 2020-08-21 00:00:00 UTC
tags: javascript
canonical_url: https://www.stefanjudis.com/today-i-learned/the-navigation-timing-api-and-the-type-of-the-current-navigation/
---

[Paul Calvano](https://twitter.com/paulcalvano) wrote [an excellent article diving into back/forward caches](https://paulcalvano.com/2020-08-03-browser-backforward-caches-and-their-benefit-to-web-performance/) in which he goes into RUM metrics gathered with [mPulse](https://www.akamai.com/uk/en/products/performance/mpulse-real-user-monitoring.jsp).

I learned that it is possible to access user navigation behavior info in JavaScript. You can see if your users navigated, reloaded or traversed the browser history. [The Navigation Timing spec](https://w3c.github.io/navigation-timing/) and particularly the included [Navigation Type](https://w3c.github.io/navigation-timing/#sec-performance-navigation-types) hold this information in `performance.navigation.type`. `performance.navigation.type` returns an enum value.

| Navigation Event | Enum value     | Info             |
| ---------------- |:--------------:| ----------------:|
| `navigate`       | `0`            | lick click, entering of a URL, form submission, ... |
| `reload`         | `1`            | reload click or `location.reload()` |
| `back_forward`   | `2`            | back/forward click or calling `history.back()/history.forward()` |
| `prerender`      | `3`            | navigation initiated by [a prerender hint](https://www.w3.org/TR/resource-hints/#prerender) |

You can use `performance.navigation.type` to analyze how your site and its reasources load depending on different user behavior. For example, if you want to learn how many people hit the reload button on your pages and want to do some analysis, a few lines of JavaScript can help here:

```javascript
if (performance.navigation.type === 1) {
  // gather metrics after a reload and
  // tell your monitoring service about it!
}
```

If you want to see the Navigation Timing API in action, I published [a CodeSandbox](https://e2f03.csb.app/) to play around with it. 

![Example page showing performance.navigation.type](//images.ctfassets.net/f20lfrunubsq/5MLYFa4woinZq82joLNO7W/0be7d0ed90a79be6f03e1a7496631d51/Screenshot_2020-08-21_at_13.41.48.png)

Have fun! 👋
Not a 'tech' job... but a job. And I love it!
Tags: career
Published: 2020-08-20 23:42:01

After selling (or donating) 90% of my belongings back in December, I packed my little car up with my remaining earthly possessions, left Kansas City and drove to San Francisco.  Upon arriving on the West Coast, I unpacked my car and then sold that too!  

Leaving my job and a regular income was rather terrifying.  I owe my livelihood for the last 9 months to my parental-inherited-frugalness, and the kindness and generosity of one other person.  I’m not going to reveal who that person is, but they are the BEST! A top-notch human being, and you would be lucky to know this person.

Since attending school has been a full-time commitment, I could not work and, as you can imagine, my savings account has started to diminish.  Then, at almost the same moment where I started to feel a little worried about the status of my savings account, I was asked if I was interested in helping other students through the Computer Science curriculum!  

I said, YES!!

I have had plenty of student-jobs in the past.  During my college years, I worked as a cashier, a medical courier and I even had a seasonal job at a chocolate shop! But, this is the first student-job that I have loved!

Here are the basics:

-I have 9 students on my team and I am their team-leader.
-I hold a daily stand-up with the entire team.
-I host a time where we can peer-program as a team to work through some tough algorithms.
-I have daily shifts where I monitor the help channel for the cohort.
-I have 1:1 meetings with each student, each day to go over the code they wrote the previous day.
-I do code reviews.
-And, like most jobs, I fill out the daily paperwork and logs that keep the ship sailing!  

I honestly LOVE this job! Don’t get me wrong, it is challenging and some days I am crazily busy, but overall it’s an amazing gig.

And boy-oh-boy I love getting a paycheck again!
A game of craps?
Tags: actionshackathon, showdev, github
Published: 2020-08-20 23:35:50

## Status Update
I've been working on a game of craps utilizing some of the actions available. While testing, I ran into a few variations and can definitely see some other things that I will be implementing in production. 

In the meantime, feel free to roll some dice: 
https://github.com/raymiranda/actions-craps#current-dice-game

- I'll be continuing to work on this and moving this all into the action. 

This was inspired from the chess game: https://github.com/timburgan/timburgan
Ultimate Guide: How to make games
Tags: gamedev, tutorial, make, games
Published: 2020-08-20 23:26:19

So if you are interested in game development you probably don't know where to start. If only there was a resource which covers everything you need to know. 

From what software to use to create graphics, music, and code for your games.

How to market your games. What genre to choose. Well I wrote a 4000+ word blog post here on the whole topic check the full post out here:
https://generalistprogrammer.com/game-design-development/how-to-make-games-easily-10-free-killer-tips/
Converting Callbacks to Promise approach on Node.js
Tags: node, typescript, javascript, npm
Published: 2020-08-20 22:33:38

A pattern very used at the beginning of Node.js was the **Callback** pattern. This pattern was the first way to resolve the asynchronism of the javascript single thread.

Look at a fake example below:
```js
function getUserCallback(id, callback) {
  setTimeout(function () {
    callback(null, {
      id,
      name: 'Gabriel Rufino'
    })
  }, 2000)
}

getUserCallback(1234, function (error, user) {
  if (!error) {
    console.log(user)
  }
})
```

Fortunately, today we have **Promises** and the lovely duo `async/await` to treat the asynchronous flow more elegantly.

The same function `getUser` using `Promise`:

```js
function getUserPromise(id) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve({
        id,
        name: 'Gabriel Rufino'
      })
    }, 2000)
  })
}

getUserPromise(1234)
  .then(function (user) {
    console.log(user)
  })
  .catch(function (error) {
    console.error(error)
  })
```

But not everything is perfect. There's a lot of functions or npm packages that work only with the callback approach. Hopefully, the Node.js has built-in util that helps us to transform functions that receive a `callback` as an argument to a function that returns a `Promise`.

It's the `util.promisify` helper:

```js
const util = require('util')

const functionPromise = util.promisify(/* Function here */)
```

Look at an example of transforming:

```js
const { promisify } = require('util')
const getUserCallback = require('./getUserCallback')

getUserCallback(1234, function (error, user) {
  if (!error) {
    console.log(user)
  }
})

const getUserPromise = promisify(getUserCallback)

getUserPromise(1234)
  .then(function (user) {
    console.log(user)
  })
  .catch(function (error) {
    console.log(error)
  }) 
```

**Important**: The function must follow the callback pattern

1. The callback must be the last argument
2. The first argument of the callback must be the possible error

That's it! Thank you :D
Unity flappy bird tutorial
Tags: unity3d, gamedev, tutorial, games
Published: 2020-08-20 22:51:58

Ever wondered how you can make a flappy bird game using unity? Well it's real easy. The game basically uses one input which controls the physics of a player.

Then you have pipes scrolling towards the player. Wanna see how to build it? Check out the full article here:
https://generalistprogrammer.com/unity/unity-2d-flappy-bird-how-to-make-flappy-bird/
How to convert a PDF to PDF/A using C#
Tags: pdfconversion, pdftopdfa, csharp, dotnet
Published: 2020-08-20 22:36:26

### What is a PDF/A file format, how does it differ from PDF?
 
The core difference between PDF and PDF/A is, a PDF/A document can be preserved for a long time. Let's understand the difference with some examples. PDF is unsuitable for long-term use because it uses font (or other resource) linking instead of font embedding. 
Any resource (e.g. font, image, clip-art) that is added in the PDF/A will always be available because it doesn't allow the file to reference the external resources. In order to make sure the resource is always available, they are embedded, not linked or refered.
Don't forget that PDF/A is basically a subset of PDF.

### PDF to PDF/A conversion
From this difference, you can observe how appropriate it is to use a PDF/A. For any paperless company or firm, this difference is quite practical. There are a lot of online utilities/tools that provide an option or feature to convert a PDF to PDF/A. But here the big concern is security or document confidentiality. In such a condition, you may prefer your own conversion tool.
 
### Stand-alone document conversion API 
When document confidentiality is concerned you may not rely on any third party software or tools. Hence, in this blog we'll explore a stand-alone API that could be integrated in your existing or new .NET applciation without any framework or platform dependency. 
 
Let's have a look at PDF to PDF/A conversion code,

```javascript
using (var converter = new Converter(@"D:/sample.pdf"))   
{   
    var options = new PdfConvertOptions();   
    options.PdfOptions.PdfFormat = PdfFormats.PdfA_3A;   
    converter.Convert(@"D:/output.pdf",options);   
}
```
*PdfFormats* class has following static members,
* PdfA_1A
* PdfA_1B
* PdfA_2A
* PdfA_2B
* PdfA_2U
* PdfA_3A
* PdfA_3B
* PdfA_3U
* PdfX_1A
* PdfX_3

All you have to do is to add this [DLL](https://downloads.groupdocs.com/conversion/net) reference (download latest version) in your new or existing .NET project. In case of any issue or feature details/information, you can post [here](https://bit.ly/31YHKNs).
Vlog setup recommendations? 🤔
Tags: discuss, vlog, setup
Published: 2020-08-20 22:14:09

I’ve been thinking recently about setting up a YouTube channel for my dev content. I have a website, blog, trying to be more active on social media i.e. Twitter, and feel that the next logical/natural step is YouTube. Any recommendations in terms of setup? 4K Webcam, ring lights, green screen (lol), mic etc. It would be cool to share my screen and web cam in the corner, not sure if down to software or just webcam.

I currently have a 1080p cam and it’s okay not fantastic.
#30DaysOfCJS: HTTP/3: Node.js can do QUIC
Tags: community, node, http3, quic
Published: 2020-08-20 22:11:25

---
title: #30DaysOfCJS: HTTP/3: Node.js can do QUIC
published: true
description: #30DaysOfCJS Day 19, HTTP/3: Node.js can do QUIC
tags: community, nodejs, http3, quic
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/wl15qlnzm1hbhbn2wxyn.png
series: 30DaysOfCJS
---

*This is a follow up post for Day 19 of* **#30DaysOfCJS**, *learn more about* **#30DaysOfCJS** *here* {% link jimcalliu/30daysofcjs-1jd3 %}

**HTTP/3: Node.js can do QUIC | Trivikram Kamat | CascadiaJS 2019**

If you'd like to watch the talk, here is the Youtube link.
{% youtube Kqgv4Xs8yDI%}

Further readings:
- [Slides](https://slides.com/trivikram/nodejs-quic-http3-cascadiajs)
- [Github repo](https://github.com/trivikr/node-http-servers)
- [QUIC update from Node.js](https://www.nearform.com/blog/a-quic-update-for-node-js/)
How can I create a text box that redirects to certain pages depending on the content?
Tags: help, html, javascript
Published: 2020-08-20 22:09:59

I'm trying to make an input box that redirects me based on the content.

For example, if Input is 1111 it redirects to the Home Page, but if the input is 1112, it redirects to the contact page.

Thanks for any and all help.
Reflecting on my open source journey during COVID
Tags: watercooler, opensource
Published: 2020-08-20 22:05:20

So it looks like I'm juggling 2 libraries, I like to be creative and front-endy sometimes and other times I prefer solving backend problems.

In the last couple of months I have gone from no open source projects to two.

I started didi to solve the problem of bundles in a world where HTTP2 prefers smaller and more requests, many people say to me, but we don't use HTTP2, but did you know for example nginx automatically upgrades to HTTP2 and so your bundles are slower than plain old ESM which didi converts.

The new project reactive-css-properties is smaller and already feature complete. But I have some sweet plans to make it even better thanks to Houdini, il tell you about that soon. Anyway reactive-css-properties will likely come under an umbrella alias: re.css which is a lot easier to say! I just finished the new logo today, take a look.

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

The goal of this project is to kill off "flash of unstyled content" for good, make all frontend Frameworks more efficient at handling CSS. Superchage CSS and at the same time JS and in general change the way we build for the web today. No easy task but iv got something like 400 downloads in the first week and good feedback from friends and family so that's a good start right.

How am I going to maintain them both? I'm not super human but I can plan. I use issues a lot in Didi and do everything by the book. re.css will need to catch up but it's close to the point where it will need proper management not working off master anymore. I will work on what I feel like instead of feeling creative and working on didi or technical and working on re.css. It's worth noting that didi is much more long term and BIG and needs a lot more contributors so pacing myself is the best thing I can do.

Anyway that has been my year so far trying to help the community in big ambitious ways.

Hope your all well.
Adam
Godot platformer game tutorial
Tags: godot, gamedev, tutorial, gdscript
Published: 2020-08-20 22:02:08

In this beginner godot platformer game tutorial I show you how to use the free game engine known as godot to build the simplest platformer game.

Using some vector graphics made in inkscape I make use of basic animations and physics to build this super beginner friendly godot platformer. Check out the full post here:
https://generalistprogrammer.com/godot/godot-2d-platformer-tutorial/