teleren/devto huggingface dataset:
Challenge: Explaining HTML DOM to audiences without any coding knowledge
Published: 2022-10-02 19:43:19

In all languages, no matter about programming or not, we write it with a goal we want to express to others. For example, in an article, we can always get the main idea by reading the outline or some keywords to summarize it roughly. Same as in web pages, but nowadays the articles are dynamite in most cases. Also, the audiences you're talking to in programming languages are mainly the system, instead of human. 

A web page is composed of 2 programming languages: HTML and CSS: HTML is for the content, CSS is for the styling. We can make a static website by only using them. However, if we want to make the content dynamic, we use programming languages to control it. DOM is a standard for controlling elements in web pages. The most-used programming language we use to connect them together is call JavaScript.

The full name of DOM is Document Object Model, a standard instead of a programming language. Therefore, JavaScript is not the only programming language for manipulating it, but the most used one for web development. DOM turns all the content in HTML documents into tree structure elements. For example, in a book we divide it into chapters, each chapter is composed of paragraphs, each paragraph has sentences......and so on. Everything is arranged and organized so that we can always quote a certain sentence or a statement precisely.

However, the difference between books and web pages is we're able to interact with web pages. As a developer, there are 2 steps we need to follow when we're going to make it happen:

1. Select: Just like quoting from a book, we must specify what we're going to interact. The difference is we're not trying to get the main idea from the document, but telling the system where the changes are going to happen.

2. Manipulate: After targeting the part, we need to tell the system what to do with them. We describe the changes we want to the system.

In addition, in many situations, we need to designate something on the web page to trigger the change described above. Buttons, toggles, and switches are the examples not that hard to imagine. You definitely have experienced interacting with one or more of them as a human being lives in 2022.

In a nutshell, DOM built a mutual standard no matter what the programming language is. We're able to achieve real-time add, get, change, and delete the HTML elements through DOM so that we can make more vivid and fancy websites than early time without refreshing web pages frequently.
Weekly 0030
Tags: weeklyretro, devjournal
Published: 2022-10-02 19:21:14

### Monday

I started the morning to work on the collecting data application for a customer.
I added one report to the other reports. I have a good architecture in the project and it’s easy to add something else.

Then I had a meeting with a lot of colleagues about managing a weird situation with a customer.

**Mood:** 🙂

### Tuesday

Vacation, it’s my birthday 🙂

![https://images.unsplash.com/photo-1601268588577-319223ba7cb3?ixlib=rb-1.2.1&q=80&cs=tinysrgb&fm=jpg&crop=entropy](https://images.unsplash.com/photo-1601268588577-319223ba7cb3?ixlib=rb-1.2.1&q=80&cs=tinysrgb&fm=jpg&crop=entropy)

**Mood**: 🥳

### Wednesday

Vacation, it’s my birthday 🙂

**Mood:** 🥳

### Thursday

Came back to work after two days off.
Too much stuff to do 🙂

Merging and updated some chapters for my LinkedIn course in the morning and a lot of work for Red Origin.

**Mood: 🤓**

### Friday

In the early morning I updated the blog post about my journey as LinkedIn Instructor.

![https://res.cloudinary.com/practicaldev/image/fetch/s--S02m4FKF--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmohrx1ipxcv8jmm6i7y.png](https://res.cloudinary.com/practicaldev/image/fetch/s--S02m4FKF--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmohrx1ipxcv8jmm6i7y.png)

Blog Post: [https://dev.to/kasuken/my-journey-as-linkedin-technical-instructor-14bn](https://dev.to/kasuken/my-journey-as-linkedin-technical-instructor-14bn)

During the morning I worked on Red Origin. In the next few weeks I will install the first version to our customer.
And another customer is waiting us for the installation.

At the end of the morning I had some meetings for my startup Brandplane. They went very well. Good news are coming the next week.

On Friday evening I finished to write my new blog post about how to record a video for your new application or SaaS.

![https://res.cloudinary.com/practicaldev/image/fetch/s--VQwvkDX_--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eghtxiiosa2nf9vdhb45.png](https://res.cloudinary.com/practicaldev/image/fetch/s--VQwvkDX_--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eghtxiiosa2nf9vdhb45.png)

[https://dev.to/kasuken/how-to-record-a-video-for-your-app-599d](https://dev.to/kasuken/how-to-record-a-video-for-your-app-599d)

**Mood: 🧑‍💻**
Tonada - A new UI library
Tags: javascript, webdev, beginners, npm
Published: 2022-10-02 19:15:31

All the new libraries focus on building a UI component for the most popular frameworks but what about the native javascript is it dead what if I am a developer who doesn't like to use react or angular or whatever of those amazing front-end frameworks? Then the best solution is to use something like jQuery or bootstrap or Tonada but why I need to use Tonada because it's a lightweight library that gives you a great performance and this will reflect on your website's visitors and SEO tools, and its easy to use as well.
Support us by sharing, and contributing.

**Getting Started**
We going to import the style files for the components we will use and let's assume we will use all the components and then import the index style file

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Import all the styles -->
    <link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/index.css" />
    <!-- Or what you going to use only and i will use input style -->
    <link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/input.css" />
  </head>
  <body>
    <div id="element" class="floating-label">
      <input class="tonada-input" type="text" name="name" placeholder="Name" />
      <label for="">Name</label>
    </div>
    <!-- (Required) ⛔ -->
    <script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
    <script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
    <script src="https://unpkg.com/tonada/dist/js/index.js"></script>
    <!-- I Going to import the Input only-->
    <script src="https://unpkg.com/tonada/dist/js/input.js"></script>
    <script>
      const input = Tonada.create("input", document.querySelector("#element"));
    </script>
  </body>
</html>
```
For more [Documentation](https://mahmoudshahin1111.github.io/tonada/)
10 Websites to Find Remote Job as a Web3 developer - Param_eth
Tags: jobs, career, web3, webdev
Published: 2022-10-02 18:12:58

####   Original Tweet from [@Param_eth](https://twitter.com/Param_eth)
{% embed https://twitter.com/Param_eth/status/1576172404740456449 %}
Most of the web3 developers don't know where they can apply for a Remote job in web3 :

10 websites to find Remote job as a Web3 developer or non-coding jobs. 
 

##### 1/ web3 career

https://t.co/dDwZAbnzYY 

##### 2/ cryptocurrencyjobs

https://t.co/4sRZSjOS5J 

##### 3/ defi jobs

https://t.co/g2drDCIIVT 

##### 4/ crypto jobs

https://t.co/cFjrFcgwgY 

##### 5/ buildspace 

https://t.co/B0YDdxDv1G 

##### 6/ useweb3 

https://t.co/4va2AHoYiy 

##### 7/ Gaby's

https://t.co/UeoWQz6xOL 

##### 8/ pomp crypto

https://t.co/AVgbBwFCZc 

##### 9/ Remote ok

https://t.co/x8NZdsn8NS 

##### 10/ Remote3

https://t.co/1BEgrOwxg5 

Join now the most Productive Telegram group of web3 learners and developer:

here you can discuss :

• Ethereum development
• Smart contract security
• Core Blockchain Development 
• Solidity Problems

https://t.co/0FJnqHGiUa 

#### Click [Here](https://www.knowledge-twitter.com/?utm_source=dev.to)  For More Posts Like This [https://www.knowledge-twitter.com](https://www.knowledge-twitter.com/?utm_source=dev.to)
A sense of power.
Tags: python, beginners, creation, programming
Published: 2022-10-02 17:55:41

Still working on the Space invaders game. Struggled with some basic things such as ship not moving, spending hours going back between my book and youtube videos, stack overflow..etc. The progress is coming along smoothly.. I am an Artist. So I love creating and destroying. Programming gives me the same feeling as a creative and I cant wait to continue growing to mesh these worlds together. I have some "ideas" for the future and learning programming gives me a sense of strength that was missing from my life. Anyways that really all I have at the moment. This is my first time blogging so bare with me.
9 websites that will change the way you learn web development - Prathkum
Tags: techtips, webdev, beginners, programming
Published: 2022-10-02 17:53:50

####   Original Tweet from [@Prathkum](https://twitter.com/Prathkum)
{% embed https://twitter.com/Prathkum/status/1576589644543705088 %}
9 websites that will change the way you learn web development (for free): 🧵 

1. Git

Check out this excellent free website to learn git visually.

🔗 https://t.co/rQJMISBDfS ![Twitter Image 1](https://pbs.twimg.com/media/FeEr1LwX0AAxkMb.jpg) 

2. Griddy

Learn and create a CSS grid.

🔗 https://t.co/a7hTbrvL78 ![Twitter Image 1](https://pbs.twimg.com/media/FeEr1gEXoAIqwD1.jpg) 
AdSpace Here!!
3. Codepip

Codepip is the platform for your favorite web development games. Gain an edge in your following interview or project.

🔗 https://t.co/X2urArPnWZ ![Twitter Image 1](https://pbs.twimg.com/media/FeEr1yiX0AAtZo8.jpg) 

4. JavaScript

Visualize JavaScript code and learn the workflow.

🔗 https://t.co/IDdTvgvR2f https://t.co/USt891vry5 
AdSpace Here!!
5. Algorithm Visualizer

Algorithms are always a little tricky to learn. But this website can make it easier.

🔗 https://t.co/KKEmamuWdi https://t.co/4UJlF9OhQ7 

6. RapidAPI Learn

Learn about APIs with interactive learn labs.

🔗 https://t.co/bxwSOp4AEK ![Twitter Image 1](https://pbs.twimg.com/media/FeEr5QMWAAAuhZa.jpg) 
AdSpace Here!!
7. Cryptozombies

Learn to code Blockchain DApps by building simple games.

🔗 https://t.co/5BDXNsRg9E ![Twitter Image 1](https://pbs.twimg.com/media/FeEr5pSXkAId1Xa.jpg) 

8. useWeb3

useWeb3 is a platform for developers to explore and learn about Web3.

🔗 https://t.co/E3rS2QKDUl ![Twitter Image 1](https://pbs.twimg.com/media/FeEr60OWQAIOT2D.jpg) 
AdSpace Here!!
9. onelang

A useful tool where you can convert code from one programming language into another.

🔗 https://t.co/oGIuMcLiP1 ![Twitter Image 1](https://pbs.twimg.com/media/FeEr7NMXkAEjSoX.png) 

Thanks for checking this out.

You can check out my other threads at @PrathKum. I generally write about web development. 😁
Tremor - Free React Library for Dashboards
Tags: react, opensource, dashboards
Published: 2022-10-02 17:42:16

---
title: Tremor - Free React Library for Dashboards
published: true
description: An open-source UI component library for building insightful dashboards in a breeze - Powered by React, ReCharts and Tailwind.
tags: react, opensource, dashboards
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ivc0qt1mhdyxm13ngrc.jpg
canonical_url: https://www.admin-dashboards.com/tremor-react-library-for-dashboards/
---
Hello coders! 

This article presents [Tremor](https://www.tremor.so/), an open-source React Library for coding dashboards. The product uses a modern stack powered by Tailwind, React, and Recharts with the main focus on scientists and developers that build [dashboards](https://www.admin-dashboards.com/) and analytics products. *Thank you for reading!*

- 👉 [Tremor](https://www.tremor.so/) - `homepage`
- 👉 [Tremor](https://www.tremor.so/docs/getting-started/introduction) - official `docs`

---

## ✨ What is Tremor

Tremor is a low-level, opinionated UI component library to build dashboards. It offers components, such as charts, layouts, or input elements, covering the essential parts of a dashboard or analytical interface.

Their approach provides flexibility between beautiful defaults and fast customization. The best way to get started is to check out our templates, called [Blocks](https://www.tremor.so/blocks), for getting a feeling of how components are used and combined. 

---

## ✨ [GitHub API & Tremor](https://github.com/app-generator/sample-tremor-github-charts) `Sample`

For those interested to see this library in action, this sample pulls developers stats via GitHub public API and injects the information in **Tremor Charts**

- 👉 [GitHub API & Tremor](https://sample-tremor-github-charts.appseed-srv1.com/) - `LIVE demo`
- 👉 [GitHub API & Tremor](https://github.com/app-generator/sample-tremor-github-charts) - `sources` 

![GitHub API & Tremor - Open-Source Sample provided by AppSeed.](https://user-images.githubusercontent.com/51070104/206100669-007ecab0-3006-481e-bcf9-931971108fe3.gif)

<br /> 

---

> **Thanks for reading!** For more resources, feel free to access:

- ✨ More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Django, Flask, and [React](https://appseed.us/apps/react)
- ✨ More [Admin Dashboards](https://www.admin-dashboards.com/) - a huge index with products
'Hacks' To Automate Your Life - KurtisHanni
Tags: writing, productivity, life
Published: 2022-10-02 17:42:00

####   Original Tweet from [@KurtisHanni](https://twitter.com/KurtisHanni)
{% embed https://twitter.com/KurtisHanni/status/1576194002273140736 %}
Doing things manually is killing your productivity.

Use these 'hacks' to automate your life: 

• Batch your days

Context switching kills your productivity and attention.

Batch similar tasks and keep them at the same time each week.

Examples:

 ▸ Cooking
 ▸ Mail sorting
 ▸ House chores
 ▸ Weekly planning
 ▸ Email processing
 ▸ Meetings (use Calendly) 

• Integrate your apps

Look for apps that are integrated and use Zapier for ones that are not.

The options are endless.

If you use an app for it, you can probably integrate it elsewhere.

Word of warning: don’t go down the “black hole” of optimization 

• Outsource the work

Don’t like it or don’t know it? Have someone else do it.

Examples:

 ▸ Lawn mowing
 ▸ House cleaning
 ▸ Maintenance work
 ▸ Research projects
 ▸ Administrative tasks

With sites like Upwork, Fiver, &amp; remote VAs, it has never been easier. 

• Get things delivered

Delivery has never been more convenient (even same-day if often available).

Automate delivery of:

 ▸ Coffee
 ▸ Toiletries
 ▸ Groceries
 ▸ Supplements
 ▸ Baby supplies
 ▸ And more 

• Automate your home

Home automation is not only useful but fun.

Hook up your:

 ▸ Lights
 ▸ HVAC
 ▸ Irrigation
 ▸ Appliances
 ▸ Security Systems

Setting up the right automation can save you time, money, and make you more secure. 

• Create “rules” to simplify

Small decisions increase your daily stress. By creating “automatic” decisions, you reduce that stress.

Examples:

 ▸ Friday night with family
 ▸ Create email templates
 ▸ Process mail once a week
 ▸ Wear the same clothes daily 

• Use shortcuts on your phone

Most of us keep our phones with us at all times.

Examples:

 ▸ Text expanders
 ▸ Backup your data
 ▸ Quiet/focus mode
 ▸ Save battery mode
 ▸ Reminders by location
The list is endless! 

• Save your favorites or interests

When we hold ideas in our head they get lost or create distraction.

Save lists of:

 ▸ Books to read
 ▸ Movies to watch
 ▸ Projects to tackle
 ▸ Meeting agendas

These clear up mental space and make you less “forgetful.” 

• Autopay your bills &amp; investments

Every bill and investment should be automated. If it can’t be, you should change your provider.

There is no excuse for this in this day and age.

This will save you money and time. 

There are so many automation options out there, it’s hard to name them all.

Quote Tweet this thread with your favorite life automation you have set up:
{% embed https://t.co/lOzFtESAon %} 

Financial literacy is one of the most important skills you can learn.

Each week I teach 1 financial concept to 6,000+.

Join today so you don't miss out:
{% embed https://t.co/sYZWoKcgpN %} 

#### Click [Here](https://www.knowledge-twitter.com/?utm_source=dev.to)  For More Posts Like This [https://www.knowledge-twitter.com](https://www.knowledge-twitter.com/?utm_source=dev.to)
ActionStore: Real-time Svelte stores for Rails
Tags: rails, ruby, svelte
Published: 2022-10-02 17:18:21

Hey there,

in this post I'd like to introduce [ActionStore](https://github.com/buhrmi/actionstore), a new way to build real-time applications with [Ruby on Rails](https://rubyonrails.org) and [Svelte](https://svelte.dev). It's still experimental and far from a 1.0 release, so expect lots of bugs.

> TLDR: ActionStore allows you to push real-time updates into Svelte stores from your Rails backend.

## In the beginning...

Many years ago (around 2007), Rails introduced the concept of [remote Javascript](http://railscasts.com/episodes?utf8=%E2%9C%93&search=rjs), a technique of sending raw jQuery scripts through XHR to update the DOM. This enabled a whole new world of new "web 2.0" applications without writing much Javascript.

Things evolved, and many new frontend frameworks emerged. One of these new frameworks was Svelte. It has an amazing community, and I stuck with it ever since.

With ujs gone, I wanted something that allowed me to push updates to the DOM from the backend, but having those updates rendered by Svelte, instead of sending jQuery scripts. Preferably in real-time over ActionCable. The guys at Basecamp probably felt the same itch and have created [HotWire](https://hotwired.dev) to address it. But as [explained before](https://dev.to/buhrmi/setting-up-a-new-rails-7-app-with-vite-inertia-and-svelte-c9e), I very much prefer component-based frameworks over sending server-side rendered HTML as is the case with HotWire.

## Enter ActionStore

This is where ActionStore comes in. With ActionStore you can subscribe to ActiveRecord models via ActionCable, and push data directly into Svelte stores. [When combined with Inertia](https://dev.to/buhrmi/setting-up-a-new-rails-7-app-with-vite-inertia-and-svelte-c9e) it's probably one of the easiest ways to set up a real-time app with Rails and Svelte.

## Example, please

Okay, let's start off by creating a real-time Svelte store using the `subscribe` method.

```html
<script>
import {subscribe} from '@buhrmi/actionstore'

// you need the signed global id of the record you want to subscribe to
export let user_sgid

// Calling `subscribe` will set up an ActionCable subscription and return a 
// Svelte store which you can push to
const user = subscribe(user_sgid, {})
</script>

Hello {$user.name}

```

Now you can populate this store from the backend:

```ruby
class User < ApplicationRecord
  has_actionstore

  def subscribed channel
    push_update name: 'Rich Harris'
  end
end
```

And now, whenever you push an update to the store, the DOM automatically updates. No matter if it is triggered by an HTTP request, or from a cronjob or background service. And by doing it this way, you also unlock the treasure trove of [Svelte transitions](https://svelte.dev/tutorial/transition).

This is exactly the way I always wanted real-time apps to work. There are a lot more things you can do with it. Check out the [README](https://github.com/buhrmi/actionstore) for more examples.

If you end up using this for something, let me know :)

Take care, and as usual, happy coding!
Canadian Job Websites - SummerOkibe
Tags: techtips, jobs, career
Published: 2022-10-02 17:17:05

####   Original Tweet from [@SummerOkibe](https://twitter.com/SummerOkibe)
{% embed https://twitter.com/SummerOkibe/status/1576287776274026496 %}
Canadian Job Websites 👇🏽

📍Alberta: https://t.co/dl12jjy6kM

📍British Columbia: https://t.co/9wqoZkmwPT

📍Manitoba: https://t.co/BfrAcvomXY

📍New Brunswick: https://t.co/4TiH25O1nl

📍Newfoundland: https://t.co/Tb8pUaF7Zb

📍Prince Edward Island: https://t.co/KCdOc8gtvF

AdSpace Here!!


📍Ontario: https://t.co/3gZCL1jj5K

📍Quebec: https://t.co/7eS7CaQ6DG

📍Saskatchewan: https://t.co/5lNWW2J8gX

📍Northwest territories: https://t.co/RcuUMjGf1A

AdSpace Here!!

📍Nunavut: https://t.co/oN7TPxcf7r

📍Yukon: https://t.co/Dh0THrXGfm

📍General: 

- https://t.co/rspWjFOkj9

- https://t.co/tI2CcLBn0t

- https://t.co/PWrz6j7B1Z

- https://t.co/fPF7byb7GS

- https://t.co/FCnAOWEDPl

- https://t.co/EsheoC6771

✘ 𝑇ℎ𝑒 𝐸𝑛𝑑． 

#### Click [Here](https://www.knowledge-twitter.com/?utm_source=dev.to)  For More Posts Like This [https://www.knowledge-twitter.com](https://www.knowledge-twitter.com/?utm_source=dev.to)
Lab 3 - working in multiple branches
Tags: github, branches
Published: 2022-10-02 17:14:52

Project Repo: [ap21-ssg](https://github.com/a-parris21/ap21-ssg)

<u>New Features added</u>
- [Issue 19 - User can specify an output directory](https://github.com/a-parris21/ap21-ssg/issues/19)
- [Issue 20 - Recursive folder parsing](https://github.com/a-parris21/ap21-ssg/issues/20)

<u>Merge Commits</u>
- [Merged issue-19 into main](https://github.com/a-parris21/ap21-ssg/commit/7517130)
- [Merged issue-20 into main](https://github.com/a-parris21/ap21-ssg/commit/51d58d9)

Working in parallel branches for adding new features ensured that, when I made any changes to the code, if the new changes generated errors or broke the program; the previous bug-free stable version would remain intact and I wouldn't lose that work.

I was able to code the solution for 'issue-19' (allowing the user to specify an output directory) without losing any of the progress I made prior to adding this new feature.

I encountered some issues when I attempted to merge the solution for 'issue-20' (adding support for recursive file parsing). I resolved the conflicts generated when attempting to merge the two branches into 'main' [here](https://github.com/a-parris21/ap21-ssg/commit/d150685).
However, for one of the functions, I merged from the wrong branch, but since only minor changes to the code (about 4 lines total) were necessary, I went back and manually adjusted the code.
See [Issue 21 - Resolved conflicts between issue-19 & issue-20 merges](https://github.com/a-parris21/ap21-ssg/issues/21) for details.

I think that, in reference to merging the function from the wrong branch, it would have been a better solution to revert the changes, and then re-merge using the correct branch. However, since the changes I needed to make were very minor, I opted to edit the code manually this time.