teleren/devto huggingface dataset:
A blogsite template using @11ty
Tags: eleventy, javascript, jamstack
Published: 2020-07-29 09:10:07

I was reading an article on *Serverless*, this lead me to few terms/technologies/concepts that I wasn't familiar ; *Jamstack* and *static generators*. Exploring this terms led me to an introductory video on [Creating a blog](https://jamstack.training/courses/enrolled/693067). This encouraged me to build a *customisable blogsite template* with following features:

- Customisable blogsite ( `modify _data/site.js` )
- Two column site - left column acting as navigator to blog posts
- uses @11ty to build
- uses bootstrap 4 for styles
- is responsive
- uses highlightjs for code blocks
- blog posts are markdown files (see samples: `/posts/*.md` )
- search blog content (left navigator shows resulting posts)

**Where can I try it out?**

Here is [the live site](https://blog11ty.netlify.app/index.html) on netlify.com (images load a bit slowly - dont know why?)


**How do I use this template?**

1. Fork  a copy of [this repo](https://github.com/ugmurthy/blog) to your github account and clone to your local machine
2. Install and build locally
   <pre><code class="language-bash hljs"> 
   $ cd ~/blosite # change directory to you blogsite
   $ npm install
   $ npx @11ty/eleventy --serve
   # Browse locally to check if you can access the blogsite
   # check the search function too.
   </code></pre>

3. Signup with www.netlify.com using your github account
4. Build this repo using netlify.com (when you signup - netlify.com will guide you - chose defaults and you are done)


If the first 4 steps were successful i.e. you are able to see your site on netlify then proceed with customisation


4. Customise it by modifying contents of `_data/site.js`
5. Modify index.njk, about.njk as needed
6. Write you posts in markdown. All posts will reside ins `posts`
7. Ensure you update variables in frontmatter especially `date` to date of posting (as YYYY-MM-DD )else it defaults to file creation date which will keep changing to build date and thus not preserving order of the blogs in left navigator.
8. git commit the changes if any and push it to origin
9. netlify.com will automatically build the external blogsite.

*Your feedback will be most appreciated - thanks for taking the time to read*

**References**

1. [@11ty](https://www.11ty.dev/)
2. [Ian Feather account of moving from jekyll to 11ty](https://www.ianfeather.co.uk/moving-this-blog-from-jekyll-to-11ty/)
3. [Paul Robert Lloyd experience moving from jekyll to 11ty](https://24ways.org/2018/turn-jekyll-up-to-eleventy/)
4. [Highlighting code](https://highlightjs.org/)
5. [starter code for this blogsite template](https://github.com/fullstacktraining/11ty-blog-jamstack-training/tree/module-1)
6. [Create a blog using Jamstack](https://jamstack.training/courses/enrolled/693067)

**Attribution**
Image in this post by: [Cookie_studio / Freepik](https://www.freepik.com)
When scroll decides to change direction
Tags: showdev, webdev, javascript
Published: 2020-07-29 08:57:56

I'm currently refactoring my portfolio. And so i needed a nice project page. I always wanted a non-vertical layout. 
So i build it.

And now, I share it to y'all. 

I'm just hoping that can inspire some of you.

{% codepen https://codepen.io/JeremyMonatte/pen/NWPpMjR  default-tab=result embed-version=2%}

If you think about some upgrades, comment are here ⬇️ 😃

*PS : You should put the preview in 0,5× to see the desktop layout*
#Python question
Tags: python
Published: 2020-07-29 08:31:25

I want to use the round() function. 
step 1: take a number from the user
step 2: use the round() func on the input
end

I do ot know why i keep getting "ValueError: invalid literal for int() with base 10"


This is what I have been doing:
print('Enter a number to be rounded : ')
num = input ()
num = int () #converting str from the input() to int
print (round (num,2))
What Open AI's GPT-3 means for developer jobs
Tags: ai, webdev, machinelearning, datascience
Published: 2020-07-29 08:25:53

If you have been on Twitter, or anywhere on the internet for that matter, over the last few weeks, you will have come across the cryptic abbreviation "GPT-3", which stands for "Generative Pre-Training (of language models)", version 3. While its predecessors GPT and GPT-2 were far less effective and therefore less impressive, version 3 has caught on in the development world. You might have seen examples, where GPT-3 is trained to generate React components or SQL queries just by giving it text input. Developers fear for their jobs, but should they?

{% twitter 1284807152603820032 %}

While the examples mentioned above are impressive, the reality is, that there is a difference between these presentations and the reality of using an AI algorithm to code complex applications. AI models, such as GPT-3, tend to misrepresent certain user input and might, therefore, go in a completely wrong direction very quickly.

## Product owners will replace developers with AI

While this looks reasonable on the surface, it becomes clear that a product owner or project manager will hardly be capable of using a tool like GPT-3 to replace developers. It is difficult for a developer at times to understand and work through product requirements set by non-technical product owners, so how should an AI algorithm decrypt these requirements?

If you look closely at the examples given by Open AI and the first public beta users you will notice, that the input needs to be written in a "sterile" syntax, that is easy for a machine to understand. It reminds me personally of the [Gherkin syntax](https://cucumber.io/docs/gherkin/reference/) used for BDD tests in certain environments. To give GPT-3 instructions it understands and executes correctly, you need to be a developer, or at least have a certain level of coding experience, to write these instructions. Therefore, it becomes just a layer of abstraction on top of programming languages. A certain level of standardisation would be required to make the output predictable, looking at the way GPT-3 appears to work at the moment.

## Conclusion

GPT-3 is a fancy new interface to generate code (and of course other output, I am just focusing on the implications on developers here, so not going into depth on different use cases). In my opinion, it will not replace developers anytime soon. Instead, it will become another tool we can use to generate code.

A great use case for GPT-3 would be the generation of a lot of the boilerplate code we have to write on a daily basis, where snippets and frameworks are not convenient because a more custom approach is required. Instead of fearing for our jobs, we should think of ways we can use a technology like GPT-3 to our advantage.

Lastly, product owners who dabble with GPT-3 will soon realise that it is not a replacement for developers, just like code-free solutions such as Webflow, Wix and so on won't replace developers for companies with advanced requirements. My conclusion is, therefore, that our jobs are secure for the foreseeable future.
Dazzling Form CSS Pseudo-classes 🤩
Tags: html, css, webdev, codenewbie
Published: 2020-07-29 08:24:02

As a web developer, we all should work on forms. I always curious about form styles while working on the form.

Here I am going to tell you about some CSS Pseudo-classes that will help to improve the usability of the form.

![Here We Go](https://i.imgur.com/R5rUE08.gif)

### 1) placeholder-shown
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;We are aware about placeholder pseudo-class to style the placeholder text. But if we want to style the input element during the presence of placeholder text, then what should we do? Here **placeholder-shown** will comes into play 🔥 .
{% codepen https://codepen.io/Alwar-G/pen/vYLwMqN %}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; In this example we are changing the border color based on the placeholder text presence

### 2) focus-within
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;We know focus pseudo-class. However, If we have cases like changing the background color of the form while focusing the input element,
should we use javascript? I don't think so 🤫

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Because we have wonderful **focus-within** Pseudo-class for changing the styles of the parent element.
{% codepen https://codepen.io/Alwar-G/pen/WNrBBwd %}
Here we are changing the styles of the form if the input element is focussed.

### 3) required
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; As the name implies this pseudo-class apply the styles only on the element which are having the required attribute. By using this pseudo-class, we can highlight which elements should be filled.
{% codepen https://codepen.io/Alwar-G/pen/QWyRROB %}
In the above example, we are highlighting the required input border-color

### 4) disabled
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The most common use case of disabled state is the styling cursor to `not-allowed` for telling the the user which element is disabled. 

Let's see the below example
{% codepen https://codepen.io/Alwar-G/pen/pogmmQY %}

### 5) in-range and out-of-range
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; While working with number fields, we can come across the cases like given number should be in the particular region.
I wrote the post about the number range. Kindly refer this
{% link https://dev.to/alwarg/ranged-input-notification-without-javascript-4kn4 %}

Thanks for reading this post 😍. I hope you learned something interesting. If You want to share something, kindly post your comments, and also don't forget to give your reactions to this post.
AR/VR Newsletters
Tags: newsletters, queppelin, queppelinnewsletters, arvrnewsletter
Published: 2020-07-29 08:22:22

We are excited to bring our monthly newsletters that feature the latest Augmented and Virtual Reality industry news, reports and insights. Important information will also include company insights, new products launch, awards and articles. This newsletter is valuable for us as it keeps us connected with our customers.
If you interested in getting our newsletters then Visit: https://www.queppelin.com/newsletters/
useState everywhere? Nope!
Tags: react, webdev, optimization
Published: 2020-07-29 08:21:50

Hi there! Get ready to have your mind blown!!!

I want you to take a look at this code. Not much going on here.

![Bad Code](https://dev-to-uploads.s3.amazonaws.com/i/trpozvclczem0abzres8.png)

In the snippet, the user can generate a random number but cannot see it. Finally, they can send it to the server.
This code works! This is how you should do it, right? Nope.

#### Problem
The variable/state `random` is never rendered on the screen. But we're using state for it. So, every time you update it, this component and all its child components will re-render. This is unnecessary and can lead to performance issues. Okay! But then how do you stop it?

#### Solution
Use `useRef` instead of `useState`. `useRef` doesn't cause re-renders. Amazing, right? Let's optimize our code now.

![Good Code](https://dev-to-uploads.s3.amazonaws.com/i/0m9q68ywijk5u9v3yt5a.png)

It's that simple! So, now when you don't want to render something, use this trick.
I bet you didn't know we could use `useRef` in situations like these. ;)

Spread the word. Share it with your friends.

Thank you.
Arrayy: A Quick Overview of map(), filter(), and reduce()
Tags: php, beginners
Published: 2020-07-29 08:12:54

---
title: Arrayy: A Quick Overview of map(), filter(), and reduce()
published: true
description: When to use map / filter and reduce? + Code Examples
tags: php, beginners
---

first published here: https://suckup.de/2020/07/arrayy-a-quick-overview-of-map-filter-and-reduce/

![Arrayy: A PHP array manipulation library. Compatible with PHP 7+](https://dev-to-uploads.s3.amazonaws.com/i/sr8koff729gxcvpnoty6.jpeg)

The next examples are using the php array manipulation library “Arrayy” which is using generators internally for many operations.

⇾ https://github.com/voku/Arrayy

```php
StringCollection::create(['Array', 'Array'])->unique()->append('y')->implode(); // Arrayy
```

---

map: transform all values in the collection

```php
StringCollection::create(['foo', 'Foo'])->map('mb_strtoupper'); 

// StringCollection['FOO', 'FOO']
```

---

filter: pass all values to the truth test

```php
$closure = function ($value) {
    return $value % 2 !== 0;
}
IntCollection::create([1, 2, 3, 4])->filter($closure); 

// IntCollection[0 => 1, 2 => 3]
```

---

reduce: transform all values into a new result

```php
IntCollection::create([1, 2, 3, 4])->reduce(
    function ($carry, $item) {
        return $carry * $item;
    },
    1
); 

// IntCollection[24]
```

---
Questions about personal project. MongoDB(Mongoose)
Published: 2020-07-29 08:11:56

Hello! I am considering to start a personal project both for demonstration and learning purposes. The technologies I am going to use is node.js(express.js) mongoDB(mongoose) and puppeteer. The project is that, I will scrape some sites and store the information in a database. For instance I will scrape some websites that sell tech stuff. I have some questions about the implementation. 
1) What is better? To store all the data to one single model or to construct different models for different categories. For example I will have a model for mobile phones a model for laptops and so on, or just one big model with a category attribute and write the category in it.
2) Is any package or tutorial about partial text search in mongoDB or is better to use something like elasticSearch?
3) In my example is it possible when the user search for a “general” product to return only the categories and not all the related products? For example if I search for iphone 11 in this site https://www.skroutz.gr/c/40/kinhta-thlefwna.html?keyphrase=iphone+11 it will return only the deferent categories about iphone 11 and not all the products from all the stores. Is it possible in mongoDB?
How to get started with testing in React?
Tags: discuss, testing, codenewbie
Published: 2020-07-29 08:11:08

Hello there, right now I'm focusing on learning testing in React, but I've been facing a hard time trying to find good material about that. Some tutorials that I find are too shallow or a little bit outdated and maybe I'm still too newbie to understand the documentation. 

What do you think? How did you get started with testing in React? Which resources do you recommend? (Bonus point if it's free or cheap)
How to write if statement in React.js?
Tags: react, beginners, javascript, webdev
Published: 2020-07-29 08:06:45

This article was originally published at https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-2/#how-to-write-if-statement-in-react-js

---

{% youtube pl9DI9v_8-I %}

Of course, if we think about if statement in Javascript or Typescript logic, it’s the same as in every Javascript or Typescript place.

It’s just if/else like pure javascript, but in this case, we won’t talk about the normal if/else.

In react, we’ll need if statements for the one more thing, it’s the rendering.

It’s named “Conditional rendering”, but to make it simple, let’s stay with “if statement in react”.

There are the two most popular ways to use conditional rendering that we’ll see in the React.js code, and depends on a case, both of them are correct.

The first way that we can use is to define the conditional rendering directly in the components layout.

It’s quick and easy that we’ll use the most, and in some cases, it is the best for performance.

We’ll be using this way in the cases when we have only one condition, more just as “if”, when we would like to render some element when a specified condition is passed.

The second way is the function created to handle specified parts of the layout, and render it conditionally, to do that we can use not only if/else but the switch case as well.

This one way is right to use in cases where we have more conditions, especially the version with switch one.

But it fires the function anyway, so it is no sense to use it when we have one condition.

Let’s take a look at the code examples where I added both ways of doing that:

```js
// The first example with the code inside functional component
function Parent(props) {
  return(
    <>
      {name === "Duomly" && (
        <DuomlyComponent/> 
      )}
    </>
  )
}

// The second example with the additional function
function renderComponent() {
  const name = 'Duomly';
  if (name === 'Duomly') {
    return 'Duomly';
  } else {
    return null;
  }
}

function Parent(props) {
  return renderComponent();
}
```

<a href="https://www.duomly.com/?code=lifetime-80">![Duomly - Programming Online Courses](https://dev-to-uploads.s3.amazonaws.com/i/bde89cw4h64z765g2l4r.png)</a>

Thank you for reading,
Radek from Duomly
How to cleanup your old Git branches
Tags: git, github, bash
Published: 2020-07-29 08:04:09

---
title: How to cleanup your old Git branches
published: true
description: Too many branches laying around on GitHub? This is the solution!
tags: ['git','github','bash']
//cover_image: https://direct_url_to_image.jpg
---

## TL;DR

```BASH
git branch -a | grep remotes/origin | sed 's/\s*remotes\/origin\///' | grep -v master | grep -v develop | xargs -n 1 -P 8 git push origin --delete
```

## Bash to the rescue

Step 1: list the branches
```BASH
git branch -a
```

Step 2: filter only the remote branches
```BASH
... | grep remotes/origin
```

Step 3: remove the prefix
```BASH
... | sed 's/\s*remotes\/origin\///'
```

Step 4: exclude branches you want to keep!
```BASH
... | grep -v master | grep -v develop 
```

Step 5: destroy everything!
```BASH
... | xargs -n 1 -P 8 git push origin --delete
```

Xargs options:

- `-n 1` means one after another (or one per-process)
- `-P 8` means create 8 processes (8x time faster!)

## Tell your friends

Now you can tell your coworkers to:
```BASH
git fetch --prune
```

on their machine to purge the branches you've just deleted from origin.

Enjoy

---

**Bonus:** to check which branches will actually be deleted you can simply replace `git push origin --delete` with `echo`.

---

Leave a comment below to tell me what you think or if you have a question
Know Why we use Sass instead of Css?
Published: 2020-07-29 07:51:49

SASS is the most widely used CSS preprocessors. CSS preprocessors can extend the basic CSS features by providing you with a set of powerful functionalities that will raise your productivity in less time. Here you can learn [why we choose sass Instead CSS?](https://www.ubercompute.com/blog/why-do-we-use-sass-instead-of-css/)
Symfony and Doctrine: Unrecognized options “dir_name, namespace” under “doctrine_migrations”.
Tags: php
Published: 2020-07-29 07:34:46

## Problem

Your current version of Symfony is 5.0 and your version of Doctrine Migrations Bundle is 2.* and you run `composer update`
You will most likely get the following error when trying to update composer packages:

```
Unrecognized options "dir_name, namespace" under "doctrine_migrations". Available options are "all_or_nothing", "check_database_platform", "connection", "custom_template", "em", "factories", "migrations", "migrations_paths", "organize_migrations", "services", "storage".
```

This happens because the format of the Symfony configuration files (located in the `config` directory of your project) changed and both package and Symfony maintainers haven’t bothered to create a proper update payload. The main problem is in the Doctrine Migrations Bundle upgrade from version 2.* to version 3.*. So, you’re now stuck with phased out configuration file formats.

## Solution

This may not be the best solution, but it works. To resolve this, follow these steps:

- Make sure your git branch is clear (everything is committed).
- Run `composer update`. You will receive the error. Don’t worry, we’ll fix it now.
- Run `composer recipes:install --force -v`. The output of this command will list all modified files, but you can also see which files have been modified by using Git.
- Run `composer install`.

When recipes are forcefully installed, several Symfony configuration files are going to be updated to follow the standard of the latest version of packages. But that also means that **they will be reverted to their default versions**. This means that all of the changes which you made yourself in these configuration files will be rolled back (deleted) from the configuration files. To resolve this, use your favorite Git GUI tool (the built-in Git support for PHPStorm should be enough), review each of the modified Symfony configuration files and roll back lost pieces of code. Just make sure that you re-create only entries which you (previously) wrote yourself and leave the updated default configuration generated by Symfony (because that was the whole point of upgrading recipes in the first place).

The files which you’ll need to review are:
- All edited files in the `config` directory.
- All `.env` files in the root of your project.
- `.gitignore` file.
- If you have testing bundle or PHPUnit installed in your project, then you’ll need to review `phpunit.xml.dist` file as well.

When you’re done editing all modified configuration files, verify that everything is working properly with `php bin/console cache:clear` or (alternatively) by running `composer install`.

If everything is OK and no error is shown during verification, commit and push your changes. That’s it.
Ackee, an alternative to Google Analytics?
Tags: discuss, gatsby, webdev
Published: 2020-07-29 07:34:24

Hi DEV community, it's gonna be my first post so, let's do it!

I was looking for a tool for analytics on my personal page, but I didn't want use Google Analytics, you know, for all the privacy and other issues with users.

# Ackee
After researching on the internet I found [Ackee](https://ackee.electerious.com/), and how they describe themselves:

>Self-hosted, Node.js based analytics tool for those who care about privacy. Ackee runs on your own server, analyses the traffic of your websites and provides useful statistics in a minimal interface.

#Self-Hosted
In my case, to make it work I decided to deploy it in Heroku, so I created an app instance and uploaded the code to it. Ackee needs a MongoDB to work, so there are two options:
* Use one of Heroku add-ons for MongoDB
* Use MongoDB Atlas and connect with the app

I used the second one, so if it's your case you have to put some *Config Vars* in Heroku like ACKEE_PASSWORD, ACKEE_USERNAME, MONGODB_URI and the last but not the least important ACKEE_ALLOW_ORIGIN to enable CORS. Without this last one pointing to your site you will have troubles with CORS. 

# Implement With Gatsby
My page is made with Gatsby so that it could work together with Ackee I needed to do one last thing, put the plugin to connect them.
It can be done with npm or yarn:
* `npm install --save gatsby-plugin-ackee-tracker`
* `yarn add gatsby-plugin-ackee-tracker`

Finally, all we have to do is config the plugin in *gatsby-config.js*, we can do it like this:
```
plugins: [
  {
    resolve: "gatsby-plugin-ackee-tracker",
    options: {
      // Domatin ID found when adding a domain in the admin panel.
      domainId: 'YOUR_ACKEE_DOMAIN_ID',
      // URL to Server eg: "https://analytics.test.com".
      server: 'https://analytics.test.com',
      // Disabled analytic tracking when running localy
      ignoreLocalhost: true,
      // If enabled it will collect info on OS, BrowserInfo, Device  & ScreenSize
      detailed: false
    },
  },
]
```
# Conclusion
I think I end up lengthening a bit with the explanation ... But I would like to know, what do you think? Do you think it is a good alternative? Do you know other better ones? 

I know that it isn't so complete like Analytics or other tools but for little sites or personal pages and especially for all those who care about the privacy of their users it's a good alternative.

I will be happy to read you!

###P.S
If you have come this far, thanks for reading the article and have a nice day!! 🤙🏽