teleren/devto huggingface dataset:
Primbon Jawa
Tags: primbonjawa, primbon
Published: 2022-09-11 03:34:42

Neptu dan Weton dalam Primbon Jawa yang masih banyak digunakan untuk mengetahui karakter, jodoh, rejeki, peruntungan, dan bisa juga digunakan untuk menghitung pertanian, pelayaran dan penentuan arah tempat usaha atau rumah tinggal. 

 Dalam perhitungan weton ada dua kombinasi :

1. Tanggal berdasarkan hari yang ada (senin - minggu)

2. Pancawarna / pasaran yang ada di jawa ( kliwon, legi, pahing, pon, wage)

Yang nanti dijumlahkan untuk menentukan bilangan weton, dalam menentukan jumlah weton harus berhati-hati karna ada perbedaan kalender masehi dengan kalender jawa, kalau kalender masehi berdasarkan bumi mengelilingi matahari yang dimulai pukul 00:00 - 23:59, kalau kalender jawa dimulai saat matahari menyingsing atau senja yang dimulai setelah ashar atau pukul 16:00. 

Contoh : Orang yang lahir di hari Senin Kliwon pukul 13:00 akan masuk pada hitungan weton Senin Kliwon, apabila orang tersebut lahir di hari Senin Kliwon pukul 16:00 maka pada hitungan weton masuk pada hari Selasa Legi.

**Catatan** : Apabila teman - teman mengetahui hari lahir dan jam lahir detail lebih baik dalam menentukan weton, tapi apabila ragu / lupa jam lahir maka bisa diambil dua-dua nya misal Senin Kliwon dan Selasa Legi kemudian diambil rata-ratanya

Berikut adalah neptu hari pasaran, bulan dan tahun

**Neptu Hari **

Hari   Neptu
Minggu 	5
Senin 	4
Selasa 	3
Rabu 	7
Kamis 	8
Jumat 	6
Sabtu 	9

**Neptu Pasaran**

Pasaran Neptu
Kliwon 	8
Legi 	5
Pahing 	9
Pon 	7
Wage 	4

source: https://www.informasifaktual.com/
KPI Cards UI - Border-left
Tags: css, webdev, design
Published: 2022-09-11 03:23:48

The KPI (Key Performance Indicator) cards are common in dashboard UIs where summary stats are shown, for a quick glance at the overall health of the monitored process.

By including left borders on the cards, we can provide a sublime visual hook to the user, as well as keeping the UI clean and uncluttered.

{% codepen https://codepen.io/deepakdevanand/pen/BaxzKRV %}
Webflow's 10,000 Javascript Character Limit [bypassed]
Tags: webflow, webdev, javascript, workflow
Published: 2022-09-11 02:42:24

Webflow I love you.

You make web development fun again, but...

😡 Your 10k character limit for Custom Javascript Code is killing me!

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

Here's the quick and easy way to get past it 🤩

**Step 1:**

I create a string of characters 20,000 long. I know, I know, it's a 10k limit. But I really wanted to test this! 😅

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

Step 2:

I create a Javascript file and added those 20k characters to a constant. Then added a simple JS alert popup after it.

Then I [hosted it on Github](https://github.com/NoCodeQuest/webflow-10k-limit-bypassed/blob/main/hello-20k.js):

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

**Step 3:**

Went over to JS Deliver Doc's and looked up the URL I should use.

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

I love JS Deliver. This is what the URL looks like for me:

```
https://cdn.jsdelivr.net/gh/NoCodeQuest/webflow-10k-limit-bypassed/hello-20k.js
```

**Step 4:**

Bundled up the JS Deliver URL into a Javascript tag:

```
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/NoCodeQuest/webflow-10k-limit-bypassed/hello-20k.js"></script>
```

Step 5:

Added that JS tag to my Webflow page. I like to put these before the tag so the rest of the site loads first:

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

If I just copy & pasted the raw Javascript source from my Github (and it's is well over 10k characters), this is what you get:


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

**Step 6:**

Published my Webflow project, opened the live site:

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

💥 Boom!

Worked soooooo good 😅

Here’s the [Webflow project share link](https://preview.webflow.com/preview/bypass-10k-custom-code-character-limit?utm_medium=preview_link&utm_source=designer&utm_content=bypass-10k-custom-code-character-limit&preview=36dbab61a671b97b52c879582688a9a5&workflow=preview) if it helps.

Here's the [Github Repo](https://github.com/NoCodeQuest/webflow-10k-limit-bypassed/).

There's a bunch more you could do to make development, better. But this is a great start!
Store and switch dev environments
Tags: webdev, extension, chrome, chromeextension
Published: 2022-09-11 02:23:16

As a web developer, it can be a hassle to constantly switch between various [website environments](https://breeze.bar/product/domain-environments-switcher) (e.g. dev, uat, prod). This [Breeze Chrome Extension](https://chrome.google.com/webstore/detail/breeze-website-management/gedoaajonjaiigaefeaanpfmhnadkgkm) simplifies the process by allowing you to quickly swap domains between specified URL groups. This way, you can stay on the same page while keeping the rest of your development process streamlined.

- Create an unlimited number of Environments
- Unique colour for each Environment
- Share it with your team
- Access From Extension Bar
- Environment Password

{% embed https://www.loom.com/share/6a620bcb9a774e318b84d1b3e4d86ce3 %}
The Classic Newspaper Website template
Published: 2022-09-11 02:00:37

Khmer Web's upcoming website template is the "Classic Newspaper" inspired by the real newspaper The Washington Post with the ability to publish unnumbered videos and movies.

[https://khmerweb.deta.dev/post/aw0gfxhvi6l6](https://khmerweb.deta.dev/post/aw0gfxhvi6l6)
Looking for a Startup to work with.. 🔥🔥
Tags: javascript, opensource, startup, job
Published: 2022-09-11 01:36:43

I am a self-taught Frontend developer looking forward to working with a startup company to gain experience. I am good in python, javascript, html, css, learning php and ui /ux design. Hit me up if you can help. Willing to work for minimum wage just to gain experience. I have expertise in cryptocurrency and the web3 space. I am very efficient when working with javascript compare to the other languages l know.
How do I console log the value of a component from another component?
Tags: react
Published: 2022-09-11 00:35:11

For instance:


```
export default function SomeComponent(){
return(
<SomeOtherComponent/>
);
console.log(<SomeOtherComponent/>)
}
```

That will log information about the component itself (typeof, etc.) but not the value of say, an autocomplete search result based on user input.
New YouTube Channel: Boldly Go
Tags: go, youtube
Published: 2022-09-13 08:34:31

---
title: New YouTube Channel: Boldly Go
published: true
date: 2022-09-11 00:00:00 UTC
tags: golang,youtube
canonical_url: https://jhall.io/archive/2022/09/11/new-youtube-channel-boldly-go/
---

Are you a Go developer? Thinking of learning Go?

If so, you might be interested in my new YouTube channel, [_Boldly Go_](https://www.youtube.com/channel/UC79XhRzbR3YSnm3ODqgZ6EQ).

I will be using this new channel as a place to post Go code review, coding techniques, and tutorials, and other topics specifically related to Go. This channel is far more tactical, and “down in the weeds” than the material I typically post to this list, since this list is intended for a much broader audience.

This also means I won’t typically be announcing new content on _Boldy Go_ to this channel, as it has a minimal overlap with the types of people on this list. But I would feel remiss if I didn’t at least mention it once. So consider this that once, and hop on over there and subscribe if it’s a topic that appeals to you. :)

My most recenty video is about a recent bug I found in a popular Go linter, as well as in Go 1.18:

[![](https://img.youtube.com/vi/R_odJnFIqPA/maxresdefault.jpg)](https://www.youtube.com/watch?v=R_odJnFIqPA)
* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Artificial Particle Life
Tags: javascript, tutorial, opensource, algorithms
Published: 2022-09-10 23:20:55

Recently, I made an educational simulation project on what is known as Particle Life to showcase how complexity can arise from simplicity. Particle Life is like Conway’s game of life but in Conway’s game of life the effect of the particles are confined to their surrounding neighbors only while in these simulations particles have effects on each other over longer distances. Also, the interactions rely on Newtonian like attraction/repulsion forces among the interacting particles.

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

Video Tutorial: https://youtu.be/0Kx4Y9TVMGg
Source code: https://github.com/hunar4321/particle-life
Basic Overview of Summary Functions using Pandas
Published: 2022-09-10 20:41:14


Hello everyone, in this blog post I'll cover some Summary Functions that the [Pandas Python Data Analysis Library](https://pandas.pydata.org/) offers. Let's get started!

### List of Summary Functions

#### Describe Function

The `describe()` function is used to obtain a informative statistical summary of a given Pandas DataFrame. The data that is displayed if the DataFrame contains numerical columns include the following(which is shown only the numerical columns):

- count - Amount of not-null values
- mean - Average value of the column values
- std - Standard deviation of the column values
- 25% - Shows the value of the 25th percentile
- 50% - Shows the value of the 50th percentile
- 75% - Shows the value of the 75th percentile
- max- Maximum value contained in the column values

Note: The percentile value of the column data indicate how many of the values that are less than a given percentile. A percentile is a value on a scale of 100 that indicates the percent of a dataset that is equal to or below it

#### Info Function

The `Info()` function is used to display information about the DataFrame that it is used on. The information provided by it include:

- Number of columns in the DataFrame
- Column labels
- Column data types
- Memory usage
- Range index
- Number of cells in each column

Note: The `info()` function does not have a return value

#### Value Counts Function

The `value_counts()` function returns a series containing counts of unique values.

The output object will be ordered in descending fashion. This means the first element is the most frequently-occurring element.

Note: this function excludes NA values by default

### Conclusion

Well that's it for this post! Thanks for following along in this article and if you have any questions or concerns please feel free to post a comment in this post and I will get back to you when I find the time.

If you found this article helpful please share it and make sure to follow me on [Twitter](https://twitter.com/SeanAtukorala) and [GitHub](https://github.com/ShehanAT), connect with me on [LinkedIn](https://www.linkedin.com/in/shehan-atukorala-8631491a5/), subscribe to my [YouTube channel](https://www.youtube.com/channel/UCtxed_NljgtAXrQMMdLvhrQ).
AlpineJS
Tags: javascript, alpinejs
Published: 2022-09-10 20:01:51

---
title: AlpineJS
published: true
description: I need to code something in a hurry and Alpine came through for me.
tags: javascript,alpinejs
---

Recently I needed to knock up some dynamic content on a website at short notice. I've previously used VueJS for quick and dirty projects like this and enjoyed it as a modern take on KnockoutJS. So I loaded up the Vue homepage started following the Get Started guide and quickly got into a humongous non-functioning mess.

Vue is still a lightweight, clever framework and if your project isn't full on enterprise React then it is a good choice. But what it clearly isn't any more is a drop a script on a page and get coding solution.

With a bit of a deadline (due to a mixture of procrastination and confidence that Vue would work) I needed something quick. I have also used [Hyperapp](https://github.com/jorgebucaran/hyperapp) in the past but that looks like a dead project right now (although arguably it has all the functionality you need so why keep developing it?).

So having briefly looked at [AlpineJS](https://alpinejs.dev/) in the past I decided to give it a spin and luckily Alpine was the hero I needed.

You just have to include a script and then for simple dynamic behaviour event handlers are added according to your usage and you can put simple script commands inline within the attribute value.

For my need I want to render a view based on a model and regenerate that model based on user interactions (a button click).

This is a bit more involved but still only really involves two directives: [data](https://alpinejs.dev/directives/data) and [on](https://alpinejs.dev/directives/on).

The `data` directive sets a scope for access to the data (and this bit is a little bit weird because really the model is quite abstract for me and not linked to the DOM state like a lot of the examples) and also initialises it. I created a generator function that can be called to provide an initial state and then on the subsequent events create new state. The rest of the implementation is simply showing the right values from the model in the right places in the DOM.

I also ended up using the `Alpine.data` method to try and encapsulate my whole implementation as a component, even though I actually ended up only using it once on the page.

So after a few hours of panic coding and reading and implementing from the docs I had my page up and running and a new lightweight framework that I want to try pushing on a bit more to see how much it can do before you want something more heavyweight.
Built a simple boilerplate generator for node express.js apps.
Tags: javascript, opensource, node, beginners
Published: 2022-09-10 19:59:40

Hello there,


At my job, whenever I was working on node express.js projects, I used to find myself copy-pasting the same directory and file structures over and over again. It was a repetitive and cumbersome process.


And what do we developers do to avoid repetition? Yes, you are right, we automate the damn thing!!


So, I created this simple node express boilerplate generator to ease the task. Now, whenever I need to build a microservice or quick proof-of-concept application, I use this tool to generate a complete file and directory structure for me. I can start data modeling and writing some business logic right away. It's simple and lightweight!


Here's the project link: https://github.com/gunvantsr/expressgen


Would love to hear some suggestions or feedback from the community to improve this tool. Feel free to clone, star, or fork the project.


If you're new to open-source and want to contribute to this project, you're more than welcome. I've added a contribution guide also! :)
Write Dynamically with Python & PyQt5
Tags: python, programming, tutorial, gui
Published: 2022-09-10 19:38:01

# It can be a lot easier doing it this way

## Quick Tutorial

Assuming you already know how to use the QT Designer program that can be easily installed using pip. Creating a dynamic file shouldnt be that hard to make, for me it was. I searched high and low for 2.5 days until I randomly found an interesting site that had a set by step way to try creating a dynamic python file using your interface.ui file you get when you save your design inside Qt Designer.

---

## 2 Important Things

When working with Qt Designer, after saving your work, it will be saved inside a UI & QRC file. My old way of doing things was once I converted my interface.ui file to interface.py file, I forgot my icons, because with Qt Designer and python, those are not imported for you. I struggled for days on this issue.  

Real quick.

**You must import your resource file (resources.qrc) also to  a python file. Using this command:**

` pyrcc5 resources.qrc -o resources.py `

Once you have created your python file, you wil want to import it into your dynamic file you are creating. As example below:


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

## Main.py

Or whatever you would like to call that file, this file will run your new python file, and from here you can make all the corrections to the mechanics of your program while the UI is the skeleton mode in a different file. This is helpful when you have to make changes to your UI file, this way you wont be overwriting your code that you wrote over and over again. 

---

## Hope that helps!
Avoid relative path import hell in react
Tags: javascript, react, webdev, tutorial
Published: 2022-09-10 19:37:38

[React](https://reactjs.org) is a front-end Javascript Library for building user interfaces.

You can start building your react Single Page React Application using _create-react-app_; which is a tool that takes away the hustle of stitching together build tools, and let's you focus on code; the fun stuff.

You need to have **[Node](https://nodejs.org/en/download/) >= 14.0.0** and **npm >= 5.6** installed installed on you computer.
You can create your project by running:

```bash
npx create-react-app my-app
cd my-app
npm start
```

# Relative imports

I have created web applications in react using this tool.<br>
For file imports in a folder tree that is not deep, relative import paths are just fine.

In many occasions as my project evolves to become larger, I begin to have more files with increasing folder depth.
Importing modules starts to create **relative import path hell**.
![relative import hell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8vxg47mc7qao099u6vr.png)

You can see I have imports like: `import { makeBid } from "../../../../../redux/actions/products";`.

Well, **relative import paths have some downsides**:

- This crazy import paths to a module increases cognitive effort just to trace the exact path to the module. They are hard to follow.
  Modern IDEs like _vscode_ are smart enough to import a module for you. But paths like `../../../../../` are quite displeasing and do not constitute to clean code.
- They break during refactoring. Should you move location of a module, things break.

# Absolute imports

You can use absolute paths to solve these issues.<br>
You need to configure your application to support _importing modules using absolute paths_. This can be done by configuring a `jsconfig.json` or `tsconfig.json` file in the root of your project. If you're using TypeScript in your project, you will already have a `tsconfig.json` file.

For a **JavaScript project**, you can create the `jsconfig.json` file if it doesn't already exist at the root of your project.<br>
Paste in the below code to the file.

```javascript
{
    "compilerOptions": {
        "baseUrl": "."
    },
    "include": ["src"]
}
```

For a **Typescript project**, most likely you already have a `tsconfig.json` file. You can configure the baseUrl setting inside the compilerOptions. Just ensure the following lines of code are included:

```javascript
{
    "compilerOptions": {
        "baseUrl": "."
    },
    "include": ["src"]
}
```

Now we are ready to use absolute imports.<br>
This is now what my code will look like:
![Absolute import path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zx4r80gs4nj5mogdrfoz.png)

You can see how I import using absolute path like: `import { makeBid } from "src/redux/actions/products";`.

We can now change the location of the module we are importing without fear of breaking anything. We also have an easy time finding path to our module.

I hope this is useful to you. Happy coding✨.

_Are you on twitter? Let's [connect](https://twitter.com/smitterhane)_
How To Name Classes in HTML and CSS using BEM
Published: 2022-09-10 19:22:19

Hello Buddies,

In Today's story we are discussing about naming convention in HTML and CSS. 

We are Discussing about BEM naming convention where B - Body, E - Element, M - Modifier. You may had a glance of naming classes similar as mentioned below

```
//Wrong
.catlystNavbar{ ... }
.catlystNavbarLogo{ ... }
.catlystNavbarBg{ ... }

//Correct
.catalyst-navbar {  ...}
.catalyst-navbar__logo{  ...}
.catalyst-navbar--bg{  ...}
```

BEM attempts to divide the overall user interface into small reusable components.

To understand efficiently let us take an example of our a navbar
Catalysts Navbar

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

The above navbar represents as element, such as a block of design.

Which represents the first letter of BEM that is **Block** and the component styled similarly as shown below

```
.catalyst-navbar{  ... }
```

**E - Element**

E stands for Element in BEM

For instance, the catalyst-navbar a logo and links

The logo and links are all elements within the component. They may be seen as child components, i.e. children of the overall parent component.

Using the BEM naming convention, element class names are derived by adding two underscores, followed by the element name.

```
.catalyst-navbar__logo{  ... }
.catalyst-navbar__content{  ... }
```

**M - Modifier**

M stands for Modifier in BEM

What if the navbar was modified and we could have a blue or a red background

In the real world, this could be a red button or blue button. These are modifications of the component in question.

Using BEM, modifier class names are derived by adding two hyphens followed by the element name.

For Example:

```
.catalyst-navbar--bg{  ... }
.catalyst-navbar--red{  ... }
.catalyst-navbar--blue{  ... }
```

Here is the final code I wrote for this navbar


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

**Now the question arrise , Why naming convention is required ?**

Naming things is hard. We're trying to make things easier, and save ourselves time in the future with more maintainable code.

Naming things correctly in CSS will make your code easier to read and maintain.

If you choose to use the BEM naming convention, it will become easier to see the relationship between your design components/blocks just by looking at the markup.