teleren/devto huggingface dataset:
Simple Subscription Form
Tags: showdev, html, css, javascript
Published: 2020-07-17 12:14:39


The post below inspired me to do these little projects to get better at web development.
{% post https://dev.to/kbariotis/learning-to-code-by-doing-essential-little-projects-4ce7 %}

*Coding challenge week 1 - Frontend - Subscription form*

Hi @kbariotis, sharing my week 1 result here:blush:

{% codepen https://codepen.io/tlylt/pen/vYLVwbE %}
Daily Developer Jokes - Friday, Jul 17, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-07-17 12:00:19

---
title: "Daily Developer Jokes - Friday, Jul 17, 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=Friday%2C%20Jul%2017%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/5e1259a186412.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___: Why do developers use mechanical keyboards?

___A___: To strongly type their code.
 -->
Happy Emoji Day! The Best Accessibility Practices To Use Emojis on the Web 🎉
Tags: a11y, webdev, html, emojiday
Published: 2020-07-17 11:54:11

Today is the World Emoji Day and because of that I'm going to share with you two tips that will make your Emojis accessible to people using screen readers:

## 1. Replacing Text with Emojis

The first one is going to be useful when we are replacing text with emojis. As an example, we could use the red cross emoji instead of the text "Delete" in a button that triggers the deletion of a record in our app, let's see the bad approach and the good one:

**The bad approach:** This button is not accessible, it will confuse the user because of how emojis are read by screen readers.

```html

<button>❌</button>

``` 

**The good approach:** This button is now accessible, we have wrapped the Emoji in a `<span />` tag that has the `role=img` and `aria-label` attributes.

For a screen reader, the emoji will behave like an image with a description, and it will simply read it's description making this code accessible!

```html

<button>
  <span role="img" aria-label="Delete">❌</span>
</button>

``` 


## 2. Using Emojis as Decoration

This case is useful when we are using emojis as decoration, that's also when we don't want screen readers to see them, and for that we can use the `aria-hidden` attribute with the value `true`.

Here's an example with a bad and a good approach:

**The bad approach:** This button is accessible but doesn't follow the best practices as the screen reader will try to read the emoji and that will create unnecessary noise for the user. 

```html

<button>❌ Delete</button>

``` 

**The good approach:** This button will work perfectly in screen readers because we're telling it to ignore the emoji. That's it!

```html

<button>
  <span role="img" aria-hidden="true">❌</span> Delete
</button>

``` 


## It works with icons too! 🤯

It can't be all about emojis today, I'm pretty sure your app has icons, maybe you got those from FontAwesome? Material? An SVG you created?

Are they accessible? Because the tips we just saw also apply for icons!

So... even if you don't use emojis, **what are you waiting for? Go and make your apps more accessible!**



---

Follow me on Twitter [https://twitter.com/HorusGoul](@HorusGoul) if you want to learn more about web development!
Pair Programming. 
Tags: react, productivity
Published: 2020-07-17 11:54:01

Who interested to do pair programming with me? leave a comment below. We will working on Twitter clone using react.js and firebase. A little bit about me, I am a junior react developer and I am looking to code with you 🙏.

You can find out more here: https://www.facebook.com/dailywebcoding/videos/3209872492411841

Date: 18/07/2020  at 10:10 AM Indochina Time.
seeing reality...😉✨
Tags: coaching, reality, method, life
Published: 2020-07-17 11:52:32

เมื่อเรารู้เป้าหมายที่ชัดเจนแล้ว ก็เริ่มต้นการเดินทางกันได้เลย...
🚗🚕🚌🚄🛵✈🚊🛥🚀

คำถาม? จะเริ่มต้นอย่างไร? อะไรคือขั้นตอนแรกที่ต้องทำ? แน่นอนว่าเป็นคำถามที่สำคัญที่จะทำให้สามารถเริ่มต้นการเดินทางไปถึงเป้าหมายได้ เมื่อเรารู้ขั้นตอนที่ต้องทำแล้ว ก็แค่ลงมือทำใช่ไหม? ถูกต้อง....ยังมีคำถามที่สำคัญไม่น้อยกว่าคำถามที่ว่า จะเริ่มต้นอย่างๆไร? อะไรคือขั้นตอนแรกที่ต้องทำ? ก็คือ...อะไรที่หยุดคุณไม่ให้ไปถึงเป้าหมายนั้น?

ลองนึกย้อนกลับไปที่ผ่านมา เราได้ตั้งเป้าหมายไว้อย่างเดียวกัน แต่ทำไมยังทำไม่ได้สักที ไม่ว่าเป้าหมายนั้นๆจะเป็นเรื่องด้านใดก็ตาม ลองทบทวนมองย้อนกลับไปดู มีชิ้นส่วนใดที่หายไปไหม? มีความเชื่อใดที่รั้งคุณไว้รึเปล่า? คำถามเหล่านี้จะทำให้คุณสามารถไปต่อได้และ เขยิบเข้าใกล้เป้าหมายไปทุกทีๆ ลองหาและ list สิ่งที่คุณควรทำแต่ไม่ได้ทำออกมาดูเป็นข้อๆ ในทุกๆด้านที่คุณได้วางเป้าหมายไว้ จะทำให้คุณเห็นภาพชัดเจนขึ้น
Freezer, a tool to help devs discover which records are created when some action is performed on any application that uses MySQL
Tags: mysql, webdev, productivity, php
Published: 2020-07-17 11:33:35

---
title: Freezer, a tool to help devs discover which records are created when some action is performed on any application that uses MySQL
published: true
description: The goal of this tool is help to understand how an application interacts with its database and how relationships are made.
tags: mysql, webdev, productivity, php
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/mqzuymi0ye6jrtqp7gvm.jpg
---

## The goal

The purpose of this tool is to shorten the learning curve necessary to understand the relationships between tables of any MySQL database.

## How it works?

You are a developer, and sometimes you need to understand third-party applications, either to generate a report or to create a new feature. In theory would be enough to look at relationships, but real life applications tend to create several records in several tables that aren't always clear for the programmer just looking at the structure, and sometimes requiring a lot of research to understand what "that" button does in database. That's where the Freezer comes in.

Suppose you want to quickly know which tables receives new records, as well as what those records are, when you perform any action in any application installed in your computer (for development purposes). It's very easy:

**1.** With the Freezer application you click on the **Freeze** button.
**2.** With the other application you perform one or more operations.
**3.** Back on the Freezer you click on the **What is New** button.

Freezer will show you which records were inserted in all database's tables between the **Freeze** and **What is New** commands, and that is an excellent starting point to focus your attention to whatever feature you need to develop for that application, or data you need to extract from that database.

## Use case

In this example I want to know which records are inserted in Moodle's database when an assignment is created.

I chose [Moodle](https://moodle.org) for this demo specifically because the complexity of its database, but you can connect to any MySQL database.

![Freezer GIF showcase](https://camo.githubusercontent.com/3a05a0d485f93a6f2b71fc3e08b4b555a3675c4c/68747470733a2f2f692e696d6775722e636f6d2f54674a4f4966642e676966)

## The project

It's open source, easy to install and use. Just put it in your local web server, configure one or more databases and you are good to go.

{% github llagerlof/freezer %}
New to AWS 
Published: 2020-07-17 11:30:30

I am following this link someone sent- https://dev.to/exampro/the-free-aws-certified-cloud-practitioner-study-course-1bcb

Wanted to learn all about AWS from the above course link. I am not a s/w person, is it possible for me learn. I am a finance person and have not done pure coding but always fascinated to learn. 

Is the above link still applicable for learning about AWS. Is there a certification I can obtain after I complete the free course made available.

Appreciate your help. 

Thanks.
In a nutshell: Monads and Functors
Tags: monad, functor, categorytheory, functional
Published: 2020-07-17 11:22:21

---
title: In a nutshell: Monads and Functors
published: true
description: Monads and functors explained concisely
tags: monad, functor, categorytheory, functionalprogramming
//cover_image: https://direct_url_to_image.jpg
---

#### Functors

Any object that provides a method with following signature is a functor

`map :: (a -> b) -> m a -> m b`

`m` is a container, `map` opens up the container and converts type `a` to `b`.


#### Monads

Any object that provides a method with following signature is a monad

`(flatMap) :: m a -> (a -> m b) -> m b`

`m` is a container, `flatMap` opens up the container converts `a` to `mb` and if in the process multiple `mb`'s are created then it flattens them to return a single `mb`.
Why I switched to Object Oriented PHP
Tags: php, oop, software, laravel
Published: 2020-07-17 11:21:02

Anyone starting programming with PHP automatically starts with procedural PHP. It's like the defacto mode for writing programs because it takes everything step by step and is easier to teach newbies. 
Having worked a little with Java and noticing how oop  made everything a little abstracted so you don't have to get your hands dirty, I knew if I wanted to write quality code, I will have to eventually switch to Oop PHP. 
Here are some things I noticed. 

Cleaner Code:
This is like a no-brainer, I put all database queries in a class in a 'classes' folder and when ever I needed to perform any query all I had to do was
$query = new DB;
$insert=$query->insert($Table, $column,$value);

Notice how clean it is?? 

Helps in understanding Frameworks:
All modern frameworks are written using oop so switching to this makes it easier to understand any framework at all. In my code. I implemented a logon class that logs in users and redirects them to Dashboards depending on whether they are admin or users. I implemented it with a static class like this 
Auth::isAdmin and Auth::is user so when I saw almost the exact syntax when works with laravel, I understood it immediately. 

Reduces Lines of Code:

This is a no-brainer. No need to write long lines of code to check for  conditions or perform arcane logic or write 5 database queries in one script. All you need is to call the particular class and pass it the values and it performs  everything for you. 

Better IDE  usage:
If you are writing Procedural PHP, you are not really making full use of your IDEs tools like intellisense and etc because they are built to work well with oop code and offer better code structures and autocompletes. 

🤔 There are other benefits, just try it out. I will suggest learning resources for oop in my next post.
Spring Boot Help!!
Tags: java, security
Published: 2020-07-17 11:16:58

Hi! I'm relatively new to programming. At 35 I've had very little exposure to computers until now (previously worked in military and construction), so I don't find it as easy to pick up coding concepts/ designs etc unless I practise them repeatedly.

I'm currently building a spring boot application, I am trying and failing miserably to implement spring security.

This is my first post so I hope I'm not infringing on any forum etiquette by asking for help here. It would be great to hear from anyone who can break this down for me to help me understand/ successfully implement this feature!
What was the funniest typo in your client conversations?
Tags: watercooler, discuss, devlife, funny
Published: 2020-07-17 10:38:33

Have you ever experienced a funny or embarrassing situation because of a typo you or your client made?

(title photo by <a href="https://unsplash.com/@amadorloureiroblanco?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Amador Loureiro</a> on <a href="https://unsplash.com/s/photos/letter?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>)
Can You Review My Project? I'm Listening👂
Tags: review, node
Published: 2020-07-17 10:35:26

I'm looking for some feedback and critique of a project of mine. Can you give me some feedback? 👂👂 

****

{% github loggin-js/loggin-js no-readme %}

****

TL;DR

### ❓ What's this project about, ey?
Well glad you asked, It's nothing new. It's a logging library for NodeJS, fully customizable with **support for plugins and custom logging channels** (_ie: console, save to file, send over HTTP, log to memory and dump whenever you like, etc..._). _You can **combine output channels**, for example, log all output to the console and send errors to a remote endpoint._

It can show/hide logs based on severity (following standard [RFC3164](https://tools.ietf.org/html/rfc3164)) and can be enabled disabled as you please. (_can be customized_)

I've also developed a couple of plugins for it, including:
* Express.js
* MongoDB
* WebSocket

> If you need a channel that is not supported, you can very easily create your own.

I know there are many suitable loggers out there, but none fit our needs.

### 👀 Show me what you got
Okay, here is an example.
> The full demo can be tried [here](https://runkit.com/nombrekeff/loggin-js-demo-1), you can find more examples on the [repo](https://github.com/loggin-js/loggin-js#examples)

```js
const loggin = require("loggin-js");

const logger = loggin.logger({
  level: loggin.severity('debug'),
  color: true,                     
  channel: 'demo-1',     
  formatter: 'long'          
});

logger.info('info', {
  user: 'Jeffrey',
  id: 101
});
logger.error('Teaching a snake how to kick! :D');
logger.emergency('Lemons');
logger.critical('critical', { 
  error: 'S*** something is bad!'
});
```
****

The output will be something similar to this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3g5bdb37auw3488bh16x.png)

> Output styles can be fully customized to fit your needs, or it can output the log in JSON format.

****

### 💬 A little history about the project
The project was created on May 1, 2018, more than two years ago. I created the project as an internal library for a couple of projects at my company. When I started using it in more projects, I decided to Open Source it and have been maintaining it since. I have stopped using it at work and have lost a bit of motivation to keep maintaining it, as it has not had much adoption.

I'm now **looking for some feedback** to evaluate if I should continue improving and maintaining it. I would appreciate it if you could check it out and let me know what you think and If I should keep going.

****
> If you read to here, I need to thank you for taking your precious time to read through the post!
> All the best! And keep safe! 😊
Features of Different Javascript Framework : Node Js, BackBone JS, Ext Js
Tags: javascript, node, backbonejs, extjs
Published: 2020-07-17 10:26:37

Node JS, BackBone JS and Ext JS are different in their own area. Here we are presenting some pros and cons with where this framework can be used.

Node JS
Node JS is a server side JavaScript which makes JavaScript more powerful and can provide the felxibility to use JavaScript for creating REST API’s by using the Express framework.

Pros

1.Asynchronous event driven IO
2.Easy to learn JavaScript
3.Same piece of code for client and Server side
4.Growing NPM Package and community
5.Streaming Big File without timeout

Cons
1.More than one CPU required
2.Nested callbacks
3.Not feasible with relational database
4.Not good for beginners

Where to Use Node Js
1.Web Socket Server
2.Fast file uploading
3.Data Streaming
4.Ad Server
5.Stock Exchange Application

BackBone JS
BackBone JS is another client-side single page application which uses the MVC structure. It also tracks the previous states and makes easy to navigate back.

Pros
1.Light Weight framework
2.Performance Control
3.Easy to build customized framework backed on backbone.js

Cons
1.Productivity
2.Memory Leaking
3.Required basic tool to create architecture structure
4.Data binding

Where to use BackBone JS
1.Single Page Application
2.Simplify Complex UI Design
3.Avoid Spaghetti Code
4.Enterprice Application Development

Ext JS
Ext JS is a JavaScript library which is helpful for desktop application development and is developed by sencha based on Yahoo User interface.

Pros
1.Consistent Rendering
2.Responsive
3.Adaptive
4.Control DOM Manipulation
5.Support from the Sencha Team

Cons
1.Not able to write custom javascript and jquery
2.Use Stict
3.Nesting Problem
4.String based language

Where to use Ext Js

1.Build Cross platform application such as desktop, tablets and smartphones
2.Rich UI Application
3.Easy to build Chart based Application

For more information about any of the above framework, you can reach to inquiry@vibidsoft.com or contact us.

P.S. : Logo of NodeJS, BackboneJS and ExtJS registered to their specific brand respectively.
Software is Hard, so Keep it Simple
Tags: devops, softwaredeveloper, coding, developer
Published: 2020-07-17 10:18:23

Hey folks, welcome to my first post on dev.to 🤓
I've been a software developer for many years and have moved into engineering roles, currently a solution architect.

Working closely with DevOps engineers and software developers, and having a decent understanding of both roles, I've wanted to pursue a dream in filmmaking and making content as an aim to help guide developers and ops engineers to learn new technologies. 

Software engineering can be challenging for many. There are so many things to learn. Not only do you have to know about software and code, but also Virtual Machines, Load Balancers, Proxies, Microservices, Docker, Kubernetes, Linux, Cloud and the list never ends.

My aim is to demystify the adoption of some of these technologies with the philosophy of Keeping it Simple.

Checkout my introduction video here, it's short and sweet 🤓
If you're a Dev, a System Admin, or just passionate about software engineering, come follow my journey 👇🏽

{% youtube bseGaoZk8Ds %}
Flutter for Linux by Canonical and Google
Tags: linux, news, gui
Published: 2020-07-17 10:06:12

> Google is working with the Ubuntu Desktop team at Canonical to add Linux support to the Flutter open-source UI platform.

# What is flutter?
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

# Flutter for Linux
I have tried flutter on windows for making mobile apps before. It was in beta back then, and I saw some potential but fell out of touch with the project. Recently I decided to check it out again and to my surprise flutter now has desktop support. 

This will add gaming and a variety of other software to the open-source desktop.


> The flutter source code can now be compiled to a native Linux or macOS app. 

You could check out the docs here: https://flutter.dev/desktop
To install the Flutter SDK (via snap) just use this command
` sudo snap install flutter --classic`

If you don't wish to use the snap package and install it manually follow these instructions: https://flutter.dev/docs/get-started/install/linux

### Here are some apps made using Flutter

{% github https://github.com/gskinnerTeam/flokk %}
*The desktop apps are in the experimental directory*
{% github https://github.com/flutter/samples %}

### Here is a good talk on Flutter for desktop
{% youtube ri4V8CjCKbY %}

Have a great day! 💖
Laravel Lighthouse Sanctum role based authorization best practices
Tags: help, laravel, security, token
Published: 2020-07-17 10:01:57

Hi everyone,

I am looking to understand if my following statement is te correct way to implement authorization using sanctum with graphql:

Now for the tricky part, once I create a login mutation, I need to verify that the user has the corresponding role and generate a token ability based on that check, also when the app goes offline or enters PWA mode.
I need to revoke any tokens abilities with:

   - create
   - delete
   - update
I couldn't find in the docs any solutions to this problem, that is a real-world necessity.
I can only leave the show and index abilities active.

My idea is like this:

Create a custom arg resolver for the mutation somehow bring the middleware and generate a token based on roles.

The verification will be made server-side than issue a token with abilities.

Bad idea: To store the role with the token.

So the real solution is this and I  don't care how many people will argue because in reality security is very important and should be handled by experts in the field. That being said paseto is and will remain a real option if we can build it.

Why paseto read this post from a security expert that works with this every day.

https://developer.okta.com/blog/2019/10/17/a-thorough-introduction-to-paseto


So this is the answer.

Thanks for reading.
5 Tips To Get Ahead As A Junior Developer
Tags: codenewbie, career, productivity
Published: 2020-07-17 09:59:32

Your first role in software development can be scary. It’s hard being a junior developer! Maybe it is your first role out of university, or perhaps you made a career change and have never even worked in an office.

This article is going to contain some tips to push you in the right direction to being that junior developer that everyone wants to work with and gets incredible feedback from colleagues.

[Continue reading here](https://medium.com/dev-genius/5-tips-to-being-everyones-favourite-junior-developer-3bd848c94d40)
Now need help setting up a reverse proxy in IIS
Tags: iis, reverseproxy
Published: 2020-07-17 09:57:51

You can find the [original](https://serverfault.com/questions/1025607/how-to-set-up-reverse-proxy-to-an-external-server-in-iis) over on [serverfault](https://serverfault.com) but I'm pasting the question in here as well just in case.

***

So the scenario we have in mind is as follows.

We have an IFRAME. Said IFRAME wants to point to a resource on `https://trees.com`. It might be, for example, `https://trees.com/ficus/macrophylla`. However, despite all our requests to `trees.com`, they refuse to allow us to link directly to their site, blocking the cross-origin request.

So we decide we want to set up a reverse-proxy. We've heard about nginx and apache but we've got a corporate commitment to Microsoft's technology, for better or worse, so decide in favour of IIS.

Using one of our Azure servers, we create a website, let's call it `https://figs.wild.com.au`. We configure the IFRAMEs so that a request to `https://trees.com/ficus/macrophylla` actually goes to `https://figs.wild.com.au/trees/ficus/macrophylla`. 

At this point we go slightly insane.

Is it actually possible for the request `https://figs.wild.com.au/trees/ficus/macrophylla` to be converted, on the `figs.wild.com.au` server, to a request for `https://trees.com/ficus/macrophylla` and for the response to that to be fed back to the originator of the IFRAME request? 

We've done a lot of searching and we keep finding things that *almost* work. What actually does work? Is IIS's Url Rewrite the thing to use, and if so, what should the rule/s look like? Or should we be using some C#-y thing instead?