DEV Community: Victor Eke

Portfolio Ideas - An open-source repository for inspiration

Victor Eke — Fri, 03 Jun 2022 11:32:21 +0000

Are you about to build your portfolio, and you don't have any idea of what you want it to look like? Search no more, as I present to you portfolio ideas: A repository of incredible developer portfolios you can draw inspiration from.
It is also a beginner-friendly open-source project for developers looking to contribute for the first time.

Inspiration

One of the biggest challenges I faced and I know a lot of developers go through when building their portfolio website is not knowing what to put in it or what it would look like, at least this was my own experience. @didicodes article: 30 web developer ideas to inspire you was very helpful and I thought it would be a good idea to have a similar list but, one that could be updated, and people can add to.

Overview

There isn't much going on in this project, it's a table that shows a list of portfolios and their details which consists of the following.

Author: Portfolio owner's name. This ensures we give attribution to the right creators added to the repository.
Screenshot: A screenshot of the portfolio website homepage is added so you don't have to click the link before knowing what it looks like.
Live URL: Link to visit the portfolio website.
Repository Link: Link to the source file or code of the portfolio. This is not a mandatory field because not all portfolios will be available on GitHub or even shared by their authors.
Tech Stack: The technologies used in building the project. Since some portfolios might have a monstrous number of technologies, this project only captures the essential or primary technologies used in building it.

How to Contribute?

Would you like to add a portfolio to this project? Here are the guidelines to help you with that. NB: *For those that are familiar with a basic contribution workflow, you can skip to the third step. *

Step 1. Fork this repository

Visit the repository on Github, on the top right section, you'll see the fork icon, click it. This will ask you for some information about forking the project, just click the "fork" button and it will create a copy in your account.

Step 2. Create a new table

The portfolio examples are enclosed between two comments: These comments are just guides and don't affect the project in any way.

<! -- ⭐ PORTFOLIO LINE START ⭐ -- >
<! -- ⭐ PORTFOLIO LINE END ⭐ -- >

To add a portfolio, you can either create a new table or copy an already existing table and edit it, your choice.

Step 3. Add Portfolio Details

In the new table, start each column with a | symbol followed by the column content:

Author Name

Start a new line below the latest portfolio and add the author or creator of the portfolio website, like so: | Jemima Abu

Screenshot

Visit the portfolio website and take a screenshot of the homepage, drag and drop it into the screenshot column. Please, before adding the screenshot, use services like tinypng.com or compressor.io to optimize the image sizes.

Live URL

Add the live link to the portfolio website. PS: Omit the https:// in the square brackets [ ] and add it in the normal brackets ( )

Repo

If the portfolio is available on GitHub, add the repository link, if not, just write "None"

[GitHub](https://github.com/jemimaabu/portfolio)

Tech Stack

The next and final thing to add is the tech stack of the portfolio website. You can use wappalyzer, or any other service you know to detect the stack.

If the portfolio is available on GitHub, use the languages auto-detected by GitHub Linguist. Don't worry about trying to add the complete stack, just the primary language/tools are fine. Example HTML, CSS, JavaScript

Step 4. Preview and create a PR

Now we are done adding all the portfolio information, preview the portfolio added and make sure it corresponds with the table, then raise a pull request.

Congratulations! You have successfully added a portfolio to this project. Now sit back, relax and your PR will be merged as soon as it has been reviewed. Thanks.

Additional Information 🤔

If you need any additional guidance or have an idea that can improve this project, feel free to contact me on Twitter, or raise an issue in the repository let's discuss it.

Sponsor

Do you like this project and will like to show your support, you can star the project or buy me a coffee, I'll sincerely appreciate it.

I hope you have a lot of fun while contributing to this project, if you drew inspiration from any portfolio on this repo, consider sending the creator a thank you message. I sincerely hope you build an outstanding portfolio website that will blow the recruiter or visitor's mind and when you do create one, add it to this repository to help others. Goodluck. 💜

The amazing HTML5 Picture Element

Victor Eke — Tue, 24 May 2022 13:26:08 +0000

The picture element is an HTML element for declaring images based on different screen sizes or viewport without the need of writing "CSS" media queries. It takes in two properties, the —<source> tag which makes use of the srcset property to specify different images based on different screen sizes, and a compulsory <img> tag that acts as a fallback image in case the browser doesn't support the picture element.

Use Cases

There are a few use-case scenarios in which the picture tag can be very useful, below are three examples of these cases.

Image type support

Images have a variety of formats like AVIF, and WEBP, which have many advantages but might not be supported by all browsers. The picture tag is great in this case for offering alternative formats using the <source> tag. Source: MDN Docs

Image width

Decide what image to show based on different screen sizes. This can be especially important if you want to preview a large image on desktop screens and a smaller image on mobile or tablet screens.

Saving Bandwidth

The picture tag can be great for saving bandwidth which in turn speeds up page load time by loading the most appropriate image for the viewer's display.

How it works

I'll be demonstrating how the picture element works with this simple example that shows a 483KB gif image on desktop, a 250KB image on tablet screens, and finally a 32.7KB PNG image on mobile. This is just an illustration of what is possible with the picture element, you can be more creative with it.

<picture>
   <source media="(min-width: 768px)" srcset="desktop-image.gif" />
   <source media="(min-width: 500px)" srcset="tablet-image.png" />
   <img src="mobile-image.png" alt="Banner image" />
</picture>

Using the media="" attribute, we specified the breakpoints for each image to display. At 768px and higher, we want the desktop image to show. So what happens at 767px? Well, even though we didn't explicitly specify this particular breakpoint, the picture element is smart enough to use the next source tag, and if it doesn't see one, it'll switch to the default fallback image at 500px for mobile screens. If this was a bit confusing to you, check out a live example for more clarity.

https://picture-element.netlify.app

Try resizing the screen to see the effect.

Browser Compatibility

The picture element is supported on most browsers except good old "Internet Explorer" but I wouldn't bother about that because Microsoft announced they will discontinue IE on June 15 2022. So it's safe to say all major browsers will support the picture tag from next month.

Source: MDN Docs

Finally

So you can see the power of the HTML picture element. Hopefully, this has given you some ideas on how to use it. For developers that care about art direction, the picture element is perfect for doing that. Overall, it can be used to do several things, including optimizing images to create a better experience for mobile users which will in turn improve SEO and performance.

I'm curious to know if you've heard or used the picture element before, do let me know in the comments below. Thanks for reading, and see you in another article.

Important Links

How to make URLs pretty using Netlify

Victor Eke — Fri, 22 Apr 2022 11:02:33 +0000

When you visit a static site, by default the .html extension is visible in the URL, for example /about.html, or /contact.html however on modern sites we see today, the extension is hidden. These URLs that have the extension hidden are called pretty URLs, also known as user-friendly URLs.

Their purpose according to Wikipedia is to improve the usability and accessibility of a website or web service by being immediately and intuitively meaningful to non-expert users. Example of these pretty URLs are: netlify.com/about or hashnode.com/about.

Here's what the URL looks like by default

Want to know how you can rewrite them in your static html, css, and/or Javascript site and make them look pretty using Netlify? Here are the steps on how to do that.

Step 1. Create a Netlify Account

If you haven't already, navigate to their website, create an account and sign in.

Step 2. Import your project

If you have already uploaded your project to Netlify, then skip to Step 3. There are two ways of importing your project to Netlify, dragging and dropping or using a version control platform like GitHub, Gitlab, or BitBucket.

For simplicity, we'll be using the drag and drop feature and for the code, I'm using Netlify's parody site. I updated it a little and added an about and contact page so we can see the changes when we switch between them.

Visit https://app.netlify.com/drop, drag the Netlify parody site, and drop it into the dashboard.
This will propagate for a few minutes and when it's done, a link will be auto-generated by Netlify that we can visit to see our project live.

### Step 3. Enable Pretty URLs
To do this, click the deploy link on the top > deploy settings.

Under post processing, scroll down to asset optimization, click the edit settings button, and check only pretty URLs then hit save.

Now refresh the page to see the pretty URL. 🙂

https://tangerine-kitten-8b320c.netlify.app

If you found this article helpful, leave a comment below or follow me for similar content and I'll see you in the next series, bye. 👋🏽

Important Links

GitHub Repo
Netlify Parody Site
Netlify Drop

Integrating Live Chat to Your WordPress, Shopify or Webflow Site Has Never Been this Easy!

Victor Eke — Mon, 15 Nov 2021 18:35:00 +0000

Full post originally published at Aviyel, do check it out.

As a business owner who has to interact with customers quite often, live chat support is the best plausible option. However, the results amplify if you integrate your support methods with applications frequently used by the customers- in this case, I am talking about Shopify, WordPress, and Webflow. But before we begin, it is important to know what is live chat and why is it important for businesses?

Live chat is a customer relations tool businesses use in interacting with their customers. It is a type of technical support usually added to a website or social account that enables companies and customers to interact in real-time.

Importance of Integrating a Live Chat To Your Website

Live chat offers so many benefits if utilized properly. Here are a few advantages of integrating a live chat into your website.

Low Cost for Support

Live chat offers so much value with little or no extra cost to a business. Integrating a live chat in your business is cheaper than setting up traditional call centers that require call agents to answer emails and calls.

Keeps the User Engaged on Your Website

While customers await replies to their messages, they can use this time to go through your website and see what you’re working on in your business. Make sure to put up interesting blogs, testimonials, or case studies on your website. This is helpful because the more visitors spend time on your website, the more Google Analytics recommends you. A very wonderful SEO benefit.

Better Customer Service

With the live chat feature on your website, support agents don’t need to worry about the language difference of customers. Answering multiple customers while keeping track of all their requests becomes a breeze here. This helps support agents stay on their game, and in situations customers experience similar issues, support agents can log these issues and refer to the solution easily to fix them even faster in the future.

Now you completely understand how much value live chat adds to your business, let’s learn about the tools you can use to add this live chat to your WordPress, Shopify, or Webflow websites.

Best Tools for Integrating Live Chat

If you Google live chat, you’ll notice that there are quite a large number of CRM tools you can use to integrate live chat into your website. CRM stands for customer relationship management, which shows the strategy, principles, or guidelines businesses use to organize and manage customers. I have listed down some of the top CRM tools that have caught my attention for a while:

Chatwoot
Zendesk
Salesforce
Pipedrive
Insightly
Hubspot
Scoro
Keap
Freshdesk

I recently started using Chatwoot for customer engagement needs and would be using the tool today to integrate live chat support with other websites. Unlike other mentioned software for integrating a live chat, Chatwoot stands out as an open source non-proprietary solution with tons of tweakable features. You can read more about that here. If you are an open source enthusiast, you can also look forward to contribute to Chatwoot on GitHub.

Create your Chatwoot Account

To create an account, visit this link: https://chatwoot.com to get started. The registration is very straightforward. Create an account and then verify your email.

Add User Details

After creating an account, you’ll see a conversations dashboard. On the bottom left, click (Profile icon > Profile Settings) which will take you to an account settings page.

Under the account settings, fill in the boxes with your necessary details.

Add a profile photo and a display name. Once you’re done, hit Update Profile.

Now we’re done filling in our details, we can proceed to the next step.

Add an Inbox

On the sidebar to the left, click inboxes and select add a new inbox. You’ll be presented with a new screen that asks you to choose a channel you want to integrate the live chat in.

Choose your preferred channel, in this case, website.

Fill in the boxes with your website information.

Add your website domain name into the website domain box. (E.g www.mywebsite.com) PS: Omit the https:// protocol.

This is to make sure the live chat widget matches the style of your business website and the user experience is consistent.

Pick an Agent for Your Live Chat Needs

The next step is to pick a default agent for the live chat. Add Yourself as the primary agent. But If you want to add a new support agent, click the Agents tab on the left to do that.

Now a code will be generated after picking an agent. This code is how we will add the live chat to our website. The next step is to customize the widget even further, you can skip this step and proceed to integrate the live chat widget on your website if you want, but I highly recommend you don’t skip it to avoid your chat widget from being too generic.

Customize Your Widget

To customize the widget even further, click More Settings below the code.
First, add a logo for the chat widget, and then choose a name and your widget color.

There are more settings available to customize your chat widget even further, you can add more features like

Welcome greeting message
Welcome tagline
A message when the visitor starts typing
An email field to collect visitors’ email addresses.
Automatic assignment of chat agents, and many more features.

Figure out how you want the live widget to be like and then customize it to fit that description. You can refer to Chatwoot docs to learn more.

How to Integrate Live Chat into your Shopify Website?

Now we have completely set up our chatwoot account and added an inbox, we can proceed to add it to our Shopify website.

Once you’re done customizing the widget, click update and select the configurations tab to see the code.

Copy the code and go to your Shopify website.

Click edit code and navigate to theme.liquid and then paste the code inside the body tag and hit save.

The next step is to test the chat widget, refresh the website page and now you should see the widget.
You can try typing a message on the chatbox to test it out.
Here’s a preview of the live chat on our Shopify website.

How to Integrate Live Chat to Your Webflow Website?

The process is practically similar since we already created and set up our Chatwoot account, all we have to do is add a new inbox for our Webflow widget. Follow through the same steps as mentioned above, add your Webflow website domain, customize your profile to match the live widget, and then copy the code. Paste the code into the body tag and save it. Refresh your Webflow website to see the changes.

How to Integrate Live Chat to Your WordPress Website?

There are different ways through which we can add live chat to a WordPress site, the simplest way is to add the code in the PHP file.

To do this, (after generating our WordPress website code) go to your project dashboard, and navigate to Appearance > Theme Editor.
Open the Theme Footer (footer.php) file and paste the code inside the <body> tag.

Once you’ve pasted the code, click Update File and go to your website, and refresh the page. You should see the live chat widget now.
Here’s a preview of the live chat in action.

Final Words

Aviyel is partnering with Chatwoot to scale, build and incentivize open source communities. To stay updated, follow the discussions here. Join Aviyel’s Twitter space at AviyelHQ.

DEV Community: Victor Eke

Portfolio Ideas - An open-source repository for inspiration

Inspiration

Overview

How to Contribute?

Step 1. Fork this repository

Step 2. Create a new table

Step 3. Add Portfolio Details

Author Name

Screenshot

Live URL

Repo

Tech Stack

Step 4. Preview and create a PR

Additional Information 🤔

Sponsor

The amazing HTML5 Picture Element

Use Cases

Image type support

Image width

Saving Bandwidth

How it works

Browser Compatibility

Finally

Important Links

How to make URLs pretty using Netlify

Step 1. Create a Netlify Account

Step 2. Import your project

Important Links

Integrating Live Chat to Your WordPress, Shopify or Webflow Site Has Never Been this Easy!

Importance of Integrating a Live Chat To Your Website

Low Cost for Support

Keeps the User Engaged on Your Website

Better Customer Service

Best Tools for Integrating Live Chat

Create your Chatwoot Account

Add User Details

Add an Inbox

Pick an Agent for Your Live Chat Needs

Customize Your Widget

How to Integrate Live Chat into your Shopify Website?

How to Integrate Live Chat to Your Webflow Website?

How to Integrate Live Chat to Your WordPress Website?

Final Words

TL; DR