teleren/devto huggingface dataset:
Prevent a Vercel site from being indexed in search engines
Tags: google, vercel
Published: 2021-09-19 18:39:25

There are cases in which you won't want a site to be indexed. For me, this was because I have a previous version of my portfolio website available as a template, and that outdated template was coming up when searching about me because I included some information about me.

To solve this problem, the [x-robots-tag](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag) is provided, which allows you to specify if you want your site to be visible on search engines. This tag is to be set as an HTTP header from requests made to the website, and this is made easy in Vercel, you can read more about all the headers [here](https://vercel.com/docs/edge-network/headers), and how to implement them [here](https://vercel.com/docs/edge-network/headers). In my case, I want the whole site to not be indexed, and so I want a source pattern that covers the whole site, for Vercel this pattern is `/(.*)`.

There are a range of options for the `x-robots-tag`, I'm going to choose `noindex`, which will ensure that any of the pages on the site won't be indexed, however links from the site to other sites will be indexed. This is fine for me as it means that social links will be indexed and things like that, however if you don't want any indexing to happen, you can use `none`.

Now to the actual implementation, you want to create a `vercel.json` file if you don't have one already, and add

```json
{
  "headers":[
    {
      "source": "/(.*)",
      "headers" : [
        {
          "key" : "x-robots-tag",
          "value" : "noindex"
        }
      ]
    }
  ],
}
```

If you already have a `vercel.json` file, ignore the outer braces, and just add the `headers` key inside your object.

Your site should redeploy on changing this file, and once it has deployed, then you can run

```bash
curl -I [url]
```

Replacing `[url]` with whatever the domain you don't want indexing is. This will give you a big list of properties, the one you're looking for is `x-robots-tag`, and it should be whatever you have set it to
Integrating Prism into a create-react-app project
Tags: javascript, react
Published: 2021-09-19 17:19:33

## [Prism](https://prismjs.com/) + [create-react-app](https://github.com/facebook/create-react-app)

Prism doesn't have a setup akin to much of the modern web, which can create some friction when integrating with modern tooling for ever changing frameworks. There are a few methods of installing prismjs, but this guide follows their recommended approach. Assuming a project already exists that was created with create-react-app, these steps should get you up and running with Prism quickly.

### Download and Installation

1. Navigate to https://prismjs.com/
1. Click Download and select the theme you want, languages and plugins you would like to support
1. Download JS and CSS
1. Copy the JS and CSS to the public folder
1. In your `public/index.html`, add this tag:

```html
<!-- index.html -->
<script async src="%PUBLIC_URL%/prism.js" />
<link rel="stylesheet" href="/prism.css" />
```

### Usage with dyanmic content

You will need to do one of the below if you are changing content that needs syntax highlighting. For example, wisiwyg editor. Add one of the below code blocks where you're update your data.

#### Option 1 - Reload all highlight on value change.

```jsx
const [value, setValue] = useState("" /* your dynamic code block */);

useEffect(() => {
  window.Prism?.highlightAll();
}, [value]);

return (
  <pre>
    <code className={`language-json`}>{value}</code>
  </pre>
);
```

#### Option 2 - Reload single code block (recommended)

This approach is recommended if you have more than 1 code block, as it will save you unnessesary reloads.

```jsx
const [value, setValue] = useState("" /* your dynamic code block */);
const ref = useRef(null);

useEffect(() => {
  if (ref.current) {
    window.Prism?.highlightElement(ref.current);
  }
}, [value, ref.current]);

return (
  <pre>
    <code ref={codeEl} className={`language-json`}>
      {value}
    </code>
  </pre>
);
```

## The Aternative

If the above approach doesn't suit your application or team, there is an npm package you can use, however you will need to also use the supplied babel plugin. When using a no config solution like create-react-app, this becomes difficult and you may will may need to use [craco](https://github.com/gsoft-inc/craco) or eject your configuration.

```jsx
// SomeComponent.jsx
import Prism from "prismjs";

// code here

Prism.highlightAll();

// code here
```

For the babel plugin see: https://github.com/mAAdhaTTah/babel-plugin-prismjs

## Full Example

To see a full working example, PrismJS has been implemented in the following web app:
https://github.com/bmpickford/dynamoconverter
Consistent Git Commit Messages Using a Template
Tags: git, programming
Published: 2021-09-19 17:26:37

One way to improve the consistency of your commits is to use a git template.

Any time you start a new commit, this template will be **pre-loaded**.

That means you'll be able to use git commit *comments* with some guidelines and reminders!

This can be useful because it can help remind you of things you typically would include in a git commit message; it could even act as a line length guide!

_Note: You don't **need** to comment out all the contents of your git commit template._

_This is simply a common usage but not required... but why would you want all of your commits messages to have the same message?_ 🙂

### Usage

First off, in your home directory, create a file with a commonly used name: `.gitmessage`. <- This is where you'll store the contents of this template.

Here's an example template that I personally use:

```git
# Commit title - 50 characters ------------------|


# Commit body - Line Width 72 characters ------------------------------|


# References, issue #, ticket #, etc:


# Any co-authors:
# Co-authored-by: LastName, FirstName <email@email.com>

```

_Note: the line length guides only work for monospaced fonts, i.e., each character has the same width._

I prefer it short and to the point -- but you can include whatever you like in here.

Now, the last step to make it automatically pre-populate your git commit messages is to set it in your git config.

To do it through the command line, run:

```
git config --global commit.template ~/.gitmessage
```

OR 

You can manually set the commit template through your global `.gitconfig` file.

e.g.: ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631937446887/dJZTE65Lh.png)

### Wrapping Up

You should be all set!

Now every time you `git commit` in your project repo, you'll get a pre-loaded template that you can edit for your commit message.

Hope this helps you write better git commits!

#### References

Learn more about git best practices:
- https://chris.beams.io/posts/git-commit/

A more in-depth guide about git commit templates:
- https://gist.github.com/lisawolderiksen/a7b99d94c92c6671181611be1641c733
When should you apply for a Software Engineer job?

Tags: webdev, beginners, programming, javascript
Published: 2021-09-19 17:23:46

Now! You might as well. What’s the worst that could happen? You won’t end up getting the job? You didn’t have the job anyway, so nothings changed. 

What if I flunk the interview? You will always mess up during your first few interviews. You will get better with practice.

You have no experience?, well, okay, that’s fair enough. If you don’t feel comfortable applying with no experience, then here is a checklist of stuff that helped me when I was applying for jobs.

## Create a project.

I always hark on about this, in absence of experience, make your own experience. You can do this by creating your own project. If you want to be a web developer, create a website. 

If you want to be a Software Developer, create an application/web-app. By doing this, you will have something to talk about during the job interview.

Pro-tip: Write any difficult things you encountered when creating your project and how you overcame them. You can then talk about your experiences during a job interview.

## Learn Test Driven Development (TDD)

Most companies will incorporate Test Driven Development in their development processes. When you are starting out, practice test driven development when doing code challenges or when you are creating your project. 

## Learn about Object Oriented Design (OOD)

Most of you will deal with object-oriented programming languages, so understanding how to do OOD is important. Also, familiarising yourself with SOLID principles will help you write maintainable, flexible code.

## Know your programming language 

You don’t have to be an expert with the language, although it helps obviously. You should be comfortable to read up on the parts that you’re not familiar with and learn about them. 

For example, my primary programming language is JavaScript. I rarely ever use Generators in JavaScript, but if I ever had to, I could read up on them and use them.

### Conclusion

Expertise comes with time. When you are first starting out, employers are hiring you, hoping you can figure things out. You don’t have to know everything on this list, but doing so will definitively help you when you get your first job.

If you found this helpful, sign up to my [newsletter](https://www.techjobinsight.com/)
What are the different types of errors in JavaScript?
Tags: javascript, theory, errors
Published: 2021-09-19 16:28:42

Errors are statements which don't let the program run properly. **There are three main types of errors that can occur while compiling** a JavaScript program. These errors include syntax errors, runtime errors, and logical errors.

* 1. Syntax Errors (most common)

Incorrect syntax raises parsing errors and occur at the interpretation time. Simple example is to introduce a semicolon where a double-colon it's needed.
```
let exObj = { name; 'Rick' }
```
---
* 2. Runtime Errors

Occur after the compiler interpret the code, when the code ran. Also known as exceptions. It can occur by calling a function that It wasn't declared.

The syntax is correct but the function is not present.
```
// calling not declared function
doSomeStuff()
```
---
* 3. Logical Errors (most difficult to find)

Error in the flow of data. The logical elements are well structured, the syntax is correct, but the confluence of data lands improperly.

Consider the script "There is a movie called Terminator 2". Consider the happy ending statement path: ''John Connor kills Terminator.''

Now consider a logical error: ''Terminator kills John Connor.'' 

These kind of errors change how your program should work from the result we would expect.

---

### Synthesis
1. syntax errors : while interpretation. Simple example: misspelling.
2. runtime errors: while execution. Simple example: due to misuse.
3. logical errors: scrambled logical perform. Simple example: ''Terminator kills John Connor.''
I Started a Data Science Blog of My Own.
Tags: datascience, machinelearning, python, programming
Published: 2021-09-19 16:16:30

I always loved exploring new things. 

Data science never failed to surprise me with fabulous new things, for that matter.

It has been more than a decade now since I first started exploring data science. 

What's more fascinating than learning is sharing what I learned. 

I've been blogging for a year now. I've been publishing on [Medium](https://thuwarakesh.medium.com). And I just started my personal blog too.

Check it out, and let me know what your thoughts are about it.

Link to my personal data science blog: [The Analytics Club.](https://www.the-analytics.club)
2021 week 37, 10th weekly post and what I haven't learned.
Tags: javascript, design
Published: 2021-09-19 16:00:08

## Items of the week

1. **JavaScript** - We can create proxies for objects using `const targetProxy = new Proxy(target, handler)` which allows us to control how existing `target` can be interacted through `targetProxy`. It could be useful for things like validation or even encapsulation. More details can be found on [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).

2. **Design** - A good self-reminder from Scott Berkun, author of How Design Makes the World -  software developers sometime love building things that are performant and reliable but care less about whether it's something that people can actually use. Got that from the [DesignBetter podcast](https://www.designbetter.co/podcast/scott-berkun).

3. **Code editors** - Default VS Code shortcuts to select words and lines are `Cmd/Ctrl + D` and `Cmd/Ctrl + L` respectively, the same shortcuts are for duplicating lines and going to specific line/column in IntelliJ IDEA, use `Option + ↑/Ctrl + W` and `Cmd/Ctrl + C` for their counterparts in IntelliJ IDEA instead.

## Some other notes

Changing the format starting with this 10th weekly post, not having links at the end of post might be against the original idea of not contributing to new tabs before the post ends, but I imagine most people would read only the items that they are interested in, so the end of an item is as good as the end of a post. Plus there is Gestalt's law of grouping - things that are near to one another tend to be grouped together.

A little introspection on this habit of publishing weekly posts shows that I don't have the answers for questions like what have I learned from this and who would find value in these posts? Maybe it's just to practice my writing and an excuse to doodle for the cover images for now. That's why I want to tweak the format a bit now and then to see where it goes. Thank you for reading, if you have got any questions or feedback, let me know by leaving a comment. Have a nice day.
uEye | A Game We Built to Help you Learn UI Design
Published: 2021-09-19 15:54:37

---
title: uEye | A Game We Built to Help you Learn UI Design
published: true
description: Play this game and see how many points you can manage to rack up by identifying which UI design fundamentals are incorrect based on 15 different designs.
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztpt4yi5kk8dzhelbbd0.jpg
---

## What is uEye

[Play uEye](https://designcourse.com/app/course/ueye) (No signups or emails required!)

I wanted to create a fun, interactive game using modern technology (Nuxt.js) that helps users to develop an eye for design. So, I came up with this idea where users must identify which UI design fundamentals have been incorrectly applied to an example design.

![uEye](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6g5xgwwkph12qeqlwqfg.gif)

Each correct fundamental you get right, you gain a point. If you choose a fundamental that hasn't been incorrectly applied, you lose a point. 

So, yes -- you can end up with a NEGATIVE SCORE! There are a total of 28 possible points you can get if you answer everything correctly. The highest score I've heard of so far is around 18. 

I urge you to take the game before watching this, but I released a video where I play the game and explain all of the UI concepts behind each challenge:

{% youtube d5aGKVnvpZU %}

Post your scores below!
What is CSS?
Tags: css, html, codenewbie, beginners
Published: 2021-09-19 15:51:59

What is CSS?  First off it stands for Cascading Style Sheets.  It is responsible for styling web pages as far as colors, fonts, backgrounds and layouts making the viewer experience more appealing. So its the FUN STUFF! 

CSS can be used as an additional feature to HTML or independently. When using CSS with HTML it takes an HTML element and describes how it should be displayed to the user. CSS rule contains two parts: the selector and the declaration.  Here is an example how it is written...

`p {
   font-family: Arial;}`

The 'p' is the selector and the content between the {} is the declaration. Declarations have a property and a value. The paragraphs on this web page would use the Arial font. Here is another example...

`h1 {
font-family: Tahoma;
color: blue;}`

In this example the h1 elements will have a font of Tahoma and the color will be blue. The property is 'color' and the value is 'blue'.

There are countless properties!  So many ways to design your web pages and create a great product!

Happy Coding!
Migrate from redis server to a new one
Tags: redis
Published: 2021-09-19 15:34:17

If you have some data stored on a redis server, and for any reason, you need to migrate the data to another redis server, then you may use MIGRATE command in a redis-cli terminal.

# The MIGRATE command
`MIGRATE destination-host destination-port "" destination-db-index timeout [COPY] [REPLACE] [AUTH password] [AUTH2 username password] [KEYS key [key ...]]`


### Options:
* COPY -- Do not remove the key from the local(source) instance.
* REPLACE -- Replace existing key on the remote(destination) instance.
* KEYS -- If the key argument is an empty string, the command will instead migrate all the keys that follow the KEYS option (see the above section for more info).

For more info check MIGRATE redis docs [here](https://redis.io/commands/migrate).

# Example
Suppose you want to migrate data from source-host to destination-host, you should open redis-cli by writing **redis-cli** in a terminal in the **source** redis server machine, then run the following command replacing the host and port with the right values:
`MIGRATE destination-host destination-port "" 0 5000 COPY KEYS key1 key2`
The most repeated questions I met with on job interviews (part 1)
Tags: javascript, webdev, jobinterviews, codenewbie
Published: 2021-09-19 15:17:00

A wiseman once said : "If you can not explain it, you do not understand it". A few years ago, when I had searched for a job as a student I went through a lot of interviews. For web positions related to Javascript, there were some questions which repeat regularly. And it makes sense, to asked them also today.
 
#const vs let vs var
**const** keyword create block scope variable and prevents its value to be reassigned by a new value. However, important thing is that it does not restrict to change the internal state of the object.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nz8acbmfmw0k46rvi4fz.png)
 
**let** is block-scope variable while **var** is function-scope variable.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kvsmwfwk3en2u2wk9rv.png)
 
#'===' vs '==' comparison
**===** is strict comparison, it checks value and type of value as well, so 1 === "1" returns **false**, the opposite of that is **==** comaparison which checks only value so 1 == "1" returns **true**.
##Can we compare two objects with '===' ?
**NO**. Object is reference type. Two distinct object never be equal even they have same property. That's why you will get false when you are using '===' comparison. In Javascript also exist built-in function **Object.is(value1, value2)** EDIT: ~~which returns true if objects are equals, otherwise it returns false.~~

Visit website [smetankajakub.com](https://www.smetankajakub.com)

Follow me on [Twitter](https://twitter.com/smetankajakub_)

###Resources 
Eloquent Javascript
https://unsplash.com/photos/TFFn3BYLc5s?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink
I made a package Manager (September update)
Tags: ruby, showdev
Published: 2021-09-19 15:03:19

<a href="https://github.com/Pandademic/Latte">Latte</a> is a general purpose package manger in ruby , running on anything that curl supports. It's based on the <a href="https://rubygems.org/gems/uri">URI</a> & <a href="https://rubygems.org/gems/inifile">inifile </a>gems. It is command line based and uses Simple ini file configurations for packaging in its own package repository.
{% github Pandademic/Latte %}
# Project status
Latte is still in its early stages , but I hope it will help people with there package management problems.
----
Thank you for reading , any feedback would be greatly appreciated.
thanks,
Pandademic
Today I learned - Day 7 (19 SEP 2021, Sun)
Published: 2021-09-19 15:03:00

Note: I posting this as a personal log of my journey of becoming a developer. Along the way, as I accumulate knowledge, I will post some useful and coherent information and stories so that they may be useful to other readers as well. 

Progress:
1. Completed a basic course on web development that covers basic front-end (HTML/CSS/JS/Jquery/ajax), back-end(flask), and AWS launching. 
2. Started a course on algorithm and data structures. 
3. Solved 2 algorithm problems. (leap year problem included)

[my first web page ink (written in Korean)](jungdaesuh.shop)
(Not a secure website, so beware)

What I learned:
1. How to launch a website using AWS and FileZilla.  
2. "No hangups" command to enable a website to run on its own.
```
# for running a website
nohup python (file name) &

# for turning off a website
ps -ef | grep '(file name)'

kill -9 <processID>
kill -9 <processID>
```
Pengertian Microsoft Excel
Tags: msoffice, excel
Published: 2021-09-19 14:14:04

Pengenalan Microsoft Excel adalah program atau aplikasi yang merupakan bagian dari paket instalasi Microsoft Office untuk memanipulasi angka menggunakan spreadsheet baris dan kolom untuk menjalankan perintah. 

Microsoft Excel telah muncul sebagai perangkat lunak data / angka terbaik di dunia, kecuali bahwa Microsoft Excel didistribusikan di berbagai platform. Microsoft Excel tidak hanya tersedia di platform Windows, Microsoft Excel juga tersedia di macOS, Android dan Apple.

Microsoft Excel terutama menggunakan spreadsheet untuk memanipulasi data dan melakukan fungsi Excel yang lebih dikenal sebagai rumus Excel. Excel adalah program lembar kerja. 

Spreadsheet adalah kumpulan sel yang terdiri dari baris dan kolom tempat Anda memasukkan angka di Microsoft Excel. Jumlah sel dalam Microsoft Excel 2016 terdiri dari 1.048.576 baris dan 16.384 kolom atau 17.179.869.184 sel.

Selengkapnya mengenai Excel bisa kunjungi: https://panduanoffice.web.id/