teleren/devto huggingface dataset:
HTTPS Local Development using Caddy in Laradock
Tags: https, tutorial, laravel, docker
Published: 2020-06-21 13:30:46

Having only `http` protocol on your local development is enough, but sometimes when your project has to access some service locally, your project has to possess the `https` protocol.

If we are using `nginx` like in the previous posts, we have to configure the certificate to make it 'https'. So to enable this `https` in a *fake way* in our local development, we could use `caddy` instead of `nginx`.

### Prerequisites

If you haven't use Laradock before, try to set up a simple Laravel project like I did [here](https://dev.to/dendihandian/laradock-a-php-developer-s-best-friend-33ef). Then starting from here, we can use `caddy` as an alternative for `nginx`.

### Configure the Caddy file

You can find the caddy server configuration in `caddy\caddy\Caddyfile` file. There are some pre-written examples here, but we will use the actual one for the `my-awesome-laravel-app` from the previous post like this:

```conf
https://my-awesome-laravel-app.test {
    root /var/www/my-awesome-laravel-app/public
    fastcgi / php-fpm:9000 php {
        index index.php
    }

    rewrite {
        to {path} {path}/ /index.php?{query}
    }
    gzip
    browse
    log /var/log/caddy/access.log
    errors /var/log/caddy/error.log
    
    tls self_signed
}
```

### Run the containers

If you have `nginx` container running, you have to stop it first with:

```bash
docker-compose stop nginx
```

Then, you should able to run caddy and php-fpm container with this command:

```bash
docker-compose up -d caddy php-fpm
```

You may want to set the `APP_URL` in the laravel `.env`:

```env
APP_URL=https://my-awesome-laravel-app.test
```

Then you should able to access it on [https://my-awesome-laravel-app.test](https://my-awesome-laravel-app.test). Although you will get the `Not Secure` status next to the address bar like in Chrome browser, you still able to open it in `https`.

Have fun exploring caddy!

__________________
Is your Linux distro fully compatible with your PC?
Tags: linux, ubuntu, discuss, opensource
Published: 2020-06-21 13:27:40

I’m a big fan of Linux. I love its philosophy. I love the ecosystem around it and all the distros built of top of it. I first dealt with it when I installed Ubuntu on my family PC, many years ago. It was great and I loved the idea of having an alternative to Windows.

What makes me doubt about using a Linux distro now is the fact that I feel like it’ll never be 100% compatible with my PC speaking about **drivers** and the **integration between hardware and software**. To give you an example, once I installed Ubuntu on my old HP Pavilion dv6-6178sl. All was working fine, except some keyboard buttons, for example those for setting the display brightness. They just didn’t work.

Moreover, I know that the Linux kernel “already contains the drivers for most of the hardware components inside of it”, or something like that. But no hardware manufacturer says their hardware components are 100% Linux compatible. For example, you can read this on the [FAQ section of the Samsung website about their SSDs’ compatibility with Linux](https://www.samsung.com/semiconductor/minisite/ssd/support/faqs-nvmessd/):

![Samsung SSDs Linux support](https://dev-to-uploads.s3.amazonaws.com/i/v7hyb9jq7mqgusuvphuv.png)

What does it mean “lack of optimization”?

Can you please give me some feedback about your experience with Linux both on the driver side and the integration between hardware and software side?
Deno with GraphQL
Tags: javascript, graphql, deno, typescript
Published: 2020-06-21 13:22:48

What is GraphQL?

GraphQL is designed by facebook. GraphQL is a query language designed to build client application by providing an intuitive and flexible syntax for describing their data requirement. The main goal behind the graphQL is define the query smart.

Comparing with REST API vs GraphQL

Now i will compare with restaurant. Here i would be comparing the REST API with self serving restaurant. In GraphQL I would be comparing with restaurant served by waiter.

REST API

In Restaurant when served as buffet restaurant, you get up from table, and go to each and every table select the desert, fruits, vegetables, something like that.
GraphQL

But in Restaurant which served by waiter, just sitting on the table and ask i need fired rice, i need pizza. And waiter go to every table and take every require desert and serve to you.

In GraphQL the word “Graph” means just The queries crawl into REST API and pick up the selective data “QL” means Query Language

It’s more flexible than REST APIs because it allows frontend clients to request exactly the data format the client needs. REST APIs on the other hand typically send back a fixed data format that often contains redundant data which is not required by the client.

In Rest API we are using multiple end points like below

POST /createuser
GET /user/:id
GET /users

But in GraphQL we are using only one end point

POST /graphql

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


Queries

A GraphQL query is used to read or fetch values. GraphQL queries help to reduce over fetching of data. Unlike a Restful API, GraphQL allows a user to restrict fields that should be fetched from the server.
Query act as GET method in graphQL

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

Mutations

A graphQl Mutation used to modify the server side data. It can be used to insert, update, or delete data. Mutations are defined as a part of the schema.

Mutation act as POST / PUT / DELETE method on graphQL

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

Schemas and Types

GraphQL requests are about selecting fields on objects.The GraphQL schema provides a clear contract for client-server communication.

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

Here is the simple GraphQL demo with Deno.

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

I will briefly explain about GraphQL with Deno and React Client in my next article

Thank You!🖤
Uncaught TypeError: Cannot read property 'xyz' of undefined
Tags: angular, typescript
Published: 2020-06-21 13:18:36

If you saw this error when serving up an angular project, what would it mean?

```typescript
core.js:36228 Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:36228)
    at core.js:36246
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:36242)
    at core.js:36246
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:36242)
    at new NgModuleFactory$1 (core.js:36407)
    at compileNgModuleFactory__POST_R3__ (core.js:42296)
    at PlatformRef.bootstrapModule (core.js:42663)
```
We can see this is very early in the bootstrap, and it's doing something with the ngModule attempting to register an NGModuleType of which it cannot read a property.

**So Now What?**

We are forced to go on an Angular module loading [safari](https://en.wikipedia.org/wiki/Safari).  A  veritable rabbit hole; which no sprint knows the duration. 🍋🍋

We set a break here, in Angular.core.js land  
```typescript
function registerNgModuleType(ngModuleType) {
    if (ngModuleType.ɵmod.id !== null) {
        /** @type {?} */
        const id = ngModuleType.ɵmod.id;
        /** @type {?} */
        const existing = (/** @type {?} */ (modules.get(id)));
        assertSameOrNotExisting(id, existing, ngModuleType);
        modules.set(id, ngModuleType);
```
We found that the error was thrown on the MatPaginator ngModuleType. 

We were able to set a conditional breakpoint which allowed us to recreate the error with only one breakpoint each time.

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

This MatPaginator moduletype did not have an id, thus the error. 

**But Why?**

Get back after the safari ends.
Svelte + Dad Jokes + GraphQL-yoga
Tags: javascript, svelte, graphql, tutorial
Published: 2020-06-21 13:13:41

Today we find ourselves celebrating International Yoga day and Father's day. 

I am going to show you how to make a minimal dad joke app using a wonderful API http://dadjokes.online/ that directly gives a JSON response also no CORS issues if GraphQL is used. 

So let's apply the knowledge from the [previous article](https://dev.to/shriji/upgrade-your-json-endpoints-with-graphql-1g01) and combine it with a powerful framework. I chose [Svelte](http://svelte.dev/) because it has some amazing capabilities. Let's dive into the code.

End result looks like this 

{%youtube jH04zcGsRG8%}

## Prerequisites:
      1/ REST endpoint (http://dadjokes.online/).
      2/ NodeJS. (graphql-yoga and good old node-fetch).
      3/ Svelte starter template (https://svelte.dev/)
      4/ svelte-apollo and apollo-boost


Going to the URL we find a JSON response and we must convert into a schema for our GraphQL.

## GraphQL Setup
```JSON
{
	"Joke": {
		"Opener": "Why did the computer have no money left?",
		"Punchline": "Someone cleaned out its cache!",
		"Processing Time": "0.000733"
	}
}
```

Becomes like this although "ProcessingTime" isn't required I am still adding it.

```sql

type Joke {
    Opener: String
    Punchline: String
    ProcessingTime: String 
}

```
And firing up GraphQL code should show up on your http://localhost:4000

## Svelte code, Imports and Queries

```js
import ApolloClient, {gql} from "apollo-boost"
	import {query} from "svelte-apollo"

	const client = new ApolloClient({
		uri: "http://localhost:4000"
	})

	let result;
	let joke = gql `
				{
				getJoke{
					Opener
					Punchline
					}
				}
						`;
	result = query(client, {
		query: joke
	})
```
This is 90% of the code and it should begin to work. Now let's make the app a little sassy. Svelte supports keyboard events from its <svelte:window>. Here is a piece of code that listens to the ``Enter`` key and it's key code is ``13``. Once it's pressed we refetch() and voila! we have another joke.

```js
	let keyCode;

	function handleKeydown(event) {
		keyCode = event.keyCode;
		if (keyCode == 13) {
			result.refetch()
		}
	}
```

The HTML part of the Svelte app 
```HTML
	{#await $result}
		 <p>loading</p>
	 	{:then res}
		<p>{res.data.getJoke.Opener}</p>
		<p>..</p>
		<p>....</p>
		<p>{res.data.getJoke.Punchline}</p>
		<h1>Press Enter for a new joke!</h1>
	 {/await}
```
So here is our result.

![Dad Joke + GraphQL + Svelte](https://dev-to-uploads.s3.amazonaws.com/i/5mqlzvm74pkajwa740so.jpg)

###### This [post](https://dev.to/shriji/upgrade-your-json-endpoints-with-graphql-1g01) explains JSON <> GraphQL in much better detail.

Happy Father's day and Yoga day!


Link to the repo https://github.com/peopledrivemecrazy/svelte-yoga-dadjoke



Enjoy.
Ruin a Programming Language Challenge
Tags: watercooler, discuss, fun, coding
Published: 2020-06-21 13:03:56

#### Let's have fun!
Let's start ruining programming language's names for fun. Let's see how much damage we can do to them.

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

##### Rules
- Ruin a programming language changing one character from it.
- You can't add or delete characters from the name.
- Have fun!


I will start with **Rust**!

**Rust** -> **J**ust -> **M**ust -> **L**ust -> r **E**st!

##### - What have you got instead with Rust? 
##### - Which programming language are you going to ruin next?
Online DB Doc tool
Tags: db, erd, doc
Published: 2020-06-21 12:57:44

---
title: Online DB Doc tool
published: true
description: 
tags: db, erd, doc
cover_image: https://l.ruby-china.com/photo/2020/a77f3aaa-3686-43b0-9d1c-4d581d2e4a25.png%21large
---

![](https://l.ruby-china.com/photo/2020/a77f3aaa-3686-43b0-9d1c-4d581d2e4a25.png%21large)

DrawERD add a new function to generate db doc for your database structures. https://drawerd.com

![](https://l.ruby-china.com/photo/2020/fefeafc4-32f1-4db9-a649-2951f207ffaa.png%21large)
The beauty of pipelining in F#
Tags: functional, dotnet
Published: 2020-06-21 12:50:55

A common pattern in functional programming is to chain several functions together in a single expression.

The output of one function becomes the input of the next, and so on, forming a pipeline.

Imagine we want to take a list of numbers, filter out the odd ones, square each one and then take the sum, before printing the result.

This is what it might look like in JavaScript:

```javascript
let filterOdd = x => x.filter(x => x % 2 === 0);
let squareAll = x => x.map(x => x ** 2);
let sum = x => x.reduce((x, y) => x + y, 0);

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(sum(squareAll(filterOdd(numbers))));
```

This is fine, but the last line contains several nested function calls, and therefore a lot of brackets. You also need to read it from right to left to work out what's happening, which isn't very intuitive for what is essentially a sequence. This example is simple enough, but readability decreases rapidly with more nested function calls.

Let's take a look at how we might implement this in F# instead.

Firstly, a note on syntax. In functional languages like F#, it's common for function application to work without brackets, by listing the arguments after the function name, separated by spaces. For example:

```fsharp
let x = max 3 5
```

This line of F# code calls the `max` function with two arguments, 3 and 5.

You still need brackets to specify precedence for nested function calls however. For example:

```fsharp
let x = max (max 1 3) 5
```

If we reimplement the JavaScript code from above in F#, we end up with something like the following:

```fsharp
let filterOdd = List.filter (fun n -> n % 2 = 0)
let squareAll = List.map (fun n -> n * n)
let sum = List.sum

let numbers = [1 .. 10];

printfn "%d" (sum (squareAll (filterOdd numbers)))
let x = max (max 1 3) 5
```

This has the same problems as the JavaScript code: there are many brackets and you need to read from right to left.

Enter the pipeline operator.

The pipeline operator is defined as follows:

```fsharp
let (|>) x f = f x
```

Note: operators in F# are typically called using infix notation, so you would typically type `x |> f` rather than `(|>) x f`.

This looks unassuming, but reversing the order in which a function and its argument appear means you can write function chains that read from left to right, and don't need brackets to specify precedence.

This is what our previous example would look like using the pipeline operator:

```fsharp
let filterOdd = List.filter (fun n -> n % 2 = 0)
let squareAll = List.map (fun n -> n * n)
let sum = List.sum

let numbers = [1 .. 10];

numbers |> filterOdd |> squareAll |> sum |> printfn "%d"
```

This is much cleaner and easier to understand. You can imagine the value (`numbers`) "flowing" through the chain of functions, from left to right, one after the other. In my opinion, it feels very natural.

The pipeline operator is used heavily in idiomatic F#, which makes F# on the whole very readable. Functional programming languages have a reputation for being hard to read, but this is one case in which I definitely disagree.
GUADEC 2020 + Covid-19 = Online Conference
Tags: gnome, opensuse, debian, ubuntu
Published: 2020-06-22 01:05:45

---
title: GUADEC 2020 + Covid-19 = Online Conference
published: true
date: 2020-06-21 12:41:00 UTC
tags: Gnome,OpenSUSE,Debian,Ubuntu
canonical_url: https://robbinespu.gitlab.io/blog/2020/06/21/guadec-2020-covid/
---

Few days ago, someone posted GUADEC (the GNOME Users And Developers European Conference) invitation on [Gnome Malaysia telegram group](https://t.me/gnomemy).

![](https://i.imgur.com/QW36cfo.png#center)

To be honest, I did’t alert too much what event happening around but I think GUADEC is worth to steal my attention because I am Gnome lover and this is good chances to join the event because this year, GUADEC 2020 will take place entirely online due to the COVID-19 pandemic. So you (me and someone else who far from europe) don’t need to go europe to join :P

This event is coming next month start from 22nd July - 28th July 2020. GUADEC, it’s a once-a-year event that brings us together to collaborate, celebrate, and learn; meet our colleagues and friends; and strengthen the most special part of the GNOME project.

Maybe most of participant actualy will be sad because unable see each other in person this year. But this will be open oppurtunity for someone who cannot affort for travel if held as usual but now they can!

> We are very pleased to be continuing our support of [@guadec](https://twitter.com/guadec?ref_src=twsrc%5Etfw) this year as the conference moves into the digital space and we look forward to taking part!  
>   
> Thanks to everyone putting in the effort to get the event ready online! [https://t.co/URj7emUD30](https://t.co/URj7emUD30)[#opensource](https://twitter.com/hashtag/opensource?src=hash&ref_src=twsrc%5Etfw) [#linux](https://twitter.com/hashtag/linux?src=hash&ref_src=twsrc%5Etfw) [@gnome](https://twitter.com/gnome?ref_src=twsrc%5Etfw)
> 
> — Codethink (@codethink) [May 21, 2020](https://twitter.com/codethink/status/1263454794733281285?ref_src=twsrc%5Etfw)

<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

You can check [time table](https://events.gnome.org/event/1/timetable/#20200722) to know what time and what talk is about. Don’t forget to also [import details event calendar](https://events.gnome.org/event/1/event.ics?detail=contributions). For me, who live in Malaysia, this event will be happen at night, so normally and expecting I have free time to join this event.

Oh yeah, don’t forget to register [HERE](https://events.gnome.org/event/1/registrations/10/) (deadline: 28 Jul 2020). last not least, thank you Redhat, Codethink for sponsors and Gnome community for this event.

So far, the from latest discussion on [discourse.gnome.org](https://discourse.gnome.org/t/guadec-2020-moves-to-online-conference), GNOME will use [BigBlueButton](https://bigbluebutton.org/) for GUADEC conference, All sessions will be recorded for everyone who won’t be able to attend talks due to timezones and conference start from 15:00 UTC to 20:15 UTC.

See you there!
Daily Developer Jokes - Sunday, Jun 21, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-06-21 12:00:02

---
title: "Daily Developer Jokes - Sunday, Jun 21, 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=Sunday%2C%20Jun%2021%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/5e1258dc381cf.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 do programming shepherds count their flock?

___A:___ With lambda functions
 -->
The moment I knew it was time for a career change.
Tags: career, 100daysofcode
Published: 2020-06-21 11:49:50


## Where I started

I started my working life as a marketer, and while I enjoyed it and did some pretty cool work, there was something missing. Luckily, I was soon able to find out what it was. As my career proceeded, I kept getting more ~digital~ roles until one day I ended up as an eCommerce coordinator and then, something clicked.

## Ah, this is what I want to do

As an eCommerce coordinator, I wasn't just crunching the numbers on our digital marketing ROI and assisting marketing campaigns, I was also writing documentation on our business processes, coordinating these processes between teams, and doing manual testing and level 1 technical support for my employer's websites. I've even designed a daily email alert to monitor the progress of my employer's orders to and through Australia Post, and created interactive charts for the sales team to use to compare margin. 

Once I'd picked up a rhythm, I discovered that this was what I truly liked doing. I really enjoyed it, and I started looking into what it took to become a software tester full-time to prepare myself for career change. 

Then I went back to marketing for another year, and by the end, I was absolutely certain I needed a change of pace. One problem though: I need experience in test automation, and to develop a deeper understanding of theory. I've done manual testing for around 2 years, but I've not written many automated tests.

## What I have learned about testing so far
- Never assume anything. Always ask 'is it meant to be this way?'
- Don't only think about the ways your software should be used, but the way it can be used. 
- Things will break that you didn't think could break. 
- Work out what the highest priority features are, and test them first, before deployment, but also in production right after release. Monitor your systems. Because see above. 
- Think from the perspective of your customers. I'm here, this is what I want to do, how can get it done?

## Next steps

At the moment I'm building up a portfolio and catching up on the cutting-edge. I've started volunteering for an open-source project writing tests and copy.  I'll probably pick up a few more, to give back, and maintain those all-important workplace interaction skills. 

## What I'm Learning! 
***Testing Types***
- Unit testing
- API testing
- Test-Driven Development
- Accessibility testing
- Mobile testing

***Test Frameworks***
- react-testing-library
- PHPUnit
- Appium
- Mocha
- Selenium
- Cypress

***Languages***
- JavaScript

***Frameworks***
- ReactJS
- Laravel
React & Flux Tutorials - Create Youtube Player - 3
Tags: react, javascript, beginners, webdev
Published: 2020-06-21 11:45:08

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel.
So, this is from my sixth blog. And here is my YouTube video.

[![alt text](https://res.cloudinary.com/dxkxvfo2o/image/upload/v1592558183/react-flux-1_cpeyft.png)](https://www.youtube.com/watch?v=DaiSwIyXo54 "Create Youtube Player Flux - 3")


Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.

You can also read the complete blog here -

https://thewebdev.tech/refactoring-youtube-player-to-use-flux-part-3
Collapsing Message, Responsive Gooey / User Message section, JSON Path Map, Scrollbar and other bug fixes and styling
Tags: github, opensource, react, webdev
Published: 2020-06-21 11:38:23

Hey there 👋,
So here is my new post from GSoC series, It sums up the 2nd 3rd week of the GSoC Work Period.

# Tasks Completed :
✅ Collapsing Message with read-more.

✅ Responsive Gooey and User Message section.

✅User section with user message having dynamic responses fetched from the JSON file.

✅ Scrollbar for a longer message in gooey/user messages (Responsive)

✅Placeholder User Image and Username.

✅Other bug fixes and styling.

---------------------------------------------------------
> #### Post Type: Update.

Regards,
Prathamesh (TheShubham99)


### `$ Ctrl+z`

> ### `program exited with exit code 0 (0x0)`