teleren/devto huggingface dataset:
Is there any package to do auto-formatting in your python / Django project?
Tags: discuss, webdev, python, django
Published: 2019-06-20 06:10:23

---
title: Is there any package to do auto-formatting in your python / Django project?
published: true
description: How to auto format in python / django project
tags: ['discuss', 'webdev', 'python', 'django']
---

I need suggestions to use in my side project. I am a javascript dev, I use `prettier` + `eslint` along with git hook to do autoformatting and linting in my projects.

Is there any options similarly in python / Django?

Expected answer,
- suggest packages to do such magic
- share article reference to setup in VScode and also git hooks to auto format before pushing and throw lint issues before pushing to git.
HOC React
Tags: react, functional, beginners, javascript
Published: 2019-06-20 06:00:49

This is my first post on dev.to 
Warm hello to everyone!

There's an old saying "Don't Repeat Yourself". If applied to React codebase - a worthwhile challenge involving High Order Functions (HOF).

Before delving into code,
couple of HOF examples:

#### [`Array.map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
```javascript
[1, 2].map(el => el = el + 1);
// → [2, 3]
```
#### [`Array​.prototype​.for​Each()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
```javascript
["A", "B"].forEach(l => console.log(l));
// → A
// → B
```
#### `Typical Math Abstraction`
```javascript
const multiply = (x) => (y) => x * y
multiply(1)(2) 
// -> 2
```
#### <em>`Wild Caught oneliner`</em>
##### Function Composition
```javascript
const composition = (...callbacks) => callbacks.reduce((a,b) => (...args) => a(b(...args)));
```
Decodes as: 
```
const compose = (...callbacks) => callbacks.reduce((a, b) => (...args) => a(b(...args)));
    const addTwo = x => x + 2;
    const double = x => x * 2;
    const square = x => x * x;
    const fn = compose(addTwo, double, square);
    console.log(fn(1)); // -> 4 addTwo(double(square(1)))
```
### HOC in React ...
##### HOC is a pattern that emerges from React’s compositional nature.
Note, that HOC is an advanced <strong>pattern</strong> used in React, but not the part of API. You can use them to abstract functionality away but reuse it as opt-in functionality for multiple components. A higher order component takes a component and optional configuration as input and returns an enhanced version of the component. It builds up on the principle of higher order functions in JavaScript: A function that returns a function.

HOC are important later on, because you will be confronted with them when using Redux. (connect HOC in [react-redux](https://github.com/reduxjs/react-redux)).
These are the means to abstract given React Components implementing logic and returning a freshly augmented Component

Prototype is this:
```javascript
const AugmentedComponent = HOC(OriginalComponent);
```

To demonstrate, the following function returns component `<ReversedNameComponent>` with reversed innerText of originally passed `<OriginalNameComponent>`:
```javascript
const reverse = ChildComponent =>
  ({ children, ...props }) =>
    <ChildComponent {...props}>
      {children.split("").reverse().join("")}
    </ChildComponent>
    
const OriginalNameComponent = props => <span>{props.children}</span>

const ReversedNameComponent = reverse(OriginalNameComponent)

```
Receives `ChildComponent`, <em>splits</em> string on Array of characters, <em>reverses</em> the order, <em>joins</em> into new string, returns result back into Component's `innerText` 

Thanks for reading!
Get Filtered Full-Stack Job Alerts/Newsletter
Tags: jobs, startup, showdev, career
Published: 2019-06-20 04:38:26

---
title: Get Filtered Full-Stack Job Alerts/Newsletter
published: true
description: Release 1.4 offers new Feature for Full-Stack Developer Candidates
tags: jobs,startup,showdev,career
---

Since the first Release of my Full-Stack Job/Candidates Board end of February 2019, the board has a Job Newsletter where a User can signup for weekly or daily Newsletter with a list of added Jobs during frequency.

Now with my new Release, there is a new feature for the User to Setup different Newsletters, based on Filters for:

* Tech Skill's
* Countries, where Office is
* Remote Work Option's
* Job Type's

In the same Release and with same Filtering options User can define Job Alerts, which send him an Email for every new job added where his Filters apply. In an upcoming Release, there will be also a Web-Push and SMS option to get job alerts.

Check it out: https://fullstackjob.com/newsletter/subscribe

![](https://thepracticaldev.s3.amazonaws.com/i/1q8c6yyhf3wmp3xul5hi.png)

Cheers

Stefan
Is there any software to generate a list of NACL rules for my AWS account?
Tags: aws, cloud, nacl, cloudcost
Published: 2019-06-20 05:41:03

I am facing this issue for a long time now, our NACL rules are all messed up and this in turn hinders our resource management.
Is there a way through which I can generate a list of NACL rules for my AWS account?
Any input shall be appreciated.
Umbraco cannot upload SVG
Tags: umbraco, svg, cms
Published: 2019-07-02 11:34:30

---
title: Umbraco cannot upload SVG
published: true
tags: #umbraco #svg #cms
canonical_url: https://theworldwidecode.com/blog/2019/umbraco-cannot-upload-svg/
---

Umbraco cannot upload SVG
CSS Syntax Highlighting in IntelliJ
Tags: productivity, css, intellij, ide
Published: 2019-06-20 04:51:47

Out of the box IntelliJ has no syntax highlighting for *.css files.

Nothing a simple settings change can't fix.

`Settings -> Editor -> File Types` and change the `*.css` file association from `CSS (syntax Highlighting Only)` to `CSS Files (Improved Syntax Highlighting`.

![](https://thepracticaldev.s3.amazonaws.com/i/afrd4u5w4uv22g8ec543.jpg)
Modern C++ in small pieces: constant expressions
Tags: c
Published: 2019-06-20 04:45:16

---
title: Modern C++ in small pieces: constant expressions
published: true
description: A concise introduction to constexpr
tags: C++
series: Modern C++ in small pieces
---

Modern C++ introduces the `constexpr` specifier to allow declaring
compile-time constant expressions. This allows the programmer to
explicitly specify what should be computed at compile time, instead of
guessing what might be optimized away as constants by the compiler. A
clearer boundary of compile time versus run time also makes other
compile-time utilities easier to use.

```cpp
const auto a = 10;
constexpr auto b = a + 1;  // const b = 11;
constexpr auto c = a + b;  // const c = 21;
```

All variables declared with `constexpr` are implicitly `const` and
must be initialized with expressions computable at compile time, but
the converse is not true. A `const` constant can be initialized with a
run-time expression.

```cpp
const auto a = std::rand();  // Ok.
constexpr auto b = a -1;  // compile error!
```

A function's return type can also be `constexpr`, as long as its
body has no run-time dependencies, and it is only applied to
`constexpr` arguments. The function is executed at compile time,
and no code is generated for the function body.

```cpp
constexpr auto smaller(auto a, auto b) {
  return a <= b ? a : b;
}
    
int main() {
  const auto MAX_GROUP_SIZE = 400;
  const auto MAX_USERS = 500;
  constexpr auto LIMIT = smaller(MAX_USERS, MAX_GROUP_SIZE);
  return 0;
}
```

Constant expression can also be used as conditions in `if` and
`switch` statements. Because the condition is evaluated at compile
time, the false branch is not compiled at all.

```cpp
if constexpr (sizeof(void*)*CHAR_BIT == 64) {
  std::cout << "Compiled for 64-bit OS." << std::endl;
} else {
  std::cout << "Not compiled for 64-bit OS." << std::endl;
}
```

A constant expression can consists of other constant expressions, so
you can potentially do some pretty complex computation at compile
time. For example, the following program let the compiler compute the
10th Fibonacci number:

```cpp
constexpr unsigned int static_fib(unsigned int n) {
  if (n <= 1)
    return n;
  else
    return static_fib(n-1) + static_fib(n-2);
}
    
int main() {
  std::cout << static_fib(10) << std::endl;
  return 0;
}
```

Note that functions in constant expressions have to be purely
functional - there cannot be local variables, hence no loops. The code
generated by the compiler for the above program is equivalent to:

```cpp
int main() {
  std::cout << 55 << std::endl;
  return 0;
}
```

In legacy C++, it would require unsightly abuse of templates to
achieve the same effect.
Lyndhurst Movers
Published: 2019-06-20 04:09:28

Lyndhurst Movers Inc is a local moving company that has been operating in Lyndhurst, New Jersey since 1892. In that time, it has been passed down through three generations of women.

In 1903, the fledgling year of the company, Josephine Masten ran the business as an equal to her husband. This was a situation unheard-of at the time. Through their strong partnership, a thriving business was born. For more details at:https://www.lyndhurstmovers.com/moving-company-in-paramus
vue-online-prop - Am I online? A tiny VueJS plugin (<1kb).
Tags: vue, ux, showdev, javascript
Published: 2019-06-20 03:52:53

---
title: vue-online-prop - Am I online? A tiny VueJS plugin (<1kb).
published: true
description: I just wanted one thing only and only one thing. 
tags: vuejs, ux, showdev, javascript
canonical_url: https://uilicious.com/blog/vue-online-prop-am-i-online-a-tiny-vuejs-plugin-1kb/
---

I just wanted one thing only and only one thing. 

I just want a reactive property `$online` in all my Vue components to tell me if the user is connected to the internet or not. 

I know I know, there's already a bunch of existing `vue-online` packages, but... No thanks, I don't need the extra UI components bundled in...

So I made `vue-online-prop` ([npm](https://www.npmjs.com/package/vue-online-prop), [github](https://github.com/shiling/vue-online-prop))

Setup:
```javascript
import VueOnlineProp from "vue-online-prop"
Vue.use(VueOnlineProp)
```

Usage:
```html
<div v-if="!$online"> 
    You are currently offline!
</div>
```

Tada.

![I added a offline indicator!](https://thepracticaldev.s3.amazonaws.com/i/53del7kraqs4ct2u4qnw.gif)

That's all!

---

### (Extras) How it is made

##### How to check if I am online with Javascript

You can query the internet connectivity through Javascript using `navigator.onLine`, and listen to changes to the connectivity using the `online` and `offline` events on the window.

👉[MDN docs on `navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine)

##### Creating the VueJS plugin

This plugin simply listens to the `online` and `offline` events on the window, and sets the value of `navigator.onLine` to a reactive property `status` managed by the plugin. When the plugin is installed using `Vue.use(VueOnlineProp)`, it adds a `beforeCreate` mixin, which will to bind the reactive property `status` to the `$online` property in every component. (👉[Here's the code](https://github.com/shiling/vue-online-prop/blob/master/index.js))
Practice #2
Tags: c, beginners, tutorial
Published: 2019-06-20 03:34:12

Some nice tricks you all should know:
```cpp
// #1 - the modulo operator (just a reminder):
int x = 125;
int y = 7;
int z = 5;
int divisionRemainder = x % y; // 6
divisionRemainder = x % z; // 0

// #2 - how to get the last digit of a number:
int number = 12345;
int lastDigit = number % 10; // 5

// #3 - how to omit the last digit of a number:
int number2 = 12345;
int shorterNumber = number2 / 10; // 1234
```
And now, let's write down some code!

## __Exercise #1__
Write a program which gets a number from the user and prints the sum of its digits. For example:
```cpp
Enter a number:
123
The sum of the digits of the number 123 is 6
```
(Hint: use the tricks above).
    
## __Exercise #2__
Write a program which gets an integer number from the user and checks if it's a prime number. If it's a [prime number](https://en.wikipedia.org/wiki/Prime_number) the program prints "Prime", and otherwise it prints "Not prime". (Hint: A number is prime if it is not divisible by any __smaller__ number). For example:
```cpp
Enter a number:
9
Not prime

Enter a number:
3
Prime
```

## __Exercise #3__
Write a program which gets from the user an integer and builds a pyramid of asterisks ('*') with a base of this size. For example:
```cpp
Insert the base size of the pyramid:
5
  *   
 *** 
*****
    
Insert the base size of the pyramid:
6
  **  
 **** 
******
    
Insert the base size of the pyramid
25
            *
           ***
          *****
         *******
        *********
       ***********
      *************
     ***************
    *****************
   *******************
  *********************
 ***********************
*************************
```
Pay attention that if the base size is an even number, the head of the pyramid should be "\*\*" and not '\*'.


__Good luck!__

####__Always remember, it's much C-mpler than you thought!__

Regards,
Gilad
Make Four Projects From Scratch: CSS And HTML
Tags: courses, css, html
Published: 2019-06-20 22:53:36

---
title: Make Four Projects From Scratch: CSS And HTML
published: true
tags: Courses, css , HTML
canonical_url: https://udemyhunt.com/course/css-projects-create-4-projects-using-pure-css/
cover_image: https://i.udemycdn.com/course/480x270/2119780_dc38_2.jpg
---

 If you are an aspiring web developer hoping to get a deeper understanding of CSS, this course will take your skills to the next level.



All of these projects below will help you better understand some of the more complicated concepts in CSS. 



For example, you will become more familiar with how to use variables, functions, box-shadows as well as how to use more complicated CSS properties such as animation and transform. 



The projects in this course are made using pure CSS: no knowledge of javascript is required.




<center>[Enroll Course](https://udemyhunt.com/course/css-projects-create-4-projects-using-pure-css/)<center>
I'm starting 30 days of commits in July, who'd like to join me?
Tags: discuss, webdev, git
Published: 2019-06-20 02:55:46

---
title: I'm starting 30 days of commits in July, who'd like to join me?
published: true
description: 
tags: discuss, web development, git
---

I decided to start 30 days of commits in July and I'd like to others to join me. If you're up for it, come join the [discord server](https://discord.gg/2NHFW5p) that I've made and am using for this event.

## What is it?

30 days of commits is the idea of spending 30 days working on a side project and trying to fit at least one commit a day into the project.

## Why?

It's really easy to fall off the wagon working on a side project you really like. That's what happens to me. Events like these, community, and being able to share my progress, keeps me working on the stuff I like to work on but often get distracted.

## What's the goal?

That's up to you! I'm on the fence between:

1. working on a photo manager application I started working on back in 2018 during "The Shippening"
2. PICO8 game development - I've got a couple of small working projects.

My goal is to just work on these, make some kind of progress.

## [Come join us!](https://discord.gg/2NHFW5p)

EDIT:

Looks like this caught a good deal of popularity. The server community decided to use the hashtag `#30DaysOfCommits` to use on Twitter if you want to follow along there! :)
Old Terminal HTML template
Tags: oldtermina, html, template
Published: 2019-06-20 02:54:05

---
title: Old Terminal HTML template
published: true
description: A html template that emulates an old terminal.
tags: old termina, html, template
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lcbktp9a26e2twlmhlil.png
---

# Old Terminal

![oldTerminal](https://thepracticaldev.s3.amazonaws.com/i/lcbktp9a26e2twlmhlil.png)

[live version](https://victorribeiro.com/oldTerminal)

I've been busy writing my final thesis for my graduation, but I took the time to upload this old project, cause although it's very simple I really like it.

It's a HTML / CSS / JS template that you can use to crate a simple page to display text as if it was a software running on an old terminal.

The code and how to use is on my [GitHub](https://github.com/victorqribeiro/oldTerminal).
Hulu is down
Tags: discuss
Published: 2019-06-20 01:35:08

---
title: Hulu is down 
published: true
description: Hulu is down, how it affects us. 
tags: discuss
---

Anyone else having issues. Apparently Reddit and Xbox went down today as well. 

I see twitter blowing up about how “I should get a refund”. Giant tech companies can’t even have a few hours down without it having HUGE effect on millions of people and the companies cred. 

What’s your thoughts on this?
Google article recommendations on a desktop device?
Tags: help, google
Published: 2019-06-20 01:21:39

---
title: Google article recommendations on a desktop device?
published: true
description: I prefer to read on the computer.
tags: help, google
---

On Android, the Google homepage shows 'suggested articles' with unusually accurate content.

I would like to access this feed on a desktop computer but they only show on mobile devices. Does anyone know a simple way to achieve this? An API, RSS feed or some other format would be ideal but just HTML is a good start.
how many of you are automated bots
Tags: discuss
Published: 2019-06-20 00:55:23

---
title: how many of you are automated bots
published: true
description: it feels like this place has been invaded by bots. 
tags: discuss
---

When I first got on here it was very interactive. I would get a lot of real responses. Average was 10+ comments a post easy. 

Now I get likes and unicorns on post that are strictly meant for commenting on, but no comments. Which leads me to believe these are bot likes. 

I’m curious if any of you have noticed this.
How Being a Veteran Makes Me a Better Developer
Published: 2019-06-20 00:30:43

I’m from a small town in the North Country of upstate New York. I had good grades in high school, but my family didn’t have much money and I didn’t know what I wanted to go to college for. I joined the Air Force under the delayed enlistment program when I was 17 years old. When I signed up in 1998, I wasn’t thinking about patriotism or serving my country, those things came later. The military was a lifeline and I was going to grab on and hold on for as long as I could. 

In basic training we were taught the Air Force Core Values:
* Integrity First
* Service Before Self
* Excellence In All We Do

I learned these values in name during bootcamp, and in spirit throughout the rest of my time in the military. These core values have shaped me as an Airman and as a woman. 

I’m nearing the end of my Vets Who Code journey, and I can see the Air Force core values working their way into my life as a junior developer. When I see a problem, I solve it. And when I solve it I strive to do it the best I can. And when I don’t know how to solve it, I speak up! I’m not afraid to admit when I don’t know the answer, because I know that sometimes teamwork is the better answer. 

Whether I’m doing a daily code challenge, working with my mentor, or trying to blog my way through this process, I am living these values. 
Another thing I carry with me from my time in the military is my sense of humor and ability to work myself into a new team. Being curious and knowing how to laugh at myself have been invaluable learning how to code. 

Vets Who Code has been an amazing adventure. It’s been a great mix of my old world and my new one and I’m grateful for everything I’ve learned, both in skills and about myself. I’m smarter than I thought I was and can problem solve with the best of ‘em and I’m looking forward to wherever I’m headed next.
I have no idea what I'm doing, but here Goes #1: Decision time.
Tags: beginners, discuss, node, blog
Published: 2019-06-20 00:24:38

---
title: I have no idea what I'm doing, but here Goes #1: Decision time.
published: true
description: a journey of awareness
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1c4evw2wuy73sly1ebl9.png
tags: #beginner #discuss #node #blog
---

Okey dokey, here goes. It's decision time.
 
What do I want to solve? I want to do NO work chasing up work.

How do I solve this?

Maybe I build an API that identifies holes in my diary, then automatically emails my contacts telling them I have available dates. Then it reads the responding emails and automatically populates my diary. Easy! How hard can it really be to build one of these things?

But what to call this it? Hmmm. Let's see... "The Work Chaser 2000". Perfect. The cool kids will call it "tWC2k". I know. I'm a creative genius, right? Don't feel intimidated by my awesomeness, I'm just a man, after all.

Righty oh. Now, how does one make a "tWC2k"?

Probably a big call for someone that has no idea what he's doing, but I suppose we can break this down: First thing's first. Can I access to and manipulate my calendar and emails? Turns out Google has an API on gmail and calendar, so that's a go. So I need tWC2k to talk to gmail and calendar, and vise versa. Let's start here. 

Looks like (right now) I don't need a database or website. Pfft. Websites are soooooo for beginners. Wait.... oh yeah. That'd be me.

So, if I can do the following, to begin with:

1. It's going to be Node.
2. Build tWC2k API with an endpoint that connects to any of Calendars API endpoints. Just get a connection. Any connection to begin with.

I think I can use Postman to test my endpoints initially. Not sure what exactly I want to test. Maybe I look at the documentation in Google's API and pick the easiest looking thing to connect to? 

This might take me a while, but I reckon that's a good enough place to start.
 
Thoughts?
Am I using too many Coding sites?
Tags: help, codenewbie, wheretostart
Published: 2019-06-20 00:00:22

Hi guys,

After some advice. Wanted to start coding for awhile now with the aim to change careers too.  And I also intend on starting a second degree in the autumn via distance learning. What I am worried about is that I keep flittering about with different websites that will teach me to “code”?

Basically got a list of;

* SoloLearn App.
* Udemy.com Courses
* Dev.to
* CodeAcademy
* The Odin Project
* freeCodeCamp
* w3schools.com
* Scrimba
* Pluralsight

Which would you all recommend? I want to focus. But I also won’t the best one that will help me get a job in the industry.
Learning NextJs - Day 2
Tags: react, nextjs
Published: 2019-06-19 23:15:44

---
title: Learning NextJs - Day 2
published: true
tags: react, nextjs
series: Learning NextJs
canonical_url: https://blog.eperedo.com/2019/06/18/learning-next-day-two/
---

Now that you can [create your own pages](https://dev.to/eperedo/learning-next-day-1-1pdf) in next you certainly will need a way to navigate between them without writing the url directly in your browser.

For that purpose the next framework has built in a component called **Link**.
Let's add in our home page two links one for the root page and another for
the **About** page.

```jsx
import Link from "next/link";

function Home() {
  return (
    <div>
      <Link href="/about">
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>

      <h1>Welcome to my App!</h1>
    </div>
  );
}

export default Home;
```

Note that the **Link** component is just a wrapper which provide you client side transitions between your pages, that's why I am putting an **"a"** tag inside of it.
If you open your browser at http://localhost:3000 you can easily navigate between them.

### Prefetching

You can pass the **prefetch** prop to the **Link** component. If next see this prop it will... well prefetch your page.

```jsx
import Link from "next/link";

function Home() {
  return (
    <div>
      <Link href="/about">Home</Link>
      <Link prefetch href="/about">
        About
      </Link>

      <h1>Welcome to my App!</h1>
    </div>
  );
}
```

In the above code next will donwload all the javascript code related to the about page in a background process making the interaction with that page faster. This is a **production only** feature so you can only test it once your app is deployed.