teleren/devto huggingface dataset:
WordPress REST API, meta and <META>
Tags: wordpress, html, help
Published: 2020-04-15 04:43:47

I need help with WordPress's REST API.

In their handbook, in the Endpoint Reference for Pages there's a [schema](https://developer.wordpress.org/rest-api/reference/pages/#schema) and in that schema there's a table with a row that says
<table><tbody><tr><td><b>meta</b><br />object</td><td>Meta fields.<br />Context: <b>view, edit</b></td></tr></tbody></table>
No further mention of `meta` is made and no instructions are given on how it may be used or in what format its arguments need to be given.

Questions:
 1. Is this `meta` the same as the HTML markup `<META`?
 1. Can `meta` be used to provide data that would be used in a `<META` whether it be a `description` or a `keywords` or whatever?
 1. Where may be found examples of the use of the `meta` keyword in REST API view and edit calls for Pages and other Endpoints? 
 1. How are arguments provided in `meta` to be formatted.
 1. If `meta` doesn't set `<META`, what may be used to update `<META` descriptions and keywords (that can be driven programmatically. Don't tell me about Yoast and other SEO tools.)
Hi, I,m Carl Abraham
Published: 2020-04-15 06:53:57

I'm Odoo Python Developer from India. I'm currently working as Odoo Developer for 2+ years at <a href="https://www.cybrosys.com/">Cybrosys Technologies</a>. I'm trying hard to improve my skills and learn new technologies.

Github: <a href="https://github.com/carlabraham">carlabraham</a>

You can also follow me here: <a href="https://dev.to/carlabraham">dev.to</a>

Nice to meet you.
Are you a developer who values community and the open exchange of information?
Published: 2020-04-15 06:02:12

Nowadays, more businesses are starting to understand the value of open-source software (OSS). Unlike commercial software, OSS puts code directly into the hands of developers. It allows them to test, change, extend, and add features as needed. As a result, businesses can enjoy a solution that fits their actual needs and goals.

So, we wanted to highlight the benefits of OSS and encourage you to join our community and the movement at large. 🤗

#### *Open Source Benefits* 🔓

With **no run-time licensing fees**, organizations can have as many copies as needed — often with zero extra cost when using OSS.

Companies can end up spending a lot more on rework cost caused by choosing a quick fix in the short term. Instead, **avoid technical debt** by choosing a better long-term approach with extendable and reusable open source solution.

When companies move to OSS, they will never be dependent on a vendor for products and services. Thus, they can **avoid vendor lock-in**, which makes it hard for the user to switch to another vendor without large costs.

Freedom with the source code also allows developers to **co-create unique solutions**. As a result, it facilitates a constant process of peer review.

The very essence of OSS is the talented pool of developers who value **community and the open exchange of information**. Diversity in this pool is also essential to influence the tech industry at large. So, we invite everyone who supports the cause of OSS to join our community, regardless of technical backgrounds.

#### *Join our community* 🥳

Feel free to join us in any of the platforms that you feel comfortable with:

- [RocketChat](https://community.erxes.io/register/Gw4WRJnk9fSbyAXTq): for everyone in the community to connect and share experiences
- [Spectrum](https://spectrum.chat/erxes): developers can discuss improvements and share tips and tricks
- [Facebook Group](https://www.facebook.com/groups/erxescommunity/): startup, marketing, sales and customer support enthusiasts can discuss the practical applications of erxes

For everyone who contributes to our open source growth marketing platform, we have a little package!🎁[Learn more](https://erxes.io/hubspot-alternative-erxes-swag) about this initiative or [how to contribute on GitHub](https://opensource.guide/how-to-contribute/).

You can also read our interviews with open source experts from the [Open Source Growth Guidebook](https://erxes.io/blog/interviews) series.
You shouldn't use an index as key of the element
Tags: javascript, react, codequality, webdev
Published: 2020-04-15 05:48:48

Photo by ThisisEngineering RAEng on Unsplash

Let me brief you about discussion, in React or any other stack when we need to present line of code with records of an array we use either foreach, map or for a loop. And when we do that it's good to have assigned unique key to individual component/element. As shown in an example below --

```
  const array = ["A", "B", "C", "D"];
  
  array.map((element, index) => {     // in secound parameter return current index of record
      return `<li key=${index}>       //defining key as attribute to line element
                 ${ element }
              <li>`                   //string concatination in js
  })
```

You can read more on the map function [here](https://www.javascripttutorial.net/javascript-array-map/).

As you have seen in snippet we have defined index in key because key have a basic rule that it should be unique and most of the developers pass index as it'll be always unique. That's correct if you are thinking that way too. 

But I faced one issue recently in [react](https://reactjs.org/) development by doing it. Let me share it with you...

- I created one react [pure component](https://reactjs.org/docs/react-api.html#reactpurecomponent) *(so, it won't rerender without props change)* called <Row>, with height as props.
- I used it into the map under by table component.
- Table component:-
  ``` 
      const rows = [30, 60, 40, 10]         // starting point of row respective to table's starting point
      const shortedRow = shortArray(rows)   // shorting before use, value will be [10, 30, 40, 60]
      return (
          <Table>
          {shortedRow.map((row, index) => <Row height={row} key={`row-${index}`}>)}                        // tried to use string with index as well
          </Table>
          <AddRowBtn addHeightAt={35} >
      )
  ```
- Had add row btn at below, to add new row at given height in table

### The problem I was facing:  ###
As a given scenario, on the first load of an app, it'll work like a charm. Now as I add a new row with a height of 35, it'll update my 2nd and 3rd index with a new index at the end (like [10, 30, 35, 40, 60]). 

While re-rendering, since my of 3rd row's height updated but the index is the same it didn't update in DOM. And I had distributed design in output.

### What I did to resolve?: ### 
Instead of passing an index in key, I started to pass a value(height) in key. so as soon as the height update element will re-render without doing anything. (this is one of the advantages of it too).

Current code looks like this: 
 ``` 
      const rows = [30, 60, 40, 10]       
      const shortedRow = shortArray(rows)
      return (
          <Table>
          {shortedRow.map((row) => <Row height={row} key={`row-${row}`}>)}                        // tried to use string with height now
          </Table>
          <AddRowBtn addHeightAt={35} >
      )
  ```

So, this was something new I figured recently. I thought to share it with you guys too. Hope this will help you, yes? then hit follow 😂.
The 'with' statement in python
Tags: python
Published: 2020-04-15 05:32:28

The 'with' statement in python is used for resource management and exception handling. You'd most likely find it when operating with file streams. The statement ensures that the file stream process, for example, doesn't block other processes if an exception is raised, but terminates properly. 

The code block below shows the 'try-finally' approach to file stream resource management.

```py
file = open('file-path', 'w') 
try: 
    file.write('Lorem ipsum') 
finally: 
    file.close() 
```
Normally, you'd want to use this method for writing to a file. But then 'with statement' offers a cleaner approach:
```py 
with open('file-path', 'w') as file: 
    file.write('Lorem ipsum') 
```
The 'with statement' simplifies our file write process to just two lines.

It is also used in database CRUD processes. This example was gotten from [this site](https://mherman.org/blog/flask-for-node-developers/)
```py
def get_all_songs():
    with sqlite3.connect('db/songs.db') as connection:
        cursor = connection.cursor()
        cursor.execute("SELECT * FROM songs ORDER BY id desc")
        all_songs = cursor.fetchall()
        return all_songs
```
Here, the 'with statement' is used to query an sqlite database and return its content.

I hope you found this useful. Please, share other uses of the 'with statement' you have encountered in the wild.
laravel validation
Published: 2020-04-15 05:32:12

I have 3 session 2019, 2020 and 2021 in every session i have student. my question is how to validate this sql wherein, when i promote the 2019 to 2020 the system will not allow to update because the data is already exist.

let say column session_id = 1 then student_id = 1 (session_id = 1 the value is 2019) (student_id = 1 the value is student 1)
Formateando Selector de fechas en Angular
Tags: jhipster, angular
Published: 2020-04-15 05:28:40

---
title: Formateando Selector de fechas en Angular
published: true
description: customize how the 
tags: JHipster, Angular
cover_image: https://images.unsplash.com/photo-1561736778-92e52a7769ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80
---

_English version: https://dev.to/amatosg/customize-date-picker-in-angular-4323_

Cuando se manejan fechas, el formato es crucial para que nos podamos entender correctamente: `12/01/2020` no es lo mismo que `01/12/2020`.

Esto nos dice que un campo de fecha, es realmente importante. Con Angular, esto puede ser complicado, ya que `NgbDateParserFormatter` mostrará las fechas con el formato `yyyy-MM-dd`: 

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

Estuve procastinando con esto durante mucho tiempo, así que decidí _tomar cartas en el asunto_ y mostrar el formato correcto (el que todos *deberían* usar): `dd/MM/yyyy`

## Custom Formatter
Lo que necesitamos hacer es crear un archivo, yo lo llamé `shared/component/ngb-custom-date-parser-formatter.ts` y puse el siguiente código:

```
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';
import * as moment from 'moment';

@Injectable()
export class NgbCustomDateParserFormatter extends NgbDateParserFormatter {

  constructor(private momentFormat: string) {
    super();
  };

  format(date: NgbDateStruct): string {
    if (date === null) {
      return '';
    }
    const d = moment({ year: date.year,
      month: date.month - 1,
      date: date.day });
    return d.isValid() ? d.format(this.momentFormat) : '';
  }

  parse(value: string): NgbDateStruct {
    if (!value) {
      return null;
    }
    const d = moment(value, this.momentFormat);
    return d.isValid() ? { year: d.year(),
      month: d.month() + 1,
      day: d.date() } : null;
  }
}
```

Luego, en mi `app.module.ts` agregué lo siguiente en la sección `providers`:

```
{
    provide: NgbDateParserFormatter,
    useValue: new NgbCustomDateParserFormatter("DD/MM/YYYY") // <== formato!
}
```

Y voila, a tu manera :)

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

PD: [con suerte y esto](https://github.com/jhipster/generator-jhipster/issues/11525) llega al siguiente release de JHipster ;)
Callback Url after payment transaction
Tags: angular, node, mongodb
Published: 2020-04-15 05:24:18

Hi Everyone, 

I am working with angular 8. I am implementing payment gateway. I am facing a problem in callback URL after success or failure of the transaction. When payment gateway return callback URL. It sets to the address bar but angular did not detect that URL & I get can not Post error (Attached image). When I hit enter in address bar it work as expected.
Customize date picker in Angular
Tags: jhipster, angular
Published: 2020-04-15 05:19:55

---
title: Customize date picker in Angular
published: true
description: customize how the 
tags: JHipster, Angular
cover_image: https://images.unsplash.com/photo-1561736778-92e52a7769ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80
---

_Versión en castellano: https://dev.to/amatosg/formateando-selector-de-fechas-en-angular-3p8i_

When dealing with dates, formatting is crucial to understand each other: `12/01/2020` is not the same as `01/12/2020`.

So an input field having the proper format is actually pretty important. With Angular this can be tricky as `NgbDateParserFormatter` will display dates using `yyyy-MM-dd` format: 

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

I've been postponing this issue for too long, so I decided to fix it and display the proper `dd/MM/yyyy` format every region uses (if there is any region not using it, well...they should).

## Custom Formatter
We need to create a new file, I called it `shared/component/ngb-custom-date-parser-formatter.ts` containing the following code:

```
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';
import * as moment from 'moment';

@Injectable()
export class NgbCustomDateParserFormatter extends NgbDateParserFormatter {

  constructor(private momentFormat: string) {
    super();
  };

  format(date: NgbDateStruct): string {
    if (date === null) {
      return '';
    }
    const d = moment({ year: date.year,
      month: date.month - 1,
      date: date.day });
    return d.isValid() ? d.format(this.momentFormat) : '';
  }

  parse(value: string): NgbDateStruct {
    if (!value) {
      return null;
    }
    const d = moment(value, this.momentFormat);
    return d.isValid() ? { year: d.year(),
      month: d.month() + 1,
      day: d.date() } : null;
  }
}
```

Then, in my `app.module.ts` I added the following line to the `providers` section:

```
{
    provide: NgbDateParserFormatter,
    useValue: new NgbCustomDateParserFormatter("DD/MM/YYYY") // <== format!
}
```

Et voila, you will have it your way :)

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

PD: [hopefully this will make it](https://github.com/jhipster/generator-jhipster/issues/11525) to the next release of JHipster ;)
Easter Tile Game with VueJS and Confetti Celebration
Tags: codepen, vue, showdev, webdev
Published: 2020-04-15 04:27:27

<p>A little late, but I used Vue JS to make a tile game where the user must reorganize the tiles to complete the image.  I remember seeing these in Easter baskets as a child.  Complete the puzzle to get make the confetti drop.</p>

{% codepen https://codepen.io/tecknerd/pen/dyYGbyd %}

<p>I've come to see the game isn't mobile friendly, so my next step will be to make it so. Meanwhile, please enjoy it on a laptop or desktop. Thanks and apologies. </p>

<p>Update: The background images in the tiles respond to changes in screen size now.  I did this by making the appropriate changes from</p>

    background: url('./happy-48398.png') no-repeat 0 0;

<p>to</p>

    background: url('./happy-48398.png') no-repeat top left;
    background-size: 300%;

<p>for each tile.  The tile container also works a little better by changing from a static pixel size to a relative size.</p>

<p>Update: Added a countdown timer.</p>

<p>Update: After adding the timer I never implemented any feedback to the user when time was up, other than the timer displaying 0:00.  Now a layer appears over the tile area and gives a Game Over.  Still need to polish some of the CSS and sizing.  Think I might change the image also.</p>
object javascript
Tags: objectjavascript
Published: 2020-04-15 04:16:13

Javascript objects contain key/value pairs. Js objects contains numbers, array, object, boolean, null, undefined functions under one single roof. This process of containing  different properties and function under one single roof, or variable is called encapsulation. 
eg. of Js object.
var obj={
      'name' :'ashwini',
       'age' :'25'
        };
note: js objects are present within curly braces{}, key value pair are seperated by colon: and multiple key value pair are separated by comma,.

Different ways of object Creation.

1. Object literal way
you can create only one object. incase you want to create another, copy the entire structure again.
eg.
var a={
       'name': 'fruit',
       'color':'red'
};
var b={
       'name':'mango',
       'color':'yellow
       }

2. Factory functions
eg.
function fruit(name) {
return {
      'color':'red',
       'name':name
        }
var apple=fruit('apple');

3. Constructor function
function Fruit(name){
this.name=name,
this.color='red'
}
var apple = new fruit('apple');
 'prototypal inheritance' is a concept in which constructor function creates object in more memory efficient way than factory function.
Day 014 of #100DaysOfDesign — Giphy Search (Part 1 — Wireframes)
Tags: design, webdev, challenge, 100daysofdesign
Published: 2020-04-15 04:11:10

Another day with another API project for this challenge. I personally like working with APIs, yeah sometimes it get frustrating if API does not have proper documentation but at the end you can create something cool with that data! And what is more interesting than GIFs? That’s why I chose that API for today’s project.

Whenever you plan to work with APIs, you need to research about that API before you start working on it. You need to know what that API provides and how can you use it in your project. This process can give you rough idea of what pages and elements you can add to your website. I personally like this approach. At first when I started using APIs, I used to watch full project video based on that API in YouTube. It helped me a lot to understand it. But after quite a bit experience with different APIs, now I can take a glance on their docs and can go on creating wireframes and design for the website.

![Gliphy Search - Wireframes](https://dev-to-uploads.s3.amazonaws.com/i/8drgg21gwgt3ubyg341n.jpeg)

Once I looked at their docs (which is really great ❤️), I found that they provides an endpoint for trending, which is pretty cool. When I saw that endpoint, I had an idea in the mind to feature that as hashtag and as a major feature in the website. Currently, wireframe has one frame for three pages but when I will start designing it, I will try to make them bit different than each other. I am planning to inspire the design of this website from Figma’s website. I will add some circles with fun and bright colours in the background to make it interesting. I will also give focus on designing the GIF cards as well. These are the cards that user will be seeing on the page most of the time.

Although I created almost all the pages that website requires, but I am not sure why I am feeling like I missed something in this. _If you find something missing from the wireframes, please drop a comment in Figma file or on this blog. I appreciate your feedback as it helps me to grow myself as better designer._

**Yesterday’s work**: [#013 — Secret Message](https://dev.to/harshppatel/day-013-of-100daysofdesign-secret-message-1e8)

**Tomorrow’s Idea**: Final design for Gliphy Search
How to deploy application using Source to Image (S2I) in OpenShift?
Tags: openshift, kubernetes, devops, node
Published: 2020-04-15 04:10:41

## Objective
- Deploy Node JS Application using S2I
- Update code
- Rebuild Deployment

### Step 1: Set up OpenShift environment
Go to [Katacoda.com](https://katacoda.com/openshift/courses/playgrounds/openshift39) & click on start scenario

### Step 2: Login with developer user
```
oc login -u <USER_NAME> -p <USER_PASSWORD> <SERVER_URL>
```

### Step 3: Create project my-project
```
oc new-project my-project
```

### Step 4: Deploy nodejs application using s2i
```
oc new-app -i nodejs:8 https://github.com/sagar-jadhav/node-hello --name nodejs -l app=demo
```

### Step 5: List pods
```
oc get pods --watch
```

### Step 6: List all resources
```
oc get all -l app=demo
```

### Step 7: Create route
```
oc expose service nodejs
```

### Step 8: List route
```
oc get route
```

### Step 9: Browse application
```
From browser, Browse <ROUTE_URL>
```

### Step 10: Clone repository
```
git clone https://github.com/sagar-jadhav/node-hello
```

### Step 11: Update code
```
Update "Hello World !!" string in index.js
```

### Step 12: Rebuild deployment
```
oc start-build nodejs --from-dir=./node-hello/
```
```
oc get pods --watch
```

### Step 13: Browse application
```
From browser, Browse <ROUTE_URL>
```

{% youtube 4_PUu1tHKiI%}
#100DaysOfCode for the Experienced Developer
Tags: 100daysofcode, css, graphql, javascript
Published: 2020-04-15 03:41:27

---
title: #100DaysOfCode for the Experienced Developer
published: true
description: It's not just for newbies. I'm treating the challenge as my coding playtime hour.
tags: #100DaysOfCode #CSS #GraphQL #JavaScript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/90bxrdye8tb87pre3lgg.jpg
---

I've noticed that most people who do the #100DaysOfCode challenge are beginners learning to code. I've been coding for many years, so I wasn't sure if it was for me. 

Here's why I've decided to start the challenge:

## 1. Play With Cool New Toys

There are so many fun developer tools that I haven't had a chance to try. For example, @vivgui told me about the joys of [Tailwind CSS](https://tailwindcss.com/) back in 2018, and I only got around to learning it a few days ago. Whoa, its CSS classes make composing UIs so much fun! There's also collaborative JS coding tool [Glitch](https://glitch.com/), which @danielfeldroy just got me into, and its cousin [Observable](https://observablehq.com/) for JS notebooks. And there's the realtime GraphQL engine [Hasura](https://hasura.io/) which I'm eager to play with more.

## 2. Make Fun Stuff

Making stuff is fun. If I can't be at my local makerspace making art on the laser cutter, or in my art studio experimenting with messy mixed media painting, then at least I can code.

## The Hard Part

I'm not sure if an hour a day is really doable for me. The toddler, business, family obligations, and stress are already leaving me exhausted. I'll try for an hour, but if some days I can only do 10 minutes, that's still better than skipping a day.

## Overall Goal: Coding as Play

It's easy to get caught up in the mentality of "Coding is work." My intention with this challenge is for it to be fun experimentation and play. If it's not fun, I'll stop doing it. I'm hoping it'll help me make time for personal fun every day.

With that, I'm committing to #100DaysOfCode! Starting tomorrow I'll post about what I code each day.
Aurora Serverless Secrets Manager user information management (using CloudFormation)
Tags: aws, cloudformation, rds, serverless
Published: 2020-04-15 03:36:02

In CloudFormation, I want to manage Aurora Serverless user login information using Secrets Manager.

At the moment, it works with mysql engine.

```
  SecretAuroraServerlessRoot:
    Type: AWS::SecretsManager::Secret
    Properties:
      Description: "Aurora Serverless Root Secrets" 
      SecretString: !Sub 
        -
          '{
              "dbInstanceIdentifier": "${RDSIdentifier}",
              "engine": "${RDSEngine}",
              "host": "${RDSHost}",
              "port": "${RDSPort}",
              "username": "${MasterUsername}", 
              "password": "${MasterUserPassword}"
           }'
        - 
          RDSIdentifier: !Ref AuroraServerlessCluster
          RDSEngine: mysql
          RDSHost: !GetAtt AuroraServerlessCluster.Endpoint.Address
          RDSPort: !GetAtt AuroraServerlessCluster.Endpoint.Port
      Name: !Sub ${TagName}_${EnvTag}_serverless_root_user
```