teleren/devto huggingface dataset:
How to play Dinosaur Game?
Tags: gamedev, beginners
Published: 2022-03-28 10:10:22

This Easter egg was added to Chrome a few years ago, and it's still available today: if your internet connection goes down while you're trying to visit a web page, you'll see a notification that says "Unable to connect to the Internet" or "No internet" with a small pixilated dinosaur next to it.
Many people were definitely under the assumption that the dinosaur was just a cute little symbol to keep them company while their internet connection was down for maintenance. This was undoubtedly incorrect. However, someone on the other end of the line pressed the space bar on their keyboard. And with that, the dinosaur started off running.
This tiny Easter egg has blossomed into a popular video game among gamers everywhere. This includes if you simply want to play it (with caution, as it is addictive) when you're online and need to take a break. On this page, you'll learn how to play the game while connected to the internet using your browser.
Detailed instructions on how to play the [dinosaur game](https://dinosaur-game.io) are provided.
If your internet connection is down, simply open Chrome and browse the web. Alternatively, if you're already in Chrome, you may try browsing any page you choose. You'll notice that the error message has a miniature dinosaur next to it, which is intended to be humorous.
Running the dinosaur will be triggered by simply pressing the space bar (or the up arrow) on your keyboard. To jump over obstacles (such as cacti) in your path, press the up arrow on your keyboard while playing. In this game, the longer you hold down the up arrow on your keyboard, the higher the dino will jump.
If you need to go below something, the down arrow should be utilized.
The longer you play, the faster the dino runs and the faster the ground slides across the screen on your computer screen. In the case that you collide with something, the game is over and you must start over from the beginning (your score resets, too). You can re-start the game by pressing the space bar once again.
Good news: you now have something to do while you wait for the restoration of your internet connection to be completed. If you want to play it while you're connected to the internet, that's another story. There are a plethora of alternatives for accomplishing this.
Aside from that, there is yet another technique of locating the game.
You may not have noticed the dino error message since your internet connection was down at the time. Alternatively, you may not want to purposefully turn off your WiFi in order to participate in the game's activities.
How you should review a PR
Tags: programming, productivity
Published: 2022-04-06 11:50:20

If your day-to-day job requires you to review the pull requests from fellow engineers and you find it difficult to review then try the approach defined in this post.

Reviewing a PR is actually can be a daunting experience and requires focus and time especially if you are reviewing a giant PR. Actually, before I share my thoughts on reviewing a PR, I would like you to understand how you should create one.

Whenever you are coding and about to create a PR, keep in mind how would you like to review a PR and try to create a PR the way you would like it.

In addition to that, I have some pointers for that.

### 1. - Always commit a meaningful chunk of the code.

**Tip**: If you forgot to commit a part of code or maybe some linter issue remained uncommitted, try not to create a separate redundant commit and squash that commit into the parent commit if it makes sense.

### 2. - Write an expressive message with your commits.
Avoid adding comments like fixed, fix the problem, etc, and try to be more expressive, your commit message should exactly express what you did in the code.
![good-vs-bad-commits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47b8ue274f3y7impie2g.gif)
 
### 3. - Smaller the better
Never create giant PRs, smaller meaningful PRs are easy on the eyes.


### 4. - Create PR with descriptive titles and details.

![PR-titles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e146zbrh6jtvsv6v9lao.gif)
 
 
 
 

### 5. - Try to add comments, and images on your PR whenever you feel it will make the reviewer's life easier.
For instance
- If you committed a big composer.lock file you can add a comment about what exactly did you updated.
- Maybe a new CSS change you did, try adding a screenshot of the change in views with before and after.
- If you commit a change in a compressed file sometimes it's hard to see the actual change and you can add a comment with the actual diff.


If you keep creating PRs like this it will already improve your ability to review them.
Angular: Migrate from TSLint to ESLint
Tags: angular, typescript, vscode, tooling
Published: 2022-04-06 11:34:31

Excerpt from [Wikipedia](https://en.wikipedia.org/wiki/Lint_(software)):
> Lint, or a linter, is a static code analysis tool used to flag programming errors, bugs, stylistic errors and suspicious constructs. The term originates from a Unix utility that examined C language source code.

## Linting in TypeScript

Linters can have a great impact on the development of your application. This is espescially true if the technology used comes out of the JavaScript environment. *The* standard linter in the JS world is a tool called [ESLint](https://eslint.org/).

Opposing to this, *TSLint* emerged as the defacto standard linting tool for TypeScript projects. But to simplify the experience for developers switching to TypeScript, ESLint began to incorporate features specific to TSLint. In 2019, TSLint stopped active development of new features, and encourages it's users to migrate to ESLint. You can read more details about this decision on the [Palantir Blog](https://blog.palantir.com/tslint-in-2019-1a144c2317a9).

## Migration path for existing projects

You can find all necessary tools and information to simplify the migration of existing Angular projects to ESLint at the GitHub Repo [Angular ESLint](https://github.com/angular-eslint/angular-eslint). 

First you have to add the relevant packages as dev dependencies by using the following command:
```
ng add @angular-eslint/schematics
```

Now you can use `convert-tslint-to-eslint`. This will remove all TSLint specific configuration. It also creates the necessary files for ESLint and converts references in NPM scripts or code comments like `tslint:disable`.
```
ng g @angular-eslint/schematics:convert-tslint-to-eslint
```

That's it! You can now execute ESLint by running the following of your command line:
```
npm run lint
```

## Code editor support

ESLint has a variety of integrations for various dev tools. You can find a full list at the [ESLint user guide](https://eslint.org/docs/user-guide/integrations).

To integrate ESLint into *VS Code*, you can install the wonderful plugin called, well, ... [ESLint (dbaeumer.vscode-eslint)](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

I would also recommend you to install the optional, but nevertheless interesting [LintLens (ghmcadams.lintlens)](https://marketplace.visualstudio.com/items?itemName=ghmcadams.lintlens). It gives you additional infos about the configured linting rules directly while editing your `.eslintrc.json` file.

## It's a wrap

And this is all you need to migrate your existing Angular applications from TSLint to ESLint. I hope this post will help someone out there, so please share it if you like!
Using AplineJS with Chart JS to create Chart
Published: 2022-04-06 11:29:24

Create Alpine reusable data

`
window.Alpine.data('pieChart', (element, data) => ({
        element: element,
        init() {
            const    ctx = this.element.getContext('2d');
            const chart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: this.labels,
                    datasets: this.datasets
                }
            });
        },
        labels: Object.keys(data),
        datasets: [{
            data: Object.values(data),
            backgroundColor: Object.keys(data).map((key, index) => {
                return '#' + Math.floor(Math.random() * 16777215).toString(16);
            }),
            borderColor: '#fff'
        }],
    }))
`

Add this to your canva element

`<canvas class="mb-8 h-48 w-48"
         x-data="pieChart( $refs.chart,{
         'balance': '100000',
         'withdrawn': '10000',
         'saved': '1000000',
         })"
        x-ref="chart"
></canvas>`
Do you have a dotfiles repository?
Tags: productivity, setup, installation, script
Published: 2022-04-06 11:19:42

As dev, it's not uncommon to use different machines or to renew laptops and devices. You don't want to spend too much time in repetitive operations, such as setting git, defining custom aliases, etc.

To speed up install, you can store these configurations in a git repository (often called `dotfiles` by convention).

In such repository, you will likely add `.bashrc`, `.zshrc`, `.gitconfig`, `.gitignore_global`, etc. It's way more convenient for new install and maintenance.

In addition, you may include a small script to copy each file at the root of the `$HOME` folder, so you won't have to do it manually:

```bash
#!/usr/bin/env zsh
# Credit: Julien maury

target="$PWD/files"

echo "Copying files..."
cd $target
for entry in $(ls .??*)
do
  cp $entry $HOME
  echo "$entry copied!"
done
echo "Done!"
cd -
```

The script goes at the root of the repository and all dotfiles in a subfolder called `files`:

```
├── files
│   ├── .bashrc
│   ├── .zshrc
│   ├── .gitconfig_global
│   └── .gitconfig
└── install.zsh
```

To use the repo, you may run `git clone DOTFILES_REPO_URL && cd DOTFILES_REPO && zsh install.zsh`.

This approach works best if you keep the same operating system, so you might encounter some issues when switching between Windows, Linux, and Mac, but those incompatibilities tend to be less and less frequent.
How to grant public access to S3 Bucket using Policy
Tags: aws, amazon, s3, buckets
Published: 2022-04-06 11:09:48


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

Did you know that by default AWS S3 Bucket is not publicly accessible? The answer is "YES". So if the public access is blocked by default, adding a policy that grant public access to your bucket is very necessary.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ayzasp643mqjxe96szo.jpg) 
Amazon S3 buckets policy offers fine-grained access control and makes it possible to offer cross-account access. 

In this post, you will learn everything about AWS S3 buckets and S3 storage service in general. If you wish to learn about this, click on this [link](https://techdirectarchive.com/2022/04/04/how-to-grant-public-access-to-s3-bucket-using-policy/) to read the post which was previously published on TechDireactArchive blog. 

Read and share your experience.

Happy reading 👌
Next JS - replace React with Preact
Tags: react, javascript, nextjs, webdev
Published: 2022-04-06 10:53:59

I made [my website](https://aamodt.xyz) with [Next JS](https://nextjs.org), an excellent react framework for making production-ready websites. The downside to [React](https://reactjs.org/) frameworks is that they can ship a lot of js to the browser, which comes at a performance cost. Luckily, you can take some steps to optimize this, and replacing React with [Preact](https://preactjs.com/) is one of them.

Now I do not want to take any credit for this tip. I saw it in a [video](https://youtu.be/R59e1Vl5lO8?t=177) from [Vercel's](https://vercel.com) Director of Developer Relations, [Lee Robinson](https://twitter.com/leeerob). Switching it out is easy as long as you are not using [any of these features](https://preactjs.com/guide/v8/differences-to-react/). So without further ado, here is what you need to do:

##Install Preact:

`npm i preact`

##Add this snippet to your next.config.js file:

`module.exports = {
  webpack: (config, { dev, isServer }) =&gt; {
    // Replace React with Preact only in client production build
    if (!dev &amp;&amp; !isServer) {
      Object.assign(config.resolve.alias, {
        react: 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat',
      });
    }
    return config;
  },
};`

And that's it. Now Preact will be used in production builds instead of React. This website now uses Preact. Before the switch, 91.8 kb of js was loaded in the browser without caching. After the switch, 55.5 kb of js was loaded when testing the same site.

NB! This implementation doesn’t currently work with React 18

Originally posted on [aamodt.xyz](https://aamodt.xyz/blog/next-js-replace-react-with-preact)
Quick MacOS tip: Preview as a built-in zoom lens
Tags: tips
Published: 2022-04-06 10:45:54

---
title: Quick MacOS tip: Preview as a built-in zoom lens
published: true
description: Hitting the backtick button in MacOS preview toggles a zoom lens
tags: tips
canonical_url: https://christianheilmann.com/2022/04/06/quick-macos-tip-preview-as-a-built-in-zoom-lens/
---

Today, after a decade or so of using MacOS, I realised that preview has a zoom lens built in. You can toggle it using the backtick ` key. 

![Screencast of the functionality](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpvjvvlg73fyobycc2yl.gif)

Once it is on, you can also increase and decrease the zoom level using two finger pinch on the trackpad. 

<video width="100%" height="auto" src="https://christianheilmann.com/wp-content/uploads/2022/04/lens-in-preview.mp4" controls><video>
👮‍♀️IMMUTABLE Tables👮‍♂️
Tags: database, programming, security, sql
Published: 2022-04-06 10:04:49


![IMMUTABLE table example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n04xnxnxlb7o3nvpqtc8.png)

👉 **IMMUTABLE** tables: Insert-only tables in which existing data cannot be modified. Deleting rows is either prohibited or restricted based on the insertion time of the rows. 

☝ an example of such an IMMUTABLE table used to store orders as JSON data. You may (for legal reasons) be able to delete data but only after waiting for 30 days. Also, you can drop the table but only after 16 days without any activity on it. Setting the database parameter _blockchain_table_max_no_drop_ to 0 before creating such tables can help for dev/test! Finally, you can use DBMS_IMMUTABLE_TABLE.DELETE_EXPIRED_ROWS to delete _expired_ rows.

⚠ feature backported to 19.11 version.

Learn more:
- [Oracle Database 19c documentation](https://docs.oracle.com/en/database/oracle/oracle-database/19/newft/immutable-tables.html)
- [Connor McDonald blog post](https://connor-mcdonald.com/2021/02/01/blockchain-tables-in-21c-a-word-of-warning/)
- [Ulrike Schwinn blog post](https://blogs.oracle.com/coretec/post/blockchain-or-immutable-tables)
PHP Keyword or Shortcode Extractor Class
Tags: php, mysql, javascript, tutorial
Published: 2022-04-06 10:31:12

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/php/php-keyword-or-shortcode-extractor-class

In this post, I'm sharing how to extract a keyword or shortcode that starts and ends with specific characters. In my current project with Laravel, I'm building an email template module that has a shortcode. And after created and viewing it I want to extract the added shortcodes for the template and show it to the user. So I came up with this code since I tried to search on google I cannot find the same problem so I coded the class below to cater to what I need.

```php
<?php
/**
 * Coded by: Ronard Cauba
 */
class ShortcodeExtractor 
{
	/**
	 * @var $opening
	 */
	private $start = "{";

	/**
	 * @var $closing
	 */
	private $end = "}";

	public function extract($content, $result=[]) 
    {
        $startPos = strpos($content, $this->start);
        $endPos = strpos($content, $this->end);
        
        $out = "";
        if($startPos > 0 && $endPos > 0) {
            $out = substr($content, $startPos, ($endPos - $startPos) + 1);
            $result[] = $out;
            $latestContent = str_replace($out, "", $content);
            return $this->extract(str_replace($out, "", $content), $result);
        }

        return $result;
    }
}

$content = "The {first_name} quick brown {last_name} fox jumps over the lazy dog {email}.";
        
$result = (new ShortcodeExtractor)->extract($content);

print_r($result);

//result

Array
(
    [0] => {first_name}
    [1] => {last_name}
    [2] => {email}
)
```
Feel free to use or modify. I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/php/php-keyword-or-shortcode-extractor-class if you want to download this code.

Happy coding :)
Country search and short URLs for jobs
Tags: datascience, machinelearning, jobs, jobsearch
Published: 2022-08-08 10:18:39

---
title: Country search and short URLs for jobs
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3qqgf6jc3nm1dcw90r6.jpg
published: true
date: 2022-04-06 10:21:13 UTC
tags: DataScience,ML,Jobs,Jobsearch
canonical_url: https://insights.ai-jobs.net/country-search-and-short-urls-for-jobs/
---

Here comes another quick update on some recent changes to our job site. We’re trying to move forward much faster these days and still have tons of features and especially improvememts in the pipeline. Enjoy!

## Search by country

Some are looking for AI/ML-related jobs in another region or country, others are tied to where they’re are at the moment or the near future. Either way, to make the situation a bit easier for both we implemented a way to go a little more local with the job search. Now it is possible to select a country to search in, and display or filter all listings in the particular country exclusively.

You can find a complete overview of all countries with jobs available via [https://ai-jobs.net/countries/](https://ai-jobs.net/countries/)

![Search with selected country](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qp4uz8nddk08ctivqjxb.png)

This feature also translates directly into the settings for job emails. So you can subscribe to job alerts than only get triggered when your criteria where hit for a certain country.

We hope this helps narrow down some job searches a bit and get more precise results quicker.

## Short urls for better sharing

We finally introduced a shorter URL version for job ads. The standard URLs generated from the job title can become quite large quickly. Because of this there’s now a way to get a short URL which contains just the ID of the ad, which is enough to get to the same job offer.

This is very practical when sharing the link of an ad or posting it on social media – it frees up quite a lot of characters compared to the full length version.

![Short links are nice 🙂](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obs8onrlg1kce4so15is.png)

Check out the ‘Copy & share’ button in the bottom of every job ad. When you push that button a short link to the job listing shown is beeing copied to your local clipboard ready to share it wherever you like.

![Push the button, get a short link, share it everywhere!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdx81hztf9rs1yuhfjgh.png)

That’s already it for this time. Thanks for stopping by and see you soon again 😉
My Simple Programs
Tags: c
Published: 2022-04-06 10:16:04

Recently I've been learning how to create some basic programs in the C programming language with my father and brother.

## hello.c

```C
#include <stdio.h>

int main(void)
{
        printf("Hello, world\n");
        return 0;
}
```

This is the first program we wrote, which says "Hello, world". On the first line we included `stdio` which is a library of functions. "stdio" stands for standard input / output.

The next part of our program is the `main` function. Every C program must have a `main` function to work.

`int` stands for integer, which is a whole number. The line `int main(void)` means that our main function returns a whole number to say if the function worked or failed. It returns `0` if it worked, or any other number if it failed.

The `void` means that we ignore any extra words on the command-line.

The `printf` stands for print formatted. This is a function that we use to output words. The `\n` at the end of the string stands for newline, it moves onto the next line.

The last of the function `return 0;` means that our program succeeded.

## hello_name.c

```C
#include <stdio.h>

int main(void)
{
        char *name = "Bongo2";

        printf("Hello %s\n", name);
}       
```

In our second program, we changed it so that we print someone's name instead of "world", for example, "Bongo2". We created a string variable called name, and set it to "Bongo2".

In the printf `%s` stands for a string. In this case, the string is the `name` variable, which we set to "Bongo2".

## maths.c

```C
#include <stdio.h>

int main(void)
{
        int a = 18;
        int b = 6;

        printf("The answer is %d\n", a * b);
}
```

The last program we wrote was to do with maths. We used two `int` variables called `a` and `b`, and gave them the values 18 and 6.

The `%d` in the `printf` format string is going to print a whole number. The "d" stands for decimal or base 10. The number it prints is a calculation, `a` times `b`, which equals 108.

Next post: [Loops and Math in C](https://dev.to/gamedev/loops-and-math-in-c-582i), by Sean
Previous post: [Deciding on a Programming Language for Game Dev](https://dev.to/gamedev/deciding-on-a-programming-language-13ba), by Sam
Contents: [Game Dev From Scratch](https://dev.to/gamedev/game-dev-from-scratch-2do1)
Webauthn - Passwordless Registration/Login flows
Tags: passwordless, webauthn, auth
Published: 2022-04-06 10:03:05

I went in some details about the webauthn protocol in order to achieve passwordless authentication.

IMHO, the most common case would still be registering and signing in users using their email. For this use case, the flow would look like follows.
  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otyvym5d1ytj2ewvppxw.png) 

Of course, you could also skip the email registration and let the user just pick some username. Perhaps some people would even be more comfortable for privacy reasons. On one hand, this makes registration even easier since you skip the email sending step. On the other hand you have to think about ways to recover the account in case of device loss, and since you don not possess the email, must think of some alternative, like discussed in my previous article.

Once you stored the public key, you can directly authenticate users. This is pretty straightforward.

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

I am tempted to build a demo using spring boot showing a minimal working example, perhaps even including some recovery options or ways to add multiple devices. If you have interest in this, please leave a message. After all, writing code if nobody even cares sounds kind of dull.

Thanks for reading.
CodeSpread - Helping Developers and Clients make the most of Open Source
Published: 2022-04-06 09:53:34


Hello,

[CodeSpread](https://codespread.io )

**CodeSpread** reaching out to CTOs/R&D managers and freelance GitHub Developers to sign up for our new platform that matches developers with code consumers. Using proprietary technology we've worked super hard to develop, we leverage developers’ Github activity to perfectly match them with clients needing their exact skillset. If you've been struggling to find developers for your daily development tasks, let us find the perfect developer for your project – often the one that worked on the very code you might be using right now. If you're interested in learning more about it, you can visit our website here >> [CodeSpread](https://codespread.io).