teleren/devto huggingface dataset:
HNGi8 x I4G Internship Goals
Tags: webdev
Published: 2021-08-15 14:08:24

My name is Pius Osuji. I am a 400L Computer Science student at Imo State University, Owerri Imo State and aspiring Frontend Developer.

I am super excited to be part of this internship program for this year organized by 14G. I have heard a lot about this program and how they help build and push those who make it to the finals to greater heights in the Tech industry. I am ready and determined to be part of the finalists for this year's edition of the program.




## STRUCTURE OF THE INTERNSHIP ##

The internship runs for 3 months with 10 stages. Interns who don't pass the tasks given are evicted at each stage. Those who get to stage 10 are those with the highest grit. Passing through the program means your skills would be tested and improved.


## My GOALS FOR THE INTERNSHIP ##


- **Learn new skills:** This is a great hands-on way for me to learn new skills and technologies that will be vital in my journey to becoming a Frontend Developer and improve my already acquired skill-set, including my soft skills.

- **Exposure:** This is a great opportunity for gaining valuable work experience and exposure. Letting me see what really goes on in the Tech industry as well as it's best practices.

- **Build my CV:** With an Internship such as HNG on my CV, I am sure to be more competitive and noticed by job recruiters and companies or organizations.

- **Meet new contacts:** The Internship only lasts for three months but it can lead to long-term benefits as you will get to meet all sought of individuals of different positions and from different places around the world. Plus, your colleagues and supervisors can be a reference for job applications, scholarship application E.T.C.






So at the end of this Internship, by God's grace and with the help of HNG I will like to be a proficient Frontend Developer and Web Master. Get a good paying job and start my very own YouTube channel to help people who plan to venture into Frontend Development.

Click the link to learn more about HNG and it's programs: 
 *[https://zuri.team](https://zuri.team)*

## Below are tutorial links to some beginner friendly courses that might be useful to anyone who wants to start their Development journey today: ##


HTML crash course for absolute beginners: *https://youtu.be/UB1O30fR-EE*

Git tutorial for beginners: *https://youtu.be/8JJ101D3knE*

Figma in 40 minutes: *https://youtu.be/4W4LvJnNegA*

JavaScript tutorial for beginners: *https://youtu.be/W6NZfCO5SIk*
Frontend Mentor - Order Summary Component
Tags: frontendmentor, webdev, css
Published: 2021-08-15 18:41:49

![The finished design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38wfqn7195baj1z4m08j.jpg)

Order Summary Component design from the website Frontend Mentor.

https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj

You can see my finished version here:

[Github repo](https://github.com/Aituos/FM--Order-Summary-Component) | [Live version](https://aituos.github.io/FM--Order-Summary-Component/)


This design wasn't that difficult to create, but it was definitely fun.

The only problem I had was with the background, more specifically I didn't know how to position it to look exactly like the original design. So I looked at some of its' properties - `background-position` and `background-size` - more closely. I'm used to setting the position to `center`, and the size to `cover`, because it always did what I wanted :laughing:.

Turns out it's possible to fine-tune the background's position. You can read more about it here:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

In the end, I set the two properties like this:

`background-position: top;`
`background-size: 100%;`

And it worked like a charm. I think.

One more thing I wanted to mention is that I recently found out you can set `aria-hidden="true"` on any HTML elements that you want to hide from screen readers, such as decorative images, so I did just that. If you use it on images, you still have to include the alt text, but set it to an empty string:

`alt=""`
Backend shorts - Use database transactions
Tags: webdev, backend, laravel, shorts
Published: 2021-08-15 19:38:41

Database transactions have many use cases, but in this post we will be only looking at the simplest and most common one: all or nothing semantics aka atomicity.

If you issue **multiple related** database queries that modify data (INSERT, UPDATE, DELETE), then you should most likely use a transaction. Here is a quick example using Laravel:

```php
function submitOrder(Request $request)
{
    // ....

    $order = new Order($someOrderData);
    $payment = new Payment($somePaymentData);

    DB::transaction(function () use ($order, $payment) {
        $order->save();
        $payment->save();
    }

    // ...
}

```

Maybe for a better understanding, here is what is going on:

```php
function submitOrder(Request $request)
{
    // ....

    // YOU: Hey DB, I want to save a bunch of data.
    DB::transaction(function () {
        // DB: Ok, tell me everything you want to save.

        // YOU: This order right here.
        $order->save();

        // YOU: And this payment right there.
        $payment->save();

       // YOU: And that's all. Just those two.
    });
    // DB: Alright, order and payment have been saved.

    // ...
}

```

By wrapping the `save()` calls in a `DB::transaction`, we make sure that either all models are saved or none of them. Or said differently, our data is always in a consistent state, which is one of the primary tasks of a backend developer. There will never be an order without a payment.

## What could go wrong?

Let's play through the scenario in which we did not use a transaction. Say the order was successfully saved but just when calling `$payment->save()` the DB goes offline, or the PHP process times out, or it crashes, or the whole machine crashes. You now have an order without a payment, which is probably not something that your application was designed to handle correctly.

The consequences will depend on the exact circumstances, but it is not something that you want to get an angry phone call at 8pm on a Sunday for.
The HNG internship: My goals and aspirations
Tags: internship, programming, hng, zuri
Published: 2021-08-15 19:51:07

&quot;*You learn so much from taking chances, whether they work out or not. Either way, you can grow from the experience and become stronger and smarter.*&quot; ~ John Legend

For the past 4-months, I have been asking myself, &quot;what next?&quot; Well, as luck would have it, that question got answered by a post I saw while walking the streets of Twitter, [HNG internship](https://internship.zuri.team/). An 8-week long, fast-paced deathmatch, giving people from different creative backgrounds a foot in the door into the professional environment and most importantly, a t-shirt as a badge of honour to really (in Nigerian lingo) &quot;loud it&quot;.

Let me introduce myself. My name is David Okeke, a software developer and an undergraduate of the Systems engineering department of the University of Lagos. Although I started programming in 2018 first with the [C# programming language](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/language-specification/introduction) succeeded by [Git and GitHub](https://www.youtube.com/watch?v=SWYqp7iY_Tc), [HTML](https://www.youtube.com/watch?v=UB1O30fR-EE), [Python](https://www.youtube.com/watch?v=rfscVS0vtbw), [CSS](https://www.freecodecamp.org/learn/responsive-web-design/) and  [Figma] (https://www.youtube.com/watch?v=jk1T0CdLxwU) in chronological order, I haven&#39;t built enough projects to develop a rock-solid portfolio. My goal is to create decent projects and strong relationships in the course of this internship.

The first few days in have been eye-opening and a tad bit overwhelming, plus having to put me out there and scour the channel by the hour for important information. The benefits however have outweighed the discomfort, such as the opportunity to increase my social network, access to resources that brighten my blind spots and premium access to mentors for free.
My tech journey so far (HNG8)
Tags: flutter, kotlin, android
Published: 2021-08-15 22:05:05

My journey into tech started on twitter, when I saw a post from Zuri internship, offering to train people transitioning into tech for the first time.

I registered for the training with a lot of expectations. I chose mobile development because I have always been curious about how mobile apps work.

After 3 months of rigorous training, I learnt to:
• Create ui with XML,
• Work with Recycler views,
• MVVM design patterns,
• Persisting data with Room DB,
• Consuming API with retrofit,

 
I have also built wonderful projects which includes:
• A sales kit for Ajocard sales team,
• An app that generates random phone 
  numbers for cold calling,
• An app that compare prices of products 
 from two different vendors(zuri final project)

I am currently learning about flutter and I am fascinated more projects will be rolling in.

I want to send a special shout out to sammybloom and ehmagbugo of the Zuri team, you guys took out time to teach us about mobile development with kotlin.

I am now in the hng internship. My expectation  is that at the end of the 8 weeks of training, I will start practising as a mobile developer, I hope to build a lot of projects and also share my progress along the way.

In a few years, I want to be the grand commander of the android battalion.

If you a a beginner like me and want to start your journey I will advice the following:
• Join the Zuri internship: 
 https://internship.zuri.team/
• Learn figma: 
 https://trydesignlab.com/figma-101-course/introduction-to-figma/
• Learn kotlin, Google codelab is a good place to start:https://developer.android.com/courses/kotlin-android-fundamentals/toc
• Learn GIT: https://opensource.com/article/18/1/step-step-guide-git
• Most importantly, follow me on twitter: @TooGood208.
Cheers and see you at the top
Ps: if you are in Nigeria check out this cool sites for cars: https://cars.ng/
MY GOALS FOR HNG INTERNSHIP 
Published: 2021-08-15 22:26:52

The HNG internship is a 3-month remote internship designed to find and develop the most talented software developers in which everyone is welcome to participate (there is no entrance exam). Interested Interns can access the internship using their laptop. Tasks are given to interns weekly. Interns who complete the tasks  advance forward. The intern coders are introduced to complex programming frameworks, and get to work on real world software. The finalists are connected to the best companies in the tech ecosystem and get full time jobs and contracts immediately.

My Goals for HNG Internship includes:

1. To be driven to harness my skills and potentials.
2. Getting to work with tasks focused with real life experience.
3. Connection and Networking with fellow Interns.
4. Learn as much as possible from the available Tutorials and resources.

Tutorials and learning resources
Figma tutorial 
https://m.youtube.com/watch?v=FTFaQWZBqQ8

Github tutorial
https://m.youtube.com/watch?v=SWYqp7iY_Tc

Html and Css tutorials
https://m.youtube.com/watch?v=vQWlgd7hV4A

Php tutorials
https://m.youtube.com/watch?v=2eebptXfEvw

HNG link:
https://internship.zuri.team/
HNG Internship
Published: 2021-08-15 23:01:19

I am currently in the HNG i8 internship which will last for a period of eight(8) weeks. The goal is to test yourself and compete with great minds as well. It's gonna be a smooth and as well rough experience, even though the goal is to get a T-Shirt and brag about the completion of the internship... Lolz

For me, I hope to connect with other developers in the internship and emerge one of the finalists. 

I also hope to gain more confidence in myself as a developer at the end of the internship.

Most importantly, I hope to secure a very nice high paying tech job after a successful completion of the internship. 

By the way, you too can be part of the internship by registering with the either of the following link: 
https://zuri.team or https://internship.zuri.team or https://training.zuri.team .

**_If you are new to programming and don't know where to begin, follow any of the links below to watch free tutorials on the track you are interested in._**

FIGMA (For UI designers) - https://www.youtube.com/watch?v=jk1T0CdLxwU

GIT (For version control) - https://www.youtube.com/watch?v=8JJ101D3knE

HTML - https://www.youtube.com/watch?v=qz0aGYrrlhU

PYTHON - https://www.youtube.com/watch?v=_uQrJ0TkZlc

FLUTTER - https://www.youtube.com/watch?v=x0uinJvhNxI

KOTLIN - https://www.youtube.com/watch?v=F9UC9DY-vIU
HNG Internship - HNGi8: My coding goals for the next 8 weeks.
Published: 2021-08-16 06:02:01

Zuri training is a free beginner training for complete tech novices handled by veteran tech experts with track records in the tech industry. HNG internship is an internship outfit of zuri training that its interest is aimed at providing training, support, mentorship and a collaborative environment to its participants to help them overcome the hurdles and challenges at the entry level into tech industry.

HNG internship is well underway in its version number eight tagged HNGi8. Fortunately, I am among the participant in HNGi8 that just kicked off, with goals that I would like to meet on or before the end of week 8 of HNGi8.

According to Bruce Lee, “a goal is not always meant to be reached, it often serves as something to aim at”. The goal is not to be perfect but to be making a significant progress in life and in the course of HNGi8, knowing fully well that achieving my goals is important but it is not the most important about goal setting. The most important thing is that you acquire values that would make you a better person in your craft.

In the course of HNGi8, I would be looking out to building strong relationships and networks. HNGi8 is a pool of people with different potentials and skills, from different fields, stacks and backgrounds, bambinos and veterans of diverse caliber. I would leverage on the team work and collaboration to build relationships and networks.

Secondly, I would leverage on HNGi8 as a platform to increase, enhance and sharpen my tech skills and knowledge in FRONTEND WEB DEVELOPMENT. This I will do by been intentional in understanding the concepts behind any tech tool I would be expose to in HNGi8.
Furthermore, personal website/portfolio gives one an opportunity to showcase his skills through projects he has worked on and show prospective employers what he can do.  Among my goals in HNGi8 is create my portfolio where I would show my skills acquired and projects I would work on in the course of HNGi8.

In either case, perfection is not necessarily the benchmark but progress. One step at a time, I want to be able to complete each task that would move me to the next stage till the final stage. I want to be a finalist by week 8 in HNGi8.

You can follow any of the tutorial link below to catch up on some technologies used in this internship:

JavaScript: https://youtube.com/playlist?list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX.

Figma: https://trydesignlab.com/figma-101-course/introduction-to-figma/ or https://www.headway.io/event-series/figma-tutorials-for-beginners.

GIT: https://www.freecodecamp.org/news/the-beginners-guide-to-git-github/

HTML: https://youtu.be/UB1O30fR-EE.

Python: https://www.freecodecamp.org/news/the-python-guide-for-beginners/

GO Lang: https://www.educative.io/blog/golang-tutorial. 

NodeJS: https://www.cloudbees.com/blog/node-js-tutorial.

If you would like to know about this internship, you can click on any of the following links: https://zuri.team or https://internship.zuri.team or https://training.zuri.team.

Thank You for reading through, for your time and attention.
Astro recipe collection website - Part 5 Hosting on Netlify
Tags: astro, netlify
Published: 2021-08-16 07:03:16

We finished our Astro recipe website, and now it's time to publish our fantastic website on the World Wide Web.

We'll be using [Netlify](https://www.netlify.com/) as our hosting provider, as it's a super simple system and setup.

## Fixing our Astro source code

Before we do anything, let's make sure we add two steps to make our lives easier.

Make sure your master branch is up to date and add a `netlify.toml` file.

```text
[build]
  command = "npm run build"
  publish = "dist"
```

This file will make sure Netlify takes the default configuration for this project.

Next up, create a `.nvmrc` file. This tells Netlify which node version to use, as it by default will use Node 12, and we want to use 14+ with Astro.

```js
v14.15.1
```

## Hosting Astro on Netlify

1. Header over to Netlify and create an account
2. Press the "New site from Git" button
3. Click on your Git provider and follow the steps
4. In the build settings, use the following settings:

![Netlify Astro build settings](https://cdn.hashnode.com/res/hashnode/image/upload/v1628525316876/8n63l7Yt4.png)

Then click the deploy button, and watch the magic happen!

You will now have your website available at the domain provided by Netlify.

[Check out the Astro recipe website on Netlify](https://modest-galileo-019727.netlify.app/)

From here, you can even change this to be your domain.

## Updating Astro code on Netlify

But what if we need to update anything?
Don't worry, Netlify makes this super easy, literally super easy!

To get a new release online, all you have to do is push your changes to the master branch! (Or whichever branch you setup)

I happen to like Netlify since it's super easy, and their free tier is massive.
But if you like to explore other options, check out [Astro's documentation for hosting](https://docs.astro.build/guides/deploy).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
CSS Silly button generator for creative developers
Tags: css, showdev, codenewbie
Published: 2021-08-29 13:53:55

Buttons! Buttons! Buttons! You know them, right? 
When you are visiting a webpage there are lots (At least one) of buttons. But most of them look boring and the same. Here’s a Silly little button generator that might increase your creativity. 

{%codepen https://codepen.io/Tronic247/pen/MWoaGZv %}

Each page load generates more than 500+ Styles for buttons. Some of them are nice while some are ugly. But, you can get inspiration from here on how to make a nice (or weird) button by looking at the generator. If you have any thoughts please share them below. 🙂
mysql database connection in php
Tags: mysql, php, webdev, wordpress
Published: 2021-08-29 13:57:47

Hi guys,

Today, we will see about mysql database connection in php.

In the world of web development, data plays a key role. To give best experience to the users, we need to keep track of user steps to make comfortable. Definitely we need to store data related to users.

```php
<?php
$servername = "localhost"; //your servername
$username = "username"; // your db username
$password = "password"; // your db password
$database_name = "database_name"; // your db name

// connect to the server
$conn = new mysqli($servername,$username,$password,$database_name);

//check whether it is connected or not.
if($conn->connect_error)
{
echo "Not Connected";
}
else
{
echo "Successfully Connected";
}
?>
```
Read: <a href="https://wordpress.org/plugins/increase-upload-limit/" target="_blank">How to Increase upload limit upto 1000GB in Wordpress using Increase Upload Limit Plugin for LIFETIME Free of Cost?</a>

In this way, we will connect to the MySQL Server using PHP.

Thanks for taking your valuable time for reading my post, if you have any queries , please leave a comment and will respond. If you find this post useful, please share it. 

Social Profile : <a href="https://www.linkedin.com/in/pavan-kumar-sadhu-47693818b/">LinkedIn</a>

Have a Nice Day!
Animated no-element typewriter
Tags: css, html, webdev, art
Published: 2021-08-29 14:22:33

---
title: Animated no-element typewriter
published: true
description: After sharing a typewriter effect with CSS, ChallengesCss beat the drums of "CSS War" and created a different effect, and InHuOfficial hopped in and is preparing a "type-righter"... Here's another entry: an animated no-element cartoon of a typewriter
tags: css,html,webdev,art
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aoax5irkvxaqdoly6puo.png
series: CSS Typewriter Effect
---

After sharing a typewriter effect with CSS, @afif beat the drums of "CSS War" and created a different solution, and @inhuofficial hopped in and is preparing a "type-righter"... Here's another entry: an animated no-element cartoon of a typewriter.

[And the demo on CodePen](https://codepen.io/alvaromontoro/full/yLXYYZY) (click the "re-run" button at the bottom right corner to see the animation again):

{% codepen https://codepen.io/alvaromontoro/pen/yLXYYZY %}

There is no HTML tab because there's no HTML code on this pen. The trick? CodePen adds a basic HTML structure, including the `<body>` tag so that we can add styles via CSS to the body, and it will look like there aren't any HTML elements, but there are some... they are just hiding!
Konversiyon Bozukluğunun Nedenleri ve Belirtileri
Published: 2021-08-29 19:11:24

Konversiyon Bozukluğu nedir? Anksiyete, panik atak, fobiler ve obsesif kompulsif bozukluklar dahil olmak üzere çeşitli zihinsel sağlık koşullarının bir kombinasyonu olarak sınıflandırıldığından, dönüşüm bozukluğunun ne olduğu sorusu karmaşıktır. Bu bozukluğun gerçek nedeni bilinmemektedir ve yalnızca geniş bir şekilde tanımlanmıştır. Bazı uzmanlar, beynin stresli olaylara tepki verme şekliyle veya geçmiş travmatik deneyimleri nasıl hatırladığıyla ilgili olabileceğine inanıyor. Spesifik neden ne olursa olsun, dönüşüm bozukluğunun bir parçası olan ezici kaygı duygusu, hastalar arasında yaygındır.
https://insanpsikolojisi.com/konversiyon-bozuklugunun-nedenleri-ve-belirtileri/
#100daysofcode [Day - 07]
Tags: javascript, programming
Published: 2021-08-29 20:05:13

Alhumdulillah today is the seventh day of my 100 days of coding challenge, and today i tried to make a site using sportsdb api. Where you can search clubs by name of club and you can get the details of the club by clicking a  button. 

Here is the site Link : https://football-club-api.netlify.app/

And here is the code Link :https://github.com/thekawsarhossain/100-days-of-code
Leetcode Solutions to Graph Algorithm Problems
Tags: algorithms, computerscience
Published: 2021-08-30 07:42:05

[Leetcode](https://leetcode.com/) contains some of the most popular interview questions asked across organizations. This youtube playlist contains solutions of  some of the most important graph algorithms which are asked in interviews and present in Leetcode:
https://www.youtube.com/watch?v=w9wv2jlF3jY&list=PLovuuDh4TFdCJ00I378H-REodw6AWygN1
Do subscribe if found helpful!