teleren/devto huggingface dataset:
Modifying the default toolbar in Trix
Tags: javascript, webdev, rails, trix
Published: 2022-01-29 06:33:26

The first thing you may be tempted to do when exploring with Trix is to change the default toolbar. It's not obvious how to do this. 

First instinct would say just change the innerHTML of all `<trix-toolbar>` elements.

This would work for most simple use cases, but what if you have a lazy-loaded turbo frame? Now you have to listen for when that frame gets loaded and then do some innerHTML replacement there.

It quickly turns into an ever-increasing ball of complexity. When searching through the Trix source code, I came across this function:

```js
Trix.config.toolbar.getDefaultHTML()
```

You can find the coffeescript source code here:

https://github.com/basecamp/trix/blob/main/src/trix/config/toolbar.coffee

On first iteration, one would think this would work if I did something like this:

```js
import Trix from "trix"

Trix.config.toolbar.getDefaultHTML = () => `Hi there!`
```

However, due to module execution and Trix registering itself and injecting the toolbar prior to the overriding of the function taking place in our script, this won't actually work.

Instead, we have to override the `getDefaultHTML()` function to affect all future instances of Trix, but we also have to deal with all current instances.

To do so, here's a pretty solid trimmed down way to handle this interaction:

```js
import Trix from 'trix';
Trix.config.toolbar.getDefaultHTML = toolbarDefaultHTML;

document.addEventListener('trix-initialize', updateToolbars, { once: true });

function updateToolbars(event) {
  const toolbars = document.querySelectorAll('trix-toolbar');
  const html = Trix.config.toolbar.getDefaultHTML();
  toolbars.forEach((toolbar) => (toolbar.innerHTML = html));
}

/**
 * @see https://github.com/basecamp/trix/blob/main/src/trix/config/toolbar.coffee
 */
function toolbarDefaultHTML() {
  const { lang } = Trix.config

  return `Default HTML goes here!`
}
```

To see the full demo checkout the Stackblitz to play around with it:

{% stackblitz js-fz9n5k view=preview %}

Or checkout the toolbar branch on this repository:

https://github.com/ParamagicDev/exploring-trix/tree/part01-changing-the-default-toolbar

That's it for part 1! In part 2 we'll look at how we can start styling Trix to make it look more like Github's markdown editor!
Exploring Trix
Tags: javascript, rails, webdev, trix
Published: 2022-01-29 06:33:14

## Why?

Well, the reason is simple. Trix is notoriously hard to extend. It has little documentation and is written in Coffee-Script which is not very well known these days. ([There is a rewrite in progress to change to JavaScript](https://github.com/basecamp/trix/tree/v2/src/trix))

[Trix](https://github.com/basecamp/trix) is the underlying JavaScript library for the overarching [ActionText module](https://guides.rubyonrails.org/action_text_overview.html) in Ruby on Rails.

I'm going to be exploring how to extend and manipulate Trix.

In this series I will be attempting to recreate an ~~the Github markdown editor~~ editor to be determined, but perhaps in the future this can be a grab-bag of various tips + tricks. The final product may not have all the gadgets and gizmos, but I will attempt to make it close.

## What is Trix?

Trix is ["A Rich Text Editor for Everyday Writing"](https://github.com/basecamp/trix#a-rich-text-editor-for-everyday-writing)

Trix is also considered a WYSIWYG editor (what you see is what you get)

Without getting too far into the nitty-gritty, Trix is a web component designed for the modern era of JavaScript and was released during a not-so-modern era.

## Where to start?

I'll be using a barebones JavaScript repo using [Vite](https://vitejs.dev/) for local development.

The repo can be found here:

https://github.com/ParamagicDev/exploring-trix

In the official start to the series, we will explore how to change the default toolbar's HTML.
Getting started with Git day 03  😊.
Published: 2022-01-29 06:05:02

**In day 04 I have learned **

1. To create remote.
`git remote add remote-name https://(from server)`

2. To see created/available remote.
`git remote`

3. To see details about remote.
`git remote -v`  

4. To push the code/file's to server 
`git push **remote-name** branch-name`

5. To clone existing file from server's:
`git clone https:/(from server file)`

6. To push cloned update file to server:
`git push origin branch-name`

> origin is default remote of cloned file.

---
**Have a great day  😊.**
Self-Taught Developer Journal, Day 49: TOP Building Rock Paper Scissors UI cont.
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-01-29 05:55:30

Today I finished [Traversy Media CSS Grid Crash Course](https://www.youtube.com/watch?v=jV8B24rSN5o&ab_channel=TraversyMedia) on YouTube.

I started tweaking my layout to incorporate CSS grid.

I'm using flex to center the grid container then planning to use grid to arrange the game elements.

![HTML and CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ghawslw9v6q812vv8pi.png)

Another short post, but I'm hoping to spend more time on it tomorrow (fingers crossed).

## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)
[Revisiting Rock Paper Scissors](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/revisiting-rock-paper-scissors)
https://www.youtube.com/watch?v=jV8B24rSN5o&ab_channel=TraversyMedia
Today I have attempted 5 java programming exercises 😊.
Tags: programming, java, beginners, help
Published: 2022-01-29 05:50:25

16. Write a Java program to print a face.

17. Write a Java program to add two binary numbers.

18. Write a Java program to multiply two binary numbers.

19. Write a Java program to convert a decimal number to binary 
    number.

20. Write a Java program to convert a decimal number to 
    hexadecimal number.

---
> Exercise from w3resourse

---
I am new to programming. I will be happy if you can give some advice..
**have a great day**
JS Code Snippets
Published: 2022-01-29 05:48:19

## Array

### 1. Find an element in an array using `find()` method.
```javascript
let numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let number = numbers.find(_number => _number === 8);
console.log(number);    // 8

number = numbers.find(_number => _number === 80);
console.log(number);    // undefined
```
### 2. tbd
### 3. tbd
### 4. tbd

## Blocking/NonBlocking or Synchronus/Asynchronus Code

Synchronus or Blocking code

```javascript
console.log('Before');
console.log('After');

// Result
// Before
// After
```

Asynchronus or NonBlocking code

```javascript
console.log('Before');

setTimeout(() => {
    console.log('Reading a user from DB...')
}, 2000);

console.log('After');

// Result
// Before
// After
// Reading a user from DB...
```

_setTimeout() schedules for future run. In this case after 2sec, there will be a console message._

It's not a multithread or parallel run. Still it's a single thread run and due to scheduling, execution is not blocked.

1. Callback
2. Promises
3. Async/Await (syntactic over promise)

### 1. Callback

- tbd

### 2. Promises

- tbd

### 3. Async/Await

- tbd
Deploying Docusaurus to Cloudflare Pages
Tags: docusaurus, cloudflare, webdev
Published: 2022-01-29 03:53:00

Hello there! 
Docusaurus is a commonly used static site generator. It is built on top of [React.js](https://reactjs.org) and can be used to make any kind of site (personal website, product, blog, marketing landing pages, etc).

Cloudflare Pages is a JAMStack platform for frontend developers to collaborate and deploy websites.

## Creating the App
- Open up your shiny terminals and create a Docusaurus app 
How to create: https://docusaurus.io/docs/installation#scaffold-project-website

![Creating Docusaurus App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j16hk8byiphw31c7y23y.png)

Now, Once you've created change your directory to the project.

Then, Run the start command.

It will open up your browser to the development website: http://localhost:3000/

![Demo website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orhbf4oc7rnxoejps3ws.png)


Now, Your Docusaurus Website is ready, Let's deploy it over Cloudflare pages.

**Change your docusaurus.config.js url field to https://<your-cloudflare-pages-app-name>.pages.dev or your custom domain.**


~~Unlike Vercel and Netlify, Cloudflare pages doesn't support cli deployments yet (They might come sooner or later)~~

> EDIT: You can now deploy to Cloudflare pages via Wranger CLI. Read more [here](https://blog.cloudflare.com/cloudflare-pages-direct-uploads/)

So, You'll need to push all the code over Github.

```
git init
git add -A
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/gaurishhs/Docusaurus-Cf-Pages.git 
git push -u origin main
```

After Running these commands, If you check your Github, You'll find the code there. 

Head to your Cloudflare pages dashboard, Signup for pages if you haven't yet.

Create an app and select your Github repository.

Choose Create React App as your framework preset.

Create an environment variable `NODE_VERSION` with the value `16.13.2`

Docusaurus requires a node version more than or equal to node v14, 16.13.2 is a LTS(Long time support) Version of Node.js


Then Click Deploy, Within 2mins your app would be ready :)

> Cloudflare has now introduced Fast builds 😃

https://docusaurus-cf-pages.pages.dev/

[Add a Custom Domain To Your App](https://developers.cloudflare.com/pages/get-started#adding-a-custom-domain)
[Redirecting www to apex domain](https://developers.cloudflare.com/pages/how-to/www-redirect)


### Contact
- If you face any issues, Do not hesitate to [contact me](https://gaurishsethia.me)


### Useful Links
- [Docusaurus Documentation](https://docusaurus.io/docs)
- [Docusaurus Discord Server](https://discord.com/invite/docusaurus)
- [Cloudflare Pages Documentation](https://developers.cloudflare.com/pages/)
- [Cloudflare Developers Discord Server](https://discord.com/invite/cloudflaredev)
A Terraform DNS moment
Tags: terraform, dns, infrastructure, digitalocean
Published: 2022-01-29 02:53:40

**tl;dr:** I stuck the IPv4 and IPv6 address of my VPS into an SPF record field text.

I manage my DNS with Terraform. This means that past domain registration and changing nameservers, I manage DNS with the Terraform command-line interface and git. Today I experienced a moment of happiness when two pieces of personal infrastructure fitted.

The scenario: I'm setting up a send-only email server on a VPS for Gitea notifications. If this works out well, I will consider using it for a newsletter. Doing this on a commercial cloud VPS means that my server's IPv4 address gets a bad score. One way to improve on that score is to add an [SPF record](http://www.open-spf.org/SPF_Record_Syntax/).

For my personal email hosted at FastMail, the SPF record is simpler:

```
$ dig +short TXT simonshine.dk
"v=spf1 include:spf.messagingengine.com -all"
```

Their SPF record contains a bunch of `ip4:...` rules.

To let the world know that I'm sending emails from my VPS, I simply list its IP address:

```
resource "digitalocean_record" "spf_example_com" {
  domain = digitalocean_domain.example_com.name
  type   = "TXT"
  name   = "@"
  value  = "v=spf1 ${format("ip4:%s ip6:%s",
    digitalocean_droplet.example_droplet.ipv4_address,
    digitalocean_droplet.example_droplet.ipv6_address)} -all"
}
```

This encourages receivers of emails from this domain to reject the email if it didn't originate from this server. The part that got me blogging is that I didn't hardcode the IP addresses of my server, but rather, the value was taken from the deployment configuration of the concrete server.
Local currencies in Javascript
Tags: javascript, currency, webdev, tolocalestring
Published: 2022-01-29 02:47:58

**Convert number to local currencies using javascript**

The toLocaleString() returns a number as a string, using local language format.

The language format depends on the locale setup on your computer.

Syntax

```
number.toLocaleString(locales, options)
```

```
const a = 232332323
```
Format a number into a currency string, using the locale specific of USA:

```
a.toLocaleString('en-US',{style:'currency', currency:'USD'})

output: '$232,332,323.00'
```

Format a number into a currency string, using the locale specific of INR:

```
b.toLocaleString('en-IN',{style:'currency', currency:'INR'})

output: '$232,332,323.00'
```



[Reference](https://www.w3schools.com/jsref/jsref_tolocalestring_number.asp)
px to rem calculation
Tags: css
Published: 2022-01-29 02:28:16

## Pain
Using `rem` for `font-size` is a good practice. 👍

But looking at a design tool like figma, `font-size` is displayed in `px` and need to calculate to `rem` value is a little annoying. 😣

The following is a solution ✨

## Solution
(The example is when `16px` is the global `font-size`)

css/scss
`font-size: calc(14.08 / 16 * 1rem);`

css-in-js
`font-size: ${14 / 16}rem;`
JavaScript Best Practices - Part I
Tags: javascript, coding, webdev
Published: 2022-01-29 02:26:14

**Objective**
JavaScript is one of the most popular and widely used programming languages used to build both client and server side applications. In a nutshell, JavaScript powers the web. 

In this 5 part series, we're going to look at JavaScript best practices with practical example.

**Call things by their name**

![Call things by their name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9f7sg949052fx7os2ui.png)

**Modularize - One function per task**

![One function per task](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjeq3mqnjwbdl7eiu8bl.png)
What do you do when Stack Overflow is down?
Tags: discuss, watercooler
Published: 2022-01-29 00:50:40

Looks like Stack Overflow might have some unscheduled maintenance right now - I know it’s a site I spend a lot of time on!

I guess it is Friday, and the weekend… what are your plans?

(much love and respect to the SREs over there - outages are honestly, never fun)
Updates from the 88th meeting of TC39
Tags: javascript
Published: 2022-01-29 00:21:40

There were several items on the agenda, this post focuses on feature proposals and their progress from the meeting that was held between January 24-28th, 2022.

**Stage 1:**

* [Reversible string split](https://github.com/tc39/proposal-reversible-string-split) This propsal proposes the addition of a String.prototype.splitN method that splits the input string at most N-1 times, returning N substrings. The last item contains the remainder of the string.

**The agenda had many items, out of which the proposals bit looked like:**

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

No other proposals were advanced to the next stage during this meeting.

**2022 TC39 Chair Group are complete!**


![Tweet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc1hs8i5aeruofut40qn.png)
Have been building an open source accounting system with features for programmers.
Tags: opensource, showdev
Published: 2022-01-29 00:15:32

I've been building an open source accounting system as a COVID project which is designed to give programmers the features they expect so that they can automate their financials. These include RPC endpoints so you can communicate to the system with your scripts, and control over the SQL database so you can analyse your financials using your business analytics tool of choice.

I've also very recently developed a Web GUI frontend for the system so you can do basic interactions with the system. The demo for this can be seen here:

https://youtu.be/19moSl4YFeI

Ideally the project will give people all the features you need to fully automate your financials from start to finish. Next up on the roadmap is to build in bank feeds and reconciliations. Then aiming build in cryptocurrency gains calculations.

Would love to hear what people think about it!

Links:
www.godbledger.com/ 
https://github.com/darcys22/godbledger
Custom html using angular
Published: 2022-01-29 00:11:21

Hello
I want to use this html an loop for angular
`<div >
          <select class="selectpicker" data-live-search="true">
            <option data-tokens="ketchup mustard1">Hot Dog, Fries and a Soda</option>
            <option data-tokens="mustard2">Burger, Shake and a Smile</option>
            <option data-tokens="frosting3">Sugar, Spice and all things nice</option>
          </select>
</div> `

When use
`<select class="/*form-control*/ selectpicker" data-live-search="true" name="{{'idCoin'+i}}" [(value)]="customer.idCoin" required>            
  <option *ngFor="let item of idCoinlist" [value]="item.id" data-tokens="{{item.id}}">{{item.name}}</option>
</select>`

Show error:
Can't bind to 'tokens' since it isn't a known property of 'option'.ng

HOw i can use loop with custom html? Thanks!
Day 519 : Let That Go
Tags: code, hiphop, coding, lifelongdev
Published: 2022-01-29 00:09:43

_liner notes_:
- Professional : Was not as productive as I would have hoped. Noticed I had some Twitter notifications and checked them out. thought I could just go through them real quick. Nope. haha Started to get into some good conversations with folks. Then I got into some more good conversations with coworkers about some upcoming stuff. Started working on integrating this UI library into a Web Component I'm working on for the demo app that due at the end of the month. This is like the last one I need to get done and I saved it for last because it was kind of the most complex when I first built it out. Cool. I kept running into issues to try and get some UI components to act and look the way I had originally did it. I went through the documentation, forums, GitHub issues and more. For some of them, I just gave up and styled the basic HTML elements with CSS. It still works.

- Personal : Last night, I was basically going down rabbit holes once again with the UI component library. Time flew by super quick and I went to sleep. I've got to get better that when I run into issues to let that go, especially when I have it working another way. haha

![Looking down a road in Seven Lakes Park, MI, USA where there are trees on both sides with the branches reaching across the top makin it look like a tunnel with some sun rays shining through](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdgvykvyjjzs5c6jd5c4.jpg)

Going to go through Bandcamp and check out some music. Post my pick ups to Twitter. Put together the radio show and maybe finish up what I was working on earlier. I just need to replace some buttons with what the UI component library has. Hopefully it's not too bad. It should be similar to how I did it in another Web Component I made this week.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube As31wwuIHaM %}
Agile houses
Tags: agile
Published: 2022-01-31 20:34:21

---
title: Agile houses
published: true
date: 2022-01-29 00:00:00 UTC
tags: agile
canonical_url: https://jhall.io/archive/2022/01/29/agile-houses/
---

Right now I’m staying near Guatemala city, in my wife’s childhood home. Naturally, I’ve been here many times, leading up to and since our marriage 6 years ago. Every time I come, I’m surprised by something new that’s changed.

This time it was a new stairway behind the kitchen, leading to what used to just be the roof. Now it’s a balcony, with a bunch of plants.

 ![](https://jhall.io/images/guatemala-stairs_hucb6abe486606082d40505431faf7b650_1323970_500x0_resize_q85_box.jpg)

This got me thinking:

We often contrast software creation to physical building construction. The idea that software is easy to change, whereas buildings are difficult to change.

But is this really true?

Sure, _some_ buildings are hard to change. Particularly in big, complicated ways. Once you’ve built a stadium, it will pretty much always be a stadium. Maybe you can paint the seats a new color, but you’re not likely to put up new walls and turn it into smaller venues.

But most buildings we use are probably a lot more “agile” than we think.

I’ve been doing a bunch of home rennovation myself over the last couple years. We just converted a small bedroom into a new large bathroom, and turned the old bathroom into a new spiral staircase to my attic office.

If even our buildings are this flexible, what should this say about our “infinitely more flexible” software products?

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
PokeSearch V1.0
Published: 2022-01-28 23:56:30


![PokeSearch](https://pokesearch-fm.netlify.app/_ipx/w_750,q_75/%2Fimg%2Fpokesearch.png?url=%2Fimg%2Fpokesearch.png&w=750&q=75)


## PokeSearch V1.0

It will allow you to search by the names of the pokemon and receive all the available information about it in a simple way.

You just need to enter the name of the pokemon and... "Vualá".

[PokeSearch](https://pokesearch-fm.netlify.app)
[GitHub Repo](https://github.com/mellaadev/pokesearch)



## Screenshots

![Home Page](https://i.imgur.com/kO8AOK3.png)

![Pokemon Search](https://i.imgur.com/YR2YRY2.png)

## Color Reference

| Color             | Hex                                                                |
| ----------------- | ------------------------------------------------------------------ |
| Blue | ![#2e6eb6](https://via.placeholder.com/10/2e6eb6?text=+) #2E6EB6|
| Yellow | ![#ffcb05](https://via.placeholder.com/10/ffcb05?text=+) #FFCB05 |
| Black | ![#0f0f0f](https://via.placeholder.com/10/0f0f0f?text=+) #0F0F0F |
| White | ![#ffffff](https://via.placeholder.com/10/ffffff?text=+) #FFFFFF |
| Gray | ![#808080](https://via.placeholder.com/10/808080?text=+) #808080 |


## Features

- Pokemon Search
- Pokedex ID
- Pokemon type/s
- Base Experience
- Base Stats
- Abilities
- Held Items
- Weight
- Moves


## Acknowledgements

 - [Powered by PokeAPI](https://pokeapi.co)
 - [Designed and Developed by Fran Mella](https://github.com/mellaadev)

## Authors

- [@melladev](https://www.github.com/mellaadev)


## FAQ

### Is it open source?

Yes.

### Can we use it in our projects?

Totally no problem. The mention is appreciated.


## Roadmap

- Add abilities information

- Add moves information

- Add types information

- Add held items information

- More search types

- Translate to other languages


## Feedback

If you have any feedback, please reach out to us at contacto@franmella.com


## Support

If this project help you reduce time to develop, you can give me a cup of coffee :) 

[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/donate/?hosted_button_id=S5KC8ELVXVMCU)