teleren/devto huggingface dataset:
Creating Your First CSS Grid Layout.
Tags: beginners, webdev, css, cssgrid
Published: 2020-05-23 14:02:00

CSS grid layout or CSS grid is a technique in Cascading Style Sheets that allows web developers to create complex responsive web design layouts more easily and consistently across browsers. There have been other methods for controlling web page layout methods, such as tables, CSS floats, and CSS flex box. CSS grid has an advantage over the popular CSS flex box, is that it allows web developers create responsive layouts in 2-dimensional space when the need arises
Enough talk, Let's get right into it!

__YOUR FIRST GRID__


__Create a grid__
The first step is to create a grid container. We can do this by declaring `display: grid` on the container element. In this example we are using a div with the class of container.

__Define rows and columns__
There are several ways to define rows and columns. For our first grid, we will use properties grid-template-columns and grid-template-rows. These properties allow us to define the size of the rows and columns for our grid. The following code is used to create two fixed-height rows of 150px and three fixed-width columns of 150px.
```
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
```
__Add a gutter__ (The space between rows and columns in a grid.)
```
grid-gap: 1rem;
```
That simple line above gives you an equal-sized gutter between all rows and columns. To define the gutter size for columns and rows individually, you can use the grid-column-gap and grid-row-gap properties instead.

*Now let's put that all together. Here is our HTML:*
```
<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
</div>
```

*Here is the CSS*
```
.container {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px;
  grid-gap: 1rem;
}
```
An additional CSS can be added to give each div item a background and border so we can get so see the grid on our screen

```
   .item{
      border: solid 3px black;
      background: rgba(6, 22, 169, 0.792);
    }
```
*And Voila!, You've created your first Grid Layout*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/75w0s8ff86y444guag8w.png)
What is Optional Chaining in JavaScript?
Tags: coding
Published: 2020-06-22 09:22:07

---
title: What is Optional Chaining in JavaScript?
published: true
date: 2020-05-23 14:01:19 UTC
tags: Coding
canonical_url: https://robertmarshall.dev/blog/what-is-optional-chaining-javascript
---

I came across this way of retrieving values from JavaScript objects when I was looking for an alternative for the Lodash get function.

It allows you to conditionally access values from an object if they exist, and returns undefined rather than an error if not.

Consider this piece of code:

```
const cartoon = {
  name: 'Postman Page',
  helper: {
    animal: 'cat'
  }
};

const helperAnimal = cartoon.helper?.animal;
console.log(helperAnimal)
// expected output: cat

const helperName = cartoon.helper?.name;
console.log(helperName);
// expected output: undefined

```

Rather that throwing an error when calling helperName, the question mark allows the key to be explored.

I find this incredibly helpful when you are not sure if a key/value exists, and don’t want to break your piece of code.
How to use Artillery for load testing with different input values
Tags: artillery
Published: 2020-05-23 13:18:14

---
title: How to use Artillery for load testing with different input values
published: true
description: 
tags: artillery
---
## Overview
Describes a configuration to achieve a load test that posts sequential input values using a load tool called Artillery.

## What is Artillery?
Apache bench is famous for simple load tests, but [artillery](https://artillery.io/) is useful for more complex tests. It's also lighter and more modern than the old jMater.


## Operating environment

```sh
" artillery -version

        ___ __ ____ ____ ____
  _____/ | _____/ /_(_) / /__ _______ __ (_)___ _____
 /____/ /| | / ___/ ___/ __/ / / / _\fnDroid_/ ___/ / / / / / / __\froid_/
/____/ ___ |/ / / /_/ / / __/ / / /_/ / /_/ /_/ /_/ /____/
    /_/ |_/, (_)_/, (_)_/, (_)_/, (_)_/, (_)_/.
                                    /____/

------------ Version Info ------
Artillery: 1.6.0
Artillery Pro: not installed (https://artillery.io/pro)
Node.js: v13.7.0
OS: darwin/x64
-------------------
```

### CSV for input data
Prepare a CSV file with defined input values.
In this example, the continuous ID and date strings are set to id and date, respectively.

```keywords.csv
id,date
1,2020/1/1
2,2020/1/2
3,2020/1/3
4,2020/1/4
5,2020/1/5
6,2020/1/6
7,2020/1/7
8,2020/1/8
9,2020/1/9
10,2020/1/10
11,2020/1/11
```

### Load test definition file

```script.yml
config:
    target: "https://TAEGET_URL"
    phases:
      - Duration: 5
        arrivalRate: 2
    # Add payload element when CSV is loaded. 
    payload:
      # Define the coping file and fields to load
      path: "keywords.csv"
      fields:
        - "id".
        - "DATE"
      # Specify sequential if you want to run csv in order from the beginning 
      order: sequence
      # Ignore the first line of the csv
      skipHeader: true
scenarios. name: "scenario name":
    - name: "Scenario name"
      FLOW:
        - POST:
            url: "/"
            # Define parameters as {{{xxx}} when posting
            json:
                {id: "{{id}}"
                date: "{{date}}"
```

## Run the test

If the artillery path is followed, you can use run and test definition files as arguments like this

```sh
artillery run script.yml
```

Example results

```sh
All virtual users finished
Summary report @ 17:31:08(+0900) 2020-05-22
  Scenarios launched: 10
  Scenarios completed: 10
  Requests completed: 10
  Mean response/sec: 1.67
  Response time (msec):
    1.67 Response time (msec): min: 994.1
    Response time (msec): min: 994.1
    median: 1074.3
    p95: 2057.4
    p99: 2057.4
  Scenario counts:
    Search and buy: 10 (100%)
  Codes:
    200: 10
```
E-commerce website for a startup company
Tags: octograd2020
Published: 2020-05-23 13:44:22

[Note]: # #githubsdp I used the JetBrains student developer feature to write and edit all my code as well as GitKracken to manage the git repository.

## My Final Project
E-commerce website for a startup company

## How I built it
The project is built on Magento 2. Main code is running off PHP 7.3 alongside MySQL. 
Backend code is build with XML for architecture. Using the "MVC" pattern I am passing data from the admin panel up to the frontend that the customer visits. 
Frontend libraries include SASS to make building the css easier. I am using Foundation to add an "off-canvas" to hide the navigation menu on mobile and as a design pattern I've added a hamburger menu to toggle that.
Using React.js an Knockout.js I am triggering the basket and transferring products to the checkout pages.
ARIA for Dummies
Tags: a11y, webdev
Published: 2020-05-23 13:44:03

---
title: ARIA for Dummies
published: true
description: ARIA stands for 'Accessible Rich Internet Application' and is a set of attributes that define ways to make web content and web applications accessible (especially applications made by JavaScript).
tags: a11y, accessibility, web development
---

ARIA stands for 'Accessible Rich Internet Application' and is a set of attributes that define ways to make web content and web applications accessible (especially applications made by JavaScript).

## Why

The thumb rule of accessibility is to use HTML5 native tags. However, in today's rich UI experience we know that there are many modules developers are developing for which they are no HTML5 tags. The challenge is how to make these modules identify by assistive technologies? ARIA- comes here to make these accessible. Not just helping in identifying, ARIA- also support adding states and properties of the custom module of tag developers are developing.

ARIA works by changing and augmenting the standard DOM accessibility tree. It doesn't add any keyboard focus or event-listeners to the element.

This can be done by using - role, properties, or state. ARIA-role, ARIA-properties, ARIA-state

[Read full article here](https://www.a11ytips.dev/docs/aria-states)
Hello World
Tags: computerscience, codenewbie, beginners, webdev
Published: 2020-05-23 13:40:35

Today is almost 2 years and around a month since I wrote my first program in Visual Basic. It was a simple form that took in a name through a text-box and displayed the message "_Hello " + {name}_. When it worked, I could not be any happier.

![Hooray!!](https://media.giphy.com/media/l4JySAWfMaY7w88sU/giphy.gif)

Fast forward to today, I'm here writing my first post on DEV.to. Over the course of these two years, I learnt Visual Basic, JavaScript, Python, Dart, C++ HTML and CSS. 

I played around with frameworks such as Angular, React, Svelte and Flutter. I covered the basics of Machine Learning using Python. I spent hours watching YouTube Videos and reading books about programming. 

I have to say, when I look at what I achieved in those two years, I'm impressed. I learnt those languages while juggling with other high school subjects (12 subjects). 

How did I learn so much in so little time? Well the first language I did outside of Computer Science class was JavaScript. That alone took me more than a year. 

When I tried C++, I noticed its similarities with JavaScript. Then I did Python, followed by Dart and I made the big discovery, all programming languages are the same!

![Mind Blowing](https://media.giphy.com/media/5aLrlDiJPMPFS/giphy.gif)

All programming languages have core concepts - variables, functions, objects e.t.c. These work the same regardless of which language you use. Once you learn your first language, its easier to pick a second, third or fourth language.

So if you ask me, "Can anyone learn to code?". My immediate response is a resounding "Yes!" 

Not too long ago, I sat down to make my first website coded from scratch. A simple website that allowed people to chat by sending messages. 

Simple enough I thought, I would use Firebase with JavaScript. The interface would be simple HTML with a CSS framework such as Bootstrap.

Even this simple task was overwhelming for me. I suffered from "Coder's Block" an infamous cousin of "Writer's Block". I didn't know where to get started. 

That's when I made the second big discovery, developing software is more than coding. It's a beautiful art of designing, engineering and problem-solving. For the past two years, I had learnt to code not make software! 

![Now I get it!](https://media.giphy.com/media/xUOxfecWsLzAYSUP6w/giphy.gif)

I decided to learn this art and share my discoveries through weekly posts. 

Anyway, let me end it here. My rule of thumb is to keep my posts short, less than 400 words. So with that said, goodbye.

Written with ♥ by __Anesu__.

Photo by Morgan Richardson on Unsplash.
Bash function to add TILs from the command line
Tags: bash, productivity, todayilearned
Published: 2020-05-23 12:42:20

Here's a snippet I use in my **`.bashrc`** file to quickly write down and review TILs (Today I learned):


```bash
TIL_FILE="$HOME/my-notes-repo/til.md"
til () 
{ 
    # checks if the function has been called without any argument
    if [[ -z $1 ]]; then
        # opens the file in my editor, setting the cursor to the last line
        # useful to review latest entries or to write a longer entry
        vim + "$TIL_FILE";
    else
        # adds a line with today's date, a TAB and all arguments supplied ("$@")
        echo -e "- $( date '+%F' ):\t$@" >> "$TIL_FILE";
    fi
}
```

### How to use:
- **`til`** to open the file. I use this to review what I learned today  or if I need to write a longer, multiline entry
- **`til CONTENT`** to append a line to the file
  - e.g `til grep --line-buffered to immediately print especially when tailing files` will add this: `- 2020-05-23:   grep --line-buffered to immediately print especially when tailing files`

### Explanation on the function
In case you missed the comments in the function, here's an explanation of what the various lines do:
- **`if [[ -z $1 ]];`** checks if the function has been called without any arguments
- **`vim + "$TIL_FILE"`** opens the file in vim (my preferred editor), setting the cursor to the last line of the file.
- **`echo -e "- $tdate:\t$@" >> "$TIL_FILE";`** adds a line with today's date, a TAB and all arguments supplied ("$@") to `til`
Convenient because updated_at does not update without changing the attributes of ActiveRecord and does not issue any extra SQL.
Tags: rails
Published: 2020-05-23 13:28:24

---
title: Convenient because updated_at does not update without changing the attributes of ActiveRecord and does not issue any extra SQL.
published: true
description: 
tags: rails
---


## Overview
Even if the update method is executed without changing the attribute value in the model that inherits ActiveRecord, the update SQL itself is not executed.
UPDATE_AT with the update date is also not updated.

If the model is not changed, the SQL itself is not executed even if the same value is explicitly assigned to the attribute value as before `change`.

### Prerequisites.

Rails: 5.2
Ruby: 2.5.1

# main topic.
Sample User Table Definitions

```
create_table :users do |t|
  t.string :name
  t.timestamps
end
```

Defining the user model

```
class User < ApplicationRecord
end
```

Create a suitable User model for the sample and display the updated_at

```
User.first.updated_at
=> Tue, 29 Jan 2019 03:56:08 UTC +00:00
User.first.updated_at.to_i
=> 1548734168
```

Update the name attribute with the value originally included in the User model.
You can see that the SQL of the UPDATE statement is not executed compared to the changes described below.
You can see that the updated_at of the execution result is 1548734168, which is the same as the update_at before the execution of the update method.

```
> User.first.update!(name: User.first.name)
  User Load (0.2ms) SELECT "users". * FROM "users" ORDER BY "users"." "id" ASC LIMIT ? id" ASC LIMIT ?  [["LIMIT", 1]]]
  User Load (0.2ms) SELECT "users". * FROM "users" ORDER BY "users"." "id" ASC LIMIT ? id" ASC LIMIT ?  [["LIMIT", 1]]]
   (0.1ms) begin transaction
   (0.0ms) commit transaction
=> true
irb(main):008:0> User.first.updated_at.to_i
=> 1548734168
```

After verification, we can see that the value of the name attribute is changed, the SQL of the UPDATE statement is executed and the value of updated_at is updated

```
> User.first.update!(name: User.first.name + "1")
  User Load (0.2ms) SELECT "users". * FROM "users" ORDER BY "users"." "id" ASC LIMIT ? id" ASC LIMIT ?  [["LIMIT", 1]]]
  User Load (0.2ms) SELECT "users". * FROM "users" ORDER BY "users"." "id" ASC LIMIT ? id" ASC LIMIT ?  [["LIMIT", 1]]]
   (0.1ms) begin transaction
  User Update (1.3ms) UPDATE "users" SET "name" = ? , "updated_at" = ? WHERE "users"." id" = ?  [["name", "test 1"], ["updated_at", "2019-02-01 08:27:12.468565"], ["id", 2]]
   (2.9ms) commit transaction
=> true

> User.first.updated_at.to_i
  User Load (0.3ms) SELECT "users". * FROM "users" ORDER BY "users"." "id" ASC LIMIT ? id" ASC LIMIT ?  [["LIMIT", 1]]]
=> 1549009632
```
Radiation Emulator
Tags: octograd2020
Published: 2020-05-23 13:27:25


## Radiation Emulator
Radiation Emulator is an android app I made on a studentjob and was my first work experience in developing something that is not a personal project or a school project.

The app depends on ARCore to work, this was a real challenge to learn to work with because prior to this I had no experience with developing mobile applications or ARCore. For me this was a great learning experience.

The company for whom I made the app wanted it to be opensource so that everybody who could need it has access to it. Also allowing the possibility for someone else to further improve the app (it certainly could use some improvements, because this app was a learning experience for me and you can tell by looking at my code). The app being opensourced is also a reason why I really liked working on this, trying to give back to the community.

If you want more information about this you can check out the repo.
 

## Link to Code
{% github https://github.com/RobbenP/radiationEmulator %}
Determine if a particular validation error is occurring in AcitiveRecord
Tags: railsrails5
Published: 2020-05-23 13:23:52

---
title: Determine if a particular validation error is occurring in AcitiveRecord
published: true
description: 
tags: rails rails5
---

## Overview
When a validation error occurs in a model that inherits from ActiveRecord, determine if a specific validation is responded to.

For example, to check if an attribute in valid? or save has an error.


### Prerequisites.

Rails: 5.2
Ruby: 2.5.1

# main topic.
Sample User Table Definitions


```
create_table :users do |t|
  t.string :name
  t.timestamps
end
```

Defining the user model

There's a variation of the empty character check for name.

```
class User < ApplicationRecord
  validates :name, presence: true
end
```

First, instantiate and check validation.

```
> u = User.new
=> #<User id: nil, name: nil, created_at: nil, updated_at: nil>
> u.valid?
=> false
```

If you check the error, you'll see the default empty letter error message

```
> u.errors.full_messages
=> ["Name can't be blank"]
```

You can use the [added?](https://api.rubyonrails.org/classes/ActiveModel/Errors.html#method-i-added-3F) method to find out which validation errors occurred for a particular attribute (from the comments section of this post)

```
# You can specify the symbol of the attribute name and the type of validation error for the argument.
> u.errors.added?(:name, :blank)
=> true


# If you don't specify the second argument, the default value will be "invalid". Note that the second argument is :invalid
> u.errors.added?(:name)
=> false
```


## [Bonus] Retrieving validation error details
If you want a list of errors, you can run errors.details to see which element and which validation has the error content :blank

```
> u.errors.details
=> {:name=>[{:error=>:blank}]}

# Returns an array of objects if you give a symbol
u.errors.details[:name]
=> [{:error=>:blank}]

# Return an empty array if you put in an appropriate symbol
> u.errors.details[:name_xxxx]
=> []
```

In this way, if you specify a symbol from details and check for the presence of a specific symbol:blank in the array to be returned
You can also determine if a particular validation has been responded to, such as added?

```
> u.errors.details[:name].any? { |d| d[:error] == :blank }
=> true
```
Definitive guides vs articles every day?
Tags: discuss, webdev, healthydebate
Published: 2020-05-23 13:00:16

Hi, everyone

Would you like to read an article every day or get a complete guide that covers a lot of articles but gets right to the point?

So what is your take on this:

- more articles?

- fewer articles but more value in a single read?

Thanks in advance for all the participants to this discussion
Markdown Editor Reactjs
Tags: react, beginners
Published: 2020-05-23 12:59:04

---
title: Markdown Editor Reactjs
published: true
description:use state hook
tags: reactjs,  beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fgel38lavxw3rgmqv0pc.jpg
---
First I want to thank [@chrisoncode](https://twitter.com/chrisoncode) that created the beautiful course [20reactapps](https://20reactapps.com/) where I’m learning a lot by doing.

[DEMO](http://localhost:3000/google.com)
> In your CLI run this 🙂:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ll07191a9uekd72xs8c9.png)

After write some Css  in your index.css:
```css
@import url('https://fonts.googleapis.com/css2?family=Bellota:ital,wght@1,700&display=swap');

body {
    background: #e8eaf1;
    font-family: 'Bellota', cursive;
}

.app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
}

textarea {
    background: #eff1f5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0  1px 2px 0 rgba(0, 0, 0, 0.06);
    outline: none;
    border: none;
    border-radius: 5px;
    padding: 20px;
    font-size: 22px;
}

.preview  {
    padding-left: 20px;
    padding-right: 20px;
}

blockquote {
    font-size: 30px;
    background: #efefef;
    border-left: 12px solid rgb(44, 163, 241);
    padding: 20px 30px;
    border-radius: 5px;
    margin: 0;
}
```
Now install [react-markdown](https://github.com/rexxars/react-markdown)
in your CLI (I use yarn but also npm is fine):
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ffsyith8r1nli1lgq98o.png)
And last but not least compile our index.js file like this:
```javascript
import React, {useState} from 'react'
import ReactMarkdown from "react-markdown";
import ReactDOM from 'react-dom'
import './index.css'


function MarkdownEditor() {
    const [markdown, setMarkdown] = useState('')

    function handleChange(e) {
        setMarkdown(e.target.value)
    }

    return (
        <div className='app'>
            <textarea
                onChange={handleChange}
                value={markdown}
            />
            <ReactMarkdown className="preview" source={markdown}  />
        </div>

    )
}

ReactDOM.render(<MarkdownEditor/>, document.querySelector('#root'))

```

Our markdown editor is now ready. Have fun 🙂!
Daily Challenge #248 - Chinese Numerals
Tags: challenge
Published: 2020-05-23 12:58:36

---
title: Daily Challenge #248 - Chinese Numerals
published: true
series: Daily Challenge
description: Take a number and convert it into a Chinese numeral string. 
tags: challenge
---
Create a function that takes a Number as its argument and returns a Chinese numeral string. You don't need to validate the input argument, it will always be a Number in the range [0, 99999] with no decimals.

Simplified Chinese numerals have characters representing each number from 0 to 9 and additional numbers representing larger numbers like 10, 100, 1000, and 10000.
```
0 líng 零
1 yī 一
2 èr 二
3 sān 三
4 sì 四
5 wǔ 五
6 liù 六
7 qī 七
8 bā 八
9 jiǔ 九
10 shí 十
100 bǎi 百
1000 qiān 千
10000 wàn 万
```
Multiple-digit numbers are constructed by first the digit value (1 to 9) and then the place multiplier (such as 10, 100, 1000), starting with the most significant digit. A special case is made for 10 - 19 where the leading digit value (yī 一) is dropped. Note that this special case is only made for the actual values 10 - 19, not any larger values. Trailing zeros are omitted, but interior zeros are grouped together and indicated by a single 零 character without giving the place multiplier.

###Examples
10 十
11 十一
18 十八
21 二十一
110 一百一十
123 一百二十三
24681 二万四千六百八十一


###Tests
`to_chinese_numeral(9)`
`to_chinese_numeral(10)`
`to_chinese_numeral(110)`
`to_chinese_numeral(111)`
`to_chinese_numeral(1000)`
`to_chinese_numeral(10000)`

Good luck!
***
_This [challenge](https://www.codewars.com/kata/52608f5345d4a19bed000b31) comes from ConstableBrew on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_