teleren/devto huggingface dataset:
Dev log for Wonder Wanderer 2: Day 7 #LOWREZJAM 😁
Tags: devjournal, javascript, challenge, gamedev
Published: 2021-08-07 22:33:43

### What have I done today? ###
I managed to try some new mechanics and hazards, like deadly blocks and changing layouts of the map with one button and also screen wrap. I think to remove jumps and use better the level's gimmicks. I tried even stuff like bouncing, dashing and reducing to zero the gravity but that doesn't work for now. I wanted to change palettes but I think to stick with that one. Hope to finish testing tomorrow and starting making officially the game.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njp9bpe47c6x004ly06l.gif)
Building an App Was Hard. 🤯 But Stop Making Excuses.
Tags: startup, motivation, mobile
Published: 2021-08-07 22:10:40

## Top 4 reasons not working on your MVP

So this 🤪 crazy app idea has been growing in your head lately. Yet nothing has been done about it, as you don't see clearly how nor when building it.

Business and Market reasons aside, the most common reasons (/cough excuses) not starting working on your crazy idea Minimum Viable Product (MVP) are in my opinion:

1. 🧍‍♀️ **Being alone**

    Ok you don't have a team yet, but suck it on.
    If/when reaching for potential cofounders or hires later in the process, you'll be glad to have your MVP. It'll help convey both your idea and investment in the project.

1. ⌛ **Takes too much time**

    Sure. Creating something new and different takes time. But [what if?](#what-if) is took less than expected?

1. 😫 **Technology fatigue**

    Behind hypes, technology cycles and experts contradictory opinions, there can be some technology fatigue, which will tickle beginners to tech veterans.
    Poundering what language, framework and services to use in a project can be daunting and exhausting. But [what if](#what-if) the fatigue were no more?

1. 🤯 **Cognitive complexity**

    It's actually sane to think that there is a lot of area to cover for an app to work, and that a lot of knowledge in multiple areas are needed. On top of the actual app development, there is also the question of the database, of the APIs, of the security, authentication, production debugging, etc.
    But [what if](#what-if) this cognitive complexity were already tackled by others?

> Are you thinking of a 5th reason? Please drop your suggestions in the comments 💬
> Also, the 🍰 cake is a lie.

---

## These reasons are outdated <a name="what-if"></a>

What if all these reasons were no more? (Well... Apart being alone, you're on your own mate)
What if there were a kind of a shortcut?

As lots of us have been tickering, playing and working with lots of technology bits, some of us have converged all this know-how into ready-to-use stacks, that help bootstrapping your next projects.

At [codename](https://codename.co), we have been developing our take of what a stack should be.

_Featuring **[LOLstack](https://stack.lol)**, your ready-to-dev & ready-to-deploy software stack._

---

**Building an App Was Hard. 🤯 Now Stop Making Excuses.**
[JS newbie] Array().fill() is marvellous but...don't do this.
Tags: javascript, python
Published: 2021-08-07 21:03:26

OK, the tragedy was like this.

Everyone knows how convenient the javascript Array `fill()` is to let users initialize array data elegantly. Perfect invention.

``` js
// create an array of length 6 with all elements equal to 0.
let arr = Array(6).fill(0)
``` 

It is even extremely useful if for creating a range of integers for iteration or some other fancy operations.

``` js
// you must fill the array or there won't be keys
Object.keys(Array(6).fill(0)).map((i) => dosomething(i));
```

Recently I was fascinated by these kinds of functional programming styles and mistakenly assumed that is was similar to Python `collections.defaultdict()` which lets you pass a primitive or an object as a factory so that it will automatically new an independent value for each entry in the array.

Unfortunately, it is not the case.

`fill(0)` works perfectly fine since the argument is a primitive. However, if you pass something like an object `{}`, **Every entry in the array will actually contain(or point to?) the same object.** Every element will be the **same**.

That is to say, if you try to modify one of the element object(like, assign or change some value of a key), every single element will be modified as well, which is very unlikely to be your original intention.

``` js
> arr = Array(6).fill({})
[ {}, {}, {}, {}, {}, {} ]
> arr[3]['someKey'] = "hello"
'hello'
> arr
[
  { someKey: 'hello' },
  { someKey: 'hello' },
  { someKey: 'hello' },
  { someKey: 'hello' },
  { someKey: 'hello' },
  { someKey: 'hello' }
]
```
Boom.

This problem is very similar a classical trap in Python when you try to initialize an array of array in this very intuitive but disastrous way:

``` python
>>> arr = [[0] * 3 ] * 3
>>> arr
[[0, 0, 0], [0, 0, 0], [0, 0, 0]]
>>> arr[1][1] = 777
>>> arr
[[0, 777, 0], [0, 777, 0], [0, 777, 0]]
```

Here the first level `[0] * 3` is fine, but the second multiply is actually multiplying the reference to the array `[0] * 3`, therefore changing one element in one array will lead to changing all of the corresponding element in other arrays (because they are the same reference!)

OK, everyone can start to laugh!
10 Alternativas al uso de <div> en HTML
Tags: html, dev, div, alternativas
Published: 2021-08-07 20:51:43

El elemento <div> es fundamental en HTML para dividir y estructurar el contenido de una página web. Para leer más: [Blog CodeChappie](https://www.codechappie.com/blog/10-alternativas-al-uso-de-div-en-html)
10 Tips For Clean Code
Tags: codenewbie, beginners, codequality, tutorial
Published: 2021-08-07 20:49:27

{% user cleancodestudio %}
[![Twitter Follow](https://img.shields.io/twitter/follow/cleancodestudio.svg?style=social)](https://twitter.com/cleancodestudio) 

---

<center>

## 10 Tips for Clean Code 

</center>

---

<center>
![down arrow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtysl91txx7r5rzj2i6i.png)
</center>

{% twitter 1424089754006695941 %}

<center>
![small down arrow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htcfabh4porzhav69gxi.png)
</center>

{% twitter 1424090538685386756 %}

<center>
![small down arrow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htcfabh4porzhav69gxi.png)
</center>
{% twitter 1424091698758656012 %}
<center>
![small down arrow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htcfabh4porzhav69gxi.png)
</center>
{% twitter 1424092656515362822 %}
<center>
![small down arrow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htcfabh4porzhav69gxi.png)
</center>
{% twitter 1424090135214399490 %}
<center>
![small down arrow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htcfabh4porzhav69gxi.png)
</center>
{% twitter 1424091952736313348 %}
<center>
![small down arrow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htcfabh4porzhav69gxi.png)
</center>
{% twitter 1424090768113815557 %}

<center>
![small down arrow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htcfabh4porzhav69gxi.png)


<center>
[Follow Clean Code Studio on Twitter for more!](https://twitter.com/cleancodestudio)
</center>

<center>
![small down arrow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htcfabh4porzhav69gxi.png)
</center>




<center>

[More Clean Code Tips](https://cleancode.studio/clean-code)

</center>

<center>

(Note: Dev.to wouldn't let me put all 10 Clean Code twitter tips in this post. Remaining tips are posted in the comments section!) 


![small down arrow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htcfabh4porzhav69gxi.png)
</center>
How to make your React app a Chrome extension
Tags: tutorial, react, webdev
Published: 2021-08-07 20:34:15

## Into 💨

Chrome extensions can be really handy as they provide added functionality and tools for users. In this post we're going to make a simple chrome extension pop-up, so lets get started 

## Details

- Create the React app
This creates the necessary react files to make a chrome extension

```
npx create-react-app my-app

``` 

- Take a look at the manifest .json

Create-react-app generates a ***manifest.json***  for you in your public folder so all that's left is to edit, the manifest tells chrome how to create and install the extension. The manifest contains the file to render the popup, configurations for the title, logo, description and other capabilities we'll talk about in future posts. For now, alter your ***manifest.json*** to this: 

```
{
"manifest_version": 2,

"name": "My App Extension",
"description": "A basic chrome extension of react app. nothing too tedious",
"version": "0.1",

"browser_action": {
  "default_popup": "index.html",
  "default_title": "Open the popup"
},
"icons": {
  "192": "logo192.png",
  "512": "logo512.png"
},
"permissions": [
]
}
``` 

- Build the extension

Run the code below which generates a ***build*** folder in the root of our app


```
npm run build
``` 

- Install in Chrome extension
To test what we've done so far we have to install the extension on chrome. Go to the address bar and type:

```
chrome://extensions/
``` 
this will take you to the chrome extensions page where you will **toggle on** the developer mode.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628366681186/hRqi2hYvx.png)

After that,

> Click the **Load unpacked extension** button and select the build folder of your project.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628366708076/o25vA4bflI.png)

## Note:

If you try to open the extension there is an error in the extension page which should look like this:


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628366857881/H3UwNGfYx.png)
 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628366963206/bi9ntMzdE.png)

To fix this, we need to take that sha value and place in our ***manifest.json*** as below: 

```
{
"manifest_version": 2,

"name": "My App Extension",
"description": "A basic chrome extension of react app. nothing too tedious",
"version": "0.1",

"browser_action": {
  "default_popup": "index.html",
  "default_title": "Open the popup"
},
"icons": {
  "192": "logo192.png",
  "512": "logo512.png"
},
"content_security_policy": "script-src 'self' 'sha256-copied-value'; object-src 'self'",
"permissions": [
]
}
``` 

> Rebuild the app, go back to the extensions page then refresh your extension and you're done 👌


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628367473773/wOH6dXHfc.png)


## Conclusion 🌟🌟

You've come this far and created a basic chrome extension, nicely done 🔥🔥

![end giph](https://media.giphy.com/media/l41YmQjOz9qg2Ecow/giphy.gif)
Why Constant Time To Access Array Elements ?
Tags: array
Published: 2021-08-07 20:26:44

Hey There !! Ever Wonder Why it takes constant Time to Access Array Elements. Here are the Possible Answers 

1- To Access an array Element, The Address of an Element is computed as an offset from the base address of the array and one multiplication is needed to compute what is supposed to be added to base address to get the memory address of the element.  

2- first the size of an element of the data type is calculated and then it is multiplied with the index of the element to get the value to be added to the base address.

3- This process takes one multiplication and one addition. since these two operations take constant time. We can say that array element can be accessed in constant Time.
How I  take notes for YouTube videos
Tags: youtube, note, obsidian, markdown
Published: 2021-08-07 20:24:08

[YiNote](https://yinote.co/) is a free Chrome extension to take notes as you watch through a YouTube video. It has saved me countless hours in going to and fro between two screens to take notes.

Despite being an incredible tool to keep your video notes organised in a single place, I really did not like the way it exports notes in markdown format.

I came across a blog by Nicole van der Hoeven about her [YiNote to Roam Research Workflow](https://nicolevanderhoeven.com/blog/20201215-yinote-to-roam/). This inspired me to build a similar thing for markdown editors.

I wrote this quick dirty NodeJS implementation of it.
{% gist https://gist.github.com/Srinjoy-Santra/5df6ee17f59ad3c1391df86ef5504602 %}

I run this script to use the exported json file from YiNote to turn all my video notes into a customised markdown format.

And the end result is this in [Obsidian](https://obsidian.md/) Editor!!
![Obsidian yt note](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4desn0kufnyhq6t0wlw1.png)
Use DateTime package in Python
Tags: python, programming, codenewbie
Published: 2021-08-07 20:06:57

It is important to understand the DateTime data type in python instead of creating our own data type for date and time. Python provides the DateTime data type by using the DataTime Package, which we will discuss in detail. 
Read More here [https://www.alixaprodev.com/2021/08/how-to-use-datetime-package-in-python.html]
Display "FREE" if the price is zero ($0.00) or not set in Woocommerce?
Tags: woocommerce, displayfree, wordpress
Published: 2021-08-07 19:53:02

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

<i>I believe FREE looks good than $0.00</i>

Do you need to replace the default WooCommerce pricing label for a free product? Perhaps you offer some, if not all, of your products at no cost. Instead of showing the default WooCommerce price label of $0.00, you want to show custom text, such as the word <strong>“FREE”</strong> or <strong>“Download Now”</strong>.
<br/>
We really didn’t like showing a $ value of zero and so we replaced it with the text “FREE”. It turns out, that it’s really simple to do in WooCommerce.
<br/>
Do these changes in child-theme’s function.php
If you have not a child theme then create a backup using Updraft Plugin and then follow the below steps. or you can contact your website theme developer for a Child-theme they can provide you a child-theme.
<br/>

<pre>
/**
* @snippet       Display FREE if Price Zero or Empty - WooCommerce Single Product
* @how-to        Display FREE if the price is zero
* @author        Hassam
* @testedwith    WooCommerce 3.8
* @follow        @devhassam
*/
  
add_filter( 'woocommerce_get_price_html', 'wooc_price_free_zero_empty', 9999, 2 );
   
function wooc_price_free_zero_empty( $price, $product ) {
    if ( '' === $product->get_price() || 0 == $product->get_price() ) {
        $price = '<span class="wooc-price-amount amount amount-free">FREE</span>';
    }  
    return $price;
}
</pre>


Breaking it down, we’re just checking the price of the product to make sure that it is “empty” i.e. free, and then if it is, returning different label text which in the case above is the word “FREE”.
IDK why I'm doing this again.....
Published: 2021-08-07 19:10:10

I think I just need a cool markdown-based blog platform to dump my tech notes & shitty code & tricky problems for future reference and backup.

``` sh
# And code formatting!
# This function is so god damn important and Medium just doesn't give a shit to it.
rm -rf /
```
I remember that the last time I do this was ages ago......when Logdown was still alive.

After that I have been failing to find the reason of doing it again because I didn't think it's meaningful to share my struggles and knowledge any more.

Probably it's time to try again.

Most of time I use private Notion pages to note things, but I will try to share some interesting/exasperating/enigmatic findings here.
Handle CSS units system in a type-safe way using TypeScript
Tags: typescript, javascript, css, react
Published: 2021-08-07 19:00:29

I've created a [library](https://www.npmjs.com/package/@karibash/pixel-units) that can handle the CSS unit system in a type-safe way with TypeScript, and convert units from one to another.
If you find it useful, I'd appreciate it if you'd give it a star in the [repository](https://github.com/Karibash/pixel-units).

## Install

```
npm install @karibash/pixel-units
```

## Usage

### Handle the CSS unit system in a type-safe

```ts
import { Unit } from '@karibash/pixel-units';

const pixel: Unit<'px'> = '16px';
const rem: Unit<'rem'> = '1rem';
console.log({ pixel, rem });
// -> {pixel: "16px", rem: "1rem"}
```

### Convert CSS unit systems to each other

```ts
import { Unit, convertUnits } from '@karibash/pixel-units';

const pixel: Unit<'px'> = '32px';
const rem = convertUnits(pixel, 'rem');
console.log(rem);
// -> "2rem"
```

### Extract numeric values and units from the unit system

```ts
import { Unit, splitUnitValue } from '@karibash/pixel-units';

const pixel: Unit<'px'> = '32px';
const { value, unitSuffix } = splitUnitValue(pixel);
console.log({ value, unitSuffix });
// -> {value: 32, unitSuffix: "px"}
```

## Example of use in React

As an example, we will define a Wrapper component that can dynamically switch between the following paddings.

```tsx
import React from 'react';
import { Unit } from '@karibash/pixel-units';

type Props = {
  padding: Unit<'rem'>
}
const Wrapper: React: FC<Props> = ({
  children,
  padding,
}) => {
  return (
    <div css={{ padding: `${padding}` }}>
      {children}
    </div>
  );
};

export default Wrapper;
```

The padding property can be restricted so that it can only accept rem units.
If a value other than rem unit is specified, a compile error will occur.

```tsx
import React from 'react';
import { Unit } from '@karibash/pixel-units';
import Wrapper from 'components/wrapper';

const Page: React:FC = () => {
  return (
    <>
      <Wrapper padding={'2rem'}>
        rem padding only
      </Wrapper>
      <Wrapper padding={'16px'}>
        compile error
      </Wrapper>
    </>
  );
};

export default Page;
```
Rails 6 - Active Storage changes

Published: 2021-08-07 18:41:05

Active Storage was introduced in Rails 5.2. In Rails 6, there are enhancements done to Active Storage.

Let’s explore them.

####**mini_magick replaced by image_processing gem**
In Rails 5.2, Active Storage was using mini_magick to handle image resizing (variants).

In Rails 6, a new gem called image_processing is used by default to handle image variants. (commit)

The image_processing gem has below advantages:

* New methods #resize_to_fit, #resize_to_fill, etc also sharpens the thumbnail after resizing.

* It fixes the image orientation automatically. This can be referred here.

* It provides another backend libvips that has significantly better performance than ImageMagick. With ImageMagick, resizing and sharpening a 1600x900 image to 800x800 is 1.87x slower, and to 300x300 is 1.18x slower. On libvips it doesn’t go above 1.20x slower, on average it’s only about 1.10x slower.

####Fix for has_many_attached field in update query

Let’s say we have a `User` class and it has field images. Users can upload multiple images to their profiles. So we add `has_many_attached` method to User class as shown below

```
class User < ApplicationRecord
  has_many_attached :images
end
```

update query replaces the existing collection instead of appending to the collection.

```
user.images.attach(filename: "profile_pic.jpg")

user.images.count
=> 1

blog = ActiveStorage::Blob.create_after_upload!(filename: "updated_pic.jpg")
user.update(images: [blog])

user.images.count
=> 1
user.images.first.filename
=> "updated_pic.jpg"
```

####Note:

* We can append files by using the attach function.

* More changes related to Active Storage can be found [here](https://edgeguides.rubyonrails.org/6_0_release_notes.html#active-storage).
PHP _call 🧙‍♂️(Lesson 3: PHP Magic Methods)
Tags: php, laravel, tutorial, webdev
Published: 2021-08-07 18:33:34

{% user cleancodestudio %}

[![Twitter Follow](https://img.shields.io/twitter/follow/cleancodestudio.svg?style=social)](https://twitter.com/cleancodestudio) 

---

> _Today we're diving into the powerful __call PHP magic method_

---

{% youtube LH-UCiPseP8 %}

---

## PHP magic __call method

---


Imagine being able to call any method with any number of parameters on an instance of a class...


Well today we're going to learn how you can! 

---

![PHP Magic method breakdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1a971gqu82b7ajn7znsr.png)
 

![Another PHP magic method breakdown example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qep1ceqslon1pgjf7h6b.png)


 
 ![$parameters example of PHP magic methods](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bs26jqcvwsz31u9c62yv.png)
 
 
 ![$parameters and $method PHP magic method call together](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ilhu5bru2ql3arznlhna.png)



 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dep5em581yks6ld6nny7.png)
 
---

{% youtube LH-UCiPseP8 %}

---


[PHP __call magic method](https://www.cleancode.studio/series/php-magic-methods/episodes/3)

---

{% user cleancodestudio %}

>
> Did you know I have a newsletter? 📬
>
> If you want to get notified when I publish new blog posts or
> make major project announcements, head below and do what you do!
>

{% codepen https://codepen.io/zhorton34/pen/BaRPYdB %}
Empleos en Data y Analytics LATAM — Agosto 2021 - I
Published: 2021-08-07 18:19:04

Te compartimos las ofertas laborales del mes para áreas de Data, Analytics y Cloud 👨‍💻👩‍💻

✅ [Data Engineer - MightyHive (Argentina)](https://www.linkedin.com/jobs/view/2307211113/?alternateChannel=search&refId=DQGFX8H%2FU1Zt5NphPWSldQ%3D%3D&trackingId=pN4R1ot2Tc9Pci4JrW8sjw%3D%3D&trk=d_flagship3_search_srp_jobs)
✅ [Data Engineer - Luxoft (México)](https://www.linkedin.com/jobs/view/2669191990/?alternateChannel=search&refId=DQGFX8H%2FU1Zt5NphPWSldQ%3D%3D&trackingId=XMhJcUjMTmaM2kz3H5cn6w%3D%3D&trk=d_flagship3_search_srp_jobs)
✅ [Data Scientist - Entel (Perú)](https://www.linkedin.com/jobs/view/2666612716/?alternateChannel=search&refId=DQGFX8H%2FU1Zt5NphPWSldQ%3D%3D&trackingId=ra%2B4G%2FUEMMQzCvNu%2BXFHSw%3D%3D&trk=d_flagship3_search_srp_jobs)
✅ [Data Analyst - OTSI (Costa Rica)](https://www.linkedin.com/jobs/view/2669685169/?alternateChannel=search&refId=7aM%2FC%2BOu%2BrnfHm%2BbcToxJA%3D%3D&trackingId=%2BfbsuNdamJFV%2Fz37NOjmRg%3D%3D&trk=d_flagship3_search_srp_jobs)

Aprende, aplica y crece en proyectos de Data y Analytics en Cloud.

Visita nuestra página:
👉🌐 datahack.la