teleren/devto huggingface dataset:
How to pick your next project
Tags: productivity
Published: 2020-12-22 09:26:28

I am a huge fan of todo lists for organizing my tasks. Lately, those lists are growing a lot faster than I can work on them. While lists are great for leading me through each project, they don’t help me pick what project to work on next.

Todo lists are great when tasks are small and the order we do them in doesn’t matter. Take weekend chores as an example. We need to mow the lawn, take out the trash, and do the dishes. The order we do them in makes no difference. They all take about the same time, and we can get them all done on the same day. Instead of spending energy on picking the next task, we can put them on a list and work through it from top to bottom. Choosing the next step happens automatically, thanks to the list.

A flat list, like a full backlog, does not help us prioritize large projects. Lists make everything seem equally valuable. Often, the more important projects appear further down the list. Working on a backlog from top to bottom is a terribly wasteful idea. To get the most value out of our work, we have to pick the right project to do next. To help us make a decision, we can put them on an **Impact-Effort-Matrix**.

Instead of looking at our projects as a single list, we can chart them along two axes. One axis is the impact a project can have, the other is the effort it takes to get done.

![The projects on a two-dimensional chart, with the x-axis representing effort and the y-axis representing impact.](https://dev-to-uploads.s3.amazonaws.com/i/7wik5o8zyppqsl8dk6ti.png)

If we chart our projects like this, we can see each project’s importance in relation to the others. Where on the matrix a project ends up shows us how good an idea it is. Each quadrant represents a different category of importance.

![The same chart as before, with the quadrants named. Low effort and low impact: minor improvements. Low effort and high impact: quick fillers. High effort and high impact: potential winners. High effort and low impact: money wasters.](https://dev-to-uploads.s3.amazonaws.com/i/5158uo45w50o24ybeqtj.png)

This is not an exact science, because we are bad at estimating both impact and effort. We can still use it as a rough guideline to help us decide.

We’re not limited to look at only impact and effort either. We can chart the same projects based on other attributes and base our decision on many results. A cost-time-matrix can reveal hidden savings. A sweat-joy-matrix could show us how intense and enjoyable projects are.

What attributes we want to look at depends on our situation. Looking at projects based on what attributes are important to us helps us choose better. As fun as some projects could be, this technique brought me back to reality a few times last week. I now try to focus on what is most important. Coding in isolation would often be fun, but it’s not the most valuable thing for me to do.

– Dom
I built a Fast and low HTTP router and URL matcher for building Deno servers 🦕.
Tags: typescript
Published: 2020-12-22 09:20:14

Xanny finally reached version 1.0 in Dec 2020. According to its [official repository](https://github.com/xanny-projects/xanny), Xanny is a simple, fast and low HTTP router and URL marcher for building Deno servers.
You can assume xanny as a layer built on the top of the Deno that helps manage a server and routes. It provides a robust set of features to develop web and mobile applications.

Let's see some of the core features of Xanny framework:

- Developer friendly, very expressive and help the developer in their daily use, without sacrificing performance and security.
- Lightweight and modular design allows for a flexible framework.
- Focus on high performance.
- Middleware support, incoming HTTP request can be handled by a chain of middlewares and the final action.
- Excellent and fluent documentation.

## Install Xanny

Assuming you’ve already installed Deno, create a directory and `.ts` file to hold your code, and make that your working directory.

```sh
$ mkdir xanny-app
$ cd xanny-app
$ touch xanny_example.ts
```
So to use version 1.0.0 of xanny, you would want to import
```ts
https://deno.land/x/xanny@v1.0.0/lib/mod.ts
```
Let's start registering a couple of URL paths and handlers:

```ts
import { Application, RequestMethod, HttpRequest, HttpResponse } from "https://deno.land/x/xanny@v1.0.0/lib/mod.ts";

const app = new Application();

const r = app.NewRoute({ maxRoutes:2 });

r.WithMethods(RequestMethod.GET)
    .Path("/")
    .HandleFunc(async function (Request: HttpRequest, ResponseWriter: HttpResponse) {
      ResponseWriter.WithBody("Hello Xanny").Return();
    })
    .Path("/demo")
    .HandleFunc(async function (Request: HttpRequest, ResponseWriter: HttpResponse) {
      ResponseWriter.WithBody("Hello Xanny Demo").Return();
    });

app.ListenAndServe({ port: 8080 });
```
Here we register two routes mapping URL path to handler. if an incoming request URL matches one of the paths, the corresponding handler is called passingWe believe development must be an enjoyable and creative experience to be truly fulfilling (`HttpRequest`, `HttpResponse`) as parameters.

> As you can see Xanny provides a very simple and expressive method of defining routes and behavior without complicated routing.

To see the results you need to start a web server on your development machine. You can do this by running the following command in the `xanny-app` directory:

```ts
deno run --allow-net xanny_example.ts
```
To see your application in action, open a browser window and navigate to http://localhost:8080. You should see the Xanny 
`Hello Xanny`.

We encourage you to contribute to Xanny! Please check out the guidelines about how to proceed.

Whether you’re helping us fix bugs, improve the docs, or spread the word, we’d love to have you as part of the Xanny community! 💪💜 See CONTRIBUTING.md for more information on what we’re looking for and how to get started.
[👉 Github Repository](https://github.com/xanny-projects/xanny)
Choose a CMS (Content Management System)
Tags: discuss, cms, contentmanagement, django
Published: 2020-12-22 09:13:43

Hey folks,

Need some recommendation around good `CMS` options.

## Context
One of my clients (based in India) is looking out for `a full-fledged CMS Solution similar to AEM or DotCMS`. They already have `django-cms` as their CMS solution but it is not as good as it seems. It has very basic CMS capabilites but to incorporate anything new requires a lot of coding and python expertise. Anything new means integrate a new plugin and a lot of plugins are outdated. 

For example, they needed headless support (which many CMS support) but in django-cms; the plugin for the same is not maintained. I also asked a [question](https://stackoverflow.com/questions/61360674/facing-issues-while-converting-django-cms-into-headless-cms) for the same on stackoverflow but got no positive response ([link to question](https://stackoverflow.com/questions/61360674/facing-issues-while-converting-django-cms-into-headless-cms)).

Now, my client is re-thinking the options and here is I need help from you all.
### Requirements

Looking out for CMS which supports feature like:
* Multi-tenant/Multi-site support
* Granular Permissions for sections/pages/documents
* Article Versioning
* Backup and Restore
* Google SSO Integration
* Multi language support
* Multi environment support (testing/production)
* Analytics, etc.

And can be quickly used to onboard multiple tenants/sites with zero or limited developer support.

They are fine with both Paid or Open source versions. We are exploring AEM, dotcms, sitefinity, wagtail etc but recommendation from you folks will really help us finalizing one. We also looked at wordpress, joomla but felt they have more security concerns and hence dropped off those.

Any secure, reliable CMS recommendations will really help. Or if any of your companies is currently using CMS Solution, feedback on the same will be highly appreciated.

Thanks!
JS Math cheatsheet
Tags: javascript, beginners, webdev
Published: 2020-12-22 09:00:50

Hi everyone! 
Continuing to write about JavaScript, today 

Here is a list of most usefull Math object methods. Math is an object with methods and props for mathematical calculations. Also, Math is not a constructor and every method is static.

- **[abs](#abs)**
- **[round](#round)**
- **[ceil](#ceil)**
- **[floor](#floor)**
- **[max](#max)**
- **[min](#min)**
- **[pow](#pow)**
- **[random](#random)**
- **[sqrt](#sqrt)**

More methods and information you can check on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math)


## abs

`Math.abs(x)` — Returns the absolute (positive) value of x

```javascript
Math.abs(25);       // 25
Math.abs(-2);       // 2
Math.abs(null);     // 0
Math.abs('');       // 0
Math.abs([]);       // 0
Math.abs([2]);      // 2
Math.abs([1,2]);    // NaN
Math.abs({});       // NaN
Math.abs('-1');     // 1
Math.abs('string'); // NaN
Math.abs();         // NaN
```

## round

`Math.round(x)` — The value of x rounded to its nearest integer

```javascript
Math.round(20.49);     // 20
Math.round(20.5);      // 21
Math.round(-20.5);     // -20
Math.round(-20.51);    // -21
```

## ceil

`Math.ceil(x)` — Value of x rounded up to its nearest integer

```javascript
Math.ceil(.95);    // 1
Math.ceil(4);      // 4
Math.ceil(7.004);  // 8
Math.ceil(-0.95);  // -0
Math.ceil(-4);     // -4
Math.ceil(-7.004); // -7
```

## floor

`floor(x)` — The value of x rounded down to its nearest integer

```javascript
Math.floor( 45.95); //  45
Math.floor(-45.95); // -46
```

## max

`max(x,y,z,...,n)` — Returns the number with the highest value

```javascript
Math.max(10, 20);   //  20
Math.max(-10, -20); // -10
Math.max(-10, 20);  //  20
```

## min

`min(x,y,z,...,n)` — Same for the number with the lowest value

```javascript
Math.min(10, 20);   //  10
Math.min(-10, -20); // -20
Math.min(-10, 20);  //  -10
```

## pow

`pow(base, exponent)` — `base` to the power of `exponent`

```javascript
Math.pow(7, 2); // 49
Math.pow(8, 2); // 64
Math.pow(2, 8); // 256
```

## random

`random()` — Returns a random number between 0 and 1 (include 0 and exclude 1)


## sqrt

`sqrt(x)` — Square root of x

```javascript
Math.sqrt(9);  // 3
Math.sqrt(2);  // 1.414213562373095
Math.sqrt(1);  // 1
Math.sqrt(0);  // 0
Math.sqrt(-1); // NaN
Math.sqrt(-0); // -0
```

<hr/>


More knowledge and experience you will find there:

| [Twitter](https://twitter.com/MikhailSakhnyuk) | [Github](https://github.com/sakhnyuk) | [Linkedin](https://www.linkedin.com/in/mikhail-sakhniuk-96765aa8/) |
| --------- |:---------:| -------:|
Best Math Courses for Machine Learning in 2021
Tags: machinelearning, deeplearning, datascience
Published: 2020-12-22 08:22:42

**Why Math for Machine Learning?**

Do you have the same question...?

If yes,

Then these are the few reasons to Learn Math for Machine Learning👇

🟡 With the help of mathematics, you can select the right algorithm which includes giving considerations to **accuracy, training time, model complexity, number of parameters, and number of features.**

🟡 Mathematics helps you to identify **under-fitting and over-fitting** by understanding the Bias-Variance tradeoff.

🟡 You can choose parameter settings and validation strategies with the help of math.

🟡 Without knowledge of math, you can’t estimate the right **confidence interval and uncertainty.**


That's why knowledge of math is essential for machine learning.

So if you want to learn math such as **Linear Algebra, Multivariate Calculus, Probability, and Statistics** you can check these math courses for machine learning.
 

These courses will give you a strong understanding of mathematical concepts.

Check out the math courses for machine learning **[here](https://www.mltut.com/best-math-courses-for-machine-learning/)**
Make your web app mobile-friendly with just one line of code.
Tags: webdev, portfolio, beginners, html
Published: 2020-12-22 08:06:20

In this blog,let me tell you how you can make any of your web app mobile friendly and how I made my portfolio mobile friendly with a single line of code.

#**What is a mobile web app?**

Mobile web apps are web apps optimized for a good phone experience. They aren’t mobile applications, but websites written in HTML/CSS and run by a browser. While they may be designed to resemble the feel of smartphone apps, they don’t have much in common.

You need to understand that most web apps are viewed more often on a mobile device than on a desktop.

You can achieve decent view across a number of mobile devices with just this single line inside your head tag in html file without any media queries.
```
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
```
##Let's dig little deeper,
The viewport is the user's visible area of a web page.HTML5 lets you play with this viewport via `<meta>` tag.
`width=device-width` => This basically tells the browser to render the page as per the screen-width of user's device.
`initial-scale=1.0` => initial-scale property controls the zoom level when the page is first loaded.

In my case for this [portfolio](https://aneenajohn.netlify.app/) which I had made I had to set the `initial-scale=0.5` which supresses the zoom level to 0.5 inorder to have better view in mobile devices.

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

###Attributes of `<meta>` tag
The `width` property controls the size of the viewport. It can be set to a specific number of pixels like `width=600` or to the special value device-width
`width` => The width of the virtual viewport of the device.
`height` => The height of the “virtual viewport” of the device.
The `maximum-scale`, `minimum-scale`, and `user-scalable` properties control how users are allowed to zoom the page in or out.
`maximum-scale=2.0`=> limits the maximum value that the user can zoom to 2.0
`minimum-scale=0.5` => limits the minimum value that the user can zoom to 0.5
`user-scalable` => lets the user to zoom in or out.Takes the values yes or no.

It’s generally recommended that you don’t prevent scaling.

###Bonus Tip:
Before you jump into figuring out the ways to optimise for mobile devices just peek into this [website](https://search.google.com/test/mobile-friendly) to check whether your website is already mobile friendly.

Mobile friendly tool offered by Google lets you get a quick answer on whether or not your website is mobile friendly.Just drop your url in the search box.

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


If this tool responds you with "your website needs a lot of work", then making your website mobile optimised should be treated as a top priority.

I'd love to hear your opinions in the comment section.

Thanks for reading...
Tips on 4 Monetization Options for Startups
Tags: monetization, products, startup
Published: 2020-12-22 07:59:48

---
title: Tips on 4 Monetization Options for Startups
published: true
description: Many businesses fail simply because they ran out of money. Here we discuss four monetization models that are often ignored or not optimally applied and how easily they fit into your development plans. 
tags: monetization, products, startups 
//cover_image: https://direct_url_to_image.jpg
---

Many businesses fail simply because they ran out of money. Here we discuss four monetization models that are often ignored or not optimally applied and how easily they fit into your development plans. 

One goal of your monetization strategy probably should be to maximize your average lifetime revenue per user. The monetization options you adopt should fit your branding, which may preclude some options (like in-app advertising). The support requirements of others may initially exceed your budget and/or team’s capabilities (newsletters or data products). Even so, you can always expand your options as your business evolves. Including them in your software development plans early on can save you substantial expense later.

Days or even weeks could be discussed on all of the monetization options available to businesses today. The four options discussed below are meant to provide a smorgasbord of “food for thought” for startups – but can be valuable to SMB’s, too.

Read full article here: https://perceptionbox.io/business/tips-on-4-monetization-options-for-startups/
Full Circle
Tags: html, css, javascript, performance
Published: 2020-12-22 07:58:34

Earlier this year, I helped a colleague setting up a solution, I'd worked on two years ago.

It was a "standard" webpack-setup, but the build failed, and she asked for my help.

I couldn't build the solution either. Many of the webpack-plugins had changed completely, and needed new configuration-code.

`npm audit fix` also made sure some insecure dependencies were updated, which created further build-errors.

It took **four hours** to make the solution "buildable" again. I don't know how long it took her to do the simple CSS-fix, she had to do, but probably **less** than four hours!

This year, for all my own, small "hobby-projects", I ditched "the modern build" and went for something classic, but — in a sense — more modern approach:

- I split my JavaScript into multiple "micro" modules: a bunch of very small mjs-files. I created two folders: one with "common"-functions, and one with "global consts". Example: "isTouch" or "scrollPosition" — small pieces, I use across multiple projects)

- I used *CSS Custom Properties* for *everything*, and found out, that in most cases the final output was significantly **smaller** than .scss-files, and "live-updatable" from JavaScript (using `.setProperty()`). 
As an example, look at these range sliders:

{% codepen https://codepen.io/stoumann/pen/oNzgWMo default-tab=result %}

All the properties are defined as *CSS Custom Properties*, so in order to completely change the look and feel of a slider, I just update a few variables.

- The HTML was either rendered inline or from template literals in JavaScript.

- I setup the free version of Cloudflare for DNS (and caching). Here, I enabled HTTPS, HTTP2/3 as well as *minification!*

That's right, minified JavaScript, CSS and HTML *without* a build-tool! But Cloudflare has *many* more tools up its sleeve: You can set up workers handling cache on a granular level, or setup *secure headers*, if you want an **A+** in security at [securityheaders.com](https://securityheaders.com/).

Bonus: If I open any of these projects a couple of years from now, they will just *work!* No need to fix webpack or npm-issues.

---

## And the result? 
**Super-fast** sites with these beautiful, green "100%" circles in Lighthouse, as you see in the cover-image for this article. The image is from a *huge* test-page with thousands of DOM-nodes.

I'm fully aware this will *never* work on a huge project with multiple developers, but I think it's important to know, that the web is **still** just HTML, CSS and JavaScript — and how important it is to know these really well.

Yes, there will be buzzwords and trends like MACH architecture, JamStack etc., but websites are **still** just HTML, CSS and JavaScript beneath it all!

Thanks for reading!
Extending default Fields on Laravel Nova
Tags: laravel
Published: 2020-12-22 07:43:48

Each project doesn't always expect the same set of default and you might have a requirement to customise Laravel Nova default behavior. For example setting default datetime format for `DateTime` field.

Imagine you have the following scenario:

```php
use Laravel\Nova\Fields\DateTime;

DateTime::make('Created At')->sortable()->format('D-M-yyyy H:m'),
DateTime::make('Updated At')->sortable()->format('D-M-yyyy H:m'),
```

Instead of writing `->sortable()->format('D-M-yyyy H:m')` for each field you can override the field by adding `App\Nova\Fields\DateTime` and add the following code:

```php
<?php

namespace App\Nova\Fields;

class DateTime extends \Laravel\Nova\Fields\DateTime 
{
    /**
     * Create a new field.
     *
     * @param  string  $name
     * @param  string|null  $attribute
     * @param  mixed|null  $resolveCallback
     * @return void
     */
    public function __construct($name, $attribute = null, $resolveCallback = null)
    {
        parent::__construct($name, $attribute, $resolveCallback);
      
        $this->sortable()->format('D-M-yyyy H:m');
    }
}
```

And your fields can be simplify to:

```php
use App\Nova\Fields\DateTime;

DateTime::make('Created At'),
DateTime::make('Updated At'),
```
Advent of Code 2020: Python Solution Day 22
Tags: adventofcode, algorithms, python, challenge
Published: 2020-12-22 07:40:20

This time we have to fight with crab and fighting with crab is easier. I quickly found the solution to part one and for the part two, I took help from [here](https://github.com/kermitnirmit/Advent-of-Code-2020/blob/master/day_22/solution.py). So for the second part, credit goes to the author of that code. **What was your solution? Please share it on comment.**

## Part 1
```python
with open("day22.txt") as fp:
    lines = fp.read().split("\n\n")
lines = {line.split(":")[0]: line.split(":")[1].strip() for line in lines}
lines = {key: list(map(lambda x: int(x), value.split("\n"))) for key, value in lines.items()}
card_dict = lines.copy()

p1 = card_dict["Player 1"]
p2 = card_dict["Player 2"]

i = 0
while len(p1) != 0 or len(p2) != 0:
    print(f"Iteration {i}, P1: {p1}, P2: {p2}")
    c1 = p1[0]
    c2 = p2[0]
    del p1[0]
    del p2[0]
    
    if c1 > c2:
        p1.append(c1)
        p1.append(c2)
    else:
        p2.append(c2)
        p2.append(c1)
    i+=1
    if len(p1) == 0 or len(p2) == 0:
        break
if len(p1) == 0:
    part1_sum = sum([((i+1)*j) for i, j in enumerate(p2[::-1])])
else:
    part1_sum = sum([((i+1)*j) for i, j in enumerate(p1[::-1])])
part1_sum
```

## Part 2
```python
def recursive_war(p1cards, p2cards, visited):
    while(len(p1cards) > 0 and len(p2cards) > 0):
        if (tuple(p1cards), tuple(p2cards)) in visited:
            return 1, p1cards

        visited.add((tuple(p1cards), tuple(p2cards)))
        
        a, b = p1cards.pop(0), p2cards.pop(0)
        if len(p1cards) >= a and len(p2cards) >= b:
            winner, _ = recursive_war(p1cards[:a], p2cards[:b], set())
        else:
            winner = 1 if a > b else 0

        if winner == 1:
            p1cards.extend([a, b])
        else:
            p2cards.extend([b, a])
    return (1, p1cards) if len(p1cards) > 0 else (0, p2cards)
print(sum((i + 1) * x for i, x in enumerate(recursive_war(card_dict["Player 1"], card_dict["Player 2"]
                                                          , set())[1][::-1])))
```
state hook not a function
Tags: react
Published: 2020-12-22 07:37:50

I got stuck on using state hook and keep getting state hook is not a function. Tried restoring all packages and used different syntax not sure what I am missing here. Getting error message setExactPage is not a function. Any help would be appreciated.


const [currentPage, setPrevPage, setNextNext, setExactPage] = useState(0);
const handleFirstProposalPage = () => { setExactPage(1) };
<div>
 <label> First Page: {currentPage}</label>
 <button onClick={handleFirstProposalPage}> First Page </button> 
</div>
Cross-origin error on WP using Elementor
Tags: wordpress, elementor
Published: 2020-12-22 07:12:11

When trying to add new page and trying to edit it using Elementor but if there is redirection used for the website the Elementor will try to Hit the redirects address first which can cause your new page to stuck in Elementor.

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

1. Try to check sometimes Plugin conflict can cause this.
But in my case it is not related to Plugin.
2. Check the themes and verify that you are using the same theme for both address (original and redirected).

try to make use them both it will solve your problem.


Thanks......

Comment for any thoughts on this.
Keyoxide identity verification
Published: 2020-12-22 07:11:35

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/4AF679D0ABA0ED4B07BF7B6932CA3267C8D187D7) to [this dev.to account](https://dev.to/karmanyaahm). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:4AF679D0ABA0ED4B07BF7B6932CA3267C8D187D7]