teleren/devto huggingface dataset:
Create proportional columns using Flexbox in LESS
Tags: less, css, grid, flexbox
Published: 2020-04-23 13:59:15

---
title: Create proportional columns using Flexbox in LESS
published: true
description: 
tags: less, css, grid, flexbox
---

I'm using Flexbox and LESS to create a flexible proportional column generator.

With help of Mixins I could generate a list of CSS with percentage width:
```scss
// Mixins
#mixins() {
    // Proportion Generator
    // @totalPortion: sum number of portions
    // @list: length of list is total number of columns and each number represents a concrete proportion
    // example: generator-proportion(4; 2, 1, 1) - there are 3 columns, first column has 2/4 portion and rest each has 1/4 portion
    .generator-proportion(@totalPortion; @list; @i: 1) when (@i =< length(@list)) {
        > .grid-column:nth-of-type(@{i}) {
            width: percentage(extract(@list, @i) / @totalPortion);
        }
        #mixins.generator-proportion(@totalPortion; @list; (@i + 1));
    }
}
```


while the less part of creating a proportioned columns is:
```scss
div.section {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;

    > * {
        flex: 1 1 auto;
        word-break: break-all;
    }

    &[data-column-proportion="2:1:1"] {
        #mixin.generator-proportion(4; 2, 1, 1);
    }
}
``` 
So if there should be a new proportional section, I just need to invoke the mixin again with corresponding proportions.

But I'm wondering how could I get the `@totalPortion` automatically by summing up all column portions using LESS, so that I donot need to calculate the sum everytime manually and could simplify the usage?
Handling Errors in Express Application
Tags: express, node, errors
Published: 2020-04-23 13:49:06

Error Handling refers to how Express catches and processes errors that occur both synchronously and asynchronously. Express comes with a default error handler so you don’t need to write your own to get started.

An error can be occurred in an Express application in the following two cases.
      1.When requested route is not found in server
      2.When the request handling middle ware generates an error.

Handling unavailable routes 
---------------------------
 Express Application creates a routing table in the order of route handlers in the application. When  a client makes a request,It can start comparing the request handlers in the order of they derived.
If no match found,then it returns an HTML response with error message in it. We can handle this error by adding a middleware as last one in the application.

	app.use( (req, res, next) = > {
	res.send(`path  ${ req.url } of type request ${ req.method }is not found`);
});

This middleware function can execute for every client’s request. So , by placing this  as last one,we can make it respond only for unavailable paths.


Handling error of  request handling middlewares
------------------------------------------------
Whenever an error is occurred ,the default Error handling middleware of express can deal with that.
The default error handling middleware take four objects like below.

		(error, request , response , next )=>{}

When an error is occurred in execution of request, the Express creates an Error objects and handover it to default error handling mechanish by suspending the execution  rest of code in that request handler. 
One can throw an Error  object to that default error handler by using

                let err=new Error(“error message”);
		next(err);  //this will call error handling middleware

Note:  next() will call next middleware in the list where as next(err) will call error handling middleware

Now add the following  error handling middleware  as last one in the list and just above list() method.

			app.use( (err , req , res , next )= > { } ); 


So the final order of route handlers in express app should like below

		//write all request handlers
		//write middleware to deal with unavailable paths
			app.use( (req, res, next) = > {
	res.send(`path  ${ req.url } of type request ${ req.method }is not found`);
});
	
		//write error handling middleware
		app.use( (err , req , res , next )= > {
	console.log(err.stack);
	res.send(“something went wrong!!!!”);
 } ); 
		//assign port number
		app.listen(some port number here);
21: The JavaScript Resource
Tags: javascript
Published: 2020-04-23 13:47:10


1. Mozilla Developer Network
https://developer.mozilla.org/

2. Eloquent Javascript
http://eloquentjavascript.net/

3. Javascript.info
https://javascript.info/

4. Medium - Javascript scene
https://medium.com/javascript-scene

5. Medium - Eric Elliott
https://medium.com/@_ericelliott

6. Medium - Addy Osmani
https://medium.com/@addyosmani

7. Medium - Tyler McGinnis
https://medium.com/@tylermcginnis

8. Youtube - Ben Awad
https://www.youtube.com/user/99baddawg

9. Youtube - Harry Wolff
https://www.youtube.com/user/hswolff/...

10. Youtube - Douglas Crockford videos
https://www.youtube.com/results?searc...

11. Youtube - Fun Fun Function
https://www.youtube.com/channel/UCO1c...

12. Youtube - JS Conf
https://www.youtube.com/channel/UCzoV...

13. Youtube - Google Developers
https://www.youtube.com/channel/UC_x5...

14. JavaScript Weekly newsletter
https://javascriptweekly.com/

15. Robin Wieruch's blog
https://www.robinwieruch.de/blog
🐳Instalando Docker no Oracle Linux
Tags: docker, oraclecloud
Published: 2020-04-23 13:43:41

Se você também está utilizando a Oracle Cloud, provavelmente vai precisar instalar o docker em algum momento.

A propósito, as instâncias gratuitas da OCI rodam com Oracle Linux e elas podem servir para fazer testes. Só possuem 1Gb de memória RAM mas, para você ter ideia, eu já subi containers de backend com `nodejs` e containers de entregas estáticas com `nginx` no mesmo servidorzinho e dá para brincar.

A instalação do Docker é simples e vai funcionar exatamente nesta sequência:

```  
## Incluir Repositório Docker
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

## Instalar docker-engine e docker-compose
sudo yum install docker-engine docker-compose

## Habilitar uso do Docker para o usuário atual (sem sudo)
sudo usermod -aG docker $USER

## Subir o docker na inicialização do sistema
sudo systemctl enable docker

## Reinicie pra tudo entrar em vigor
reboot
```
Tags in Gridsome
Tags: help, gridsome, vue
Published: 2020-04-23 13:41:35

---
title: Tags in Gridsome
published: true
description: 
tags: help,gridsome,vue
---

I've recently attempted to setup tags on my blog posts I'm attempting to create a page as detailed in the [docs](https://gridsome.org/docs/taxonomies/#creating-a-taxonomy-page) to be able to see posts with various tags. I've setup a template using src/templates/Tag.vue and updated `my gridsome.server.js` file as suggested:

```javascript
  api.loadSource((actions) => {
    const posts = actions.addCollection("Post");
    const tags = actions.addCollection("Tag");

    // makes all ids in the `tags` field reference a `Tag`
    posts.addReference("tags", "Tag");

    tags.addNode({
      id: "1",
      title: "The author",
    });

    posts.addNode({
      id: "1",
      title: "A post",
      tags: ["1"],
    });
  });
```
but how do I actually create that page? Do I need ot setup it up my config file to create it? Or do I setup a single file component? I don't understand and the docs aren't clear it seems as though it's missing a step or am I misunderstanding? Has anyone done this if so what am I missing? I am referencing the tags under the posts in my config. 

```javascript
    {
      use: "@gridsome/source-filesystem",
      options: {
        typeName: "Post",
        path: "content/posts/**/*.md",
        refs: {
          // Creates a GraphQL collection from 'tags' in front-matter and adds a reference.
          tags: {
            typeName: "Tag",
            create: true,
          },
        },
      },
    },
```

Any help appreciated.
Production Ready GraphQL Summary — Part I
Tags: graphql, summary, relay, bookreview
Published: 2020-04-23 13:26:18

I'm reading this [book with GraphQL content](https://book.productionreadygraphql.com/).

Thanks @leonardomso

![book](https://dev-to-uploads.s3.amazonaws.com/i/1mouv60pagi9ih5vuojp.png)

## Pagination: Cursor Pagination
- Cursor pagination is generally a great choice, because of the accuracy and performance
- Maybe it's the most common pattern in GraphQL at the moment
- This pattern lets us design more complex use cases, because of Connection and Edge types
- Relay clients integrate perfectly with your API because of that

## Global Identification: Global ID — Node
- Like Connections, they can be a good pattern even outside of a Relay context
- Opaque IDs are recommended
- You necessarily don't need global identification if you're not planning to use Relay
- Ensure your global identification contains enough context to globally route to a node, especially in a distributed architecture

## Non-Nullability
- It lets clients avoid defensive code/conditionals
- It helps to build more predictable schemas

**tradeoffs/warnings:**

- It's very hard to predict what can be null
- Non-null fields and arguments are harder to evolve. Going from non-null to null is a breaking change, but the opposite is not

**guidelines for nullability:**

- Should almost always nullable fields that return object types that are backed by database associations, network calls, or anything that could potentially fail
- Non-null for arguments, because it's more predictable and easy to understand API

That's it.
My first part of the book summary. Thank you.
CSS's undersung property: box-sizing
Tags: css, beginners, tutorial, css3
Published: 2020-04-23 13:20:21

Here is a little CSS snippet we can apply to *all elements which will make our lives infinitely easier:

```css
html{ 
box-sizing: border-box;
} 

*, *:before, *:after{
box-sizing: inherit;
}
```
## CSS box-sizing explained:

Ever since the introduction of the CSS box model [CSS Level 1](https://www.w3.org/TR/CSS1/#formatting-model), padding and borders have been considered an addition to the element they are properties of. For example, if you declare a width of 20% on an element and then add 25px of padding it becomes 20%+25px wide. This can cause major headaches when developing and makes responsive CSS a nightmare.

As from CSS3 [CSS Level 3](https://www.w3.org/TR/css3-ui/#box-sizing) box-sizing changes everything! It tells the browser to render the box model using the 'IE box model', used by Internet Explorer in 'quirks mode', where height and width determine the height and width including padding and borders. Therefore, if you set an elements width to 20% and add 25px of padding it will cut into the element rather than adding to it.

## Browser support:

Thankfully, it turns out that box-sizing is pretty well supported throughout all major browsers. Some browsers require the -moz- prefix and iOS needs a -webkit- prefix but all the rest don't. For a more detailed analysis check out the awesome [caniuse.com](http://caniuse.com/#feat=css3-boxsizing) support table.

## Further reading:
1.[W3.org CSS3: box-sizing](https://www.w3.org/TR/css3-ui/#box-sizing)
2.[CSS-Tricks: box-Sizing](https://css-tricks.com/box-sizing/)
3.[Controlling width with CSS3 box-sizing](http://www.456bereastreet.com/archive/201104/controlling_width_with_css3_box-sizing/)
4.[Can I Use? Support table](http://caniuse.com/#feat=css3-boxsizing)
5.[MDN box-sizing](https://developer.mozilla.org/en/docs/Web/CSS/box-sizing)
File.io clone in Go
Tags: file, filesharing, go
Published: 2020-04-23 13:19:16

## TL;DR
The Code : 

[https://github.com/codenoid/file.io](https://github.com/codenoid/file.io)

Install via Docker : 

[https://hub.docker.com/r/codenoid/file.io-clone](https://hub.docker.com/r/codenoid/file.io-clone)

## Intro

File.io is often used for sharing or moving a private-data, like when i move my Go binary, i use File.io to move from my local to production machine, and because of i have a lot of freetime, i write clone of File.io

## Feature & TODO
- [x] Custom expiration option
- [x] Content-Disposition header
- [x] Multiple Storage Support (currently redis)
- [ ] Max download option
- [x] Simple API

Hope this thing useful for you <3
Why jQuery unobtrusive validation sucks 😒
Tags: jquery, validation, unobtrusive, frontend
Published: 2020-04-23 13:17:41

If you ever used `jquery.validate` then you might have used `groups` feature.

It allows you to group inputs so when one or more of them have invalid value, then one (and only one) error is displayed.

It's useful when you don't want to flood user with list of errors.
For example:
- split date into three inputs: day, month and year.

Now, you might want to display error like: 'Date is incorrect, please verify and correct' whenever day, month or year is incorrect.

Without grouping you would have 3 errors is all 3 inputs have incorrect value
`34-13-asdf`.

It's easy to setup such validation in `jQuery validate` but it's not so easy to do with `jQuery unobtrusive validation`.

What is unobtrusive validation?
===============================

It's just a framework that allows you to setup validation with usage of `data-val-*=""` attributes.
It means that you don't have to write any `js` to setup form validation.
While it sound cool it's also limiting you with many options.

What is the problem? Just create new validator!
===============================================

jQuery.validate checks if there is existing validator for element and returns existing validator skipping all configuration you might wanted to add.

Of course I could remove it and add new one but then you have to handle `hooks` and all common settings you (or someone) might have added...
I created a covid19 live stats website 😷🚀
Tags: showdev, webdev
Published: 2020-04-23 13:13:15

Hi, myself Rocktim.

I recently launched this website in producthunt.
https://www.producthunt.com/posts/covid-today

The primary reason behind creating this website was that currently, I see a lot live covid19 tracking website. And the data on those sites are overflowing in a wild manner from charts to maps all over the place. So I decided to create a simple and minimal website that only provides the information we need at the moment in a very simple manner.

This whole project is completely maintained by me. So there is a lot of effort in maintaining it. And if you find this website helpful in any way, then please share it in your social media platforms and upvote it in the mentioned producthunt page above too 😊.
Stay safe & Stay Home 🏠
Should I ask for a raise?
Tags: anonymous, career
Published: 2020-04-23 13:11:59

---
title: Should I ask for a raise?
published: true
description: Should I ask for a raise and how much?
tags: #anonymous
---
_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you’d like to leave an anonymous comment._

So I just got a 7% raise (which puts me closer to a Senior SE Software Eng. salary) a few months back.

But my seniors are really impressed by my performance so far (we’ve been receiving millions of new *non-paying* users since we do virtual schools), and might bump me to Manager in a few weeks for a smaller project (and probably will remain a Tech Lead in the current main project).

Now the question: should I ask for a raise and how much? Responsibilities will definitely be more but the company has kind of stated they are looking to cut costs (many devs are probably getting laid off), and to be honest, it may not be the best time for me to gamble my job. But on the other hand, I feel I have a lot to offer and if they don’t give me a decent raise I will feel exploited with the extra work.

Been thinking the possible scenarios so many times. Help is appreciated!
Daily Challenge #232 - Regex Pattern
Tags: challenge
Published: 2020-04-23 13:05:04

---
title: Daily Challenge #232 - Regex Pattern
published: true
series: Daily Challenge
description: Output a regex pattern to check if all given characters appear in a string.
tags: challenge
---
Implement a function that should return a valid regular expression. This is a pattern which is normally used to match parts of a string. In this case, it'll be used to check if all the characters given in the input appear in a string.

Your input will be a string of upper and lower case alphabetical characters. You should output a regex pattern as a string. 

####Example
```
abc = 'abc'
pattern = regex_contains_all(abc)
st = 'zzzaaacccbbbzzz'
bool(re.match(pattern, st), f"Testing if {st} contains all characters in {abc} with your pattern {pattern}")
```
will return `True`

####Tests
abc = 'abc'
pattern = regex_contains_all(abc)
`bool(re.match(pattern, 'bca'))`
`bool(re.match(pattern, 'baczzz'))`
`bool(re.match(pattern, 'ac'))`
`bool(re.match(pattern, 'cb'))`

Good luck!
***
_This [challenge](https://www.codewars.com/kata/5e4eb72bb95d28002dbbecde) comes from albertogcmr on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
All types off digital marketing
Published: 2020-04-23 12:50:11

All about digital marketing explain webpage <a href="https://www.classictechinfo.com/2020/03/all-about-digital-marketing.html "> All about digital marketing explain </a>


Types of Digital Marketing
Blogger digital marketing



Digital Marketing blog



content marketing plan , content marketing



local seo marketing company , seo marketing



social media marketing


digital marketing google adwords


digital marketing mobile apps


youtube marketing


Email Marketing
Lar more 
On my   All about digital marketing explain webpage <a href="https://www.classictechinfo.com/2020/03/all-about-digital-marketing.html "> All about digital marketing explain </a>
Any TILs from your package managers library recently?
Tags: discuss, opensource
Published: 2020-04-23 12:39:59

---
title: Any TILs from your package managers library recently? 
published: true
description: Any TILs from your package managers library recently? 
tags: discuss, opensource
---

I want to hear about any absolute GEMS (ruby devs need not smirk) from your package manager libraries.

Today, I found THESE! (not just one!)

## Randexp

{% github fent/randexp.js %} 

I'm writing a Slack bot that reacts to a word in a message. It listens for a message and matches it with a regex, responding appropriately. 

This library will allow me to write tests that match, without hard coding a message.

## Ngrok

{% github bubenshchykov/ngrok %}

Ngrok's npm package can be run as a module! I was so amazed I wrote it up as a little hello-world guide this morning.

{% post lukeocodes/enny-stack-the-express-ngrok-and-nodemon-stack-23j %}

So did you stumble upon any neat code this week?
COVID-19 Daily Notifications with Twilio API - Twiliohackathon finish
Tags: twiliohackathon
Published: 2020-04-23 12:36:59

## COVID-19 Notification Project
The aim of the project was to give users a convenient way to receive daily notifications about their state's status in regards to COVID-19.
The idea was a user could fill out an online form, select their state, and the app would automatically pull from a covid tracking API and send state based data back daily through a twilio powered text message. 
 
#### Category Submission: 
COVID-19 Communications

## The Hosted Form
The [form](https://18547.wayscript.io/) takes some data and inputs it into a google sheet using their API. 

I built this using [WayScript](www.wayscript.com) and the script can be found [here](https://wayscript.com/user/derricks/6FKUD7gg).

 
## Links to Code
The Python code used throughout the script can be found in this [GitHub Repo](https://github.com/wayscript/code_snippets/tree/master/Trigger%20Notifications%20%26%20Alerts/Twilio%20Covid%20Informer).


## What's The Stack?
I used WayScript to build this. The form is therefore hosted on an AWS server which connects to the google sheets API to be written.

From there, a daily CRON trigger activates which reads in these google sheet values using their API again. The API request to the covid tracking API was done using python and the requests library. 

Data was filtered conditionally to the user and then passed back to them using the twilio API. 


## Additional Resources/Info
We made a demo on how to build this with WayScript over on [YouTube](https://youtu.be/2Da892bYLMk).

Thanks for any and all feedback! It was a fun project to build and a great opportunity to showcase Twilio.
Publishing my first terraform module to terraform registry
Tags: devops, terraform
Published: 2020-04-23 12:36:34

---
title: Publishing my first terraform module to terraform registry
published: true
description: Sharing how I created a module and shared it to terraform registry for all
tags: Devops, Terraform
---

Today, I thought of publishing my own module to terraform registry. The module is in simplest form now. The module is for setting up S3 with web hosting enabled and distributed to different edge locations using AWS Cloudfront. 

##### Here is the link to my module:
Please feel free to give me valuable suggestions. 
https://registry.terraform.io/modules/taragurung/s3-cloudfront-module/aws/1.1.0

### Why we use terraform modules?
We create modules in terraform so that we don't write the same terraform script again and again. It is similar to functions in any programming language. We create it once and just call it every time we need it.

### These are few key takeaways: 
1. Anyone can publish modules in terraform registry. 
2. The terraform official documentation is well documented, anyone can easily follow and publish the module. 
3. It takes a few seconds to publish your module and make it ready to use. 
4. Make sure you provide enough information on variables and output and good to create one readme file. 

### What does my module do?
I would not say it's a full fledged module to use but over time I will make it better adding more features. For now it is meant to create a S3 bucket with the input name supplied by the users and enable it for web hosting. It also distributes the content to different AWS edge locations using cloudfront.
Snipcart vs. Gumroad Review: Comparing E-Commerce Alternatives
Tags: webdev, discuss, showdev, ecommerce
Published: 2020-06-02 19:51:00

---
title: Snipcart vs. Gumroad Review: Comparing E-Commerce Alternatives
published: true
date: 2020-04-23 12:32:37 UTC
tags: webdev, discuss, showdev, ecommerce
canonical_url: https://snipcart.com/blog/snipcart-gumroad-review
---

![Snipcart vs. Gumroad Review: Comparing E-Commerce Alternatives](https://snipcart.com/media/203637/cartsm-2x.png)

Gumroad has been around for almost ten years, serving creators around the world. Initially focused on selling digital goods, it has now evolved and improved.

Since there is a significant overlap in features when it comes to our own product, we decided to craft this Snipcart vs. Gumroad review.

We’ve explored both solutions’ pricing, features, and benefits to see if Snipcart is a decent Gumroad alternative.

We did our best to review both products and highlight their best sides fairly. Hopefully, it should settle which one of the two is best for your next e-commerce venture.

Let’s start by introducing our options.


→ Read the full post [here](https://snipcart.com/blog/snipcart-gumroad-review)