teleren/devto huggingface dataset:
Breakpoint rendering in web components
Tags: javascript, webdev, webcomponents
Published: 2021-12-01 21:31:54

Tailoring a user experience for different devices can get complicated. There are many approaches to rendering a different view for mobile, tablet and desktop users.

This post presents a way to offer a tailored render for different breakpoints in the same component.

The benefit of this approach is useful when you need to render the same content components in an app and have them render a specific set of HTML based on viewport size.

## Define the breakpoints

Firstly, the breakpoints need defining. This sets the viewport widths and the render function to use at this breakpoint.

```js
const breakpointConfig = {
  reactive: false,
  breakpoints: {
    992: { method: 'renderTablet' },
    768: { method: 'renderMobile' },
    1200: { method: 'renderDesktop' }
  }
}
```

The `reactive` property will make the component automatically re-render when the viewport width changes - this is optional.

Each breakpoint has a number key for the width followed by an object containing a `method` to use at that viewport breakpoint.

The above config results in the following media query list.

```css
only screen and (max-width: 768px)
only screen and (min-width: 769px) and (max-width: 992px)
only screen and (min-width: 1201px)
```

## Component usage

Using the above breakpoint config, a component can be created with render methods for each breakpoint.

```js
import { createCustomElement, withBreakpointRender } from 'https://cdn.skypack.dev/ficusjs@3'
import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@3/uhtml'

createCustomElement(
  'breakpoint-component',
  withBreakpointRender(breakpointConfig, {
    renderer,
    renderTablet () {
      return html`<span>Breakpoint render tablet</span>`
    },
    renderMobile () {
      return html`<span>Breakpoint render mobile</span>`
    },
    renderDesktop () {
      return html`<span>Breakpoint render desktop</span>`
    }
  })
)
```

To view the component in action see this Codepen - https://codepen.io/ducksoupdev/pen/WNZbWbq?editors=1010

> Try resizing the Codepen panel!

## Summary

Conditionally rendering HTML based on the viewport width can be a powerful way to offer a tailored user experience.

Some examples of using this approach are:

- Render a table on desktop and list view on mobile
- Conditionally hide functionality on smaller screens
- Show tabbed navigation on mobile and sidebar on desktop
- Maintain state within a component presented in different ways

For more documentation visit https://docs.ficusjs.org/extending-components/with-breakpoint-render/

Try it in your next project!
Square Inc changing name to Block, as the new holding company.
Published: 2021-12-16 22:34:22

---
title: Square Inc changing name to Block, as the new holding company.
published: true
date: 2021-12-01 21:30:48 UTC
tags: 
canonical_url: https://devfaster.io/post/Square-Inc-changing-name-to-Block-iHIUn
---

Square might be changing its name to Block! This is awesome news for Square fans or stock holders since it means that Dorsey is now going to focus on growing Square business. 

 

You can find the new site at block.xyz

 

This is so Exiting!

[**block.xyz**](https://block.xyz/)
Advent of Code 2021
Tags: adventofcode, python
Published: 2021-12-01 21:22:41

```
                      ~   ~  ~ ~~ ~~~~~~~~~~~~~~~
                                           ..''''
```

I'll be posting here my solutions for [AoC 2021](https://adventofcode). Follow along!

### --- Day 1: Sonar Sweep --- [[link]](https://adventofcode.com/2021/day/1)

For part 1, we're given a list of numbers and are asked how many times the numbers increase relatively to the previous number. The solution is pretty straightforward: loop over the list, compare each item with the previous, count the occurrence where it's greater than the previous:

```python
with open(Path(__file__).parent / "input.txt") as file:
    previous = int(file.readline())

    increases = 0
    for value in map(int, file):
        increases += value > previous
        previous = value
    return increases
```

For part 2, we're asked to consider the sum of a **three-measurement sliding window**. I thought I would need a `deque` to keep a list of 3 values, or use list comprehension + slices, when I remembered about [these recipes](https://docs.python.org/3/library/itertools.html#itertools-recipes) in the python docs. I copied over an implementation for a generator of these windows and used for my solution:

```python
def sliding_window(iterable, n):
    # sliding_window('ABCDEFG', 4) -> ABCD BCDE CDEF DEFG
    it = iter(iterable)
    window = collections.deque(islice(it, n), maxlen=n)
    if len(window) == n:
        yield tuple(window)
    for x in it:
        window.append(x)
        yield tuple(window)

with open(Path(__file__).parent / "input.txt") as file:
    it = sliding_window(map(int, file), 3)
    previous = next(it)

    increases = 0
    for window in it:
        increases += sum(window) > sum(previous)
        previous = window
    return increases
```

For the next days, I'm adding [`more-itertools`](https://pypi.org/project/more-itertools/) to have these recipes readily available!

Check my repository for the [final code for day 1](https://github.com/rbusquet/advent-of-code/blob/main/2021/01/day1.py). See y'all tomorrow!
Create and Drop MongoDB Database
Tags: mongodb
Published: 2021-11-29 11:31:09

Learn commands to create and drop a MongoDB database.

## Create a database
The below command is used to create or access a MongoDB database.
```
use <database-name>;
```

Replace **\<database-name\>** with the name you want to keep to your database. 

The above use command does not create anything until you insert the first record. Here is an example of an insert command. In this example, we are inserting a task into
the tasks collection.

```
db.tasks.insertOne({
    name: "Learn Chapter 1",
});
```

The below command verifies the database creation. It returns names and sizes of all the
databases.
```
show databases;
```

You will see some databases other than todo. They are created by default by MongoDB on installation and are used for user management and system purpose.

---

## Drop a database

Run the following commands in the terminal below to drop a database.

Select the database that you want to drop.
```
use <database-name>;
```


Drop the selected database
```
db.dropDatabase();
```

 This command will remove all the collections and documents.

You may see the below error if you don’t have enough permission to drop a database.

```
MongoServerError: not authorized on todo to execute command { dropDatabase: 1, lsid: { i
> d: UUID("1479ef4b-5e3f-42df-aaf8-93234469e6dc") }, $db: "todo" }
```

---

> I have published an e-book on MongoDB, this e-book will help you learn MongoDB core concepts like queries, documents, embedded documents, operators, etc. with advanced features like CRUD Operations, Bulk Write Operations, GridFS, Indexing, Aggregation Pipeline, Authorization, etc. This e-book includes query examples with each chapter to practice database operations.
> [Check out here](https://onkarjanwa.gumroad.com/l/PgxIb)
Laravel Routes 🚀 - Visual Code Extension
Tags: laravel, tooling, productivity, php
Published: 2021-12-01 21:10:53

> laravel routes is amazing Visual Code Extension to help you write your routes without try to remember it's expressions.

[Install Laravel Routes](https://marketplace.visualstudio.com/items?itemName=MahmoudShahin.laravel-routes&ssr=false#overview)

## Screenshot
![Image description](https://raw.githubusercontent.com/mahmoudshahin1111/laravel-routes/master/assets/1.gif)
![Image description](https://raw.githubusercontent.com/mahmoudshahin1111/laravel-routes/master/assets/2.gif)
 

## How Works

- Open the laravel project folder as a root folder otherwise you 
- will need to edit the User Setting
- Press LEFT CTRL + SHIFT + P
- Choose LaravelRoutes: Start
- Press Enter.
- Try to write any route path inside double quotes 
```
/* Your route Here */
```
you will see a list of suggested routes with the same name.

## User Settings
 
```
   "routes.RoutesFolderPath": "/routes",
   "routes.ProvidersFolderPath": "/app/Providers"
```
Hash Tables? How to avoid IF/Switch in JS
Tags: javascript, programming, hashtables, tutorial
Published: 2021-12-01 21:00:18

Easily [they are ](https://en.wikipedia.org/wiki/Hash_table) associative data structures that allow you to create list paired values, retrieving from the key.

**Why to use them?**
Because is more fast to: space, search, insertion and delete operations. Javascript Object is the sample of hash tables.

```
let Obj = {
Juan: "developer",
Shellby: "recruiter"
}
```

Javascript has implemented a way to approach the hash tables using `map` to store the data.

```
const newCollection = new Map();
newCollection.set("Juan", "developer"); // Paired
newCollection.set("Marina", "developer");
newCollection.set("Shellby", "recruiter"); // Paired

console.log(newCollection.get("Juan")); // -> Developer
console.log(newCollection.size); // -> 3
```

So, as you can see above, Map use `get` and `set` to pair the Object. But as difference using Map you can't overwrite their values because it violates the inherited method property `hasOwnProperty()`.

**How to IMPLEMENT a Hash Table Data Structure in Javascript?**
Let's make an exercise with Marvel Comic characters vs. Characters. Implement a logic to define who wins a fight between 'Loki' character assuming who's attacking:
 
|attack|**Loki must be:**|
|:-----|:-----|
|Iron-Man|Magneto|
|Thor|Odin|
|Hulk|Thanos|
|Wolwerine|Magneto|

Here is the answer. Usually you could follow this pattern generated by:
```
const attack = "Iron-Man";
const Loki = "";

if(attack === 'Iron-Man'){
 loki = 'Magneto'; //-> Loki custom as Magneto;
}else if(attack === 'Hulk'){
 loki = 'Thanos';  //-> Loki custom as Thanos;
}..etc..
else{
loki='loki';
}

``` 

In this point, many developers can to think about refactor to switch because it works as:
```
switch(attack){
   case 'Iron-Man':
   loki = 'Magneto'
   break;

   default:
   Loki = 'Loki'

(.. so on)...
}

```

**Implementation HashTable:**
You could use `attack` as index for the hash table to recover the value and refactor as clean code below:

```
const attack = 'Hulk'
```

```json
const LOKI_CUSTOM = {

'Iron-Man': 'Magneto',
 Thor: 'Odin',
 Hulk: 'Thanos',
}
```

```
const LOKI_DEFAULT = 'Loki'
const loki = LOKI_CUSTOM[attack] || LOKI_DEFAULT

console.log(loki) -> Thanos

```

It also allow you to export and re-use the object, and it can be implemented with methods and ternary functions! e.x:

```json
const LOKI_CUSTOM = {

'Iron-Man': () => 'Magneto',
 Thor: () => 'Odin',
 Hulk: () => 'Thanos',
}
```

```
const loki = LOKI_CUSTOM[attack]
 ? LOKI_CUSTOM[attacks]()
 : LOKI_DEFAULT
```
Advanced Git: Worktree
Tags: git, productive, tools, shell
Published: 2021-11-24 19:57:14

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4g6zfyqhi7s9j8we8z9.jpg)

One of my favorite unknown features of Git is the **worktree**. A part from the Git toolbelt which allows us to have multiple checked out branches with just one repository.

This is perfect for code reviews where you actually want to dig into the code and don't want to use the webfeatures of Git(lab|hub) or other alternatives.

Enough the words, lets see how this works...

## Git Worktree

### What we could get

```
$ tree
project_name/
 |- master/
 |- develop/
 |- feature/
 |   |- ABC-123_implement_death_laser/
 |- hotfix/
     |- ABC-42_solve_climate_crisis/
```

Each branch has it's own Git repository, but all share the repository metadata.

### How do we get there?

1. create project folder: `mkdir project_name` and `cd` into the folder `cd project_name`
2. clone your repository, but with some feature flags: `git clone --bare GIT_URL .bare`
  - this clones from `GIT_URL` to the local hidden folder `.bare`
  - `--bare` makes it so, that we don't get any specific branch
3. create the `.git` file and tell it (by writing in it ;) where our bare repository is:
   ```
   # project_name/.git
   gitdir: ./.bare
   ```
   Now our repository knows where all the desired metadata can be found
4. Lets add our desired branches: `git worktree add develop` or `git worktree add featre/some_feature`. The `/` creates automagically new folders for us.

## Additional helpful stuff

### Remove a single branch/folder

**Two possibilities:**
1. remove the folder just like every other folder and run `git worktree prune` after that
2. `git worktree remove BRANCH_NAME`

### Show all worktree folders

```sh
git worktree list
```

### Create a branch folder outside of the repository folder

Yes. this is indeed possible. Say, you have your project **cookie_bakery** in your project folder: `/home/lokidev/projects/cookie_bakery`.
But now you want to have new branch in which you  have a huge project which shouldn't be INSIDE this cookie_bakery folders, but it's really important and needs to be on some external harddrive. Here you go:

```sh
git worktree add -b BRANCH_NAME FOLDER
# e.g.
git woktreee add -b feature/super_important /media/usb-drive/important
```

### Move/Rename branch-folder

```sh
git worktree move SOURCE_FOLDER DESTINATION
```

## More awesome Git stuff?

There is more awesome stuff in the Git toolbelt like `bisect` which helps you find the exact moment in the git history, where an error was introduced.

Another nice feature is hunk based adding/committing of files and changes.

If you want more of this, just tell me. If you have things I can make better: even better!

## Additional Links

* [Official Documentation](https://git-scm.com/docs/git-worktree)
Linux Commands that you need to know 
Tags: linux, programming, terminal
Published: 2021-12-01 20:21:16

`ls`
Helps you to list the directories

`pwd`

Helps to know the exact directory you are in

`alias`
This helps you to create your own shortcuts of commands.
*Example:*
```alias cls=clear```

> One tip: Install tmux in linux. If you want me to make a detailed post then make sure to comment down below
I added two new feature to my TodoApp
Tags: pwa, todoapp, sharetargetapi
Published: 2021-12-01 20:14:53

---
title: I added two new feature to my TodoApp 
published: true
description: I have recently pushed the code that add two feature to todoApp
tags: pwa, todoapp, sharetargetapi
cover_image: https://todo.shakiltech.com/images/screenshots/todo-home-tasks-page.png
---

Hello friends, I am Shakil Alam. I mostly work with Laravel and Vue, and very interested in PWA(Progressive Web Application).

We will talk about that last one in this post.

In the early day of coding journey, I had created a usual todo App.

But recently I feel need for a todo App to better management and start making as simple and user friendly as possible, and made it the app that I can use without being distracted.

Recently I found two issue in it.
When I add task with link, I want to visit link with the app.

And now I added function that do this. Just double click on the task with link. An easy one just a dblClick event listening and pattern matching.

Second issue was, sometime I got some task in some other app and I have to copy from that and need to open the todoApp and add task.

So I look into it and implemented [Share Target API](https://web.dev/web-share-target/) that allow my todo PWA registered as share target app as native app.

Now I simply share the thing and choose TodoApp from sharesheet and done. I don't have to leave the app to add new task.

[Try the app now](https://todo.shakiltech.com) and tell your thoughts below.

Your feedback is valuable to me.

Visit [https://todo.shakiltech.com](https://todo.shakiltech.com)
Single Restro App UI
Tags: uiweekly, ux, android, ios
Published: 2021-12-01 20:10:27


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76h414z0moz1cufm2ehe.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug9k2t8vtmjp6nyor02k.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yszuyvx6ns8z31z0jlnn.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xf3xvf0d6z9jl1tiyc6z.jpg)
**SINGLE RESTRO APP UI DESIGN USING FIGMA**
Money App UI Design
Tags: uiweekly, ux, android, ios
Published: 2021-12-01 20:03:55

****
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/js7543pvh6s9mi6icwqq.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lr9wmyuzrwrhghun7ws7.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g49r2ixrs1p51i3ioytt.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uoima1uupp7bboes8ptb.jpg)

**MONEY APP UI DESIGN USING FIGMA**
Where do intermediate and/or slightly more advanced devs go? 
Tags: discuss, meta
Published: 2021-12-01 20:00:18

---
title: Where do intermediate and/or slightly more advanced devs go? 
published: true
description: After a big break I figured I'd love to blog again but I'm not sure if dev is still my crowd.
tags: discuss, meta
//cover_image: https://direct_url_to_image.jpg
---
It has been quite a while sincd I've written my kast post here on dev. There isn't a lot I've done with intension or focus. I also don't know if anyone is following me with some sort of intension on purpose. 

I'd love to start writing again especially on the stuff that I'm currently exploring. The problem is most of it isn't purely webdev related and other topics are extensions on what I'm exploring during my masters (think applied evolutionary algorithms, applied deep learning, shaders, etc).

On the internet I'm not really someone so regardless of what I do, I'll most likely be screaming in the void. My main question is should I still scream in this void? Part of the reason why people like DEV (or Codenewbies which I relate to each other since the acquision) is that it is beginner friendly. Don't get my wrong I love writing about topics in way that they become more approachable but most of what I want to write about assumes the the reader is able to translate a (basic) algorithm into code. 

Should I just jump in and see how it goes or just exclusively write on my own site? 

Additionally I've noticed a lot of folk I follow on twitter because of the DEV community don't seem to be on DEV anymore. Is this platform slowly dying or does that have to do with developer maturity?
🏹Kotlin&Arrow #4 - Resumen Data Types
Tags: kotlin, arrow, showdev
Published: 2021-12-01 19:58:25

En esta cuarta sesión junto a @ivanlorenz hacemos una pequeña pausa en la implementación de la 🦄**Wonderful FreshAir App** para resumir los [Arrow Data Types](https://arrow-kt.io/docs/datatypes/intro/) que hemos usado hasta la fecha, creando simples tests unitarios:

- [OptionTest](https://github.com/AdevintaSpain/wonderful-freshair-app/blob/master/src/test/kotlin/com/wonderful/freshair/playground/OptionTest.kt) para [Option](https://arrow-kt.io/docs/apidocs/arrow-core/arrow.core/-option/)
- [NonEmptyListTest](https://github.com/AdevintaSpain/wonderful-freshair-app/blob/master/src/test/kotlin/com/wonderful/freshair/playground/NonEmptyListTest.kt) para [NonEmptyList](https://arrow-kt.io/docs/apidocs/arrow-core/arrow.core/-non-empty-list/)
- [EitherTest](https://github.com/AdevintaSpain/wonderful-freshair-app/blob/master/src/test/kotlin/com/wonderful/freshair/playground/EitherTest.kt) para [Either](https://arrow-kt.io/docs/apidocs/arrow-core/arrow.core/-either/)

Y por falta de tiempo, dejamos [Validated](https://arrow-kt.io/docs/apidocs/arrow-core/arrow.core/-validated/) para otra ocasión 😢 ... aunque puedes consultar el [EitherVsValidatedTest](https://github.com/AdevintaSpain/wonderful-freshair-app/blob/master/src/test/kotlin/com/wonderful/freshair/playground/EitherVsValidatedTest.kt) que creamos en la tercera sesión.

¿Te ha quedado claro el funcionamiento del [either.eager](https://github.com/AdevintaSpain/wonderful-freshair-app/blob/master/src/test/kotlin/com/wonderful/freshair/playground/EitherTest.kt#L93)? ¡A mi sí! 😁

```kotlin
fun `should flat map with eager`() {
  val result = either.eager<MyAppError, MyAppValue> {
    val result1 = addOneIfLessThanFive(MyAppValue(2)).bind()
    val result2 = addOneIfLessThanFive(result1).bind()
    addOneIfLessThanFive(result2).bind()
  }

  assertThat(result).isEqualTo(Right(MyAppValue(5)))
}
```

Puedes consultar todo el código fuente aquí 👇

{% github AdevintaSpain/wonderful-freshair-app no-readme %}

... y el vídeo de la cuarta sesión aquí 👇

{% youtube B5HKrSHYmjI %}

[![Ofertas Backend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkkdtu9hbec8miz8qbwt.png)](https://careers.adevinta.es/ofertas/?search=backend&stc=aff-blog%20dev.to-Kotlin%26Arrow%20%234%20-%20Resumen%20Data%20Types)
DynamoDB permissions in Athena
Published: 2021-12-01 19:48:35

It looks to me like policies to control access that I assign to tables in DynamoDB are not reflected in Athena.  If I have a table with attributes a, b, and c and my DynamoDB policy allows access to only attributes a and b, I can access all 3 by creating an Athena connector to the database. It looks like the connector's lambda function is accessing DynamoDB with it's own set of permissions that ignore the DynamoDB policies. Has anyone seen this?  What am I doing wrong?

Thanks,
Jerry