teleren/devto huggingface dataset:
TIL Blog Day 2
Tags: webdev, beginners, programming, css
Published: 2023-07-15 02:15:56

Day 2 of Tech Prep went well. Today I worked on Raghu's HTML review. I have done the Codecademy HTML and CSS modules in the past but its always good to get a refresher. 

The review was very helpful and went over some basic HTML elements and how they work. I think the main takeaway from the HTML review was the difference between inline and block elements. 

Along with the HTMl review, we also got a quick refresher on CSS and the Box model. The final portion of the CSS section was an overview on Flexbox and a link to Flexbox Froggy which is a helpful utility that helps you understand Flexbox syntax with a quick, fun game.

If anyone is looking for more Flexbox practice, be sure to check out Flexbox Zombies [here](https://mastery.games/flexboxzombies/).
Forays in Ruby
Tags: beginners, ruby
Published: 2023-07-15 01:24:53

Today I worked on several Ruby modules. I worked through these modules relatively quickly, as I have been preparing with exercism. Here's a link to my public facing profile on that site: https://exercism.org/profiles/MetaWorldComputing.

So far, I like Ruby's clean syntax and the speed with which it allows me to write functional code. However, it does have a reputation of incurring performance costs, so I will continue my endeavors learning Rust web frameworks.

That's all for now,

Andrew
How to fix Missing Preprocessor for Sass when using Vite to create React app + Side Commands
Tags: webdev, react, sass
Published: 2023-07-15 00:00:11

Vite is used to create react applications which reload way faster than the original CRA. In a case where you would be writing Sass and using Vite to bootstrap your application, you would come across an error which states "Missing Preprocessor for Sass". Do not panic. All you have to do is to install a "fix".

```
npm add --save-dev sass
```
Just copy[](url) this command and install it if you use NPM and it should work.

## By the Side, Some commands for Creating React Apps\

/Vite/
Scaffoliding the React App: 
```
npm create vite@latest
```
Use your keyboard and type in the required fields. When done, use your keyboard and scroll to the type of react you would be writing. Once that's done, click enter. Then it should start scaffolding the folder. Once this process is complete, you should see similar commands like the ones below. You should run the commands in the order listed.

```
cd "Folder Name"
npm install
npm run dev
```

/React/
For React, you should just type in the command below and wait a while. Once done, you should see similar commands like the ones below. Follow the instructions and you should have your react app running.

Command to Create a react app: 
`npx create-react-app "folder name"`

`cd folder name`
Command to start the react app on your local computer: 
`npm start`

Really Simple and Easy.
Reimagining DORA Metrics & Leveraging Feature Flags with Split
Tags: programming, devops, productivity, podcast
Published: 2023-07-14 23:57:17

Does the emergence of feature flags affect the interpretation and utility of DORA metrics?

On this week’s episode of Dev Interrupted, host Dan Lines and Ariel Perez, VP of Engineering at Split.io, discuss the state of DORA metrics and whether they need reimaging in a world of feature flags. Listen as Ariel explains why he believes feature flags are more than a tool, and have begun to reshape our understanding of software development and the metrics we use to measure it.

Dan and Ariel also touch on how feature flags can drastically reduce lead time and mean time to recover, and conclude their chat with an intriguing look at the granular nature of control in the modern software engineering landscape, where the unit of control has shifted from the application as a whole to individual features.

{% spotify spotify:episode:6AdOUEWrfaFpgUISulNfBr %}

## Episode Highlights:
* (2:05) Introduction
* (7:15) Pursuing productivity at the expense of effectiveness
* (15:50) Project allocation discussion
* (24:55) Reimagining DORA metrics
* (31:30) Radical ideas for DORA
* (41:25) How teams should invest in shipping faster

[Read the full episode transcript
](https://devinterrupted.com/podcast/reimagining-dora-metrics-leveraging-feature-flags/)

---

***While you’re here, check out this video from our [YouTube channel](https://www.youtube.com/c/DevInterrupted?sub_confirmation=1), and be sure to like and [subscribe](https://www.youtube.com/c/DevInterrupted?sub_confirmation=1) when you do!***

{% youtube hdjzEZ8S5fE %}

---

## A 3-part Summer Workshop Series for Engineering Executives
Engineering executives, [register now](https://linearb.io/events/2023-summer-series/?utm_source=Dev.to&utm_medium=referral&utm_campaign=202306%20-%20Event%20-%20Summer%20Series%20-%20Podcast%20Distribution) for LinearB's 3-part workshop series designed to improve your team's business outcomes. Learn the three essential steps used by elite software engineering organizations to decrease cycle time by 47% on average and deliver better results: Benchmark, Automate, and Improve.

Don't miss this opportunity to take your team to the next level - [save your seat today](https://linearb.io/events/2023-summer-series/?utm_source=Dev.to&utm_medium=referral&utm_campaign=202306%20-%20Event%20-%20Summer%20Series%20-%20Podcast%20Distribution).

[![Register Today](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nd6b3egikvnssdi9x50g.png)](https://linearb.io/events/2023-summer-series/?utm_source=Dev.to&utm_medium=referral&utm_campaign=202306%20-%20Event%20-%20Summer%20Series%20-%20Podcast%20Distribution)
Today I found a great example...
Tags: captcha, a11y, webdev, beginners
Published: 2023-07-14 23:15:34

Continuing on my post about accessibility from the other day, earlier I was signing up for an account on a website, and I think I may have found a perfect example of some of the features I was mentioning the other day.

First: It is not a traditional CAPTCHA, although it does feel similar to one:

![LibraryThing's Robot Check Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04huwl6152v4oa4d5pi1.png)
Above is [LibraryThing](https://www.librarything.com/)'s Robot Check Page.  First you will note that it is thematically appropriate, instructing the user to select "cookbooks and other books about food or drink" from a series of images.

![Inspect Element results for Library Thing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ndsnzcu5e433f4oyp5p.png)
When you use your browser's developer tools to inspect the form, you will see that it appropriately uses ARIA labels and alt descriptions to accurately describe the different options it is requesting you to select from.  Here, the book is _The Blighted Stars (Volume 1) (The Devoured Worlds, 1)_.

Those with visual impairments should have no problem understanding the prompt, and assessing each option.  I believe that most, even if not familiar with the book, would be able to assess the title and determine that it is not a cook book.


![LibaryThing invitation 'Contact Us' if there are difficulties completing the CAPTCHA ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vuql756jrl5bxydvcvwd.png)
And finally, at the bottom of the page, they include an advisement explaining the purpose of the robot test, and inviting you to reach out if you have any difficulties completing it.  This of course shows that, while it may be impossible to prepare for every eventuality, you should still be willing to provide a recourse for those who still cannot access your site despite your best attempts.


I'm sure, of course, there are downsides to this approach.  A bot probably, eventually, could be programmed to identify book genres from their covers.  In fact, I'd imagine we are on our way to that very outcome.  Additionally, including a "contact us" link may increase the amount of spam emails they receive.

All things considered, I think this is a great example of attempting to balance security with accessibility.  I also think it goes to show how much we can all benefit if we "inspect" the sites we all visit every day!  You'll be amazed at the tips and tricks you can discover.

Related:
[How to use Inspect Element in Chrome, Safari, and Firefox](https://zapier.com/blog/inspect-element-tutorial/)
An overview of Write Ahead Logging - WAL in PostgreSQL
Tags: apacheage, postgres, bitnine, apache
Published: 2023-07-14 23:00:33

Even when a system failure occurs, a database management system is required to not lose any data as it is extremely crucial and hence transaction logs are an extremely essential part of any database management system.

A **transaction log** is a historical log of all the past transactions that have occurred and it is made to keep sure that no data is lost during events such as a power outage or a server crash.

In the world of computer science, **WAL** is an acronym for **Write Ahead Logging** which is a protocol to write both changes and actions made in the database, although in **PostgreSQL**, this is known as **Write Ahead Log**. In this short overview, we will take a look at the following subsections:

**- The logical and physical structure of WAL**

   The logical and physical structure of **WAL** is such that if follows the conventional insertion operations and database recovery techniques used in other databases and PostgreSQL as well. 
**PostgreSQL** will write all data as modifications into a persistent storage to prepare for failures and this historical data is known as **XLOG** records or WAL data.


**- The internal layout of WAL**


  Logically speaking, PostgreSQL writes **XLOG ** records into a transaction log which is a virtual log that consists of a 8-byte long file. A WAL segment is a 16 MB file by default and it is further internally divided into pages of 8192 bytes (8 KB).


**- Writing of WAL data**

  Now, moving on to understanding the writing of the XLOG files, by issuing the following statement: 
`testdb=# INSERT INTO tbl VALUES ('A');
`
By invoking the above statement, the internal function `exec_simple_query()` is invoked. This function writes and flushes all XLOG files to the WAL segment from the WAL buffer.
WAL writer process

 Writing operations are usually done using **DML (Data Manipulation Language)** but even non-DML operations are capable of performing writing operations in PostgreSQL. WAL writer works as a background process to check on the WAL buffer periodically and writes all the unwritten XLOG records into the segments containing the WAL.
The 34th Day of the 100 Days of Code Challenge
Published: 2023-07-14 22:41:08

Hey everyone!

Today, I worked on the real-time transcription app project, implementing Diart was super easy and successful and it's working great. Some few touch-ups to do but nothing serious, I'm sure that I'll make a pull request to the library I'm contributing this to tomorrow. I just need to finish making a changelog, test Diart with a faster-whisper backend, and that's it! Also make the model configurable and whatnot.

Love the way this came out, this took a long time to make but I learned a loooooot about streaming and working with Whisper. Some lessons, like the fact that you can condition the model with past transcriptions, were learned the hard way. Or, not checking the sample rate when trying to decode audio files. Which was apparently my problem along with the block size which was wrong, however, that I don't think I would've thought of. I've never had that problem before.

Also worked on a text summarization project for a client but I won't take any more clients after this, I'll focus on my projects :)

The next days following this will be amazing in terms of projects which will come in a lot faster now (I hope!)

That's it everyone,
Happy coding!
[SOLVED] Raspberry Pi4 won't boot, ACT light is solid green?
Tags: linux, systems, mobile, tutorial
Published: 2023-07-14 22:34:14

***TDLR;*** Before you rush to throw our your pi[e] try the following:

- A brand new SD card. 
- Burn the image to SD Card (must support `raspi-config`)

- Once the pi booted: open a terminal. Goto advanced options --> reset EEPROM [SOLVED]

**I had to also put pressure on the SD Card reader plate in order for the SD Card to clamp tighter when inserted in the slot**

worst case you resort to the final option: bring to a tech shop to verify if board is defective before throwing out as defect; save the planet!
AWS HA WEB APP
Tags: aws, cloud, linux
Published: 2023-07-14 22:21:23

Experience seamless performance and uninterrupted availability as you interact with the app's cutting-edge features
The servers are not mine tho lol 
**SO**
Starting with the creation of RDS because it takes some time to deploy, 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwfui2r4gd7hpu696qpu.png)
then going to S3 and create two buckets:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zis9f9l5c8hxs40ixadi.png)
The deployment of the word press site can take 15 minutes, I strongly recommend to follow official steps !
https://aws.amazon.com/getting-started/hands-on/deploy-wordpress-with-amazon-rds/

Some Useful TIPS:

- launch EC2 from a template, you will need it for the Auto scaling group
- The ALB, is created to span 3 subnets for the ASG instances
- It's very helpful to use health check of ALB
 

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

And finally this is my Wordpress HIGHLY AVAILABLE !
And as you can see (check link URI), I am using Cloudfront which means it gets the data it is sharing from the S3 bucket so images can load faster!!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0wkcxndtir6b7iolkfc.png)
**Final Result:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjf5rr67ct5dvur78k1z.png)
🥳 1K followers : now what ? ( learning journey, book & habits) 🌈
Tags: community, books, learning, productivity
Published: 2023-07-14 21:51:25

## 🤗 Thank you

Yesterday I got some exciting news in my mailbox:

{% twitter 1679966031425736717 %}

I **dedicate** this post to:

- @thepracticaldev for the platform and the good vibes that are injected in building a kind community
- All the followers that find the content I have produced worthwhile reading who **give feedback**

So I wanted to celebrate this with a special post... beyond social score considerations and share with you...

## 📘 My gift : a very good reading

🤗 I have made **technical writing & story telling  a weekly discipline**  to keep inspiration skills  growing ... now rather seeing it as a _**"Artist 's Journey"**_, as part of **"Lifelong Pursuit of meaning"**

📘 See below to discover the **power of daily habits** and stay on track on **learning journey to creativity** and innovation culture:

{% embed https://www.goodreads.com/book/show/40725353-the-artist-s-journey %}

Hopefully it will help you as much as it it did for me.😘
How I became a programmer
Tags: job, webdev, webdeveloper
Published: 2023-07-14 21:47:07

---
title: How I became a programmer

published: true
description: Discover the inspiring journey of how I became a programmer, from my humble beginnings to achieving my coding dreams

tags: php, job, webDevelopment, webDeveloper
cover_image: https://anastasionico.uk/img/blog/how-i-became-a-programmer.jpg
---

Hey there,
I wanted to share some exciting news with you. I've just published a brand new blog post titled "How I Became a Programmer." 

In this post, I take you on a journey through my personal experience of becoming a programmer, from the challenges I faced to the victories I celebrated. 

It's a story filled with determination, passion, and the joy of discovering a career I love.

If you've ever wondered what it takes to become a programmer or if you're looking for inspiration in your own coding journey, this blog post is a must-read. 

Join me as I share valuable insights, lessons learned, and tips for success.

So grab a cup of coffee, sit back, and let's embark on this adventure together. 

Just click the link below to dive into the story:
[How I became a programmer](https://anastasionico.uk/blog/how-i-became-a-programmer)
relation buldings
Published: 2023-07-14 21:19:22

Building and maintaining strong relationships is essential for personal and professional growth. Strong relationships can bring joy, support, and a sense of belonging to our lives. Whether it's with family, friends, colleagues, or romantic partners, investing time and effort into nurturing relationships can lead to long-lasting connections and mutual benefits.

Communication: Effective communication forms the foundation of any successful relationship. It involves actively listening, expressing oneself clearly, and being open to understanding others' perspectives. Good communication helps resolve conflicts, build trust, and foster deeper connections.

Trust: Trust is a vital component of any relationship. It is earned over time through consistent honesty, reliability, and integrity. Trust allows individuals to feel secure, confident, and comfortable in sharing their thoughts, feelings, and vulnerabilities.

Empathy and Understanding: Empathy involves understanding and sharing the feelings of others. It cultivates compassion, patience, and the ability to see things from different perspectives. Being empathetic promotes deeper connections and helps build stronger relationships by fostering understanding and support.

Respect: Mutual respect is fundamental to healthy relationships. Respecting each other's boundaries, values, and opinions creates an environment of acceptance and appreciation. It involves treating others with kindness, listening without judgment, and valuing their individuality.

Quality Time: Spending quality time together [allows relationships ](https://drelationship.com/)to grow and flourish. Whether it's through shared activities, meaningful conversations, or simply being present, dedicating time to one another strengthens the bond and fosters a sense of connection.

Support and Encouragement: Supporting and encouraging one another through both triumphs and challenges is crucial. Being there for each other emotionally, offering help, and celebrating achievements cultivates a sense of teamwork, resilience, and mutual growth.

Conflict Resolution: Conflict is a natural part of any relationship. Learning healthy conflict resolution skills, such as active listening, compromise, and problem-solving, helps navigate disagreements constructively. Addressing conflicts with respect and empathy can deepen understanding and strengthen relationships.

Appreciation and Gratitude: Expressing appreciation and gratitude for one another strengthens relationships. Acknowledging and recognizing each other's efforts, qualities, and contributions fosters a positive and nurturing environmen
Day 783 : These Days
Tags: hiphop, code, coding, lifelongdev
Published: 2023-07-14 21:16:33

_liner notes_:
- Professional : So the company brought back Refresh Fridays for a little while where basically Fridays are half days. So I updated another endpoint to a newer version while referencing the code base. Spent the rest of the day working on the radio show. I appreciate these days because I can get ahead on the radio show and other projects.

- Personal : Last night, I added a few more things to the admin section of my side project. I refactored some code so that I can call the save image function from one component and have it return the URL to where it saved the image so I can save that info into the backend. I also created another variable to save the transformed workspace URL since I added another option for folks to choose. Next thing is to hook everything up to a function I created before to save the sessions to the "database".

![A wooden shelter on a beach next to the ocean in San Diego, CA, United States at sunset with seagulls flying by. ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htl92t1791uags96u649.jpg)

Pretty much put together the whole radio show since it was a half day. Going to see if I can keep this ahead of schedule going by doing more work on my side project than I normally get a chance to. Definitely want to finish up saving sessions and at least start on editing and updating sessions. Maybe even watch some anime. Got the radio show https://kNOwBETTERHIPHOP.com on Saturday and my study sessions https://untilit.works on Sunday.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube vSz1SBGZ1Tg %}
Test-Driven Development (TDD) with React/Nextjs
Tags: react, tdd, typescript, reactjsdevelopment
Published: 2023-07-14 21:07:47

Test-driven development (TDD) with a React frontend that uses libraries like react-query, react-table, Tailwind CSS, and Mock Service Worker (MSW) involves writing tests that assert the behavior of your application. Here are some areas you might consider when writing your tests:

**Components:**

Use **Jest/vitest** and **React Testing Library** for testing components. Assert that components render correctly based on different props.
With **react-table**, test that your table components render the expected data and support the necessary interactions, such as sorting or filtering.
API Interactions:

With **react-query**, you can test your query and mutation functions to ensure they behave as expected. This includes how your app reacts to success, error, and loading states.
**MSW** allows you to create a mock server in the browser. Use this to simulate API responses and errors for your tests, ensuring your app behaves correctly given different server responses.
Styling and Layout:

With **Tailwind**, since the focus is more on utility classes and less on custom styles, it's less likely that you need to write specific tests for styles.
You can still perform visual regression testing using tools like **Cypress**, **Jest Snapshot**, or **Storybook** to ensure your UI does not change unexpectedly.
You can also use accessibility testing tools to ensure your site is accessible, which is particularly important if you are heavily customizing the styles.
Integration and End-to-End tests:

Once you have the individual units of your app tested, write some integration tests to make sure they work well together.
Tools like **Cypress** or **Puppeteer/Playwright** can be used to automate browser-based interactions, testing flows that involve several components.
Simulate user interactions like button clicks, form submissions, etc., and check if the app behaves as expected.
Edge Cases and Error Handling:

Make sure you have tests for any edge cases you can think of.
It's especially important to test your error handling to ensure your app can recover gracefully from errors.

Remember, TDD is about writing your tests first and then writing the code to make those tests pass. So you would first write tests for a small piece of functionality, run the tests to make sure they fail, then write the code to make them pass, and finally refactor the code while keeping the tests green. This cycle is often referred to as Red-Green-Refactor.