teleren/devto huggingface dataset:
Django Tutorial Part 1 --Docker Compose で polls アプリとその urls と views を作成して HttpResponse を確認する
Tags: django, docker
Published: 2021-12-05 16:58:45


## 前回の記事と今回の記事

https://dev.to/kaede_io/docker-compose-pullde-django-to-postgres-wochi-tutekuruhurowofen-jie-suru-9fo

Django Tutorial Part 0 Docker-Compose で Django 3-4 と postgres 12 で composeexample プロジェクトを作って起動する

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0vvn16wa419ref53m5m.png)

前回の記事で docker-compose up で postgres と Django は動かせている状態なのが前提。

https://docs.djangoproject.com/en/3.2/intro/tutorial01/

ここから公式の投票アプリを作る Tutorial をやる。views から作る。

---

---

# 環境構築

環境構築はローカルでは 失敗したので Docker Compose で行う

## poll アプリを作る

```
python manage.py startapp polls
```

公式ではこのように Python をそのまま動かしているが、今回は Docker Compose で動かしているのでこれでは動かない。

https://teratail.com/questions/275283#reply-392502

なのでこの記事を参考に

docker-compose の web で Docker 空間の Python

```yml
version: "3.9"
   
services:
  db:
    image: postgres:12
    restart: always
    volumes:
      - ./data/db:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=postgres
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
  web:
    build: .
    command: python manage.py runserver 0.0.0.0:7000
    volumes:
      - .:/code
    ports:
      - "7000:7000"
    depends_on:
      - db
```

これを使い

manage.py startapp で polls という Django アプリを Django プロジェクトの内部に作成する

```php
docker-compose run \
web python manage.py \
startapp polls
...
[+] Running 1/0
 ⠿ Container dockerdjango-db-1  Running   
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttpp4kfxk2m8hbw7j6qe.png)

これで polls アプリが作られた

polls の中身の urls と view を書く。

---
---

# プロジェクトの urls と アプリの urls, views を作成する

## polls/urls.py　を新しく作成する

```py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]
```

## polls/views.py はすでに生成されているので更新する

```py
from django.shortcuts import render

# Create your views here.
from django.http import HttpResponse


def index(request):
    return HttpResponse("Hello, world. You're at the polls index.")
```

## projects/urls.py を作成する

アプリのディレクトリと並行して存在する、
プロジェクトのディレクトリにも urls を作成して
ルーティングを設定する必要がある。

```php
* data/
* polls/
  * urls.py (NEW!)
  * views.py
* projectName/
  * urls.py (NEW!)
* docker-compose.yml
* Dockerfile
* ...
```

こういう位置関係。

```py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('polls/', include('polls.urls')),
    path('admin/', admin.site.urls),
]
```

これらを書き、docker-compose up すると

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj1rlx05v1x89c3x5ba1.png)

こうして `~/polls/` で `polls/views.py` の HttpResponse を表示できる！！
Day 81/100 Variables
Tags: 100daysofcode, javascript, programming, motivation
Published: 2021-12-05 19:27:58

A value must be placed in the correct form of structure to be utilized efficiently. It uses a known method to gather data and names stored and updated in memory.

![Variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5x9vloxmde0z813sfx5.png)

## Instructions

To learn more about variables take on these challenges!

- Create variables and manipulate the values

- Check what happens when you try concatenating strings using variables of different data types

- Interpolate multiple variables into a string 

- See what happens when you use `console.log()` on variables declared by different keywords (`const, let, var`) before they’re defined. For example:

```
console.log(test1);
 
const test1 = 'figuring out quirks';
```

- Find the data type of a variable’s value using the `typeof `keyword on a variable.

- Use `typeof` to find the data type of the resulting value when you concatenate variables containing two different data types.

## Code Snippets

```
const myPet = 'armadillo';
console.log(`I own a pet ${myPet}.`);
// Output: I own a pet armadillo.
```
 

## a11y myths

**Accessibility only affects a small group of users**

> Not that small. Around 15% of the world's population, or estimated 1 billion people, live with disabilities, they are the world's largest minority. The number of people with disability is dramatically increasing. 

[![resource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7725kj5an33zx146hux.png)](https://www.who.int/en/news-room/fact-sheets/detail/disability-and-health)
GO on AWS CDK Infrastructure and GO - GIN Webserver
Published: 2021-12-05 19:20:46

Chapter of the week of my free GOLANG on AWS learning Website aka living book:

A complete Fargate Container Website with authentication and Load Balancer. The components are decoupled with the AWS Systems Manager (SSM) Parameter Store. 

So if you want to learn how to use the CDK with GO and deploy a fast secure and small webserver, give this chapter a go:

https://www.go-on-aws.com/architectures/fargate/

This site combines learning GO as a programming language with the several AWS usages like CDK and Lambda. And as always: Source included.

Enjoy!

Contact me on twitter: @megaproaktiv
Simplify React code using Babel transpiling: useState
Tags: react, babel, javascript, help
Published: 2021-12-05 19:19:02

Hi devs,

I've been working with react hooks for several years now, more or less since the beginning. It is a huge improvement compared to class components you had to use before, but it still has a lot of code to write, especially compared to Svelte.

This made me think: is it possible to reduce React syntax in order to make it more concise? The short answer is yes. The solution that I decided to adopt is to write a Babel plugin (since you need Babel in any case with React) to leverage some work during the build.

The first thing I worked on is useState. My goal was to remove destructuring of the useState hook and to have a simple variable declaration to be reactive by itself. As the result I got this:
```jsx
// useState import is not necessary

function Example() {
    let $value = 5;
    return (
        <button onClick={() => $value++}>{$value}</button>
    );
}
```

The snippet above is equivalent to this:
```jsx
import { useState } from "react";

function Example() {
    const [value, setValue] = useState(5);
    return (
        <button onClick={() => setValue(value+1)}>{value}</button>
    );
}
```
As you can see, the gains here are:
* simpler, more concise declaration of reactive property
* no need for setter, assigning new value to the property will trigger reactivity
* no need to import useState (not a big deal, it's done automatically in any case, but still).
* better readability (imo)

After I was done with useState (with initial prototype), I started thinking about useEffect and useMemo. The problem is that they are much trickier to simplify, and it's hard to come with a cleaner syntax for them. This is what I had in mind:
```js
function Example() {
    let $value = 5;
    const $memo = $value * 2;
    // eq: const memo = useMemo(() => $value * 2, [$value]);
    
    $ => {
        // effect body
        return () => {
            // effect cleanup
        }
    }
    /** the above is the same as:
     * useEffect(() => {
     *     // effect body
     *     return () => {
     *         // effect cleanup
     *     }
     * }, []);
     */
    
    $ => {
        console.log($memo);
    }
    /** the above is the same as:
     * useEffect(() => {
     *     console.log($memo);
     * }, [$memo]);
     */
    
    return (
        <button onClick={() => $value++}>{$value}</button>
    );
}
```
Notice there is no need for dependencies for both useMemo and useEffect alternatives. They will be injected during build.

Said that, my questions are:
* Does it make sense? Or, would you use something like this, or would you stick with classic hooks?
* If yes, what syntax would you like it to be?
* Is there already something similar?
Improve Code Quality - Static Analyzer
Tags: actionshackathon21, codequality, monitoring
Published: 2021-12-05 19:13:39


[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections)

### My Workflow

As a developer, I am looking to improve my code quality and wants to receive fast feedback for my code changes. Specially, when a change comes in the Pull Request (PR) which can be overlooked. In such cases, automated static code analysis can be helpful, which list code coverage, potential bugs, code smells, vulnerabilities and security issues in the form of reports.

One popular tool, SonarCloud by SonarSource helped me to detect bugs and list code coverage detail on the PR. In the workflow, I have used an existing Github Action from sonar cloud to automatically analysis my changes (in a PR) and post the results on the PR itself.

**GitHub Action used**[https://github.com/SonarSource/sonarcloud-github-action]



![SonarCloud Results on PR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jctb5wpyxiis81nunag.png)


**Results on SonarCloud.io**
![Results on SonarCloud.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dad3p4oxrfruqw29tw90.png)


### Submission Category: 

Maintainer Must-Haves


### Yaml File or Link to Code

[https://github.com/asalan316/spring-boot-camunda-bpm-example/actions/runs/1541515266/workflow]


### Additional Resources / Info


**Sample PR**
[https://github.com/asalan316/spring-boot-camunda-bpm-example/pull/1]

**Master Branch** 
[https://github.com/asalan316/spring-boot-camunda-bpm-example/runs/4422734786?check_suite_focus=true]

**Project** 
[https://github.com/asalan316/spring-boot-camunda-bpm-example]
Automating github pages with actions

Tags: actionshackathon21
Published: 2021-12-05 19:08:40

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow
This workflow publish all files in given folder and publishes to gh-pages or configured branch

checkout https://github.com/cedricbuild/gh-publish-branch

### Submission Category: 

Deployment, Publishing


### Yaml File or Link to Code

```yaml
on: [push]

jobs:
  publish-directory:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: |
          mkdir build
          echo "<html><title> github actions publish ${{ github.run_id }} </title></html>" > build/index.html
      - uses: ./
        with:
          repo_name: ${{ github.repository }}
          branch: gh-pages
          directory: ${{ github.workspace }}/build
          commit_message: "publish directory to branch"
```
Apama Advent Calendar - 05 Dec 2021 - Apama CLI tooling
Tags: apama, iot, cumulocity, streaminganalytics
Published: 2021-12-08 12:40:44

---
title: Apama Advent Calendar - 05 Dec 2021 - Apama CLI tooling
published: true
date: 2021-12-05 19:07:16 UTC
tags: apama, iot, cumulocity, streaminganalytics
canonical_url: https://tech.forums.softwareag.com/t/apama-advent-calendar-05-dec-2021-apama-cli-tooling/253730
---

_This is Day #5_ _of a short series of brief tips, tricks, hints, and reminders of information relating to the Apama Streaming Analytics platform, both from Software AG as well as from the community._  

Check out the original post in the [Software AG Tech Community](https://tech.forums.softwareag.com/t/apama-advent-calendar-05-dec-2021-apama-cli-tooling/253730). It covers the basic CLI (Command Line Interface) tooling for Apama. For other CLI tools with more advanced specific purposes such as test coverage or documenting APIs, will likely be covered in more detail in the coming days.

_Note that some posts may be published a day or two early or late (e.g. Mon-Fri) so you may find you have bonus days with more than one post!_
AppMaster.io no-code platform updates | November 2021
Published: 2021-12-05 19:04:03

We are starting this winter season with significant updates and improvements. Check out what was changed and added to the AppMaster.io platform.

#Beta testing

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7vhs76ctg57imvoitgk.gif)

We launched Beta Testing for AppMaster.io. Now is the time if you were interested in trying out our platform and participating in its development. Register and become one of the beta testers.

Explore all of the functionalities and share opinions. We want to make our product better for you!

#New Modules

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ym7kzjfd0sdz9qiv4mt.gif)

It’s never too many modules. We want to provide you with the module diversity and give you more opportunities to develop and expand your project.

Check out the new module added and some improvements:

- Telegram module updated: the business process with bot support.
- New Cloud Convert module added — an online file converter.

#New blocks in Business Processes
We added new blocks to Business Processes:

- Date types to Unix timestamp and from Unix timestamp
- SSH Command (Password) and SSH Command (Key)

#Subscription plans update

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymxnt6julwbj98xu4z0o.gif)

Switch easily from a monthly to a yearly plan at any moment without paying any extra fees.

#Major improvements

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrsy1po2s28pcwsnv2go.gif)

- Enhanced code generating functionality
- Cancellation functionality added for purchased resources
- Protection from deletion of Production type deployment plans added
- Improved the process of null-fields hiding in the endpoint responses
- Enhanced performance and stability of the studio
- Optimized data-models scheme saving process (10x times)
- Global variables added

We continue working on new ideas and enhancing the performance of the platform. Hope to present even more new features next month!

Stay tuned, and don't miss no-code updates! You are always welcome to join the AppMaster.io community chat and write directly to our developers there!
Bert - transformers
Tags: bert, transformers
Published: 2021-12-05 18:59:01

going beyond open & GPT 3, planning to look at  Google’s TransformerXL, OpenAI’s GPT-2, XLNet, ERNIE2.0, RoBERTa, and Bert.

Started looking at Bert - Bidirectional Encoder Representations from Transformers....

Initially tried installing Bert using facebook large mmli model..

found bert as a service.. if you want to get started quickly...

Install bert server and client using the below commands

pip3 install bert-serving-client
pip3 install bert-serving-server

The code executed is : 

from bert_serving.client import BertClient
bert_client = BertClient(ip='localhost')
bert_client.encode(['hello world','good day'])
probably the most effective course to start learning JavaScript
Tags: javascript, beginners, programming, tutorial
Published: 2021-12-05 18:53:28

_Scrimba_ has a perfect [JavaScript course]
(https://scrimba.com/learn/learnjavascript) for beginners. You can learn the basic concepts of JavaScript easily and effectively without confusions... 

Learning JavaScript by developing useful and simple applications is very valuable in terms of motivation and awareness.

With this course, You are gonna build:

- Passenger counter app,
- Blackjack game,
- Chrome extension

If you want to learn JavaScript in easiest way try it out. It's worth, i promise...

Thanks to [Per Harald Borgen](https://twitter.com/perborgen), who prepared this course, for his simplicity in his explanation and his mastery of the subject.
Add tailwind (JIT) to a react app without ejecting or using craco
Tags: react, tailwindcss, css, javascript
Published: 2021-12-05 15:49:23



![React and tailwind without ejecting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plmk4kemu6v2age7x4h2.png)

Hello guys,
Official tailwindcss docs uses a package called `craco` during installation of tailwindcss in react app. 

I don't particulary like it because same can easily be achieved with just postcss. Here are the steps.

## Step 1 - Create a react and add dependencies 

```zsh
# install react and navigate inside
npx create-react-app my-app
cd my-app

# install packages
yarn add autoprefixer postcss postcss-cli postcss-import tailwindcss

# replace yarn add with npm install if using npm
```

## Step 2 - Add configs

- Create two files `tailwind.config.js` and `postcss.config.js` in root

```zsh
├── src/
├── tailwind.config.js
├── postcss.config.js
└── package.json
```



- Paste this in `tailwind.config.js`:

```
module.exports = {
	mode: "jit",
	purge: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx}"],
	theme: {},
};

```

- Paste this in `postcss.config.js`: 

```
module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

```


## Step 3 - Create styles
- Create a folder `styles` inside `src`
- Create `tailwind.pcss` and `output.css` inside it

```
src/
├── styles/
         ├── output.css
         └── tailwind.pcss
├── App.js
└── index.js
```

- Add following code inside `tailwind.pcss`

```
@import "tailwindcss/base.css";
@import "tailwindcss/components.css";
@import "tailwindcss/utilities.css";
```

## Step 4 - Modify `package.json`

Replace `scripts` with

```
"scripts": {
	"start": "react-scripts start",
	"build": "yarn build:css && react-scripts build",
	"test": "react-scripts test",
	"eject": "react-scripts eject",
	"watch:css": "TAILWIND_MODE=watch postcss src/styles/tailwind.pcss -o src/styles/output.css --watch",
	"build:css": "postcss src/styles/tailwind.pcss -o src/styles/output.css --minify"
},
```

Note: Just replace `yarn` with `npm run` if you are a npm user


## Step 5 - Running

Replace `App.js` with:

```
import "./styles/output.css"
function App() {
 return (
   <div class="bg-green-100 border-green-600 border-b p-6 m-4 rounded text-2xl text-center">
     Hello World
   </div>
 );
}

export default App;
```

### Now open two terminals and run these commands separately

```
yarn watch:css
```
and

```
yarn start
```

The output should be:

![Tailwindcss output image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8501jd4v72q54qaz774j.png)


## Congrats! You have successfully installed and used tailwindcss 🚀🚀
Button animation hover with CSS
Tags: codepen, css, animation, webdev
Published: 2021-12-05 18:21:03

### What properties can we animate with CSS?

> The animation property allows us animate CSS properties as:

``` css
color
position
opacity
```
[“Can I animate?”](http://canianimate.com/) is a site inspired by Can I use, but focused specifically on CSS animations and transitions.

### Animating with CSS

> The CSS Animation with keyframes is created defining two main parameters, keyframes and the animation declaration, this allows you to be able to define the animation controlling the time.

The keyframes are defined using the @keyframes at-rule.

``` css
@keyframes frankenstein {
	0% {
		transform: translate(-50%, -75%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -75%) rotate(360deg);
	}
}
```
You can also define ``from`` and ``to`` instead of percentages.

> Then you have two ways to using the syntax of the animation declaration. The shorthand or the long one.

``` css
button  {
	animation: frankenstein 5s ease-in infinite;
}

button  {
    animation-name: frankenstein;
    animation-duration: 5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
}
```

> In this animation, we have just two keyframes.

{% codepen https://codepen.io/carmenansio/pen/XWebzbG %}
Python convert scientific notation string to float
Tags: python, string, csv, floatingpoint
Published: 2021-12-05 18:20:41

#Python convert scientific notation string to float
In this tutorial let us understand how to yield a number of a specific type.

Python supplies three different numeric types say int, float and complex.

* int represent Integers. booleans are sub types of integers. Integers have unlimited precision.
* float refers to the floating point numbers. A number containing a . or an exponential sign refer to a floating point number.
* complex numbers have a real and imaginary part. If n is a complex number then n.real extracts the real part of n and n.imaginary extracts the imaginary part of n. A complex value is represented as `x + yj` appending j or J to the numeric literal yields an imaginary number.

The following constructors are used to produce an integer, a floating point and a complex number respectively `- int(), float(), complex()`

**int(x)** -> x is converted to integer
**float(x)** -> x is converted to a floating point
**complex(x, y)** -> converted to a complex number with x as a real value and y as an imaginary value.

Let us consider a simple code:


`n = 34.56;
print("integer number : ", int(n));`
output:


`PS C:\PycharmProjects\pythonProject> python sample.py
integer number :  34`

*Scientific numbers* are the special way of writing numbers in powers of 10. for example:

700 = 7 100 = 7 10^2 is the scientific notation of number 700

Let us consider a bigger number like,

6,300,000,000 = 63 10^8 or 6.3 10^9 so, this is the scientific notation of number 6,300,000,000.

Oftentimes e or E are used to represent the 10. Hence 6.3 e+09 is equivalent to 6.3 10^9

As we discussed about the data conversions above, float() constructor can be used to adorn a scientific notation string. Let us understand with a simple example:


`n = 1.230000e+07;
print("integer number : ", float(n));`
Now, let us first calculate this manually

1.230000* 10 ^ 7 => 1230000 an integer , because the conversion is a floating pint number the result of this code should be 1230000.0


`PS C:\PycharmProjects\pythonProject> python sample.py
floating point number :  12300000.0`

 [for more details](DivyaN)
Introduction to HTML, Day 1 of #100DaysofCode 
Tags: html, webdev, beginners, css
Published: 2021-12-05 18:19:12

""Day 1 of 100DaysofCode""

>**Day 1** 
It was all about learning some basics of HTML through documentation and YouTube videos.
Topics that I have learned today are Html Title, Script, Link, Meta, Heading , Paragraph, Image and Anchor Tags.


- 
Title Tag:
The title tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

- 
Script Tag:
The script tag is used to embed a client-side script (JavaScript).

- Link Tag:
 The link tag defines the relationship between the current document and an external resource.

- 
Meta Tag:
The meta tag defines metadata about an HTML document. Metadata is data (information) about data.

- 
Heading Tag:
Contains metadata/information for the document

- 
Paragraph Tag:
Defines a paragraph.

- Image Tag:
The img tag is used to embed an image in an HTML page.

- Anchor Tag:
The a tag defines a hyperlink, which is used to link from one page to another.

Will Share some small projects soon made on these tags.