teleren/devto huggingface dataset:
How not to remain in the learning phase
Tags: discuss, writing, beginners, codenewbie
Published: 2020-09-28 20:42:01

When i first started learning how to code, i took tutorials from Bucky Roberts on Youtube, then i went to w3school, freecodecamp, udemy and andela - learning the same stuff. 

At first i told myself it was because i really had to understand what i was doing, but i was stuck in the learning phase. I wanted to learn everything and never felt good enough to try out things on my own. Most importantly, i didn't know when to stop learning. I feel much better now that i have broken free from that cycle, but i also feel concerned about other newbies who might be stuck in the same predicament. 

So, when did you know it was time to put yourself out there? When did you actively stop learning?
Creating custom shortcodes in hugo
Tags: go, hugo
Published: 2020-09-28 20:37:40

layouts/shortcodes/placehold.html

```html
{{ $width := .Get 0 }}
{{ $height := .Get 1 }}
<img src="https://placehold.it/{{$width}}x{{$height}}" alt="Placehold image"/>
```

We can now call 

```html
{{placehold 250 250}}
```
we end up with 

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

have you built any cool custom shortcodes?
Improving redirects in PHP Built-in Webserver
Tags: php, dot, webserver, redirect
Published: 2020-09-28 20:35:32

---
title: Improving redirects in PHP Built-in Webserver
published: true
description: By using a router script, you can simulate the Apache redirect behaviour.  This script will check if file exists and if not, redirect to index.php.
tags: PHP, dot, webserver, redirect
//cover_image: https://direct_url_to_image.jpg
---
This issue arose when I tried using a period in my parameters within my REST API.  One could question the point of this, but let's assume there's a good solid business reason for it.

This is the sample url:

`http://localhost:8009/url.target/www.google.com`

This url works absolutely fine on nginx and apache.  However the built in php server, when it sees a dot / decimal / period in the url, it tries to find the file.  So attempting to access this url on the PHP built-in web server results in:

`url.target/www.google.com was not found on this server`

The way to change the default behaviour of the built-in server is to add a custom router script.  I found this online in a stack overflow post...  after much, much searching:

```
<?php

$path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);

if (file_exists($_SERVER['DOCUMENT_ROOT'] . $path)) {
    return false;
} else {
    $_SERVER['SCRIPT_NAME'] = 'index.php';
    include './public/index.php';
}
```

I am running the API from a ./public folder, index.php, as you can see in the above code.  This script checks if an actual file exists at the requested url, and if not redirects by default to the public/index.php, which is what we want.

Adding in a router however changed how php handles paths, so this code:

`require '../flight/Flight.php';`

No longer worked with the router.php in play.  I had to change it to the following:

`require __DIR__ . '/../flight/Flight.php';`

Now to run the built in web server, keeping in mind that the router.php file is in the project root, and I run this from the root:

`php -S 0.0.0.0:8009 -t public router.php`

(i prefer 0.0.0.0 so i can access the site from my phone on same LAN)

Hope this helps others out there that may run into the same issue.
Any questions about software architecture? Let us know for the chance to be featured on a DEV podcast!
Tags: discuss, podcast
Published: 2020-09-28 20:12:47

---
title: Any questions about software architecture? Let us know for the chance to be featured on a DEV podcast!
published: true
description: Share your burning questions on software architecture to hear your voice on a future episode of DevDiscuss!
tags: discuss, podcast
---

The [DevDiscuss Podcast](https://dev.to/devdiscuss) begins with an interview and ends with commentary from listeners — and we like to feature the actual _voices_ from our community!

### **This week's prompt: “What are you burning questions about software architecture?”** 
  
For your chance to appear on an upcoming episode, answer the question above by:

- Calling our Google Voice at +1 (929)500-1513 and leave a message 📞

- Sending a voice memo to pod@dev.to 🎙

- OR, leaving a comment here (we'll read your response aloud for you) 🗣

_Please send in your recordings by September 30th at 5 PM PT (8 PM ET, 12 AM UTC)_

---

Don't forget to check out the [latest episode](https://dev.to/devdiscuss/s2-e6-how-to-be-an-entrepreneur), released on September 16th!
What is React Strict Mode?
Tags: react, javascript, webdev
Published: 2020-09-28 20:10:53

React Strict Mode is a tool, which comes with React, for detecting possible issues and problems in your application. Currently (Sept. 2020) Strict Mode detects if you have [unsafe lifecycle methods](https://reactjs.org/docs/strict-mode.html#identifying-unsafe-lifecycles), [usage of legacy string ref API](https://reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage), [usage of findDOMNode](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage), [detecting unexpected side effects](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) or [detecting usage of legacy context API](https://reactjs.org/docs/strict-mode.html#detecting-legacy-context-api).

So basically, using Strict Mode will help you detect if your app or libraries are using React APIs which are deprecated, unsafe in async code or have problems which might cause bugs. **Strict Mode warnings are only displayed in development**, so you don't have to worry about them showing up in production. In the future, Strict Mode will likely add other warnings so even if you don't have any now, it's a good idea to keep using it.

Tools like create-create-app will add Strict Mode to your app by default, but adding it to your app later is also super easy. All you need to do is wrap your app or a portion of your app with `React.StrictMode`component.

```jsx
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
```

Now you'll see the possible warnings in the browser developer tools console when you run your app.
Fragile Code
Tags: codequality, fragile
Published: 2020-09-28 20:07:11

When you write code, sometimes we feel its fragile - yet we're not sure why. Currently, I'm working on a project and I feel the code is very fragile. It has exception handling, it has retry logic, and it has data that is returned to the user to handle any issues that arise. How else can we ensure its not fragile?

There are unit tests and refactoring elements happening, but I still feel its too fragile at its core. What else can I do?
Day 31 of 100DaysOfCode
Tags: 100daysofcode, twilio, javascript, codenewbie
Published: 2020-09-28 19:59:26

Today was an interesting day. I got a youtube commercial advertising TwilioQuest. It's a Learn to code RPG game. I had fun playing it and getting used to the controls. It was also good practice with APIs and the command line. 

If you also want to use the Twilio API you can sign up with [this referral code](www.twilio.com/referral/M1udxz) to get 10$ worth of credits. If you are just interested in the TwilioQuest check out its website from [here](https://www.twilio.com/quest). 

You don't have to sign up to play the game, but signing-up gives you access to more challenges. It's also free. 

Downloaded Ngrok and had to do some more command line magic. I don't know why it never works for me like in the instructions or tutorials. 

###What I did today:

####1. Played some TwilioQuest
https://www.twilio.com/quest

####What I learned from it:
* What Twilio is 
* Using the command line
* Creating files and folders on the terminal
* Just working things out when they don't go your way
* Sharing localhost sites online

####Time spent learning:
Task 'TwilioQuest'. Elapsed time: 2 h 4 min 5 s

#### Total time: 2 h 4 min 5 s
Time spent is tracked by my [TaskTimer](https://www.arttupyykonen.com/tasktimer/) script and the [WakaTime app](https://wakatime.com/about).


### Links and videos

Today's video is by Tom Scott. He makes awesome videos and I highly recommend checking them out. 

{% youtube QPZ0pIK_wsc %}

See you all tomorrow!
Day 15 - Taking A Look At Vue.js
Tags: codenewbie, vue, beginners
Published: 2020-09-28 19:59:00

I took [Scrimba's](https://scrimba.com/learn/learnvue) introduction to Vue.js and after playing around for an hour on the tutorial, I built a simple grocery list application. Checkout it out [here](https://josno.github.io/grocerylist-vue/).

![grocery gif](https://media.giphy.com/media/g2iGCcdY7w6NkP00T1/giphy.gif)

## What I Learned
Finally, I was able to see what the hype with Vue is all about! Honestly speaking, I spent a very limited time around the documentation today, but I thought it was awesome I could get an application completed fairly quickly.

## How This Will Help Me
I hope to look more into the documentation and familiarize myself with the syntax further! That way I can take a better measure of how this lightweight can benefit me.

Until then onto the next challenge!
UI Dev Newsletter #24
Tags: html, css, javascript
Published: 2020-09-28 19:54:15

- [A Gentle Introduction to Using a Docker Container as a Dev Environment](https://bit.ly/3mZQGvY)
Burke Holland explains (in a sarcastic and fun way) how to set up and use Docker (from VS Code).

- [One of my favourite accessibility testing tools: The Tab Key.](https://bit.ly/345H7mb)
Manuel Matuzović lists 9 points on how to why the tab key is his favourite tool for testing website accessibility.

- [The failed promise of Web Components](https://bit.ly/3kQYPAL)
Lea Verou questions the ability to develop and use Web Components easily.

- [5 CSS Properties You Probably Did Not Know About](https://bit.ly/3i4QJCN)
Timothy Okooboh writes about some CSS properties that you might know of/forgot about, but that could be quite useful.

- [Hacktoberfest 2020: Registration Now Open 🎃](https://bit.ly/3jbgEtO)
Commit to open source by signing up for Hacktoberfest.

- [JavaScript bookmarks](https://bit.ly/34iEii7)
Steve Gardner shows how to save JavaScript snippets as browser bookmarks.

- [CSS Animation with motion](https://bit.ly/338wj7y)
Henry Zarza makes eye-catching, playful CSS-only animations.

- [GSAP 3 Express Free Trial](https://bit.ly/3mUXzhL)
The course for absolute beginners that guides you through the best parts of the GSAP API.

Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
Smart-Tagz - Input tags component for Vue
Tags: vue, showdev, javascript, typescript
Published: 2020-09-28 19:40:15


![app-home](https://dev-to-uploads.s3.amazonaws.com/i/o8u1ndx4zamypuk43ceo.png)

### Features

✅ **Autosuggest** - Supports Autosuggest with easy keyboard selection.

✅ **Editable Tags** - Tags can be edited inline by double clicking on the tag.

✅ **Create tags on Paste** - Paste string with delimiters of your choice and the component will auto create the tags for you.

✅ **Easy tag deletion** - Delete tags easily with delete or backspace.

✅ **Quick delete** - Quickly delete all tags with CTRL + A, DEL or BACKSPACE.

✅ **Support for custom color schemes** - easy color scheme customization.

✅ **Composition API** - Built using the latest Composition API.

### Install

```sh
yarn install smart-tagz
```

### Getting started

```sh
<template>
  <smart-tagz
    autosuggest
    editable
    inputPlaceholder="Select Countries ..."
    :sources="sources"
    :allowPaste="{delimiter: ','}"
    :allowDuplicates="false"
    :maxTags="20"
    :defaultTags="['United Kingdom', 'Uruguay', 'Uzbekistan']"
  />
</template>

<script>
import { SmartTagz } from "smart-tagz";
import "smart-tagz/dist/smart-tagz.css";

export default {
  name: "Basic",
  components: {
    SmartTagz,
  }
};
</script>
```

#### 💡 Autosuggest

Setting up autosuggest just got lot easier. Configure the datasources and you are good to go.

```sh
<smart-tagz autosuggest :sources="sources" />
```

![1](https://dev-to-uploads.s3.amazonaws.com/i/t80u767mv2z9q600ldoz.gif)

#### ✏ Easy edit

With the `edit` mode enabled, double click a tag to make changes to your tags easily.

```sh
<smart-tagz editable />
```

![2](https://dev-to-uploads.s3.amazonaws.com/i/ryo4w7vgfbgpvldnnb93.gif)

#### 🧹Quick delete

sometimes it's better to just quickly clear all the tags and start from scratch. with `quick delete` mode, you can select all the tags at once and clear them.

press <kbd>CTRL</kbd> + <kbd>A</kbd> to select all tags and use <kbd>DEL</kbd> key to clear the tags.

```sh
<smart-tagz quick-delete />
```

![3](https://dev-to-uploads.s3.amazonaws.com/i/vkcxlt2zacttlzrtd498.gif)

#### 🔒 Readonly Tags

In readonly mode new tags cannot be added and default tags if set cannot be deleted.

```sh
<smart-tagz read-only />
```

![23](https://dev-to-uploads.s3.amazonaws.com/i/scakh5rze36r5kg1cxq0.png)

#### 🌈 Theme support

Customize colors with ease.

```sh
<smart-tagz
  :theme="{
    primary: '#545454',
    background: '#bdbdbd',
    tagTextColor: '#fff',
  }"
/>
```

![23](https://dev-to-uploads.s3.amazonaws.com/i/7rb7u0e5v1c2jg2au9sv.png)
 

The component comes with many more features. Please visit the demo site to play with all the features.

### 📺 https://smart-tagz.vercel.app/

{% github prabhuignoto/smart-tagz no-readme %}

Feedback and contributions are Welcome.
How to select random record with Django ORM
Tags: django
Published: 2020-09-28 19:38:46

Recently I wanted to implement more sophisticated banners on my site to promote my [iOS apps](https://nemecek.be/pages/apps). Initially I had just one hardcoded banner in the template but that was not going to work for multiple banners.

The part that took the longest was to display random banner on a page. This involves mainly getting random record (or entity if you will) from your database. *I have found quite a few solutions but they were either too complicated or relied on some preconditions like you had to have a table with no deleted records + sequential ids and then you could use something like last id or count and select random number from that.*

My solution does not have any requirements but could be problematic if you needed to select from possibly 100s of thousands or more records.

Anyway, let's move to code. My `Banner`s can be toggled off with property `is_active` so I am using Django ORM `filter` together with `values` to pull out all the available ids. Like this:

```python
banner_ids = Banner.objects.filter(is_active=True).values('id')
```
Once that is done, we can check if the result is not empty and if not, utilize `choice` form `random` module to pick random element.

```python
import random

if len(banner_ids) > 0:
    random_id = random.choice(banner_ids)["id"]

    try:
        banner = Banner.objects.get(pk=random_id)
    except Banner.DoesNotExist:
        banner = None
```

Because the `banners_ids` is basically "array" of key-value pairs, there is `["id"]` subscript to pull out just the number. Once we have random id, we can use that to try to get record with the `get` method.

**And that is all!**

I think this is pretty good for my usecase and for many other assuming you don't have tons of data to work with.

I have a few banners and the pages are cached so I don't almost have to even think about performance.

I write about Django here and on my blog [nemecek.be](https://nemecek.be)
I want to learn about web-technologies as a beginner to the web development scene 
Tags: help, webdev
Published: 2020-09-28 19:27:36

I've been using Python for a few years now mainly for scripting and for data science/machine learning hobbyist projects.

Now, I want to learn more about web technologies.

I really want to learn what's involved in building complex websites.

Some websites I thought were pretty interesting and would like to see what's involved in building them are:

- A video game message board such as this:

https://www.resetera.com/

- Freelance site such as Fiverr

- Private video chats like Discord or video streams like Twitch

- Controlling robotics via online interface

- Ecommerce sites

- How browser pluggins work! How do people create adblock pluggins, or various types of pluggins.

and much, much more.

There are so many web frameworks and languages I'm not sure what I should be learning. I'm really confused. 

Should I be learning Python sockets to understand more low-end stuff? 

I've learned the basics of html, css and javascript.
I was thinking of learning Jquery and React, to learn more about front end, but it seems most of the complicated tech revolves around back-end tech. 

I've learned a little bit about rest apis and crud. 

It seems I need a backend language and a framework as well as 
Since I know Python, I can go with Flask and Django.
However, I wonder if Django will be able to build those complex sites I have listed above.  

From my research it seems Ruby on Rails as well as PHP/Laravel are also pretty popular. Are they easier to learn than Django?
Is Nodejs worth learning or should I go with Go instead?

Basically I am thinking of learning something really flexible. 
Should I watch some lectures/courses on all of them to get an idea? Do they all basically do the same thing? 

Then we have databases. I am thinking Sql as it seems to be the most popular?

For cloud tech and deployment I know of AWS and Heroku.

There is also a lot of web security tech that I am not sure I understand works. I am assuming recaptcha works with javascript and some database. There are also security keys.

As you can see I am kind of lost as to where I should begin.
I'm really interested in getting general overviews as to all of the tech involved when building some of these complex websites I have listed above, and would appreciate any guidance. 

Thank you.
Comprendre Dockerfile #FR
Tags: docker, dockerfile, fr, francais
Published: 2020-09-28 19:19:59

Bonjour les apprentis **dockeriste** !
Si vous êtes la c'est que comme moi à un certain moment, vous avez décider d'en savoir plus sur ce fichier Dockerfile qui parait simple à la lecture mais pourtant... pas tant que cela.

Commençons avec la question bateau.

### Qu'est-ce que le Dockerfile ?
C'est un petit bout de fichier de configuration qui vient donner à docker ce dont vous avez envie.

Par exemple;

Vous avez une super application en Node JS, vous souhaitez donc la mettre en production sur votre serveur qui accueille des containers dockers. Vous avez besoin de plusieurs chose :

- Lancer une archi Linux,
- Installer les dépendance npm de votre projet.
- Lancer le build et exposer l'exécution du script sur le port 80

Dans ce cas le Dockerfile s'exécutera comme cela :
```
FROM debian:9
RUN apt-get update -yq \
&& apt-get install curl gnupg -yq \
&& curl -sL https://deb.nodesource.com/setup_10.x | bash \
&& apt-get install nodejs -yq \
&& apt-get clean -y

WORKDIR /app
COPY app/package*.json ./
RUN npm install
COPY app .

RUN npm run build

EXPOSE 80

CMD npm run start
```

Lisons un peu ce bout de code

- On utilise l'image de Debian 9
- On execute la mise à jour des paquets et l'installation de node
- On définie le repertoire de travail dans son dossier app
- On lance l'installation des dépendances
- On build
- On expose sur le port 80
- Et on lance notre application

ensuite on ajoute un fichier **.dockerignore**, il fonctionne comme un **.gitignore**, c'est à dire que l'on va ignorer certain fichier / dossier de notre projet
exemple :

```
.git
app/node_modules
```
ensuite,
je vous conseil une architecture de vos projets comme ceci

```
root:
  Dockerfile
  app/
    node_modules
    src
    packages.json
    etc
```
*merci Xavier*

allez-y tester avec la commande suivante :
```
docker build -t nomdevotreimage .
```

youhouuu ! vous avez build votre premier Dockerfile félicitations !

*Pour les feignasses*
https://gitlab.com/Simerca/dockerfile-exemple
Why I Decided to Go Into Software Engineering.
Published: 2020-09-28 19:16:35

Software Engineering has interested me when I was in middle school. My oldest brother ultimately got me into coding and showed me a few things back then. After showing me what projects he was doing for NASA and some of the stories he came out with during his time there I was hooked. 

After getting into programming more I saw it was a great career field that is highly rewarding and full of opportunity. The endless road of opportunities for programming has a place for everyone for what I see. Especially nowadays when every business has software of some sort. Logistics, Healthcare, Entertainment, Retail, etc all need someone to help program software or build/maintain a website. Programming can take you just about anywhere with the vast amount of opportunity there is. 

Software Engineers career is also very rewarding as well. When I looked into Software engineering I saw it was a very sound paying career. Along with the great pay, some companies allow remote work which is an amazing for a lot of reasons. Those were the 2 things that really peaked my interest in this career. Another great thing that I saw programming has to offer is that it's always changing. There is always something new to learn in programming, which to me is always nice not to have everything being same ol' thing. I love that there is always something to learn no matter if you are the greatest coder in world there's always something new to learn.
"That is crazy. YOU are crazy!" with Daniele Bernardi of Twitter
Tags: career, devrel, twitter, podcast
Published: 2020-09-28 19:15:33

Back when Daniele studied computer science in high school, he wanted to push the limits of technology. Operating under strict rules and a well-defined program, the teachers thought he was genuinely crazy. Come to hear how a series of rejections earned him a career with one of the most sought-after tech companies. To register: https://lu.ma/daniele-bernardi-0929
Which C standard?
Tags: c, beginners, webassembly
Published: 2020-09-28 18:51:06

I'm returning to a project which is kind of between fun and a serious technical challenge. 18 months ago I wrote most of tidal-node; a way to have Lua VM running and interoperating with node.js, it's mostly wrote in c++ which I found to be a little bit vast for my tastes. So between upgrading all the dependencies and stripping out all the OOP style code from the JS library frontend, I want to do a redo using C.

My question, C99 sounds so cool, C11 sounds older but it's newer and C18 that's the newest but I think this is a bad way to pick. What's the difference in a nutshell?