teleren/devto huggingface dataset:
How to run laravel in docker
Tags: laravel, docker, devops, codenewbie
Published: 2020-07-15 12:51:15

This is just a quick post sharing my basic docker setup for new laravel projects.

Setting up a new laravel project can be quite some hassle, the current options with valet, homestead or vagrant are fine but personally don't give me the flexibility I need.

That's why I created a basic laravel docker boilerplate I copy across my projects. 

# How to use it
First of all you need docker installed on your pc and a laravel projects. Then copy the next two files into the root of your project:

{% gist https://gist.github.com/lostdesign/3c8caabf703ff40b6d3ae336b58e0c8e file=docker-compose.yml %}

{% gist https://gist.github.com/lostdesign/3c8caabf703ff40b6d3ae336b58e0c8e file=site.conf %}

Once you copied the files, you'll need to run `docker-compose up` in the root of your project directory to start the dev environment. Head over to http://localhost and you'll have your laravel project up and running.

--

The following file is optional and meant for if you want to use your own docker container image. The docker-compose above uses my pre-build docker image which is hosted on docker hub.

{% gist https://gist.github.com/lostdesign/3c8caabf703ff40b6d3ae336b58e0c8e file=Dockerfile %}

If you want to know more about docker or how to setup your own stack, let me know down below and I'll write something about that.

Thanks
DOM Event delegation pattern
Tags: javascript, html, dom
Published: 2020-07-15 12:40:13

If you have multiple `button` element with a similar callback function inside a `div` element, you can delegate event listeners to the parent `div` element instead of listening to each button.

// poor practice
```
<div>
  <button onclick="myFunction("red")">Red</button>
  <button onclick="myFunction("blue")">Blue</button>
  <button onclick="myFunction("black")">Black</button>
</div>
```

// good practice
```
<div onclick="myFunction(event)">
  <button id="red">Red</button>
  <button id="blue">Blue</button>
  <button id="black">Black</button>
</div>
```

// script
```
function myFunction(event) {
  let target = event.target;
  if (target.nodeName.toLowerCase() !== "button") {
    return;
  }

  // do something with id
  ...
}
```

The drawback is that you have to write a bit more code to filter out unnecessary events, but it will drastically increase the performance and provide cleaner code which outweighs the drawback significantly.
Why You Need a Mentor
Tags: leadership, career, webdev, motivation
Published: 2020-07-15 12:37:26

Since Greek philosophers, the value of a mentor has always been underestimated. 2000 years later the rules still apply. A mentor, or at least emulating someone... who is now where you want to be at some point in the future, is the fastest way to success. 
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/04du7saegnew8xc8prqq.jpg)

A mentor will laugh at problems you consider impossible and it will speed up your learning process... and make it less frustrating and more challenging. Ideal mentors are colleagues, preferably more experienced than you... but also people that you can frequently interact with either offline or online. 

In my next post, I'll talk more about how to get the most out of your mentor without being disruptive to his or her schedule. In case you struggle in finding one or you don't feel any form of synergy with the ones that offered to coach you... an alternative is a community of like-minded people... where different perspectives and backgrounds will help you solve problems faster. 
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bf79oqymp70o52148ag9.jpg)

You can find these people either on blogs and forums. But the most effective way is to either search for or establish a local community... and have weekly or monthly meet-ups. The exchange of ideas will help you to stay on track with industry changes, new technologies, and can even offer career opportunities. 

As a newbie, having a good mentor will speed up your learning process... and can at the same time open a lot of opportunities to you. 

Leave a comment below. If you like this post, please share.
Assumptions of Linear Regression (Tests to Perform)
Tags: datascience, machinelearning
Published: 2020-07-15 12:27:49

The tests to be performed to check the assumptions of linear regression:

1. No Autocorrelation: Durbin Watson Test

2. No Heteroscedacity: Goldfeld Test, Residual VS Fitted Plot

3. No Multi-Collinearity: VIF & Correlation Matrix

4. Normality of Residuals: Jarque Bera Test, Shapiro Test

5. Linearity of Residuals: Rainbow Test

Happy Learning!
PHP Basics
Tags: php
Published: 2020-07-15 10:20:57

<b>Declaration</b>
<?php
All php files must start with the above.
They do not need to be closed with ?> (although some people prefer to), it makes no difference to the interpreter. Skipping the closing tag avoids accidentally printing whitespace in your page from your code-only files.

<b>Tools</b>
Packagist -> A website which allows you to search publicly available PHP composer packages.

Composer -> Like npm (in the javascript world), but for PHP.

<b>Operators</b>
-> allows you to access PHP object properties and is like the . in JavaScript.
=> is used in arrays:
```$myArray = array(
    0 => 'Big',
    1 => 'Small',
    2 => 'Up',
    3 => 'Down'
);```

; must go after every PHP statement!

<b>Name Space</b>
```namespace App;
use Jsjdjjd\Model;```

namespace means that you can use the same variable names twice in an app as the space in which it is declared is labelled. You can use the “use” command to extract a certain PHP class from a different namespace 

<b>Classes</b>
They can include methods (functions) and properties
https://www.w3schools.com/php/php_oop_classes_objects.asp
e.g.

```
<?php
class Fruit {
  // Properties
  public $name;
  public $color;

  // Constructor
  function __construct($color) {
     $this->color = $color;
  }

  // Methods
  function set_name($name) {
    $this->name = $name;
  }
  function get_name() {
    return $this->name;
  }
}
?>
```

:: allows you to access a PHP class Method or property
```use PATHNAME\CLASSNAME; /*this can utilise a class from a different directory*/
CLASSNAME::staticmethod(); //How you would access a static method of that class.```

<b>Function types:</b>
public - the property or method can be accessed from everywhere. This is default. i.e. function === public function
protected - the property or method can be accessed within the class and by classes derived from that class
private - the property or method can ONLY be accessed within the class

How to write a static function:
```static function () {
}```
在 Google Chrome 中封鎖第三方 cookies 會導致 Colab 無法上傳檔案
Tags: python, colab
Published: 2020-07-15 12:08:43

如果你因為安全考量而在 Google Chrome 中設定封鎖第三方 cookies, 例如：

![](https://i.imgur.com/uu3kI6f.png)

在 Colab 中就會無法使用 files.upload() 上傳檔案, 執行時會看到這樣的錯誤畫面：

![](https://i.imgur.com/qMXYYSh.png)

解決方法很簡單, 就是允許第三方 cookies。
6 Questions to Ask Before Developing a Single Page Website
Tags: webdev, developer, challenge
Published: 2020-07-15 12:07:56

Developing a website, either for personal or commercial purposes has never been easy. You must consider many facts and conclude on decisions that may impact your site’s ranking as well as audience count.

Some questions arrive in the developer and designer mind while developing a single-page website.

See this video to get some clues about the questions🚀

Read the full article for here: https://bit.ly/2WoGpO9
Where do you draw the line between data structures and abstract data types (ADTs)
Tags: discuss, computerscience
Published: 2020-07-15 12:06:20

I wanted to write an article on this distinction because I think it's a useful one, but as I thought this through there are areas that are still a bit vague to me too.

# What is an Abstract Data Type (ADT)

An ADT is like an interface in object oriented languages, but it also includes semantics of what these operations do.

So for example a Stack is an object that has `push` and `pop` operations for pushing data onto it and popping data off, with first-in-last-out (FILO) semantics, meaning that items are returned by invocations of `pop` in the reverse order they were `push`ed. 

This says nothing about how the data is stored internally. It could be a linked list, it could be an automatically growing array, or whatever other representation you like.

# Where do you draw the line

But I'm not sure where you draw the line. For example, a linked list could be seen as an ADT where each list item has a `next` operation that yields the next item in the list. But then it's also a data structure as it describes structured data with pointers pointing to the memory address of the next item.

Come to think of it, maybe the most useful conclusion is that there is both a linked list ADT and a linked list data structure. Because you could implement the linked list ADT with an array, even though that wouldn't be very useful.
Daily Developer Jokes - Wednesday, Jul 15, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-07-15 12:00:11

---
title: "Daily Developer Jokes - Wednesday, Jul 15, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Wednesday%2C%20Jul%2015%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258e0be565.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ How did pirates collaborate before computers ?

___A:___ Pier to pier networking.
 -->
Is anyone planning a full or partial "early retirement" from software development?
Tags: discuss, career
Published: 2020-07-15 11:59:56

It's not that uncommon for folks to move into other careers after working as a developer. It can be a demanding job and the pace of change can be hard to keep up with.

While there is plenty of space to keep doing this forever, is anyone here thinking they will move away from this life before typical "retirement" age?
HTML basics | HTML tutorial
Tags: html, tutorial, beginners, webdev
Published: 2020-07-15 11:59:43

Let's start by writing some basic code.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>This is the title of this page.</title>
</head>
<body>
    <h1>heading</h1>
</body>
</html>
```

Let me explain some stuff. 

###DOCTYPE

You see that DOCTYPE at the top, it's telling your browser that "hey, it's an html document.". Now you might be thinking if it is necessary to specify document type. I will say yes. You never know when your browser may cause some bugs so it's a good habbit to specify DOCTYPE.

###HEAD

Now as you can see the lang is specified to en(english). You can skip this but it's a good practice to specify the default language for your webpage. It will also help you in targeting your audience when you will learn about SEO(Search Engine Optimization).

Now comes the head tag. Head tag contains all your metadata. Metadata is just some more data for your body data. Whatever you write in head tag won't show up in your webpage. Metadata includes styles, scripts, title and some other stuff. Let's discuss that.

Meta charset is the unicode for your data. I have explained it in more detail [here](https://dev.to/harshvats2000/what-if-utf-8-in-html-head-3ego) in my article. Even if you don't read that article now it's okay but some deep knowledge can increase your level of confidence.

Meta viewport is the screen size for your web content. Default width is set to your device width and default zoom is set to 1. Default zoom is required for small screen devices like your mobile. Changing it will change the default zoom for small screens. Try changing it to 0 and you will hardly be able to read the text. For more detailed info read [this](http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html).

Then comes the title which is pretty easy. It's just the title of your webpage. This is what appears in chrome tabs when you open a webpage.

##BODY

Body tag contains the main content to show on your webpage like headings, paragraphs, forms, buttons and many more. We will discuss about that in the next article.
WebdriverIO - Wait Commands Example
Tags: testing, javascript, tutorial, beginners
Published: 2020-07-15 11:52:03

If you have had some experience with Automated testing, I'm sure you've had to deal with flaky/unstable tests. 
Some of these unstable tests can be fixed by utilizing the right wait commands, let's take a look at a couple of examples below...

#### 1. waitForDisplayed
`waitForDisplayed` is one of the most commonly used wait commands, it waits for an element to be displayed or not be displayed on the screen for 'X' amount of milliseconds. 

**Scenario**: Wait for *'Watches'* link to be displayed after hovering over the *'Fashion'* link on the [eBay](https://www.ebay.com/) site. (see gif below)

<img src="https://media.giphy.com/media/H5B31De7UbrxrI5jG1/giphy.gif" width="600" height="400"/>

*Note: I'm using Page Object Model in my example below. To learn more about POM you can take a look at my video [here](https://www.youtube.com/watch?v=kUF_ipMs3us).*

```javascript
  it('should click on watches link', () => {
    // open the ebay site
    WatchesPage.open();

    // hover over the fashion link
    WatchesPage.fashionLink.moveTo();

    // wait for max 5 secs for watches link to be displayed after hovering over the fashion link
    WatchesPage.watchesLink.waitForDisplayed({ timeout: 5000 });

    // once displayed, click on the watches link
    WatchesPage.watchesLink.click();
  });
```

#### 2. waitUntil
`waitUntil` is used to wait conditionally, once the condition fulfills, it moves on to the next action. 

**Scenario**: Wait for *'All Categories'* text in the drop-down to change to "PC laptops & Notebooks" text after searching for the *'Laptop'* keyword on the [eBay](https://www.ebay.com/) site. (see gif below)

<img src="https://media.giphy.com/media/kGEwYhNXjWtPwvN8tO/giphy.gif" width="600"/>

```javascript
  it('should update the search category', () => {
    browser.waitUntil(
      function () {
        // get text for the search category selector
        // and check if it matches the expected text
        return SearchPage.category.getText() === 'PC Laptops & Netbooks';
      },
      // wait for 3 seconds for condition to fulfill
      { timeout: 3000 }
    );
    // add your assertion
    expect(SearchPage.category).toHaveText('PC Laptops & Netbooks');
  });

```

Similarly, you can use other wait commands provided by WebdriverIO for different scenarios such as `waitForClickable`, `waitForDisplayed` etc.. You can find all the commands in their [API docs](https://webdriver.io/docs/api.html).

💎 This code is also available on [GitHub](https://github.com/automationbro/webdriverio-tutorial/tree/wait-commands-11) for you to access and play around with.

---

#### You can also check out the video below that will show you a detailed explanation of the code above.

{% youtube JCXSCeSs76A %}

---

#### To learn more about WebdriverIO, you can check out my free tutorial series here -
https://www.youtube.com/watch?v=e8goAKb6CC0&list=PL6AdzyjjD5HBbt9amjf3wIVMaobb28ZYN.
Lockdown Post-Mortem
Tags: showdev, webdev, productivity, javascript
Published: 2020-07-15 11:35:01

# House Arrest

I was (un)lucky enough to be banished to the confines of my own home at the end of February where fortunately I was able to continue business as usual. Without my daily commute, however, I found my day bookended with spare time. While filling this time with additional actual work seemed great at first, I was burning out fast.

# Warm Up & Warm Down

I changed my strategy. There is always a million and one things I want to create. Be it ripping out something I've built for work to be used again, spontaneous late night ideas or passion projects. I started to pad the ends of my shift with "warm ups" or "warm downs" to both get me moving in the morning, head out of work in the evening and actually y'know... finish those projects I said I would months ago.

# Picked On CodePen

My go to warm up was [CodePen](https://codepen.io). I told myself I'd create at least 1 pen a week with a new idea. That paid off. I got featured twice.

I've been a web developer for a heck of a long time and had never ventured into posting my content onto public platforms but this gave me a colossal boost of confidence. Maybe what I was building was better than my own perception of it.

# Building Libraries

Then the addiction hit, the cogs started turning and I began repacking the libraries after showcasing them. I love the idea of small vanilla JavaScript libraries with no dependancies and focus on what it is supposed to do right. Typically I build with Angular, but it feels good to get my head out of a framework.

# Showcase

Is this next section a plug? Shamefully so.

Here is a collection of fun things I've created.

## Dismissible

Show dismissible page messages, with `info`, `success` & `error` context types.

{% github brookesb91/dismissible %}

Example here...

{% post brookesb91/animated-dismissible-error-banner-dae %}

---

## Pixels

Render pixel art to a `canvas`.

{% github brookesb91/pixels %}

Example here...

{% post brookesb91/pixels-canvas-sprite-renderer-1lio %}

---

## Popver

Create a hover popover from html elements. 

{% github brookesb91/popover %}

Example here...

{% post brookesb91/always-visible-hover-popups-2iph %}

---

## Skribul

A doodle sharing platform. Draw pictures and share them via social platforms. This was an exercise in `meta` optimisation.

{% github brookesb91/skribul %}

I did a write-up here...

> Parts of the app have changed since the original post but the functionality remains in-tact.

{% post brookesb91/skribul-a-doodle-s-worth-a-thousand-words-3f5m %}

---

## Archivist

There are certain areas of the web I like to browse. I created a CMS to archive content I wanted to preserve.

{% github brookesb91/archivist %}

---

# Fin

How has your lockdown gone so far? How have you managed to keep yourself focused while still taking time to enjoy your craft? Share your projects with me.
Kubernetes security best practice
Tags: kubernetes, security, serverless
Published: 2020-07-15 11:33:16

Kubernetes is now the de facto container orchestration platform deployed by businesses across the globe. In its short existence it has had incredible growth, being released in 2015 it is now the second-highest project on GitHub – second only to Linux. The huge community of support includes 1.2 million comments, 164,000 commits, and 31,000 contributions. There are quarterly conferences (KubeCon), weekly podcasts, dedicated Slack channels with over 75,000 users, and thousands of tutorials available. Companies like IBM, Spotify, CERN, and CapitalOne all use Kubernetes to deliver services to their customers – in fact, over 54% of the Fortune 500 (top US 500 companies) use Kubernetes.

https://www.mobilise.cloud/15-kubernetes-security-best-practice-to-secure-your-cluster/
Introducing Type Hero
Tags: typescript
Published: 2020-07-15 11:29:43

## Intelligent commentary on the TypeScript ecosystem and high quality, TypeScript-first tools.

---

Dear TypeScript World,

👋 Hi, I'm Braden and I'm launching [Type Hero](https://typehero.org).

[Microsoft released TypeScript 1.0 to the world in April 2014](https://devblogs.microsoft.com/typescript/announcing-typescript-1-0/). I was working in a C# shop at the time and we were quick to adopt TypeScript for our frontend development. That early introduction to the language shaped my career in the ensuing years. I sought out opportunities to work with TypeScript. I applied for positions where I knew I could use the technology. Over the years, I've built some pretty cool stuff using the language ranging from web app frontends and backends to mobile apps. I've become intimately familiar with TypeScript's limitations and flaws. I've also seen first-hand the positive difference it makes when building applications large and small.

These years of experience have left me with a lot of strong opinions. Type Hero is a home for those opinions. Its also home to a growing group of open source projects designed to make building type safe applications a little easier. Type Hero won't be a personal blog. Just like the open source projects under the Type Hero name, I hope it eventually attracts thoughtful contributions from folks besides me. If you're looking for intelligent commentary on the TypeScript ecosystem and high quality, TypeScript-first tools look no further than Type Hero.

Enjoy reading!

Braden

> Originally published at [TypeHero.org](https://typehero.org/introducing-type-hero)
AzureFunBytes Episode 6 - VNETs with @AbelSquidHead Reminder - 2PM EDT Thursday 7/16/2020
Tags: beginners, azure
Published: 2020-07-15 11:24:25

New #AzureFunBytes - Azure VNET!


Check out this week's stream on 7/16/2020 at 2PM EDT @AbelSquidHead will help me solve three problems on twitch!

*  How can I create a new VNET for my application?
*  How do we create separate subnets for our networks?
*  How do we configure an additional virtual network interface with our new VNET IP range?

Abel and I will discuss his tenure in technology with me and even answer some questions.


![AzureFunBytes logo](https://res.cloudinary.com/practicaldev/image/fetch/s--pxlTjTrD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/699md0mmakw0cbutamyq.jpg)


---


AzureFunBytes! - Byte-sized content with a live Twitch show! 

Learn about Azure fundamentals with me!

Live stream is available on Twitch at 2 pm EDT Thursday. You can also find the recordings there as well.

https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes

Join me, ask questions and learn about Azure!

Microsoft Learn: [Azure Fundamentals](https://cda.ms/1jV)
Microsoft Azure: [$200 Free Credit](https://azure.microsoft.com/free/?WT.mc_id=blog-devto-jagord)
Programming knowledge is a toolbox
Tags: beginners, 100daysofcode, computerscience
Published: 2020-07-15 11:21:16

Programming knowledge is like a toolbox and every programming language or technology you know it's a tool inside it. Don't be surprised if you are asking "what programming language should I learn?" and someone recommends a hammer while you just wanted to make a slot inside the wall for a spike. Always set the goal first and then look for the proper tool.

And never tell yourself that you are too stupid to learn programming. Every experienced developer started with an empty toolbox.