teleren/devto huggingface dataset:
How to check if a Hugo site is in development or production
Tags: hugo, jamstack
Published: 2021-12-05 08:55:42

---
title: How to check if a Hugo site is in development or production
published: true
description: 
tags: Hugo, JAMstack
//cover_image: https://direct_url_to_image.jpg
---

There have been a few times that I've wanted to render something  differently in development vs production while using Hugo. I've used hacks like `$.Site.IsServer` before to see if I was running the development server, but that's not helpful if I want to see what the production site looks like when developing.

## Checking the environment

It turns out Hugo has a couple of built-in ways of distinguishing between development and production environments. Unfortunately, the SEO for the [Hugo documentation page](https://gohugo.io/functions/hugo/) that shows how to distinguish between them isn't great.

Here are two ways to find your environment in Hugo:

```txt
{{ hugo.Environment }} returns "development" or "production"
{{ hugo.IsProduction }} returns true or false
```

When you're developing locally with `hugo server`, the environment will be set to `development` by default. When you run `hugo` to build your site, the environment will be set to `production` by default.

## Conditional rendering based on the environment

To conditionally render markup based on the environment, you can use any of the following methods:

```html
{{ if eq hugo.Environment "development" }}
  I render when in development
{{ end }}

{{ if eq hugo.Environment "production" }}
  I render when in production
{{ end }}

{{ if hugo.IsProduction }}
  I render when in production
{{ end }}

{{ if not hugo.IsProduction }}
  I render when <strong>not</strong> in production, which means
  I would render if the environment were manually set to "test"
{{ end }}
```

## Setting the environment manually

To set your site to `production` while developing, start the development server using one of the following commands:

```sh
# short version
hugo server -e production

# long version
hugo server --environment production
```

You can also set the environment by using a system environment variable.

```sh
HUGO_ENVIRONMENT=production hugo server
```

Hugo requires environment variables that change its configuration to be prefixed with `HUGO_`. You can read more about that in [Hugo's environment variable documentation](https://gohugo.io/getting-started/configuration/#configure-with-environment-variables).

Finally, if you wanted to set your environment to something other than `production` while building, you can do that using any of the methods below. In the following examples, we're setting the environment to `development`, but you could set this to any value you want.

```sh
hugo -e development
hugo --environment development
HUGO_ENVIRONMENT=development hugo
```

Hopefully this helps you as you build your Hugo sites. Feel free to leave a like or comment if you enjoyed this post!
Advent of PBT 2021 - Day 5
Tags: challenge, testing, webdev, javascript
Published: 2021-12-05 08:47:18

---
title: Advent of PBT 2021 - Day 5
published: true
description: Advent of Property Based Testing - Day 5
tags: challenge,testing,webdev,javascript
//cover_image: https://direct_url_to_image.jpg
---

> _Advent of PBT 2021 — Learn how to use property based testing and [fast-check](https://github.com/dubzzz/fast-check) through examples_

Our algorithm today is: **respace**.
It comes with the following documentation and prototype:
```ts
/**
 * You're given a message where spaces have been removed.
 * Your aim is to find back the original message given a dictionary
 * containing all the words. As many messages could be encoded the
 * same way, you may have to return two or more messages. No specific
 * ordering is expected when multiple solutions are available but all
 * must be returned.
 *
 * @param spacelessMessage - Message without any spaces
 * @param words - List of accepted words (no repeat and at least one
 * character long)
 *
 * @returns
 * All the possible messages made only with the received words that
 * could have led to this spacelessMessage.
 */
declare function respace(spacelessMessage: string, words: string[]): string[];
```

We already wrote some examples based tests for it:
```ts
it("should be able to detect one match when there is only one", () => {
  const out = respace("helloworld", ["hello", "world"]);
  expect(out).toEqual(["hello world"]);
});

it("should not detect any match and produce empty arrays when no matchs", () => {
  const out = respace("hellowooorld", ["hello", "world"]);
  expect(out).toEqual([]);
});

it("should be able to detect all the matches when multiple are eligible", () => {
  const out = respace("tititi", ["ti", "titi"]);
  expect(sorted(out)).toEqual(["ti ti ti", "ti titi", "titi ti"]);
});
```

How would you cover it with Property Based Tests?

In order to ease your task we provide you with an already setup CodeSandbox, with examples based tests already written and a possible implementation of the algorithm: https://codesandbox.io/s/advent-of-pbt-day-5-6ekxo?file=/src/index.spec.ts&previewwindow=tests

You wanna see the solution? Here is the set of properties I came with to cover today's algorithm: https://dev.to/dubzzz/advent-of-pbt-2021-day-5-solution-6e2

---

[Back to "Advent of PBT 2021"](https://dev.to/dubzzz/advent-of-pbt-2021-13ee) to see topics covered during the other days and their solutions.

More about this serie on [@ndubien](https://twitter.com/ndubien) or with the hashtag [#AdventOfPBT](https://twitter.com/search?q=%23AdventOfPBT).
Password Validator
Tags: java, webdev
Published: 2021-12-05 08:38:21

If we wanted to let the user create a password 
* According to our condition/ruleset. 
* Also enabling the user to have a strong password. 


We can use a regex pattern to do this; in a web controller class action method or in user's view model and using @Pattern model validation attribute for this password field.


_We have validated username requirement in previous post._
[Username Validator](https://dev.to/lizardkinglk/username-validator-1n8g)


* Let's assume our solution requires its user passwords to have the following password requirements.

| Type                  | Constraints                           |
| --------------------- | ------------------------------------- |
| Length of password    | More than 10 characters               |
| Containing a digit    | At least one digit                    |
| A uppercase letter    | At least one Uppercase letter         |
| A lowercase letter    | At least one lowercase letter         |
| A special character   | At least one $pecial character        |


Our regex pattern is as below.

```
String regex = 
"^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&-+=()]).{10,}$";
```

* The classes that used in this regex pattern are explained below.

```
^
```
This denotes the first character of the string.

```
[0-9]
[a-z]
[A-Z]
```

To match a digit, match a lowercase letter and a uppercase letter respectively.

```
[@#$%^&-+=()]
```

The set of special characters we let the user to have in their password.
Notice that exclamation mark and question mark are excluded. 
Therefore, user is not allowed to use those. 
So include all allowed special characters inside square brackets.

```
.
```

Denotes characters except line breaks (\n or \r) 

```
*
```

Denotes one or more characters

```
(?=.*[0-9])
```

This group contains the number match. In whole password input at least one character should be a digit. 
?= is called a 'Positive Lookahead'. 
A positive lookahead is a rule to denote the place in which the inside expression comes. 
In our problem, the place requirement is negligible.

So in this case inside expression is ".*[0-9]" So it checks the whole input and checks if digits exist.

This applied to lowercase, uppercase, special character groups also.

```
.{10,}
```

The length constraint which is that user password should contain 10 or more characters.

```
$
```

This denotes the end of the pattern.


The following Java program demonstrates our problem and solution.

```
import java.util.regex.*;

class Main {
  public static void main(String[] args) {
    String regex = 
    "^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&-+=()]).{10,}$";
    Pattern p = Pattern.compile(regex);
    String input = "0aA@123456";
    Matcher m = p.matcher(input);
    String isValidPassword = m.matches() 
    ? "Valid Password" : "Invalid Password";
    System.out.println(isValidPassword);
  }
}
```
The starter template you need - part 3
Tags: webdev, beginners, tutorial, javascript
Published: 2021-12-05 08:36:04

In case you missed , here you can read other parts :

- [Part 1](https://dev.to/tresorama/the-starter-template-you-need-5dp6)
- [Part 2](https://dev.to/tresorama/the-starter-template-you-need-part-2-mjo)
- Part 3, this post


## Part 2 Completed - What have we achieved so far ??

So far, we have "saved" our project starter in our GitHub space.

The next goal is to see this page published over the Web.

In order to achive that, we'll use a feature of `Github` called `GitHub Pages`
Put simply, every repository on gitHub can have a "live" website , hosted by GitHub server.

Let's go !

### 3.1 Build your GitHub Pages URL

> First of all, **IT IS NOT YOUR GITHUB REPO LINK!**

The url follows this syntax :

```bash
https://<github-name>.github.io/<github-repo-name>/
```

As example, assuming :
- *github-name* is `mister-blue`
- *github-repo-name* is `my-starter`.

My **GitHub Pages URL** will be
```
https://mister-blue.github.io/my-starter/
```

Keep this URL written somewhere.

### 3.2 Configure Deploy to GitHub Pages

Open terminal and navigate to `my-starter` directory (done in part 1).

In case you deleted, follow part 2, and make a clone of it and navigate inside that instead.

First step is to install the package `gh-pages`.

So run this command

```
npm i -D gh-pages
```

Then open `package.json` file with a text editor and remove this line
```
"main": "index.js",
```

In `package.json`, add also these lines, replacing `<github-pages-url>` with your url builded on 3.1 step.

```json
{
  "scripts": {
    "start": ...,// already here
    "build": ..., // already here
    "build:gh-pages": "parcel build ./src/index.html --public-url \"<github-pages-url>\"",
    "predeploy": "npm run build:gh-pages",
    "deploy": "gh-pages -d dist"
  }
}
```


Example , assuming `<github-pages-url` is `https://mister-blue.github.io/my-starter/` :
```json
"build:gh-pages": "parcel build ./src/index.html --public-url \"https://mister-blue.github.io/my-starter/\"",
```


### 3.3 Deploy!

Run this command

```
npm run deploy
```


To test your Deployed GitHub Pages you have two option:

- Open your **GitHub Pages Link** with the browser.
- Open your GitHub Repository page, click on Settings => Pages and you ll find your url at the top.

### 3.4 Update your starter on Github

The last time we pushed our local code to GitHub is at the end of part 2, so if now we start another clone all steps done in part 3 aren't there.

So we update the GitHub repo (remote repo) with our local changes.

Run 

```
git add .
```

```
git commit -m "Added GitHub Pages"
```

```
git push origin master
```


## Conclusion
In these blog series , we covered a lot of stuff that at first glance seems intimidating.
Don't worry if you don't understand what some command does or what some step requires you to do.
The idea of this blogpost is to start from a practical working scenario, then you do your research in a reverse engineering manner.

If you found this blogpost interesting, if something is not clear or you get some error, let me know in the comments.
Why Google thought of creating Cloud Firestore even when they had Realtime Database. 
Tags: firebase, cloud, database
Published: 2021-12-05 08:31:31

**Google Firebase** provides two kinds of cloud-based client-accessible database solutions for mobile apps that allow realtime data synchronization – 
**Realtime Database** and **Cloud Firestore**.


##Realtime Database

Realtime Database is Firebase's *original* and first **cloud-based database**.

It is an efficient and low-latency solution for mobile apps that require synchronised states among clients in realtime.

![Realtime Database icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfbphfv6olds0g7ls8dn.png)

##Cloud Firestore

Cloud Firestore is the **newest flagship** database for mobile apps from Firebase. It is the Realtime Database's successor, with a new and more intuitive data model. 

Cloud Firestore is more **powerful, quicker, more scalable** than Realtime Database.

![Cloud Firestore icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9ejn3o9cs3xne8d18fw.png)
 
Which one should you choose?

- Realtime Database and Cloud Firestore, both are **NoSQL** Databases.

- Data is stored in Realtime Database as a single huge *JSON* tree, making it easier to store simple data but more difficult to arrange complicated, hierarchical data at scale.

-Cloud Firestore organizes data into *groupings* of documents. Subcollections within documents make it easy to arrange complex, hierarchical data at scale. Cloud Firestore requires *less data flattening and denormalization*.


Through queries, data may be accessed, sorted, and filtered from any of the databases.

-Deep queries are supported by Realtime Database, but only with restricted sorting and filtering options.

-Cloud Firestore supports indexed queries with compound sorting and filtering.
const over let unless I'm forced to
Tags: beginners, javascript
Published: 2021-12-05 07:59:30

In the beginning, this discussion wasn't even necessary. We only had one choice in JavaScript to store value (`var`). Nowadays I always reach for `const` unless I'm forced to.

This argument isn't as strong for JavaScript, since there are no known performance gains at the moment of using a constant (`const`) over a variable (`let`). This is not the case in other languages (i.e. Swift) and maybe JavaScript will have performance gains for constants in the future.

When am I forced to use `let`? If I find myself changing a previously declared constant, JavaScript will throw an error.

```js
const x = "hi";
x = "bye";

// VM226:1 Uncaught TypeError: Assignment to constant variable
```

This way I don't bother with thinking about which declaration I should use, I'll be alerted when I have to by following a rule.

## Arrays and Objects

What about arrays and objects? When we mutate an existing object or array, JavaScript will not give us a warning. This is because they are passed by reference.

In this case I still use `const` even if changes are being made.

```js
const arr = [];
arr.push(1);
```

When I create a new array with the new changes (common practice in React to trigger state change), JavaScript will throw me a warning.

```js
let arr = [];
arr = [...arr, 1];
```

In this case I will switch my `const` to a `let`.

## Conclusion

> const over let unless I'm forced to

I just let my tools let me know if a variable is necessary. It also makes sense to use a variable (`let`) when the value stored inside of it varies throughout the lifecycle of the program.
Creating a Pulsing Circle using CSS
Tags: css, webdev, beginners
Published: 2021-12-05 07:48:49

There is a lot that we can do with CSS transitions and recently while searching for cool CSS tricks I found this amazing Pulsating Circle animation using CSS by [kirupa](https://www.kirupa.com/animations/creating_pulsing_circle_animation.htm).
####WHAT WE ARE WORKING TOWARDS
This can be used behind images to produce this very unique design. Have a look -
![mygif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gedqsuc7l3e4ig6nnfcz.gif)
We just need to create a outerContainer which will hold the image. And will act as the boundary for the the pulsating animation. We will then add many divs with the same class with different animation delay to produce the pulsating effect.
####WHAT ANIMATION ACCOMPLISHES
We are fading one circle to into another in a outward or inward way.That is, we are basically animating the circles in a loop with different time period.
####THE CODE
![Code containing animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2kpinlgy1weqf0ljva4.png)
Well if you were expecting to try to copy paste I am sorry, but doing and making changes to the code on your will help you learn. Also if you still find it difficult, you can always check out Kirupa's original post.
Well I hope you could see some glimpses of CSS magic that you can perform without using JavaScript or animation library such as Framer-motion.
Until next time.
![penguin walking saying bye bye](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvwx0ife5vdz1514f0y1.gif)
So können Sie das Instagram-Profilbild von anderen anzeigen und speichern
Tags: webdev, php, programming
Published: 2021-12-05 07:42:33

In Ihrem Android-Handy mit HD-Qualität. Beginnen wir nun mit der Prozedur. Okay, wir brauchen eine Instagram-ID, um den Trick zu machen

Zuerst müssen Sie eine mobile App installieren. Öffnen Sie den Play Store und suchen Sie nach Bild-Downloader

Laden Sie diese Software auf Ihr Mobiltelefon herunter und öffnen Sie sie

Okay, wir müssen den Nutzernamen der Person eingeben, um die ID auszuwählen

Sie finden den Nutzernamen oben im Profilbereich

Geben wir das ein und drücken Sie die Eingabetaste

Jetzt zeigt es uns das Bild in drei Qualitäten, das musst du sehen

Anzeige, um eine bessere Qualität zu erhalten. drücke auf  1080p und wähle Prämienanzeige ansehen

es dauert fünf bis sechs Sekunden und überspringe das dann

Hier hast du das Bild in voller Größe und HD-Qualität, wenn du es speichern möchtest

Bild auf Ihrem Mobiltelefon, dann gibt es oben neben der Schaltfläche "Teilen" eine Option

Drücken Sie einfach auf die Schaltfläche zum Speichern und Ihr Bild wird auf Ihrem Mobiltelefon gespeichert.


Wenn die oben genannten Techniken Sie langweilig fanden, gehen Sie einfach zu Google und suchen Sie nach einem Schlüsselwort
[Instagram Profilbild vergrößern](https://instazoom.com.de/) und dann die im Google-Ergebnis angezeigte Website öffnen. und wiederholen Sie die Prozeduren, indem Sie den Benutzernamen einfügen, und fahren Sie fort.

Lesen Sie auch:

[Leitfaden Zum Anzeigen Von Instagram Profilbildern In HD](https://www.postingsea.com/leitfaden-zum-anzeigen-von-instagram-profilbildern-in-hd/)
[Wie Man Instagram-Profilbild Herunterladen](https://infopostings.com/wie-man-instagram-profilbild-herunterladen/)
[Instagram: Funktionen und Einschränkungen der Fotofreigabe-App](https://www.cinblog.com/instagram-funktionen-und-einschrankungen-der-fotofreigabe-app/)
[So Laden Sie Das Instagram Profilbild In Voller Größe Herunter](https://www.articlehills.com/so-laden-sie-das-instagram-profilbild-in-voller-grose-herunter/)
My New Website - SunTech
Tags: suntech, webdesign, website, abhidevelops
Published: 2021-12-05 07:26:04

Hi Everyone!
I just released my new website and I wanted to share it with all of you. I have an interest in creating websites so I decided to start creating websites for clients. You can Hire Me at my new website. Please view Terms of Service and Privacy Policy before hiring.

Links:
[Website](https://suntechdesign.wixsite.com/suntech)
[Hire Us](https://suntechdesign.wixsite.com/suntech/hire-us)
[Website Plans]
(https://suntechdesign.wixsite.com/suntech/pricing)
[Ecom/Business Plans](https://suntechdesign.wixsite.com/suntech/pricing-ecom)
[Terms of Service](https://suntechdesign.wixsite.com/suntech/tos)
[Privacy Policy](https://suntechdesign.wixsite.com/suntech/privacy-policy)

Enjoy!
Kimsa88
Tags: kimsa, kimsa88, kimsa3888, kimsa20
Published: 2021-12-05 07:09:18

[Kimsa](https://kimsa369.com/kimsa/) tạo ra một trang web dễ sử dụng và hấp dẫn. [Kimsa88](https://kimsa369.com/kimsa88-vao-duong-link-trang-chu-kimsa88-casino/) sử dụng các biện pháp bảo mật cần thiết và bảo vệ cao cấp để bảo vệ thông tin cá nhân và quyền riêng tư của thành viên, vì vậy hãy yên tâm rằng thông tin bạn cung cấp sẽ được lưu giữ an toàn trong cơ sở dữ liệu của Kimsa Casino khi bạn đang chơi trò chơi yêu thích của mình. Khi bạn giới thiệu người khác cùng tham gia, bạn sẽ được [Kimsa khuyến mãi tặng ngay 500k giới thiệu người chơi mới](https://kimsa369.com/khuyen-mai-kimsa-tang-ngay-500k-gioi-thieu/).
Happy PHP8 (4 Is Over)
Tags: php, webdev
Published: 2021-12-05 07:04:09

>**Just the Gist**
>There has been 8 versions of PHP. The latest major release was just a year ago. The language has matured over the years and we have seen it getting more features, more performant and more stable.

## A long and winding road?
We have had PHP in some form or the other available to the public since 1995. That is 26 years! A lot has happened with the language since it started out. In fact, Rasmus Lerdorf, the original creator of PHP, stated once: "I have absolutely no idea how to write a programming language, I just kept adding the next logical step on the way." While this was how it started, and it can explain some of the quirks of the language, the evolution has continued in an organic but albeit a more controlled way later on. 

### The Timeline of Major Versions
#### Version 1: 1995
The embryo of the language - simple scripts.  

#### Version 2: 1997 
Database layer was added. 

#### Version 3: 1998  
The open source nature takes form. Zeev Suraski and Andi Gutmans becomes core developers.  

#### Version 4: 2000  
The Zend Engine is introduced. Superglobals see the light of day (V4.1).

####Version 5: 2004 
The object model is updated. Zend Engine is improved. PDO is a new and improved way to interact with the database layer. There's also namespaces, JSON-support, anonymous functions, and more. (In a way, PHP is now a modern language.)

#### *Version 6: Never released*  
A version of PHP that was supposed to include native Unicode support. It was abandoned when there were difficults addind this support, and new features that were supposed to be added were instead introduced in minor version updates to version 5.

#### Version 7: 2015 
Improvements to the Zend Engine. Null coalesce operator is now a thing. Return type declarations is supported and so is scalar type declarations. We have liftoff for the "spaceship" operator <=> , and much more. **It's exciting!**

#### Version 8: 2020  
More performance improvements with another updated Zend Engine. Attributes are now supported (a native feature that functions as annotations). Named arguments make it easier to call functions. Match expression makes for a more precise and concise version of the switch statement. And again; so much more!

As we can see, there has been **many** improvements to the language since its inception. Performance, consistency, and stability are all improved. Who knows what will happen next?

## What about you?  
When did you start using PHP? What are some features that you miss? Are there some features that were an odd addition to the language? Comment below and let us know what you think ✍

## Further Reading
* Retrospect by Rasmus Lerdorf, via Wayback Machine: https://web.archive.org/web/20130728125152/http://itc.conversationsnetwork.org/shows/detail58.html
* What happened with version 6: https://wiki.php.net/rfc/php6
ScopeChain in JavaScript.
Tags: javascript, beginners, programming, interview
Published: 2021-12-05 06:43:46

In this episode of **JavaScript Interview Series**, I have explained what is Scope, what is Global and Local Scope and how **ScopeChain **works.

Understanding these concepts helps you understand what is going on behind the scenes.

{%youtube BjZaZOq610g%}