teleren/devto huggingface dataset:
Getting started with Django 3.0 part 1
Tags: python, django
Published: 2019-12-14 14:48:36

---
title: Getting started with Django 3.0 part 1
published: true
description: "Build your fist application with Django"
tags: python, django, discuss
cover_image: https://images.unsplash.com/photo-1576306686882-c3cb97a70366?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80
---

In this tutorial i will share with you how to build real world application with Django.

https://rapidpython.com/getting-started-with-django/

What is Django ?

Django is a high level web framework built in top of Python.

Who use Django ?

Django is used by lot of companies such as Facebook, Google, Pinterest, Mozila etc...

What we will build ?

We go to build a simple phone-book application, but the ideas in this tutorial is applicable in any application.

Let's getting started :

### Django installation

To install django in our machine we need to follow these step :

- Install Python with PIP
- Create a virtual environment
- Install Django on it

Follow these [instructions](https://www.python.org/downloads/) to install Python and PIP.
I will create a folder for this project and create an envirotnemnet on it :

```sh
$ mkdir django-3-0
$ cd django-3-0
$ python3 -m venv ./my-env
```

After that we need to activate it

```sh
$ source my-env/bin/activate
(my-env)
```

We will use Django CLI, it comes with very useful commands.

```sh
(my-env) $ django-admin startproject phonebook && cd phonebook
```

To to our application we need to run django server

```sh
(my-env) $ python manage.py runserver
```

The server will start on http://localhost:8000/
Open your browser and go to http://localhost:8000/

See you in the next tutorial
PHP form 50: input text textarea checkbox
Tags: php, form
Published: 2019-12-14 14:44:32

___

### <center>Happy Coding</center>

---

{% replit @antelove19/PHP-form-50 %}

---

[`Previous`](https://dev.to/antelove19/php-form-45-input-text-textarea-select-multiple-322m)

We will create form with type **checkbox** input:

```php
    <form method="post" action="process.php" >

        Firstname: <input type="text" name="firstname" />
        <br />

        Lastname: <input type="text" name="lastname" />
        <br />

        Description: <textarea name="description" rows="10" cols="50"></textarea>
        <br />
```

Add input type **checkbox**:

```php
        Hobby: <input type="checkbox" name="hobby"
```

---

```php
        <br />

        <hr />

        <input type="submit" name="submit" value="Submit" />

    </form>
```

---

And, the process:

```php
    echo "<pre>";

    var_dump($_POST);
```

---

[`Source Code`]() [`Next`](https://dev.to/antelove19/php-form-55-input-text-textarea-checkbox-multiple-381j)

---

<center>Thank for reading :)</center>

---
The best of CodeGym (Java)
Tags: java, codequality, tutorial, productivity
Published: 2019-12-14 14:19:15

 
Someone told me: "Oh, dear, you're to late to compile!" (tic-tac baby, tic-tac!)
"Oh dear, what a mess."
"Oh dear, please, start horse-races activities."
"Oh dear, compilers won't understand!"

And on and on...

Well. I'll never tell you about that feelings to me, the deep sense of frustration, and all the nights I've cried about it. 

I'm strong now and despite all, I've decided to write this post to tell you that...

The best thing has become in my life about learning Java,
has happened when I've found CODEGYM.

https://codegym.cc/
That's true. Really interesting and inspiring.
Try it. It's not a cartoon.


Last but not least, remember that: 
<b> Even if your code could say it sometimes, you're not an error!</b> 😃
console.error('Error:', error); 


<('_')>
How build amazing touchscreen applications
Tags: webdev, ux
Published: 2019-12-14 14:09:35

In the last year I'm have opportunity work with a project different, was requested build a system for reception people here I work, that is a somewhere where people going to make exams medics.

The primary requisite of system are that work good in touchscreen, but I had not experience with this type layout. The primary think that you have when you want make system for touchscreen is the components, in my case, buttons ands cards having big for confortably touch users, another motive is that screen is too large and the design need ocuppated all the screen.

I working in this solution since 2018, and now we going a good experience, we think in encapsulate the keyboard developed in the Github for another people use.

I want write more details this project in the future, for now, my tip is that you need differenciete your thinking when you build applications touch, is important remember that users not use your solution with mouse our keyboard, and the components need otimizate for the touch.

Exist a book amazing that I reading now called "Designing For Touch – Josh Clark", I recommend read this book if you need undertand the enviroment around touchscreen development.

This is my first post here, I hope you like!
Styling in React JS
Tags: react, css, javascript, html
Published: 2019-12-14 14:08:50

## Inline Styling

Inline styles are nothing new,they are a HTML feature that we've all most likely used at some point. However,implementing inline styles in React is
slightly different,we store the values as objects.
### Inline object definition
```
<div style={{backgroundColor: "green" }}> IRSHAD ALI </div>
```
### Object literal definition
```
const divStyle = {backgroundColor: "green" }
<div sstyle={divStyle}> IRSHAD ALI </div>
```
Whilst inline style are often used when applying conditional style, they are often not the best choice when more than one element requires the same
styling.
### CSS & CSS Pre-processors
Whilst the process of using vanilla CSS or a CSS pre-processor is the same in React, there are a couple of notable differences. When applying
classes to elements, we use the 'className' syntax rather then 'class'. We also link our stylesheet using the @import syntax.
### For CSS
```
import React from 'react'
import './App.css'

const App = () => {
  return <Dogs/>
  }
export default App;
```
### CSS Modules
CSS Modules are simply `.css` file in which all CSS style and animation are defined. With an exception all of the style declared are locally
scoped to the Component they are imported into.
```
.dogSounds{
font-size: 1.5rem;
color: green;
text-decoration: underline;
}
```
All CSS style for one component are declared in one file.
```
import React from 'react'
import style form "./dog.css";

const Dog = () => {
  return <h1 style={style.dogSounds}> woof</h1>
}

export default Dog;
```
## CSS-in-JS Libraries
CSS-in-JS and inline style are extremely similar. However with inline styles React attaches the style to the DOM nodes,where as CSS-IN-JS libraries
 take your styles and inject them into a `<style>` tag in the DOM.
 ```
npm install --save styled-components
```
Can also b declared in another file and impored in
```
import styled from 'styled-components

const Title = styled,h1`
  font-size: 1.5em;
  color: green;
  text-align: center;
  `;
  
  **//IN COMPONENT**
```  
```
  <Title>
    Heloo World!
  </Title>
```
#### Thank's To @TheTraveling.Dev
PHP 7 on Amazon Web Services (AWS) Cloud9
Tags: aws, cloud9, php, bash
Published: 2019-12-14 14:06:55

---
title: PHP 7 on Amazon Web Services (AWS) Cloud9
published: true
cover_image : https://thepracticaldev.s3.amazonaws.com/i/b8vz2bxmnzpp6t8witwd.jpg
tags: aws, cloud9, php, bash
---

Hello guys,

On thing that I've noticed when working with AWS cloud9 is that by default, it has PHP 5 installed. My question was what if I want to use PHP 7 for development ?

So in this post, I will explain to you how to setup your PHP 7 environement on AWS.

I am assuming that your AWS settings are as follows :

- Environment type : **EC2**
- Platform : **Amazon Linux**

## Let's get started.

In your bash terminal on AWS, check your current PHP version,
```console
ec2-user:~/environment $ php -v
```
Normally you should see,
![PHP version](https://thepracticaldev.s3.amazonaws.com/i/yx3bys2cqv7zgp208bx5.png)<figcaption>PHP version</figcaption>

In order to do these changes, you will need to connect as root, so just type *sudo su* followed by *yum update* :
```console
ec2-user:~/environment $ sudo su
[root@ip-172-31-30-164 environment]# yum update
```
![Update packages](https://thepracticaldev.s3.amazonaws.com/i/qlaf8198qzsca0wu91jp.png)
<figcaption>Update packages</figcaption>


The process might take couple of minutes. Then remove any existing PHP packages.
```console
[root@ip-172-31-30-164 environment]# yum remove php*
```
![PHP packages removal](https://thepracticaldev.s3.amazonaws.com/i/zqyw5f0bzqw0a513667n.png)
<figcaption>PHP packages removal</figcaption>

**Note** : If you already have Apache 2.4, you don't need to remove your web server but if you have an older version, then remove it and install Apache 2.4,
```console
[root@ip-172-31-30-164 environment]# yum remove httpd*
```
```console
[root@ip-172-31-30-164 environment]# yum install httpd24
```

**If everything is working fine till now, you did a great job.**

Now it's time to install PHP 7. As you know, there are multiple versions, i.e : `php7.0`, `php7.1`, `php7.2`...

Below are the command for different php version you want to install.

### PHP 7.0
```console
[root@ip-172-31-30-164 environment]# yum install php70 php70-mysqlnd php70-imap php70-pecl-memcache php70-pecl-apcu php70-gd
```

### PHP 7.1
```console
[root@ip-172-31-30-164 environment]# yum install php71 php71-mysqlnd php71-imap php71-pecl-memcache php71-pecl-apcu php71-gd
```

### PHP 7.2
```console
[root@ip-172-31-30-164 environment]# yum install php72 php72-mysqlnd php72-imap php72-pecl-memcache php72-pecl-apcu php72-gd
```

Let's say we want to have **PHP 7.2**

![PHP 7.2](https://thepracticaldev.s3.amazonaws.com/i/kv95nhreopc2kl22jfhl.png)
<figcaption>PHP 7.2</figcaption>

And here you have it..

![PHP version](https://thepracticaldev.s3.amazonaws.com/i/gnuysuy4rfup3bqoin00.png)
<figcaption>PHP version</figcaption>


You can easily work with PHP 7 on AWS now.

![We did it]
(https://thepracticaldev.s3.amazonaws.com/i/3nn29cq79y8qjg9gghls.gif)
PHP form 40: input text textarea select
Tags: php, form
Published: 2019-12-14 13:40:29

___

### <center>Happy Coding</center>

---

{% replit @antelove19/PHP-form-40 %}

---

[`Previous`](https://dev.to/antelove19/php-form-30-input-text-radio-textarea-4kf4)

We will create form with type **select** input:

```php
    <form method="post" action="process.php" >

        Firstname: <input type="text" name="firstname" />
        <br />

        Lastname: <input type="text" name="lastname" />
        <br />

        Description: <textarea name="description" rows="10" cols="50"></textarea>
        <br />
```

Add input type **select**:

```php
        Programming Language (single):
        <select name="language" >
            <option value="c" >C</option>
            <option value="c++" >C++</option>
            <option value="java" >Java</option>
            <option value="javascript" >Javascript</option>
            <option value="php" selected >PHP</option>
        </select>
```

---

```php
        <br />

        <hr />

        <input type="submit" name="submit" value="Submit" />

    </form>
```

---

And, the process:

```php
    echo "<pre>";

    var_dump($_POST);
```

---

[`Source Code`]() [`Next`](https://dev.to/antelove19/php-form-45-input-text-textarea-select-multiple-322m)

---

<center>Thank for reading :)</center>

---
Avoid Java serialization
Tags: java, security, serialization
Published: 2019-12-14 13:38:19


Serialization in Java allows us to transform an object to a byte stream. This byte stream is either saved to disk or transported to another system.  The other way around, a byte stream can be deserialized and allows us to recreate the original object.

The biggest problem is with the deserializing part. Typically it looks something like this:

```java
ObjectInputStream in = new ObjectInputStream( inputStream );
return (Data)in.readObject();
```

There’s no way to know what you’re deserializing before you decoded it.  It is possible that an attacker serializes a malicious object and send them to your application.  Once you call `readObject()`, the malicious objects have already been instantiated. You might believe that these kinds of attacks are impossible because you need to have a vulnerable class on you classpath. However, if you consider the amount of class on your classpath —that includes your own code, Java libraries, third-party libraries and frameworks— it is very likely that there is a vulnerable class available.  

Java serialization is also called “the gift that keeps on giving” because of the many problems it has produced over the years. Oracle is planning to eventually remove Java serialization as part of Project Amber. However, this may take a while, and it’s unlikely to be fixed in previous versions. Therefore, it is wise to avoid Java serialization as much as possible. If you need to implement serializable on your domain entities, it is best to implement its own `readObject()`, as seen below. This prevents deserialization.

```java
private final void readObject(ObjectInputStream in) throws java.io.IOException {
   throw new java.io.IOException("Deserialized not allowed");
}
```

If you need to Deserialize an inputstream yourself, you should use an `ObjectsInputStream` with restrictions. A nice example of this is the `ValidatingObjectInputStream` from Apache Commons IO. This `ObjectInputStream` checks whether the object that is deserialized, is allowed or not.

```java
FileInputStream fileInput = new FileInputStream(fileName);
ValidatingObjectInputStream in = new ValidatingObjectInputStream(fileInput);
in.accept(Foo.class);

Foo foo_ = (Foo) in.readObject();
```

Object deserialization problems are not restricted to Java serialization. Deserialization from JSON to Java Object can contain similar problems. An example of such a deserialization issue with the Jackson library is in the blog post [“Jackson Deserialization Vulnerability”](https://snyk.io/blog/jackson-deserialization-vulnerability/)


This was just 1 of 10 Java security best practices. Take a look at [the full 10](https://snyk.io/blog/10-java-security-best-practices/) and the easy [printable one-pager](https://snyk.io/blog/10-java-security-best-practices/) available
PHP form 30: input text textarea radio
Tags: php, form
Published: 2019-12-14 13:33:09

___

### <center>Happy Coding</center>

---

{% replit @antelove19/PHP-form-30 %}

---

[`Previous`](https://dev.to/antelove19/php-form-20-input-text-textarea-17df)

We will create form with input type **radio**:

```php
    <form method="post" action="process.php" >

        Firstname: <input type="text" name="firstname" />
        <br />

        Lastname: <input type="text" name="lastname" />
        <br />

        Description: <textarea name="description" rows="10" cols="50"></textarea>
        <br />
```

Add input type **radio**:

```php
        Gender:
        <input type="radio" name="gender" value="male" checked /> Male
        <input type="radio" name="gender" value="female" /> Female
```

---

```php
        <br />

        <hr />

        <input type="submit" name="submit" value="Submit" />

    </form>
```

---

And, the process:

```php
    echo "<pre>";

    var_dump($_POST);
```

---

[`Source Code`]() [`Next`](https://dev.to/antelove19/php-form-40-input-text-textarea-select-27mc)

---

<center>Thank for reading :)</center>

---
Day 9 – Mastering EventEmitter - Learning Node JS In 30 Days [Mini series]
Tags: node, javascript, codenewbie
Published: 2019-12-14 13:23:47

__Today we’re going to learn about `EventEmitter`__

Events (Core module of node js)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/w2x4bmbxi67sfuukp0mn.png)

First we need to require the events

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kznxdqk2pes6dro3wkom.png)

Now we can do something for clicking any element.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ovlm4ywja17tkc7sl26e.png)

This `event` module will help us to use click and different events. We can now create custom events also!

For using the custom event first we'll `const myEmitter = new events()` and get new events on myEmitter -

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/w6xat7g81ftj6b1lvrz0.png)

Second step is making a new custom event which is called `customEvent` in this occasion

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ig0p7cvc1meom4i7imkx.png)

Then finally we need make this event happens using `myEmitter.emit`

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0ebf5cx9mguh74u2wxc7.png)

Final Result

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9nufzrc13725yvkmjrev.png)

So do you understand a bit of __EventEmitter__ right now ? 

You can see the graphical version here
{% instagram B5-v0ZSgQTj %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/day9-nodejsin30days/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) !


You can read the old posts from here --

{% post nerdjfpb/day-1-learning-node-js-in-30-days-mini-series-55e7 %}

{% post nerdjfpb/day-2-learning-node-js-in-30-days-mini-series-5023 %}

{% post nerdjfpb/day-3-learning-node-js-in-30-days-mini-series-24i4 %}

{% post nerdjfpb/day-4-learning-node-js-in-30-days-mini-series-1koc %}

{% post nerdjfpb/day-5-learning-node-js-in-30-days-mini-series-21jm %}

{% post nerdjfpb/day-6-learning-node-js-in-30-days-mini-series-758 %}

{% post nerdjfpb/day-7-learning-node-js-in-30-days-mini-series-3023 %}

{% post nerdjfpb/day-8-var-vs-let-vs-const-learning-node-js-in-30-days-mini-series-1i72 %}
PHP form 10: input text
Tags: php, form
Published: 2019-12-14 13:20:02

___

### <center>Happy Coding</center>

---

{% replit @antelove19/PHP-form-10 %}

---

In **index.php**

```php
    <form method="post" action="process.php" >

        Firstname: <input type="text" name="firstname" />
        <br />

        Lastname: <input type="text" name="lastname" />
        <br />

        <hr />

        <input type="submit" name="submit" value="Submit" />

    </form>
```

---

In **process.php**

```php
    echo "<pre>";

    var_dump($_POST);
```

---

[`Source Code`]() [`Next`](https://dev.to/antelove19/php-form-20-input-text-textarea-17df)

---

<center>Thank for reading :)</center>

---
Regenerate Gemfile.lock
Tags: heroku, ruby, rails
Published: 2019-12-14 12:04:02

## TL;DR

With Docker.
```sh
rm Gemfile.lock
docker run --rm -it -v "$PWD:/app -w /app ruby:2.7 \
    bundle install
```
With `podman`.
```sh
rm Gemfile.lock
podman run --rm -it -v "$PWD":/app -w /app \
    --security-opt label=disable ruby:2.7 \
    bundle install
```

For info specific to Heroku scroll down.

## Backstory

Some time ago I've got a request from my friend to edit information on his website for which the original developer had gone. The web site was written in Ruby on Rails and it was deployed on Heroku using their `cedar-14` stack running on Ubuntu 14.

With no experience with Rails or Ruby or Heroku it took almost two weeks to get that app properly backed up and code running on newer `heroku-18` base. The first thing I had to do is to brine dependencies in `Gemfile.lock` up-to-date to close security bugs and possible glitches on newer OS.

Since then I repeated the operation several times for different Ruby projects and recorded it on `dev.to` for reference.

I didn't want to ruin anything in my friend's existing deployment, so I made a copy of the web site both on new Heroku `heroku-18` plan and on local machine. My local machine is using Fedora, and to avoid `configuration drift` (and keep my system clean) I did all work in a Linux container.

## Creating Linux container

There are many tools to work with Linux containers. I use [`podman`](podman.io).

Make sure you are in your project dir, because it will be shared with the software in container.

```sh
NAME=$(basename "$PWD")
podman run -v "$(pwd)":"/root/$NAME":z -w "/root/$NAME" -it heroku/heroku:18-build
```

`NAME=` takes the name of the current dir. `-v` makes the current dir available inside `/root` directory in container, and makes it the current dir when container starts. `-it` allows to type commands when container starts.

As I used Heroku, it was important to find an image with all development libraries, needed to compile and install some gems. At first I used just `heroku:18` where I had to spend a day or two to find out and install all the dependencies. Then I found the reference to `heroku:18-build` image at https://devcenter.heroku.com/articles/heroku-18-stack#heroku-18-docker-image

## Updating `Gemfile.lock`

The next problem I spent a day or two was a problem with `bundler` installer. It is not included in `herokiu:18-build` image, and I discovered that the latest `bundler` 2.x doesn't work on Heroku. I found a way to install `1.x`.

```sh
gem install bundler --version "~> 1"
```

The rest of it came easy. Remove `Gemfile.lock` and regenerate it using `bundler install`.

```sh
bundler install
```
## Heroku summary
Run this.
```bash
podman run -v "$(pwd)":"/root/app":Z -w "/root/app" -it heroku/heroku:18-build
```
And then inside container this.
```bash
gem install bundler --version "~> 1"
rm Gemfile.lock
bundle install
```

If you've got this error message.
```sh
# bundle install
Your Ruby version is 2.6.5, but your Gemfile specified ~> 2.5.7
```
Then do.
```sh
✗ rm Gemfile.lock
✗ podman run -v "$(pwd)":"/app":Z -w "/app" -it ruby:2.5 bundle install
```
A free Open-source Portfolio template for web developers
Tags: opensource, contributorswanted, html, css
Published: 2019-12-14 11:58:26

A beautiful lightweight, customizable, accessible and performant single-page personal portfolio website for anyone to use as their own or customize the way they like.

> Github [Repo Link →][repo]
> Check out the [live demo here →][site]

![image](https://user-images.githubusercontent.com/46004116/70847770-1e3f3380-1e8a-11ea-8f68-05fa649f6237.png)

The template is built using HTML, SCSS, vanilla JavaScript, and it doesn't use any CSS or JavaScript libraries or have any framework dependencies. Everyone is welcome to contribute or use it as a template for their portfolio. 

The menu & the buttons are almost identical to the ones from Natours Project of Jonas Schmedtmann [Advanced CSS & SASS course][course]. Many Thanks to him for such a great course.

The template is licensed under MIT License.

Details for contributing & customizing the template can be found [here.](https://github.com/nisarhassan12/portfolio#-getting-started) 

Contributions are warmly welcomed 🥰. 

if you're a beginner or have no idea about how to contribute to Open Source then you can reach out to me on [Twitter](https://twitter.com/nisarhassan12) I would love to help & maybe do some pair programming with you to get you started.





[site]: https://nisar.surge.sh
[repo]: https://github.com/nisarhassan12/portfolio
[course]: https://www.udemy.com/course/advanced-css-and-sass/
Laravel Mix Example Tutorial (The Complete Guide)
Tags: laravel, mix
Published: 2019-12-14 11:26:45

In this tutorial i will show you how to use Laravel Mix in your Laravel application. Laravel Mix provides a fluent API for defining Webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors.  Laravel Mix allows you to use a single line to describe what you want and it'll use it's preconfigured settings to process it properly. 

Laravel Mix is a tool for compiling and optimizing assets in a Laravel app. It's similar to a build tool like gulp, Grunt and such like. it's specific to Laravel but can also be used externally as an npm package.

https://www.codechief.org/article/laravel-mix-example-tutorial-the-complete-guide