teleren/devto huggingface dataset:
Reflecting on My Full Stack Bootcamp Experience
Tags: beginners, codenewbie
Published: 2023-04-28 10:34:41


Last year, in January, I started a part-time, online bootcamp to become a full stack developer. I recently completed the program, and I'd like to reflect on my experience, share what I learned, and provide some advice for those considering a bootcamp.

## Introduction

I chose the bootcamp because it was affordable and part-time, with a five-hour-per-week mentorship. Although it was a smaller company in Hungary, I decided to enroll because I wasn't sure whether web development was my long-term career path, and I didn't want to spend too much money or time on it.

## Bootcamp Structure

The full stack web development program had three modules: HTML/CSS, JavaScript (with NodeJS and MongoDB), and PHP and MySQL. I had two different mentors, and the online classes were two and a half hours, twice a week, except for the last module, which I chose to do for five hours on weekends.

## Personal Reflection

I found the weekday classes more beneficial, as I appreciated the day break and the long weekend for practicing. Having five hours of class on the weekend, with my family at home, made it difficult to focus and study. It was also a lot of sitting, and I lacked motivation to practice the next day. The weekdays were already filled with work, so it was hard to organize studying and practice during the last module.

The teaching style mattered a lot to me, and I was lucky to have motivated mentors who gave me the energy to do my best. Due to my determination to be the best, I practiced a lot and worked on side projects, which helped me during my job search.

## Struggles and Fears

Initially, I was afraid of organizing my work with the course and studying while having a family. Then, I made a big decision to quit my job and focus 100% on changing my career and transitioning to tech. I feared that I would regret my decision, but having a clear goal to get a job made me stronger and more motivated.

At the beginning of the course, I was worried that I would waste my time as it was just five hours per week, and I was jobless. However, I always found topics to read about, such as a JS book or other videos, and implemented them in small and then bigger projects.

I was afraid of losing motivation, which happened in the last module. By then, I had fallen in love with JS and worked with it every day. Therefore, learning PHP on the weekend was demotivating. However, I came up with a plan to build a project in PHP and Vue Js framework after a few weeks, which helped me stay motivated, and I ended up with an awesome project.

## My Advice for Bootcamp Students

Have a clear goal and think about it whenever you feel down. Being a part of the community helps, as you can attend meetups, pair code, and practice together. Being social will help you realize you are not alone in your struggles.

If you lose motivation to practice, find a topic that interests you and build something you want to build.



All in all, I am happy that I made the hard decision to transition to tech. I am happy where I am now and strive to be better every day.
Cara Upgrade Laravel 8 menjadi Laravel 10
Published: 2023-04-28 10:15:13

Berangkat dari pengalamanku yang mau install laravel 10, tapi karena aku menggunakan php 7.4 maka yang terinstall adalah Laravel 8. Trus saya googling sana sini untuk upgrade laravel 8 ke Laravel 10. Ternyata caranya cukup mudah.

Pertama langsung saja masuk ke applikasi laravel 8 kita, dalam hal ini aku menggunakan app dari repoku yang salah install itu.

```
git clone https://github.com/nozamidotid/laravel-10.git
cd laravel-10
composer install
cp .env.example .env
php artisan key:generate
```

Selanjutnya edit file .env sesuai dengan database yang digunakan dan pastikan apps Laravel 8 nya berjalan dengan normal. Untuk mengecek versi framework Laravelnya bisa gunakan perintah

```
php artisan -V
```
![laravel version](https://miro.medium.com/v2/resize:fit:828/format:webp/1*NYTcJoxykIzXwp_Y2OVlig.png)

Setelah kita pastikan apps berjalan dengan normal, selanjutnya kita buka dokumentasi laravel untuk upgrade versi laravelnya. Lansung saja menuju ke [link ini](https://laravel.com/docs/10.x/upgrade#main-content) untuk melihat dokumentasi upgrade laravel 10.

![Dokumentasi Laravel](https://miro.medium.com/v2/resize:fit:828/format:webp/1*4hID6ikJ6C2u-4BMeaMpHA.png)

selanjutnya cek versi PHP dan composer yang digunakan di lokal. Karena Laravel 10 ini mengharuskan menggunakan minimal php 8.1.0 dan composer 2.2.0

```
php -v
composer --version
```
![Composer Vesion](https://miro.medium.com/v2/resize:fit:828/format:webp/1*LxChUPsJM8FyymkY0nWl-g.png)

selanjutnya kita edit file composer.json nya sesuai dengan panduan dari dokumentasi laravelnya.
![Upgrade Laravel Documentation](https://miro.medium.com/v2/resize:fit:828/format:webp/1*2rW5qg-8ESZUakUOZtjVrQ.png)

bagian laravel frameworknya jadi 10.0 dan seterusnya. Ada satu hal yang menjadi catatan yaitu pada laravel 8 ignitionya menggunakan facade/ignition namun pada laravel 10 ini menggunakan spatie/laravel-ignition dan untuk handling corsnya sudah tidak menggunakan fruitcake/laravel-cors. Jadi dua dependencies itu bisa diremove. Dan untuk setting handling cors perlu disesuaikan pada file app/Http/Kernel.php

```
Ganti \Fruitcake\Cors\HandleCors::class,
dengan \Illuminate\Http\Middleware\HandleCors::class,
```

Dan pada app saya ini menggunakan dependencies tambahan yaitu laravel breeze jadi pada laravel breeze juga perlu diupdate menggunakan versi yang support laravel 10, dalam hal ini saya menggunakan versi 1.20.2.

Satu lagi pada minimum-stability di composer.json dirubah menjadi stable atau bisa dihapus juga minimun-stability nya.

![minimum stability Laravel](https://miro.medium.com/v2/resize:fit:828/format:webp/1*SLpRDdCBTuAit7IOvXvtjA.png)

proses selanjutnya yaitu jalankan perintah composer update dan tunggu prosesnya selesai. Akhirnya apps laravel 8 telah terupgrade menjadi laravel 10. Bisa di cek lagi dengan menjalankan perintah php artisan -V.

```
composer update
php artisan -V
```
![Laravel 10](https://miro.medium.com/v2/resize:fit:828/format:webp/1*1gSJ8A2A6PwiaCFPqNYmKQ.png)
How to improve the page speed index of your website? - Part 2
Tags: webdev, javascript, beginners, programming
Published: 2023-04-28 10:08:10

In [part-1](https://dev.to/canopassoftware/how-to-improve-the-page-speed-index-of-your-website-2n07), we learned to improve page speed score by improving resources like Images, Javascript, and CSS. Check out [this article](https://medium.com/canopas/how-to-improve-the-page-speed-index-of-your-website-a727af7d4d9d) to learn more.

In part-2, we will see other properties like Fonts, videos, and others that are impacting your page speed performance.

Recently, we applied these solutions to the [canopas](https://canopas.com/) website and got a **performance score > 90 for mobile** on the lighthouse.
Find the improved performance below.

![Improved performance score](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/seuzt19xe1xkcld6gd7k.png)

Optimizing your website’s page speed index is crucial for providing a positive user experience and improving search engine rankings.

Compressing images and minifying code can be employed to optimize website performance. Additionally, by reducing the size and number of font files, as well as using video compression techniques, you can significantly improve your website’s speed.

By taking these steps to improve your website’s speed, you can ensure that users have a seamless and enjoyable experience on your site, leading to increased engagement and conversions.

For a detailed article, check out [canopas blog](https://blog.canopas.com/how-to-improve-the-page-speed-index-of-your-website-part-2-8e747f595f68).
How to install Laravel globally in Ubuntu
Tags: webdev, beginners, laravel, programming
Published: 2023-04-28 09:59:30

=============================================================

Open your terminal using `Ctrl+Alt+T` and type the following commands

## Step 1: Install Laravel
```bash
composer global require "laravel/installer"
```

## Step 2: Add composer to path .bashrc file to access laravel globally
```bash
cd
sudo nano .bashrc
```

## Edit environment config file and add this line
```bash
export PATH="$PATH:$HOME/.config/composer/vendor/bin"
```

## Reload config path
```bash
source ~/.bashrc
```

## Step 3: Create a new Laravel application
```bash
laravel new blog
```

## Step 4: Install missing packages and their dependencies
```bash
cd blog
composer install
```

## Step 5: Test the application
```bash
php artisan serve
```
Open a web browser and visit `localhost:8000` to see the laravel welcome page

## Step 6: Stop server
Terminate php server in terminal by pressing `Ctrl+C`	

Thus you have successfully installed laravel globally.
Database Cluster, Databases, and Tables in PostgreSQL
Tags: postgres, database, opensource, apacheage
Published: 2023-04-28 09:57:42

PostgreSQL is a powerful, open source object-relational database system that uses and extends the SQL language. It is designed to handle a wide range of workloads, from small single-machine applications to large-scale, high-performance web applications with many concurrent users. It offers many features that make it a popular choice for developers, including ACID compliance, extensibility, and a large community of developers contributing to its development and support. 

In this post we will dive into the structure and layout of Postgres databases. 

Firstly, a _Database Cluster_ is a collection of databases in a PostgreSQL server. A database subsequently, is a collection of _Database Objects_ which are data structures used to either store or reference data. All Database Objects are managed by their unique **Object Identifiers (OIDs)**. 

The Database Cluster is physically a single directory known as the **base directory**. Furthermore, a database is a subdirectory under the base directory. The tables and indexes are stored as files under their respective database directories. Tables and Indexes under 1GB are stored as one file, while those with a larger size are split into multiple files.

**Tablespaces** in Postgres are additional data areas outside the base directory.

Data Files in Postgres are divided into pages of length 8192 bytes. They are numbered sequentially and the internal layout depends on the data file types

#### Reading and Writing Heap Tuples
In PostgreSQL, when a new tuple is inserted into a table, it is placed after the previous one on the same page. The page directory (pd_lower and pd_upper) is then updated to point to the new tuple. Other header data is also rewritten accordingly. 

There are two common methods to access the heap tuples in PostgreSQL: sequential scan and B-tree index scan. Sequential scan reads all tuples in all pages by scanning all line pointers in each page. B-tree index scan uses an index file containing index tuples with keys and TIDs pointing to the target heap tuple. If the index tuple is found, PostgreSQL reads the desired heap tuple using the obtained TID value, avoiding unnecessary scanning in the pages.
New Relic and php-fpm on Ubuntu
Published: 2023-04-28 08:53:15

This is a sad story of a great service with very poor documentation and abysmal customer support.

When installing New Relic agent, it will not work out of the box.

How to debug:

1. When you install the deb repository, remember do replace `http` with `https`. Otherwise the repository will not load:
`Failed to fetch http://apt.newrelic.com/debian/dists/newrelic/InRelease 301 Moved Permanently`

2. Check your INI files. Use phpinfo() and find out if the module for newrelic is loaded.

3. Go to `/var/log/newrelic/php_agent.log`. There should be lines there. For example:

`2023-04-28 10:30:39.288 +0200 (2312 2312) info: New Relic 10.9.0.324 ("lilac" - "d563196dce79") [daemon='@newrelic'  php='8.2.5' zts=no sapi='fpm-fcgi'  pid=2312 ppid=1 uid=0 euid=0 gid=0 egid=0 backtrace=yes startup=agent os='Linux' rel='5.15.0-71-generic' mach='x86_64' ver='#78-Ubuntu SMP Tue Apr 18 09' node='XXX']`

You should see things related to your SAPI, in my case php-fpm. If you are using fpm and you see things related to apache2 sapi, then you have some issues. Maybe you are loading modphp and you forgot to disable it?

4. If you still see nothing on new relic, then check Apparmor. Is it enabled? Is php-fpm in enforce mode? If so, you need to add this line to `/etc/apparmor.d/php-fpm`: 

`  /proc/*/statm r,`

then call `service apparmor reload` to reload all profiles.
My first VSCode Extension
Tags: vscode, webdev, javascript, programming
Published: 2023-04-28 08:52:36

It is my first VSCode Extension and one of my first projects since I started to explore Software development after being a WordPress Developer for almost five years.

Extension name is **[Code Typewriter Effect](https://marketplace.visualstudio.com/items?itemName=junsantilla.code-typewriter-effect&ssr=false#overview)**. This VSCode extension adds a typewriter effect to your code when activated. It is straightforward and easy to use.

## Usage
To use this extension, follow these simple steps:

1. Open the file you want to apply the typewriter effect to in your Visual Studio Code editor.
2. Press Ctrl + Shift + P or Command + Shift + P on Mac to open the Command Palette.
3. Select Code Typewriter Effect from the available options in the Command Palette.
4. The typewriter effect will be applied to your code instantly.

## Features
More features soon!


[https://marketplace.visualstudio.com/items?itemName=junsantilla.code-typewriter-effect&ssr=false#overview](https://marketplace.visualstudio.com/items?itemName=junsantilla.code-typewriter-effect&ssr=false#overview)
Cypress-Qase integration
Published: 2023-04-28 08:50:06

As I introduced myself in previous blogs, I will skip that part in this one. As you already saw in the title, theme for this blog will be connecting Cypress to test management tool called [Qase](https://qase.io/). So that on run in Cypress, we create a test run in Qase too!

I will do it from freshly installed cypress project. After installing Cypress, we need to install dependencies [**cypress-multi-reporters**](https://www.npmjs.com/package/cypress-multi-reporters) and [**cypress-qase-reporter**](https://www.npmjs.com/package/cypress-qase-reporter).

Now we are ready to add the configuration in order to be able to create test runs in Qase too! In **cypress.config.js** we need to configuration for **cypress-multi-reporters** that we installed and for **cypress-qase-reporter**. Really important part here on the photo below is **cypressQaseReporterReporterOptions** because  you need to setup your API token which you generate in your QASE account, you need to put your **projectCode** which you can see in the QASE too, **basePath** is always the same and **rootSuiteTitle** is in which suite your test cases are located.
![Configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8r4pzs9bghk32uigea1e.png)

So when we setup all this, we are ready to assign values to variables **QASE_REPORT** to equal **1** and **QASE_RUN_NAME** to equal whatever we want. In this case I am using **Windows** and I will do it in **Cypress CLI** as on photo below
![Setting variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91vg28co7whdebm7bs02.png)
In this example test run will be created in Qase app with the name **Cypress-automation-run**

So the configuration is done, now we need to go to spec file in Cypress and import qase function as on photo below
![import qase into specs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvs0dphgw42746d15tdh.png)
Then in our test we call it like this
![calling qase in test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ljbhnj528yu8f0dsl51.png)
**So the test case with the ID-1 in QASE will be displayed in the Test run when cypress finishes the run, cases that don't have ID in Qase will be created under root rootSuiteTitle > describe section in test > test cases created here**
![Created run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlr0ienceqo10fkmqvjv.png)
Useful links:
https://app.qase.io/user/api/token
https://github.com/qase-tms/qase-javascript/tree/master/qase-cypress
stackstream X Product Hunt
Published: 2023-04-28 08:40:39

**Product Hunt**, the go-to platform for early adopters, tech enthusiasts, and investors, can help your product gain traction and buzz. It can be a game-changer for your startup, but it requires a well-planned strategy and execution. By building your audience, making an impact on launch day, and keeping the momentum going, you can create a buzz that will help you reach new heights. Soon stackstream will launch its product on Product Hunt, and it's gearing up for a big entrance.


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

**stackstream** is a live code streaming platform that allows developers to share their coding process in real-time. This enables developers to showcase their work, teach coding skills, and collaborate with fellow developers. It is a one-stop-shop for all things code-related.

This platform matters because it takes the concept of open-source development to new heights. With live code streaming, developers have a platform to share their work and increase collaboration. It opens up doors for novice developers to learn new skills and gain insight into the coding process of experienced developers by fostering tech communities who want to learn and grow together. It is a game-changer, plain and simple.

The stackstream team is keenly aware of the importance of the Product Hunt launch, and they're pulling out all the stops to make it a success. They're seeking feedback, critiques, encouragement, and anything else that could help them improve the product and make it more user-friendly.

This launch is a reminder of the power of community in the tech industry. It's a testament to the importance of collaboration, innovation, and creativity in creating products that meet the needs of users. stackstream's success on Product Hunt will depend on the support of the community, and the company is counting on their help to propel it to new heights.

To sum up, the launch of stackstream on Product Hunt is a major milestone for the company, presenting an excellent opportunity for the tech community to explore and understand the platform. By introducing a fresh and innovative approach to live code streaming and collaboration, they have the potential to transform the way developers and remote teams collaborate.
Creating Dynamic Web Applications with PHP and MySQL
Tags: webdev, mysql, php, programming
Published: 2023-04-28 08:30:00

**Introduction**
PHP and MySQL are two powerful tools for building dynamic web applications. In this article, we'll explore the basics of using PHP and MySQL together to create dynamic web applications. We'll cover the fundamentals of PHP and MySQL, and provide tips and best practices for building dynamic web applications.

1. Introduction to PHP: PHP is a popular programming language for building dynamic web applications. We'll cover the basics of PHP, including variables, arrays, and functions. We'll also discuss how PHP can be used to generate HTML and interact with a MySQL database.

2. Introduction to MySQL: MySQL is a popular open-source database management system that can be used with PHP to build dynamic web applications. We'll cover the basics of MySQL, including creating tables, inserting data, and running queries.

3. Building a dynamic web application: We'll walk through the process of building a dynamic web application using PHP and MySQL. We'll start by creating a database and setting up a connection to MySQL. Then, we'll create a PHP script that interacts with the database to display data on a web page. We'll cover topics such as retrieving data from a database, displaying data in a table, and creating forms for user input.

4. Best practices for building dynamic web applications: We'll provide tips and best practices for building dynamic web applications with PHP and MySQL. These include security considerations, error handling, and optimizing performance.

**Conclusion**
PHP and MySQL are powerful tools for building dynamic web applications. By understanding the basics of PHP and MySQL and following best practices, you can create robust and secure web applications that interact with a database and provide a great user experience. Remember to test your web application thoroughly to ensure that it works as intended.

(Generated Using ChatGPT)
How to build a Chrome Extension with Flutter in 2023| Guided Tutorial
Tags: flutter, javascript, beginners, tutorial
Published: 2023-04-28 08:12:30

Learn how to create a Chrome extension with Flutter that can enhance your browsing experience and boost your productivity. Follow these 5 easy steps to get started today!


Are you tired of switching between multiple apps and websites while browsing the web? Do you want to streamline your workflow and boost your productivity? If so, then you might be interested in creating your own Chrome extension with Flutter!

Flutter is a powerful and flexible framework for building beautiful and high-performance mobile and web applications. And with the help of a few simple steps, you can use Flutter to create a Chrome extension that can do everything from fetching data to automating repetitive tasks.

So, let's dive in and learn how to create a powerful Chrome extension with Flutter in just 5 easy steps!

## Step 1: Set Up Your Environment

Before you can start building your Chrome extension with Flutter, you'll need to set up your environment. This involves installing the necessary software and tools, such as Flutter SDK, Visual Studio Code, and the Chrome extension developer tools. [Here is full tutorial with all commands + source code](https://devcom.tech/how-to-build-a-chrome-extension-with-flutter/)

## Step 2: Create a Flutter Project

Once your environment is set up, you can create a new Flutter project for your Chrome extension. This involves using the Flutter CLI to generate a new project and setting up the necessary dependencies.
[Here is full tutorial with all commands + source code](https://devcom.tech/how-to-build-a-chrome-extension-with-flutter/)

## Step 3: Add Chrome Extension Functionality

With your Flutter project set up, you can now start adding Chrome extension functionality to it...

[Continue Reading...](https://devcom.tech/how-to-build-a-chrome-extension-with-flutter/)
Animals Name in Hindi and English with Pictures
Tags: animals, name, animal, names
Published: 2023-04-28 08:09:19

"<a href= "https://www.animalsnames.in/">Animals Name</a>" is a broad term that encompasses the vast array of species that exist on our planet. From household pets like dogs and cats to exotic creatures like lions and tigers, animals come in all shapes and sizes. In fact, scientists estimate that there are over 8.7 million species of animals on Earth. Some animals are known by their scientific names, while others have more common names that vary by region or language. Regardless of their name, animals play a critical role in the ecosystem and contribute to the diversity and beauty of our planet.
Birds Name in Hindi and English With Pictures
Tags: animals, name, animal, names
Published: 2023-04-28 08:08:29

<a href="https://www.birdsnames.in/">Birds Name</a> refers to the various names given to birds by humans. Every bird species has its own unique name, which is used to identify and classify the bird. These names can be based on a variety of factors, such as the bird's physical characteristics, behavior, habitat, or even its vocalizations.