teleren/devto huggingface dataset:
What problem are you trying to solve?
Tags: agile, practices
Published: 2021-06-07 11:19:00

---
title: What problem are you trying to solve?
published: true
date: 2021-05-29 00:00:00 UTC
tags: agile,practices
canonical_url: https://jhall.io/archive/2021/05/29/what-problem-are-you-trying-to-solve/
---

I hear a lot of people ask seemlingy good questions:

- What’s the right way to estimate an operations story in Scrum?
- How do you manage many branches in a git repository?
- How do I implement agile methologies on a large monolothic project?

As good as these questions are, they’re missing something very fundamental, withouth which _none_ of these questions can be answered in any useful way:

**What problem are you trying to solve?**

* * *

Let me pick one example to make it specific:

> How do you manage many branches in a git repository? Should we name branches after Jira tickets, or team name, or something else?

It turns out, this was actually an [XY Problem](https://xyproblem.info/). After some discussion, it became apparent the **problem to be solved** was:

> These are stale branches, I want to know which ones I can delete safely.

Based on this new understanding my advice was simple: Delete any branch older than 3 months (or 1 month, or whatever is reasonable), and don’t bother with complicated naming standards.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
TypeScript Index Signature
Tags: typescript, javascript
Published: 2021-05-28 23:14:18


Javascript objects `obj:{}` are usually indexed using strings. But certainly, its possible to index them using `number` and even `object` types as keys. Because when it comes to index a particular element of a javascript object, JS always stringifies a non-string key by calling `toString()` method. So `number` as key will get stringified and `object` as key must have a `toString()` method which returns a valid string key.
``` typescript
let obj = {
  toString(){
    console.log('toString called')
    return 'Hello'
  }
}
let foo: any = {};
foo[obj] = 'World'; // toString called
console.log(foo[obj]); // toString called, World
console.log(foo['Hello']); // World
```
### Getting shot in the feet
In typescript, `object` as key does not work as above in javascript. Typescript usually throws `error` doing that.

 Lets suppose that if somehow developer uses an `object` as key without `toString()` method implementation. In javascript,  then default value for `toString()` method coming from **V8 engine** serves the purpose for key and horribly its value is `[object Object]` 😖. I am sure that you never would have wanted or used `[object Object]` as an object key in your entire life. 😂  
> _**Basically, typescript wants to save developers from getting shot in the feet, specially the beginners. It wants developers to be explicit about object index key type.**_

So, an `error` like below one or it maybe different, would be thrown everytime, `object` is used for object indexing in typescript.

```"ERROR: Index signature of object type implicitly has an 'any' type"```
``` typescript
let obj = {message:'Hello'}
let foo: any = {};

// ERROR: the index signature must be string, number ...
foo[obj] = 'World';

// Here is where you actually stored it!
console.log(foo["[object Object]"]);  // World
```
For `number` indexes, typescript works fine as they work well for indexing and obviously easily stringifiable.

### Index Signature
In typescript, `Index Signature` identifies key type for indexing of an object. Everytime an object in typescript is created and indexing is expected on that object then developers must specify `Index Signature` .

Syntax to declare `Index Signature` is as follows:
``` typescript
type testType = {
	[<index_name>: <index_type>]: <element_type>
}
// index_name: could be any string value.
// index_type: string or number
// element_type: it could be any premitive type (string, number etc) or a custom type you want your elements to conform to.
``` 

- Index Signatures resolve the the _implicite index signature_ error described in last section.
<br>
- You can use them to restrict your object elements to only one type.
	```  typescript
	type foot = { [shot: string]: string };
	
	const shot: foot = {
		'name': 'john',
		'email': 1231    // Error
	}
	```
<br>
- You can shape your object as you want along with your index signature.
	```  typescript
	type foot = {
		color: string 
		[shot: string]: string 
	};
	
	const shot: foot = {
		'name': 'john' // Error: color attribute not available
	}
	```

happy coding 🤞
Uploading file using html and php
Published: 2021-05-28 22:32:45

<h2>uploading file in php </h2>
<li>HTML Part</li>
<p> create a html form that contain the file upload input,
Like the one one below.</p>

<code>
<!DOCTYPE html>
<html>
<body>

<form action="upload.php" method="post" enctype="multipart/form-data">
  <label>Select image to upload:<label><br>
  <input type="file" name="fileName" id="">
  <input type="submit" value="Upload File" name="upload">
</form>

</body>
</html>


</code>
<i>note: add enctype="multipart/form-data" to the form attribute, to specify the content-type <i>
<br>
<hr>

<li>PHP Part</li>
Create upload.php file and add the PHP code below to it.
<code>
<?php

if(isset($_POST["upload"])) {
$image_dir = "image/"; //folder to store the file
$image_file = $image_dir . basename($_FILES["fileName"]["name"]); //directory of the file with the file name
  if (($_FILES["fileName"]["size"] < 500000)&&($_FILES["fileName"]["size"] >0)) { //check if file is between 1kb and 50GB size
    if (move_uploaded_file($_FILES["fileName"]["tmp_name"], $image _file)) { // store the file on the server
      echo "file upload successful";
    } else {
      echo "there was an error uploading your file.";
    }
  } else {
    echo "file size is too small/big";
    
  }
}
?>

</code>
<span>feel free to leave comment</span>
Rename multiple files with vim and sed
Tags: vim, sed, shell, scripting
Published: 2021-05-28 22:31:56

There are multiple ways to rename a bunch of files in a programmatic manner in Unix-based systems. Here, I will talk about 2 possible ways:
1. Using vim (a little long winded - but good to build understanding)
2. Shell one liner - using `sed` and `xargs` 

Suppose you have a directory with some `.html` files that you want to rename to `.htm` and add a suffix (`generated`) to the base name.

You want to do this:
``` bash 
$ mv file.html file-generated.htm
```

# Using vim 
## Create a list of files 

Use `ls` and `grep` to create a list files to update:

``` bash 
$ ls | grep html > exec_me 
$ cat exec_me

genindex.html
index.html
py-modindex.html
search.html
```

## Search and replace to generate commands to execute 
The idea is to generate a list of commands that can be executed from the command line to get the desired result. 

Perform [search and replace](https://vim.fandom.com/wiki/Search_and_replace) in `vim`'s command mode:

``` vim
:%s/\(.*\)\.html/mv \1\.html \1-generated.htm/g
```

> `\1` allows access to data captured in group - `\(.*\)`. Read about vim modes in [vim modes explained](https://www.freecodecamp.org/news/vim-editor-modes-explained/)

Which should change your file list text to:
```
mv genindex.html genindex-generated.htm
mv index.html index-generated.htm
mv py-modindex.html py-modindex-generated.htm
mv search.html search-generated.htm
```

Save, quit and execute your file! 

```
chmod 700 exec_me
./exec_me
```

# Using sed and xargs 
This technique is very similar to the vim style, except we don't create a new file - but create and execute commands on-the-fly using [`xargs`](https://man7.org/linux/man-pages/man1/xargs.1.html) 

``` bash 
ls | grep html | sed 's/\(.*\)\.html/\1\.html \1-generated\.htm/g' | xargs -L1 mv
```

## Conclusion 
Scripting in shell is awesome and powerful, but also dangerous. It is like having a shotgun with no one stopping you from shooting yourself in the foot. Have fun with it but don't go deleting your entire code base!
How to Fix Storybook Broken Styles When Using Styled-JSX
Tags: nextjs, storybook
Published: 2021-05-28 22:24:38

---
title: How to Fix Storybook Broken Styles When Using Styled-JSX
published: true
description: 
tags: NextJS, storybook
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9mq9t4ug8yu0svui7am.jpeg
---

Recently I've been tasked to fix a styling issue on a Next.js + Storybook project. Most of the React components where displaying fine when used inside of a Next.js page but wouldn't in Storybook. That was frustrating. The fix is to include the Babel and Webpack configs for Storybook within the .storybook directory. Here is how I did it:

First install  `babel-loader` and `babel-plugin-react-require` using `npm` or `yarn` if they were not already installed. Then create a new file named `.babelrc` inside `.storybook` if it doesn't exist and paste the following:

```json
{
  "presets": [
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "styled-jsx/babel",
      {
        "sourceMaps": true
      }
    ],
    "react-require"
  ]
}
```

Create a second file named `webpack.config.js` at the same location with the following content:

```js
const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jsx?|css)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, '../'),
        use: [
          {
            loader: require('styled-jsx/webpack').loader,
          },
        ],
      },
    ],
  },
};
```

This is all we need to get it working. Now run `npm run storybook` or `yarn storybook` to see it working. Enjoy!
Hostgator Review
Tags: hosting
Published: 2021-05-28 22:23:14

Hostgator Inc. was founded by Brent Oxley in his college dorm in 2002. The Internet company has grown from one person to a company with hundreds of employees. and took 21st (2008) and 239th (2009) places in the Inc. 5000 fastest growing.

1. High server performance (uptime> 99.99%)
Server uptime is the only thing I emphasize in my hosting reviews. Can you imagine what would happen to your business if your site crashes frequently? Fancy additional features don't make sense if your site doesn't stay online.

Since I have owned both Hostgator shared hosting and cloud hosting in the past - I give you uptime reporting for both plans

Hostgator's support is provided through various channels: 24/7 live chat, telephone, forums, ticketing system, and Twitter.

For those who do not like to wait and like to solve the problem with their own hands - the company also has

A more detailed overview - https://sitechecker.pro/web-hosting/hostgator.com/
Day 377 : MVP
Tags: hiphop, code, coding, lifelongdev
Published: 2021-05-28 22:09:15

_liner notes_:
- Professional : Had a good talk with the team working on the SDK I made a demo for. It was a good talk to see where we are looking to take it. Looking forward to working on it more. Other than that, I worked on some API documentation and made a pull request for the changes. Good way to end the week.

- Personal : Last night, I actually got everything I planned done. Went through a bunch of tracks for tomorrow's radio show. I set up the starter Svelte project for the dashboard of my side project and added Firebase. I also styled the notification app so it looks more the rest of the project.

![View of a bayou swamp looking thing with water and trees coming out of the water and beams of light coming through the tree tops](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tgs5sequ9c6v6jn2xrz.jpg)

Going to add email login for the dashboard of my side project. Shouldn't be too bad since I've done it before. Need to figure out what I want to do with the dashboard for the MVP and lay it out. Going to finish putting together the radio show and then get back to the side project. Maybe I'll sleep in an anime.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube jGMGTrNgvzs %}
Can someone help me figure out how I can redistribute my game?
Tags: c, go, help, gamedev
Published: 2021-05-28 21:27:34

[Original tweet.](https://twitter.com/BaenenCalin/status/1398389301256364033)

I want people to test my game, and I got someone to test my game, but they got this strange error, and so I tried to fix it in a logical way, and it provided another error, and I'm not sure how I can fix this error.

[GitHub Issue (How do I redistribute my prototype-game? #135).](https://github.com/gen2brain/raylib-go/issues/135)
Spread Operator: don't misuse it
Tags: javascript, discuss, performance, react
Published: 2021-05-28 18:38:17

Spread operator was introduced with JavaScript ES6 along with other great features, but with great power comes the great responsibility. Mostly it is used to create a new reference to object or an array, though it only copies one level deep it's pretty useful especially where we cannot mutate object like React or Redux state, though we are not creating a whole new object, it gets the work done.

Great! What's the issue then? Enough talk let's write some code, We will be using a user array for this purpose and will create a map of active users. Let's define a simple User interface before jumping to real problem.

```ts
interface IUser {
  active: boolean;
  name: string;
  id: string;
}

const users = []; // 10,000 users
```

#### Case 1

```ts
const activeUsers = users.reduce((acc, user) => {
  if (user.active) {
    return { ...acc, [user.id]: user };
  }
  return acc;
}, {});
```

#### Case 2

```ts
let activeUsers = {};

users.forEach((user) => {
  if (user.active) {
    result[user.id] = user;
  }
});
```

#### Case 3

```ts
const a = users.filter((user) => user.active).map((user) => [user.id, user]);
const activeUsers = Object.fromEntries(a);
```

Can you arrange according their performance? from best to worst.

<details>
  <summary>Check actual stats!</summary>
  
  ### Result
  1. Case 2 
  2. Case 3 (~63% slow)
  3. Case 1 (~86% slow)

  Checkout all test cases here: [JS Bench](https://jsbench.me/9zkp8n3nkd/1)

</details>

## Let's dive in

No surprise case 2 was fasted, just plain loop with simple key value addition.

Case 3 was expected to be slow as it has to iterate the array twice that should slow it down and now we have an idea by what margin so avoid it.

Case 1 was not expected to be this slow as it's similar to case one with builtin method, there is one thing which might be slowing it down, `reduce` internal implementation!

Nope, it's the **spread operator**, in general it's slower then adding a key-pair to object but that doesn't mean avoid it just use it only if required. In the case 1 anyway we will get a new `object` from the `reduce` using spread operator is totally unnecessary. Change it to

```ts
const activeUsers = users.reduce((acc, user) => {
  if (user.active) {
    acc[user.id] = user;
  }
  return acc;
}, {});
```

and it is almost at par with `forEach` one, 1% slower.

We might have developed a habit of always using spread operator to avoid uncalled bugs in daily life especially with React and it might not be degrading the performance much but it can, in some cases like this one, so let's remember this, might come handy one it.
What are you Referrer-ing to?
Tags: webdev, javascript, beginners, security
Published: 2021-05-28 20:25:16






## Contents

1.  [Intro](#intro)
2.  [Referrer-Policy](#referrer-policy)
3.  [Linking](#links)
4.  [Bonus: Server header](#server)
5.  [Summary](#summary)

## Intro <a name="intro"></a>

Continuing on from my previous blog about [website security week](https://jordanfinners.dev/blogs/website-security-week), we're going to talk about a Referrers on the web.

Referrers on the web allow sites you are visiting to see what site you have come from, as the `Referer` header (it is actually mispelled in the HTTP Specification) contains a absolute or partial url of the site you've come from if you have followed a link.
This is [commonly used for tracking and analytics](https://developer.mozilla.org/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns), but it can also be used to steal information for example that contained in the URL of a reset password page or where a token is part of the URL, which is why it comes under security headers.

## Referrer-Policy <a name="referrer-policy"></a>

This header indicates how much information can be shared in the `Referer` header on requests made across your site.

Recommended setting:
```
Referrer-Policy: no-referrer
```

You can read about it more on [Modzilla](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy).

It can also be set in HTML as a meta tag `<meta name="referrer" content="origin">`, but also on individual links.

## Linking <a name="linking"></a>

Links aka `<a>` tags can include a more specific referrer policy than your site wide one you set using the previous header.

This can be controlled using the `referrerpolicy` attribute, for example:
```
<a href="http://example.com" referrerpolicy="origin">
```
This can also be used on `<a>`, `<area>`, `<img>`, `<iframe>`, `<script>`, or `<link>` elements.

Or alternatively using the `rel` attribute to remove any referrer, this would be my recommended pattern.
```
<a href="http://example.com" rel="noreferrer">
```

This can also be used on `<a>`, `<area>` or `<link>` elements.

## Bonus: Server header <a name="server"></a>

As this is a fairly short and sweet blog I thought I would include a bonus header!

The `Server` header, this is usually used to indicate what is serving up your website. Often a form of advertising about the technology you are using.

This can often include the version of the tools used to serve your website. You should avoid this and including any default information in this header as it could lead to vulnerabilities being found in that version of the tool.

I would recommend removing the header if possible or overriding it with your own value, as then no information is leaked!

## Summary <a name="summary"></a>

In summary, setting a few additional headers when serving up your site can in this case also the privacy of your users and reduce any leakage of information to third parties. It reduces the amount of attack surface there is for attackers and prevent common attacks on websites.

Set those headers now!

Happy Building!
Projects to become a Fronted Master
Tags: programming, javascript, html, react
Published: 2021-05-28 20:24:02

Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data. A person who does this is called a front-end developer.

Being a frontend developer, you do one of the most important tasks for your company. To become a expert in it, it takes a lot of tasks and efforts. 

follow me on [Twitter](https://twitter.com/chetanistaken) & [Github](https://github.com/itschetan)


Here are some projects that you can do to master frontend development- 

1.**Design and code your own portfolio website.**

It is the only place, where you can show your skills, personality & your work. This needs to be different. If you don't know anything about designing a website, make sure to take help from Dribbble, they are amazing thousands of designers around the world are posting their design there you can take inspirations from  there and put your 100% effort in coding the websites.

2.**Make a beautiful open-source project**

Take Hard designs from Dribbble as a project, and try your best to copy it by coding it. This could make your GitHub-profile a lot more strong as well as can make your skills better.

######Subscribe to Newsletter (Get Amazing Content, which is not available here), https://linenewsletter.substack.com/

3.**Make a todo list app**

Try to make an todo list for yourself. Open-Source it and make sure to add all the features that you want from an todo-list app and Walla, you have your own app which is different from others.

4.**Make different projects with Angular AND VueJS**

One of the best JavaScript libraries, try to make make and app with VueJS and Also try to make an app from Angular 8.

5.**Make A Blog**

Make a using HTML,CSS and JavaScript.

###**END**

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1b369h9xq2skxjgdxkz.png)](https://linenewsletter.substack.com/)
Small tips that will help you to use ActiveRecord callbacks more efficiently
Tags: rails
Published: 2021-05-28 20:06:09

> Everything there is related the Rails 6 but also actual for 5 and 4.

-  **Do not use callbacks if you can** -  callbacks are incredibly helpful when you need to add a function that should run before/after/around specific lifecycle events. If they do not depend from the context it is possible the best choice. But if the model is used almost everywhere and there are a lot of create/update/destroy events adding new callbacks can drastically reduce the application performance. So I recommend to add them only if you absolutely confident and aware about consequences.

___

> Despite the upper warning, you are decided to add a callback to your model. There are a few things that I recommend to keep in mind.

___

- Use [saved_change_to_attribute?](https://api.rubyonrails.org/classes/ActiveRecord/AttributeMethods/Dirty.html#method-i-saved_change_to_attribute-3F) in `after_save`/`after_update` to except unnecessary calls. - If your callback should be called only after changes in a limited set of attributes, this method can help with it. For example, you have the model User with fields: email, password, first_name and last_name. The goal is to update related certificates only when the *first_name* or *last_name* changed.

```ruby
class User < ApplicationRecord
  after_update :update_certifcates,
             if: Proc.new{ saved_change_to_first_name? || saved_change_to_last_name? }

  private

  def update_certificates
    User::UpdateCertificates.call(self)
  end
end
```

- Use more suitable methods whenever possible - instead of using common methods like: `*_save`, `*_commit`, `*_validate` is better to use more specific: `*_update` or `*_create`. It will also reduce the count of calls.

- Use `after_commit` instead of `after_save` when you want to complete the action - If something went wrong in the `after_commit` callback there will be an error but the action will be finished because it is called when changes are already flushed to the database. Other callbacks will rollback changes, sometimes it can be useful.

- Do not run expensive operations in callbacks - better to move them into [ActiveJobs](https://guides.rubyonrails.org/active_job_basics.html)


If you know other problems with callbacks or know how to make live easier with them, please share in comments.

___

### Some useful links

- Rails guide about callbacks — [Active Record Callbacks](https://guides.rubyonrails.org/active_record_callbacks.html)
- Rails 6 Callbacks API - [ActiveRecord::Callbacks](https://api.rubyonrails.org/classes/ActiveRecord/Callbacks.html)
- Kelly Sutton  — [5 Rails Callbacks Best Practices Used at Gusto](https://engineering.gusto.com/the-rails-callbacks-best-practices-used-at-gusto/)