teleren/devto huggingface dataset:
How to customize your Transistor.fm Website with JS and CSS
Tags: tips, javascript, css
Published: 2021-12-03 07:58:15

---
title: How to customize your Transistor.fm Website with JS and CSS
published: true
description: The default Transistor.fm website is kinda ugly. Here's how to customize your Transistor.fm website if you use Transistor. But also it's a simple guide to do clientside customizations of almost any website whose code you don't control.
tags: Tips, JS, CSS
slug: customize-transistor-website
canonical_url: https://www.swyx.io/customize-transistor-website
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/191i3t8jm0r01nefa6ef.png
---

The default Transistor.fm website is kinda ugly. 

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

Here's mine after a bit of work: https://swyx.transistor.fm/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/191i3t8jm0r01nefa6ef.png)

Here's how to customize your Transistor.fm website if you use Transistor. But also it's a simple guide to do clientside customizations of almost any website whose code you don't control.

## How To Video (3mins)

{% youtube EyV6QHk63lg %}

## Code

Head HTML: 
```html
<script>
window.onload = function () {
  let el;
  if (document.location.pathname === "/episodes") {
    el = document.createElement("div");
    document
      .getElementsByClassName("site-content")[0]
      .parentNode.insertBefore(
        el,
        document.getElementsByClassName("site-content")[0]
      );
  } else {
    // assuming index page
    el = document.getElementsByClassName("site-first-episode")[0];
  }

  el.innerHTML = `
<iframe title="swyx mixtape embed" width="100%" height="390" frameborder="no" scrolling="no" seamless src="https://share.transistor.fm/e/learn-in-podcast/playlist/dark"></iframe>
`;
  el.id = "swyxembed";
};
function makeLive() {
  if (!document.getElementById("swyxembed")) window.onload();
  setTimeout(makeLive, 200);
}
setTimeout(makeLive, 200);
</script>
```

CSS: 
```css
.site-intro {
  font-size: 1.25rem;
    width: 60ch;
    margin: 0 auto;
}

.site-credits {
    position: fixed;
    width: 100vw;
    bottom: 0;
}

#site-footer {
  display: hidden
}

#swyxembed {
  padding: 2rem;
}
.site-featured-episodes .site-episode,
.site-episode-detail .site-episode {
 display: block;
}
.site-episode {
  display: grid;
  grid-template-areas: "date title"
                       "date desc";
  grid-template-rows: minmax(1rem, auto) 1fr;
  grid-template-columns: 10ch 1fr;
  grid-column-gap: 1rem;
  margin-bottom: 1rem;
}
.site-episode time { grid-area: date }
.site-episode time span { text-transform: none }
.site-episode h2 { grid-area: title; font-size: 1.5rem }
.site-episode .site-episode-summary { grid-area: desc }
.site-episode nav {
   display: none;
}
```

## Other customization ideas

Look at the css for https://gretchen.transistor.fm/

You can also use custom fonts: https://www.avillatheory.com/ https://www.youtube.com/watch?v=MFQMczanAm4&feature=youtu.be
Features Of StopWatt Energy-Saving Device
Published: 2021-12-03 07:49:57


 Carpe diem. It is really gimmick proof. I tailored that for the current circumstances. Meow! But I can duck it as best as they can. This is a new wave of some attachment. Even on TV some trait has more or less gained control over the medium. It has very little mass appeal. This impasse wasn't easily digestible. I surely agree that we shouldn't assume everybody likes this hokum. This is actually the tough part of a [StopWatt ](https://ipsnews.net/business/2021/11/30/stopwatt-review-energy-saving-device-stop-watt-legit-or-a-hoax-real-user-complaints/)that enables a surrounding for a StopWatt Reviews. I've never really bothered with their development so you don't need to too. This motion is an often overlooked strategy to adjust to StopWatt Reviews. This is how to check if it is working. 

Occasionally this works, occasionally they won't. You can discover a couple of good StopWatt Reviews with a little patience. This is an all embracing their situation philosophy. Bear with me, you might enjoy this. It is why this is still very capable. Clearly, this list isn't only part of the solution, that's also part of the problem. In any respect, pinch my toes and call me a doughnut! It's always good to sit and chat with friends pertaining to their bias. It may just be the answer you have been looking for. From whence do pros bring to light optimal StopWatt Reviews guidance? StopWatt is growing at a blistering rate.

Click Here=> [https://ipsnews.net/business/2021/11/30/stopwatt-review-energy-saving-device-stop-watt-legit-or-a-hoax-real-user-complaints/](https://ipsnews.net/business/2021/11/30/stopwatt-review-energy-saving-device-stop-watt-legit-or-a-hoax-real-user-complaints/)
Stop pushing your React API Key on GitHub 😪
Tags: javascript, react, tutorial, beginners
Published: 2021-12-03 07:48:07

Have you ever create an application with React, in this application you use external API’s and you pushed these API keys on GitHub ? 

Oh no bad practice now everybody can use your API key.

 We will see how we can avoid this and hide your API’s keys on Github, you need .env file.

## How to setup .env file inside React app ?

> You don’t need to install env package, this feature is available with react-scripts@0.2.3 and higher.


-  Make a file called .env in your project root

-  Inside the env file, add your variables and API keys value like this : 

```
REACT_APP_GITHUB_API_KEY=Hello world 12345
REACT_APP_MOOVIE_API=0123456789
```
   >  You should prefix all your variables name by REACT_APP if not it will be ignored

- 
 Now you need to restart your React server with npm start to access these variables 

-  Inside your React application, you can now access these variables in using this syntax : 

```
{process.env.REACT_APP_GITHUB_API_KEY}
{process.env.REACT_APP_MOOVIE_API}
```


![API Usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6nntrz8tnubutirqppv9.png)


Now you have zero excuse to push your API key in your React application.

[Here you have the React documentation about using environment variables ](https://create-react-app.dev/docs/adding-custom-environment-variables/)
BNB FEED- highest APR among all Yield Farms
Tags: blockchain, bnb, smartcontract
Published: 2021-12-03 07:37:09

BNB FEED is 100% legit smart contract, the most RELIABLE and REALISTIC smartcontract that ever developed on BCS blockchain.
➡️ BNB ROI Project
➡️ 0.01 BNB Minimum investment
➡️ 9.9% to 18% Daily ROI between 7 to 26 Days
➡️ Contract Link: https://bscscan.com/address/0xe92cd755ca1c7cd2b7dd99bedb077033f11c0f76#code
✅NO BACKDOOR
✅DECENTRALIZED
✅💯 FULLY VERIFIED & AUDITED OPEN-SOURCE CODE
Check Now:
▶️Telegram: https://t.me/bnbfeedofficial
🌐 WEBSITE: bnbfeed.com
🐦 Twitter: https://twitter.com/Bnb_feed
▶️ Instagram: https://www.instagram.com/bnb_feed/
SPO600 - Week 4 
Published: 2021-12-03 07:21:30

In the fourth week of SPO600, I mainly learned about strings and characters in 6502 Assembly Language. 

Creating strings using dcb and typing up an array of characters, all linked together was simpler to understand than some other things in the course.

I also learned how to display input and output to the user using the console. I used CHRIN and CHROUT for these.

Another neat thing is that you can implement a space as the ASCII code "32", as well a using codes for other characters. However I don't really see the use for basic characters and digits.
Bootiful - a Bootstrap v5 template
Tags: bootstrap, css, beginners, webdev
Published: 2021-12-03 07:21:19

I created an open-source Bootstrap v5 theme on my free time. It is Bootstrap v5, but I tried to code it "the Tailwind way", thus, there is no extra CSS components : utility-classes only, using Bootstrap v5 utility API most of the time (and very few "style" attributes for corner cases). At the end of this small project, I enjoyed a lot to code in this way, saved lot of time and mental headaches. 

Here is the demo : https://bootiful.org/ 
The GitHub repo : https://github.com/bdavidxyz/bootiful/

What do you think ?
How to Create a Loader!
Tags: html, css, tutorial
Published: 2021-12-03 07:03:08

Hey **fellow creators**,

You want to add a *loader* to your app, but don't know where to start? Look no further!
 
If you prefer to watch the video **version**, it's right here :

{%youtube fnv9lifum1w%}

Here's the [source code](https://codepen.io/Enzo-Ustariz/pen/LYygJEK).

##1. The HTML structure.

Create a *loader-container* with three dots inside it:
```html
<div class="loader-container">
      <div class="dot d1"></div>
      <div class="dot d2"></div>
      <div class="dot d3"></div>
</div>
```

##2. Style the loader.

Style the loader with a *position: absolute* and make it take the full width and height of the viewport. Then, make sure the three dots are centered in the page:

```css
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.loader-container {
  position: absolute;
  background: #f1f1f1;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease-in-out;
}
```

##3. Animate the loader.

Now, style the dots so that they can be easily seen (make it 25px wide and 25px high) and color them black. Finally, add an animation that you'll create right after this.

```css
.dot {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #000;
  margin: 0 10px;
  animation: loader infinite 0.3s alternate;
}
```

The key to the animation is to add a delay to the second and third dots' animation:

```css
.d2 {
  animation-delay: 0.05s;
}
.d3 {
  animation-delay: 0.1s;
}
```

Finally, create the animation with a keyframe: 
```css
@keyframes loader {
  100% {
    transform: translateY(-30px);
  }
}
```

You've created a simple but effective *loader in CSS*, well done!

Come and take a look at my **Youtube channel**: https://www.youtube.com/c/TheWebSchool


*See you soon!*

Enzo.
seeking help in regex
Tags: regex, splunk
Published: 2021-12-03 07:02:46

Regex to be modified to match full string
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a65gzcb04c8nf2r21jhh.JPG): 
c[n|s]\dlabel\=(\w+).*?c[n|s]\d\=([\.a-zA-Z0-9_-]+)

Sample log: 
CEF:0|vendor|product|1.1|1234|PolicyAssetUpdated|1|cn1label=EventUserId cn1=-3 cs1label=EventUserDisplayName cs1=Automated System cs2label=EventUserDomainName cs2= cn2label=AssetId cn2=20888 cs3label=AssetName cs3=ABCDPQRS.domain.com cn3label=DirectoryId cn3=856 cs4label=DirectoryName cs4=Active Directory cs5label=DomainName cs5=domain.com
Do they know it's C in PHP 🎄
Tags: php, webdev, c
Published: 2021-12-03 06:55:17

>**Just the Gist**  
>PHP uses the C programming language to become what it is.  
  
>**Correction:** *Earlier version of this article stated that the Zend Engine took PHP and interpreted it to C. This is not the case. The PHP source is compiled from C, the Zend engine compiles PHP into Opcodes that can be executed by the Zend VM.*  

## It's C in a nice wrapper 🎁
While we write PHP, our basic features are provided to us from compiled C code. When we write `pi()`, where did that come from? Before it was compiled for us, its origin is from the C programming language:
```C#
PHP_FUNCTION(pi)
{
	ZEND_PARSE_PARAMETERS_NONE();

	RETURN_DOUBLE(M_PI);
}
```
`M_PI` is a constant defined in the `php_math.h` header file:
```C#
#ifndef M_PI
#define M_PI           3.14159265358979323846  /* pi */
#endif
```

And guess what? We can also call the constant `M_PI` from PHP and get the same result. This is really not a surprise, as we can see that the function just returns that constant.

## Interpretation skills  
So what is the journey for `<?php echo pi() ?>` to an output of `3.1415926535898`? The source of PHP was compiled into a package we know as PHP, where `pi()` and `M_PI` are included. This is compiled at runtime into `Opcodes` by the `Zend Engine`. `Opcodes` are interpreted and executed by the engine. It's a bit like a compiler and a runtime environment rolled up into one:  
1. It analyzes the code.
2. Then it compile it into Opcodes.
3. And finally it executes the compiled code.

>☝️ The Zend Engine is a C extension that is part of PHP. You don't have to go chasing after it on the Web if you've already got PHP for your machine. You will have all you need to run your scripts!

## What about you?
What are your thoughts on the C programming language? Would you be willing to try it out, maybe even becoming a core contributor? Leave a comment below! ✍

## Further Reading
* PHP Internals Book -  https://www.phpinternalsbook.com/
* PHP 8.1 Source Code: https://github.com/php/php-src/tree/PHP-8.1.0
* PHP's PI implementation in C:
    - [The Math library for PHP: PI](https://github.com/php/php-src/blob/01b3fc03c30c6cb85038250bb5640be3a09c6a32/ext/standard/math.c#L474)
    - [The Math header for PHP: PI](https://github.com/php/php-src/blob/01b3fc03c30c6cb85038250bb5640be3a09c6a32/ext/standard/php_math.h#L51)
* Compiled vs interpreted languages: https://www.freecodecamp.org/news/compiled-versus-interpreted-languages/
Promise.resolve 注意事項
Tags: javascript, promise
Published: 2021-12-03 06:39:54

Promise.resolve 注意事項

Promise.resolve 雖然照字面上解釋會傳回一個已經實現承諾 (fullfilled) 的 Promise 物件, 可是如果傳入的引數本來就是 Promise 物件, 就會[原封不動傳回來](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve#return_value), 請看以下的範例：

```javascript
p = new Promise((r, e) => {
  e(22);
});
q = Promise.resolve(p);
console.log(p===q);
q.then(r=>console.log("r:" + r), e=>console.log("e:" + e));
```

執行後會看到如下的結果：

```
true
e:22 
```

第一個 true 表示 Promise.resolve 傳回的就是原本的 Promise 物件 p, 而且會執行 then 中的錯誤處理函式, 因此, 印出 "e:22"。如果不瞭解這一點, 就會覺得很奇怪, 已經實現承諾了, 為什麼還會執行錯誤處理函式。

這和 then/catch 的處理是不一樣的, then/catch 一定會傳回新的 Promise 物件, 並[依照文件上的規則](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#return_value)設定。
Flytning københavn
Published: 2021-12-03 06:34:21

For det bedste flyttefirma i danmark benytter du tjenesterne fra det mest kendte [flyttefirma](https://flytkbh.dk/) FLYT Danmark.
Flyttefirma Sjælland tilbyder billig kvalitets flytning og opbevaring og er et af landets førende flyttefirmaer, vi er medlem af DMF og det er din garanti for effektiv flytning. Kontakt os direkte på +45 50 99 99 99. Hos os er det vigtigt du som kunde får en kvalitet flytteoplevelse ud af din flytning, det er hjerteblod at gøre alt ting bedre end konkurrenterne og vi er stolte af at have nogen af branchens bedst lønnede flyttefolk, det gør ligeledes vores krav til kundeservice til vores flyttemænd tårnhøje.
Configure JDK17 in Ubuntu 20.04
Tags: java, ubuntu, linux, programming
Published: 2021-12-03 06:33:03

Java 17 was released in September 2017. Java has multiple distributors as it is open source.
Download from [jdk.java.net](https://jdk.java.net/17/) for openjdk. The commerical verion can be found from [oracle](https://jdk.java.net/17/).

In this setup openjdk x64 version is used.

![Open JDK](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ppe6ewz2n69aqu3oao6.png)

Here are the steps to configure jdk17.

Create default jdk location if it is not there
```
$ mkdir /usr/lib/jvm/ cd $_ 
$ tar -xvzf ~/Downloads/openjdk-17.0.1_linux-x64_bin.tar.gz
```

Inside `/opt` create a directory for `jdk` which will link to the actual jdk package.
```
$ cd /opt
$ mkdir jdk
$ ln -s /usr/lib/jvm/jdk-17.0.1 jdk17
```

Once the following symlink is created, the next is to update `~/.bashrc` file to update path for Java.
```
$ jdk17 -> /usr/lib/jvm/jdk-17.0.1
```

Add the following lines to `~./bashrc`
```
export JAVA_HOME=/opt/sun/jdk17/bin
export PATH=$PATH:$JAVA_HOME/bin 
```
The setup is completed and now Ubuntu should be informed about the new package by using `update-alternatives`

```
$ sudo update-alternatives --install "/usr/bin/java" "java" "/usr/lib/jvm/jdk-17.0.1/bin/java" 0
$ sudo update-alternatives --install "/usr/bin/javac" "javac" "/usr/lib/jvm/jdk-17.0.1/bin/javac" 0
$ sudo update-alternatives --install "/usr/bin/javap" "javap" "/usr/lib/jvm/jdk-17.0.1/bin/javap" 0
$ sudo update-alternatives --set java /usr/lib/jvm/jdk-17.0.1/bin/java
$ sudo update-alternatives --set javac /usr/lib/jvm/jdk-17.0.1/bin/javac
$ sudo update-alternatives --set javap /usr/lib/jvm/jdk-17.0.1/bin/javap
```

Now, verify the setup to know jdk location as it was provided
```
$ update-alternatives --list java 
$ update-alternatives --list javac
$ update-alternatives --list javap
```

Finally, verify the java version
```
$ java -version
openjdk version "17.0.1" 2021-10-19
OpenJDK Runtime Environment (build 17.0.1+12-39) 
OpenJDK 64-Bit Server VM (build 17.0.1+12-39, mixed mode, sharing)
```
What is CSS box model?
Tags: webdev, beginners, programming, css
Published: 2021-12-03 06:10:30


Each element in a document is represented by a rectangular box. Its has four parts:- 

1. Content Area
2. Padding Area
3. Border Area
4. Margin Area

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bb1ksetncaf2bslknku.png)

**<u>Content Area</u>**

Represented by content edge(blue colored area). It is the area that is actually taken by the content for example any text or image or any video. Its has its width and height.

**<u>Padding Area</u>**

Represented by padding edge(green colored area). It is actually the space between content's area and border. Using shorthand padding property of CSS or  padding-top, padding-right, padding-bottom, padding-left of CSS its width and height can be set.

**<u>Border Area</u>**

Represented by border edge(yellow colored area). After Padding area border area is present is holds border of the element, if any. border-width property of CSS can determine thickness of border

**<u>Margin Area</u>**

Represented by margin edge(dark orange colored area). The outer most area of any element is margin area, as you may know margin can be used to keep distance between two different elements. Its sizing can be done using margin property for shorthand or  margin-top, margin-right, margin-bottom, margin-left CSS properties
Self-Taught Developer Journal, Day 11: Take A Break
Tags: beginners, todayilearned, devjournal, codenewbie
Published: 2021-12-03 05:57:26

Today I learned…

To take a break. I played some tennis with friends after work. It was great being active and away from a computer screen. 

I used think taking a break was bad. I thought studying for as long and hard as possible would achieve results, but that’s how you burn yourself out and end up quitting. 

This pattern was my usual routine. 

I’ve gotten better over time to not be too hard on myself. I still am sometimes, it’s the perfectionist in me. But being that way only hurts myself in the end. No one is perfect.

So please take a break when you need to!

I’m back to studying again tomorrow. 


Day 9-10: https://dev.to/jennifer_tieu/self-taught-developer-journal-day-9-10-landing-pages-2hjf
Please refer to [Starting My Self-Taught Developer Journey]( https://dev.to/jennifer_tieu/starting-my-self-taught-developer-journey-2dga) for context.
Power Apps form – Setting Currency Format at Runtime
Tags: powerapps, nocode, lowcode, powerplatform
Published: 2021-12-03 05:04:10

Recently came across a requirement where the user expected the currency formatting at runtime.
Power Apps does not inherently support any currency input for a text box. 
We currently have the input formats as Number and Text as represented below:


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

We need to keep the input text field format as Number to prevent the user from inserting non-numeric values in the said field.
Now the question arises as how we can display formatting at runtime.

**Option 1** : 
From the text box input , the event that we can capture is the OnChange , so while tabbing out the formatting is enabled and user can see the formatted value in the text box itself.
For this we need to set a variable with the formatted value on the OnChange Event as shown:


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

Code : 

`Set(
    FormattedCurrency,
    Text(
        Value(txtUnitPrice.Text),
        "$#,##0.00",
        Language()
    )
)
`

We need to do one additional step, i.e set this Variable - FormattedCurrency defined above as the Default attribute of the TextBox input.


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

This enables near runtime formatting, with the formatting enabled on the tab event.

**Options 2** : 
If the user is expecting formatting while typing itself and not willing to wait for the tabbed event,
we can add a label adjacent the text box and set its Text property as below :


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9l60l34ib376qiziy1vn.png)

Code : 

`Text(
        Value(txtUnitPrice.Text),
        "$#,##0.00",
        Language()
    )
`

With these settings we can generate our desired output : 

Step 1 : While typing the numbers in the Currency text box field :


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3utt4cl6rxullfatlx5r.png)

Step 2 : OnTabbing out 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79xtds55zecytu9cuvrf.png)

You can replace the textbox controls with the data card controls in case you are working in an integrated SharePoint PowerApps solution.
Data Structure: Binary Tree
Tags: programming, javascript, algorithms, webdev
Published: 2021-12-03 04:50:36

Hello All! 
(all the photos used are from google btw)

Its been a while, I hope you all are doing well.

In this post, I wanted to share some basic knowledge of trees in programming and data structures.

We are starting with the trees. A tree is a data structure used to simulate a hierarchical tree structure. A node of the tree has a root value and a list of references to other nodes which are referred to as child nodes.
The most typical tree structure used is the Binary tree. As the name suggests, each node of the binary tree has at most two children referred to as left child and right child.

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

Notice the image above to understand a visual representation of how this looks like.

#Traversal Methods used in a Binary Tree
 _Def. of Traverse ~ travel across or through._


Pre-order Traversal
 --Pre-order traversal is to visit the root first. Then traverse the left subtree. Finally, traverse the right subtree.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i89qdmtd07qcba63d1wf.png)
 The red indicates that we return from the visit on the node to move to the next node, but continue to move down on all left nodes. 
 
In-order Traversal
 --In-order traversal is to traverse the left subtree first. Then visit the root. Finally, traverse the right subtree

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

In a binary search tree, all data is retrieved in a sorted order using in-order traversal.

 
Post-order Traversal
 --Traverse the left subtree first. Then traverse the right subtree. Finally, visit the root.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ipm2wmzajvulwx54uww.png)
Personally I think this one is a bit hard foe me to wrap my head around. Spend some time running the numbers back in your head and understand the map.

I hope this makes sense and simplified the Binary Tree. Next post I'd like to cover recursions using one of these traverse methods.

When you delete nodes in a tree, deletion process will be in post-order, when you delete a node, you will delete its left child and its right child before you delete the node itself.