DEV Community: Prudence97

I did a thing, started a startup

Prudence97 — Thu, 21 Jul 2022 00:40:45 +0000

It's been so much amazing and back breaking work and I can't wait to talk about it.

From trying to build myself, buying a domain name, hosting fee (rookie mistake), spending hours and all the brain work, nights on stack overflow and blogs and battling errors to using carrd, Google form, zapier and clickup.😂

There's so much I want to speak about, like how giving up so be an option you should never take, how it's okay to fail but not see yourself as a failure. 🤦but this is all motivational talk.

So, this is Prugems in it's First version, a site that link house agents and house renters using a request form.

You can find more information below.

Our Website

You can find more information on our social media page

Twitter

Instagram

Tiktok

Warm regards,
Prudence for Prugems 😊

Understanding Basic git Commands

Prudence97 — Sun, 10 Jul 2022 21:14:43 +0000

git status

The Git Status is a tracker feature of Git. It basically highlights the status of your changes made in your working directory, it also shows the files that are being tracked by Git. You can also use git diff to clearly highlight the difference in changes.

↓↓

git add .

git add . is seen as the first command that tells Git to save a snapshot of the your project into the commit history. However, it does not really affect the repository in any significant way, it only tells Git that you want to include or add updates when you commit.

↓↓
git commit -m " "

Git commit takes a permanent snapshot of the current state of your repository. It "takes a modified file in your working directory and puts it in a staging area". A staging area contains files that are going to be a part of the next commit.

There's so much more...

Web Hosting platform suggestions

Prudence97 — Sun, 03 Jul 2022 20:51:34 +0000

Learning React, Lessons from coding and Programming Memes.

Prudence97 — Sun, 26 Jun 2022 14:48:55 +0000

I had a very ~~busy~~ codeful week and I learnt a lot. I'm hoping that I could share them in detail soon but today, I'll be sharing a summary of my findings or lessons.

I learnt that there was a difference between External and Internal Link in React. In simpler terms, using NavLink and Link tags should be used for internal pages and a href tag would be used for external pages.
I've been struggling with a particular error "TypeError: can't read properties of Null (reading 'id'). I was on stack overflow a lot last week. I think I'll figure it out this week. 🤞🏽
I think I'm getting a hang of Supabase. It was really difficult at first, then I found a few resources that helped.
However, I'm still unsure about my SQL policies and how I can get them to work with my tables. Again, I'm hopeful I'll figure it out this week.
Finally, DOM Purifiers. I think it's something that can help make input unreadable to script and tags. That is, it'll help to protect inner HTML's from reacting to Programming languages. I guess. I don't know if it works with React or if React is already protected in anyway.

Finally,
Dear Developer I think Bugs, Errors and problems would always come but we'll always figure it out.

Don't get a burnout. Do what you love. See a movie or two.
Live.💕

Until next week.

Oh😐 I promised Memes.

Image Credit: Google 🔎

Image Credit: @Dunsin_codes on 🐦

Image Credit: @euboid on 🐦

🤭☺️☺️Until later, and yes, Leave a comment or share a meme.

Movie recommendation for Programmers and Founders (Discussion)

Prudence97 — Sun, 19 Jun 2022 18:28:36 +0000

It's the weekend!
While we never stop writing codes and building products, sometimes rest is needed.

Rest and Movie recommendations, please.

For me,

1. Start-Up

"Young entrepreneurs aspiring to launch virtual dreams into reality compete for success and love in the cutthroat world of Korea's high-tech industry."

-- IMDb

2. Silicon Valley

"Follows the struggle of Richard Hendricks, a Silicon Valley engineer trying to build his own company called Pied Piper."

--IMDb

And definitely Animes😊

Recommend a Movie or Series or Anime in the comment section.

Tips for New Programmers. 1. Read Documentation (Add yours)

Prudence97 — Sun, 12 Jun 2022 13:28:56 +0000

Yes! Read the Docs

It might looks pretty boring but you'll be saving yourself a lot of heartache.☺️

What's your Tip for a Coding Newbie?
What have you learnt that you've been doing wrong?
What would you change if you were starting afresh?

Please leave a comment.🤭🤭

What CSS framework do you use and why? (Discussion)

Prudence97 — Sun, 05 Jun 2022 12:29:24 +0000

I use Tailwind CSS. I started using it recently so I'm still trying to get use to the class names.
(Also, writing codes is never a sprint... it's a journey, a marathon like they say."

I like TailwindCSS because it looks easier. And I heard it's lighter and easy to render than others.

I'll also want to try Material UI and Chakra UI soon.

So what framework do you use and why?

I'll love to hear from you.😊😊

Creating and assigning an issue to someone on GitHub

Prudence97 — Sun, 29 May 2022 17:55:04 +0000

Issues are important as they alert a maintainer to issues concerning the repository or codes. Information including bugs found, new ideas, feedback etc can be sent through the issues page.

They can also be created in a number of ways but creating from a GitHub repository could use the following steps.

Step 1↓↓
Navigate to the main repository and just below the repository name click on issues and create new issues.

Step 2↓↓
When the new issue page opens you can write a title describing the issue, you could also attach files to show these issues clearly.

Also, you can have someone assigned to work on the identified issue by using the assign button.

You could have up to 10 people assigned to address the issue.

You can also add a label tag, showing the type of issue for easy explanation.

Open source secret: for open source newbies, searching for good first issuecan bring up easy to fix issues.

Thus, the tag system helps to make this categorization easier for others to find and fix issues.

After Assigning and labeling, you can now submit.

Step 3↓↓

Your issue becomes open after submitting and the issue count increases. The assigned party is also notified.

And that's one way to create an issue from the GitHub page.

Until later

Creating Responsive Website Design.

Prudence97 — Sat, 21 May 2022 13:19:46 +0000

Making a Responsive webpage can sometime go...

The goal of a Responsive web design is about making web pages look good on all devices.

A responsive web design will automatically adjust or adapt to different screen sizes and viewports.

In my little research to creating a responsive webpage,
I found some gems to help us create responsive designs😂😐

Responsive Website Design method using HTML

↓↓
1. Using the <meta> tag
You can achieve responsiveness by adding <meta>tag to all your html web pages.

The <meta>tag forces the web page to follow the screen-width of the device.

This will set the viewport of your page. In order words, it'll give the browser instructions on how to control the page's dimensions and scaling.

↓↓
2. Using the <picture> tag

If the CSS width property is set to 100%, the image will be responsive and scale up and down.
That is, If the image max-width is at 100%, the image will scale down if it has to, but never scale up to be larger than the original size.

The HTML element allows you to define different images for different browser window sizes.

↓↓
3: Responsive Text Size
The text size can be set with a "viewport width" or"vw" unit.

In that way, the text size would follow the size of the browser window.

Responsive Website Design method using CSS

↓↓
1: Flex Layout
Establishing a simple <display:flex;> layout in our main container and further styling with media query for mobile and desktop can easily create a responsive webpage.

Hosting your website for free using GitHub or Netlify

Prudence97 — Wed, 04 May 2022 17:24:38 +0000

😋😋

On today's coding series, we are talking about Hosting your website for free.

Hosting your website is something a developer would love to do and after procrastinating for a while I did a little research to find a way to deploy or host some of my websites.

While they're other free hosting platforms;

Heroku.com
Vercel.com
Glitch.com
Surge.sh
Fly.io
Firebase

😶I only had time to check GitHub and Netlify,and i'll check the others out soon.

🙃

Publishing on GitHub

While GitHub acts as a platform for collaboration, and managing source codes, it also provides the opportunity for developers to publish their codes for free. 😋

↓↓
Step 1: Repositories
Visit your repositories and select the repository to be published.

↓↓
Step 2: Settings 🎛️
In your selected Repository, click on settings to go to your repository settings page.

↓↓
Step 3: Pages 📄
On the left sidebar of the repository settings, click on pages to open up GitHub pages.

↓↓
Step 4: Branch Selection 🌿
Still in the GitHub pages, click the drop-down menu on the source section and select a branch. save it afterwards.

↓↓
Step 5: The Link🔗
Your website is published when you save, and in a few seconds you'll see a link to your newly published website.

😊😊You are now a published developer. 🎉🎉

Next is Netlify

Publishing on Netlify

Publishing on Netlify gives the developer the opportunity to bind multiple domain names and keep the original repository private.

↓↓
Step 1: Add New Site➕

If your Netlify account is linked to your Git account, you would get the import from GitHub button, when logged in.

You could also deploy manually using a simple drag and drop or browse to upload method.

↓↓
Step 2: Connect to Git provider🖥️

When we click on the import from Git button, it simply wants access to your source codes in order to deploy it. You should have your codes on either GitHub, Gitlabs or Bitbucket to achieve this.

↓↓
Step 3: Authorize Netlify⚖️
Click on the Authorize Netlify to establish a connection from GitHub.

↓↓
Step 4: Select Repository🤳
Once a connection is established, you can select the repository you want to publish.

↓↓
Step 5: Configure your settings🛠️
There is not much to do here. You can also deploy after changing the branch.

↓↓
Step 6: Publish Site📢
After deploying your site. Netlify takes it up and creates your site in no time.

You can take a step further to change the site name using site settings

Save site name

You can copy your site link and show the world how published you are🌝

Until Next time😂

P.S: I am thinking of writing an article comparing Netlify and GitHub.
I think it'll be nice to know the Pros and Cons of each.
Also, if you find something I missed in the article or would like to share anything helpful, please comment. I would love to know what you think about it.

3 steps to exporting images from Figma

Prudence97 — Sun, 01 May 2022 14:22:53 +0000

Yesterday, I learnt how to export images from Figma.

It's an exciting discovery since it saved me from using my Google search tool.

(Thank you Google search, see you later📨)

In all of this hunt, I felt it would be nice to share the process. (You're welcome.) Also warm regards to Lamodots who led the hunt.

Step 1: Highlighting the Image
By clicking on any image or component on the design, you would also have highlighted it.

Step 2: Finding the right frame

On the Left-hand sidebar is usually the Layer section. The Layer section gives you access to each component, that is, text, images etc.

Our job here is to find our right image or right frame.

You should toggle the eye 👁️ and the Lock 🔒 to help you get a single element (image)

Step 3: Exporting the image

On the right-hand sidebar is the Design section. By scrolling upwards you'll get down to the Export section.

It opens up when you hit the plus + button. You can also toggle with the preview↓ button to preview the picture.

So hit the Export button to download.

It is done...

Feels good 😉

Hi🙋, you can also share your export method. 🤭 I'm looking for a simultaneous all-image download method.

Cloning a Repository

Prudence97 — Fri, 29 Apr 2022 16:13:35 +0000

What Cloning a Repository does, is it helps provide the opportunity to download a source file and work on it locally. This helps make changes that could be effected in the original. Call it, The Experiment😊.

So it begins with,

Step 1: Selecting a Repository

Finding the repo is a step🤷

Step 2: Green ~~pill~~ button

Click on the drop-down menu on green 💚 code button.

Step 2: The Link

Copy the link using the copy icon. (you're copying the GitHub link.😐)

Step 3: The Code editor, Terminal and other stories

In a series sub-steps;
sub-step 1 Open your code editor

sub-step 2 open a new file, or new folder, or recent project.

sub-step 3 Open the terminal

Step 4: The Cloning

At the terminal, you'll want to change the directory (especially when you're in another directory.

A directorial sub-step😶

Cd directory
git clone repository link

and the cloning begins...

Step 5: The Cloning continues😂😶

If we look closely we can see our cloned folder highlighted in green text💚

Step 5: The Cloning confirmed

😂😂 It's here though.

Step Celebration

Amazing, right?🤭😂😂

Until next time. Bye. See you soon.