teleren/devto huggingface dataset:
WordPress Local Development Mac OS Using Valet
Tags: macos, valet, wordpress
Published: 2024-03-21 16:13:21

Hello, dev.. 👋

In this tutorial, I will share how to use Valet for local WordPress development. Well, maybe WordPress friends are a little unfamiliar with Valet, but Laravel friends are probably very familiar and often use it.

## What is Valet?

OK, so Valet is a tool for creating a local development environment used on the Mac OS operating system. So, the way Valet works is that it will configure our project root folder using Nginx which works in the background, and then Valet uses DnsMasq to direct all requests using the \*.test domain to the website that is activated on the Nginx server.

Valet itself was created by the Laravel development team, you can read the [documentation here](https://laravel.com/docs/10.x/valet#introduction). They claim that Valet is very light, only using 7 MB of RAM. Even though this tool was created by Laravel developers, it turns out that Valet also supports WordPress development.

How to Install Valet
--------------------

This valet can only be used on Mac OS, so what you need is Mac OS and homebrew installed on Mac OS.

So, before installing valet, you must first update your homebrew

```
brew update
```

The first thing you need is to install Composer, you can install it directly from [getcomposer.org](https://getcomposer.org/download/) or you can also install Composer from homebrew

```
brew install composer
```

Now, after installing Composer, what you need to install is the latest PHP using homebrew.

Then install Valet using Composer by running the following command

```
composer global require laravel/valet
```

Once successful, you can use the valet command in your terminal command line

## Create Site

To create a new site, first go to the project folder then run the command

```
cd myprojectapp
valet link
```

Then you can access it using the address _**myprojectapp.test**_

## Secure HTTPS

Sites created using valet can also be accessed via https. Go to the project folder and run the following command

```
valet secure
```

## Case Study Example

The following is an example of a case study, we create a wordpress folder, we download the WordPress core using WP CLI, then we create a site using Valet and finally, we create the site so that it can be accessed using https.

```
Last login: Sat Jul  8 10:19:01 on ttys000
You have new mail.
➜  ~ cd Sites
➜  Sites mkdir wordpress
➜  Sites cd wordpress
➜  wordpress wp core download
Downloading WordPress 6.2.2 (en_US)...
Using cached file '/Users/dhimaskirana/.wp-cli/cache/core/wordpress-6.2.2-en_US.tar.gz'...
Success: WordPress downloaded.
➜  wordpress valet link
Password:
A [wordpress] symbolic link has been created in [/Users/dhimaskirana/.config/valet/Sites/wordpress].
➜  wordpress valet secure
Restarting nginx...
The [wordpress.test] site has been secured with a fresh TLS certificate.
➜  wordpress 
```

Good luck 🍻
Free WordPress Plugin for Automatic WordPress Backup to Google Drive
Tags: wordpress, backup
Published: 2024-03-21 16:07:23

Hello, dev.. 👋

Backups are something that must be done regularly to anticipate if the website has problems. In this tutorial, we will create an automatic backup on the WordPress website that we use. Apart from being automatic, the backup is to Google Drive. So it’s automatic and free.

So we will use a plugin called [Updraft Backup Plugin](https://wordpress.org/plugins/updraftplus/). According to my personal experience, I like this plugin because it is free, has automatic features and of course can be backed up to Google Drive. Of the many WordPress backup plugins, they also offer the option of uploading to Google Drive but it is paid.

## Install Plugin

On the WordPress dashboard, click Plugins -> Add New. Then search for the name "**UpdraftPlus WordPress Backup Plugin**". Click install then activate.

## Plugin Configuration

To make it automatic, you go to "**Updraft Backup**" in the Settings menu, then click on the **Settings** tab.

Click the Google Drive icon, at the bottom you will find "**Authenticate with Google**". Click the link to connect your Google account.


![UpdraftPlus WordPress Backup Plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmvk1lnxb9erqr674skk.png)

Then you will be taken to the Google login page. Enter your Google account, then click **Allow**. After that, you will be taken to the UpdraftPlus page. Click **Complete Setup** to complete the Google account authentication process.

Then you will return to the UpdraftPlus settings page. Click on the Settings tab, set the backup schedule once a week or **Weekly**, once a month, or **Monthly**, or you can adjust it according to your needs. Select the Google Drive icon and click the **Save** button at the bottom of the page.

## Starting Backup

You click the Backup/Restore tab then click **Backup Now**.

A backup confirmation pop-up will appear. Leave it checked by default, then click **Backup Now**. Let the backup process run until it completes.

After that, you can check your Google Drive, and then check the files in the **UpdraftPlus** folder. You will find backup files from your website.

Good luck 🍻
Elevating User Experience
Tags: userexperience, ui, ecommerce
Published: 2024-03-21 16:06:35


![Picture credit to Jo Malone London](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjmyi4f3afjmj15kn8le.png)
Weekend shopping is always exciting, especially when you're off to buy something special like perfume. Jo Malone is one of my favorite brands, and I usually buy it online. But this time, I decided to visit the shop instead.

As soon as I walked into the shop, I was surrounded by all these amazing smells. It felt like I was in a perfume wonderland! I started trying out different perfumes, and I quickly fell in love with the scent of Jo Malone's rose perfume.

When I picked out my favorite perfume, a friendly salesperson at the shop helped me wrap it up. She did it so nicely, with soft ribbons and a special scented paper that matched the perfume. When I held the bag, I could already smell the perfume, and it made me so happy!

On my way back home, I couldn't stop smiling. The whole experience was so lovely, and I felt really special. When I got home, the smell of the perfume filled the air, and it made everything feel cozy and nice.

As I sat at home, surrounded by the delightful scent of Jo Malone's rose perfume, I couldn't help but reflect on the beauty of simple pleasures. It made me realize how much joy a well-crafted user experience could bring. As a tech enthusiast, I wish that all other brands could provide such a beautiful user experience to the end customers. Just like Jo Malone did for me, I wish other tech and non-tech brands could bring a smile to the faces of end users with every interaction. It's a gentle reminder that in the world of technology, it's not just about functionality, but also about creating moments of delight and wonder towards customers. And who knows, maybe one day, techies will be able to infuse digital creations with the same magic that made my shopping experience so memorable.

This is a non-promotional post. 
Picture credit: Jo Malone London
Best Compress Images or Photos on Ubuntu Linux
Tags: linux, ubuntu
Published: 2024-03-21 16:02:44

Hello, dev.. 👋

In this tutorial, I want to share tools for compressing images so that the file size is not large without reducing the quality of the image.

This tool is command-line based, so it is quite easy to use, especially for those of you who like the command-line interface.

The name of the tool we will use is **jpegoptim**.

## Install jpegoptim

Open your Ubuntu terminal, type the following command

```
sudo apt-get install jpegoptim
```

## How to use

Go to the folder where you saved the image, type the following command

```
jpegoptim *.jpg
```

So the results are as follows. Please note, that every time you carry out a compression command, the automation will **overwrite** or **overwrite the original file**.


![jpegoptim result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lh14923r2hmnrtcp1e0z.png)

Good luck 🍻
Why Use CASE Converter Tool
Published: 2024-03-21 15:54:57


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bz87cljlwuxz8w66hqb.png)
The [Case Converter Tool](https://caseconverter.tools/) offers a range of benefits for users looking to streamline their text formatting tasks. Here are some of the key advantages:

1. Versatility in Text Conversion: Easily switch between uppercase, lowercase, sentence case, title case, and all caps, making it suitable for various writing and formatting needs.
2. Time-Saving: Eliminates the need for manual text conversion, saving valuable time and effort, especially for large volumes of text.
3. Enhanced Productivity: With quick and efficient text transformation, users can focus more on content quality and less on formatting, boosting overall productivity.
4. User-Friendly Interface: Designed for simplicity, it allows users of all skill levels to convert text formats without any prior training.
5. Accessibility: Being an online tool, it can be accessed from anywhere, at any time, requiring only an internet connection.
6. Cost-Effective: Offers a powerful solution for text conversion without any cost, making it accessible to individuals and businesses alike.
7. Improves Readability: By converting text to the appropriate case, it enhances the readability and presentation of documents, reports, and online content.
8. Supports Various Use Cases: Ideal for academic writing, professional documentation, content creation, and everyday text manipulation, catering to a wide audience.

By leveraging the Case Converter Tool, users can ensure their text is always presented in the desired format with minimal effort, enhancing both the efficiency and quality of their work.
Why Use CASE Converter Tool
Published: 2024-03-21 15:54:56


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bz87cljlwuxz8w66hqb.png)
The [Case Converter Tool](https://caseconverter.tools/) offers a range of benefits for users looking to streamline their text formatting tasks. Here are some of the key advantages:

1. Versatility in Text Conversion: Easily switch between uppercase, lowercase, sentence case, title case, and all caps, making it suitable for various writing and formatting needs.
2. Time-Saving: Eliminates the need for manual text conversion, saving valuable time and effort, especially for large volumes of text.
3. Enhanced Productivity: With quick and efficient text transformation, users can focus more on content quality and less on formatting, boosting overall productivity.
4. User-Friendly Interface: Designed for simplicity, it allows users of all skill levels to convert text formats without any prior training.
5. Accessibility: Being an online tool, it can be accessed from anywhere, at any time, requiring only an internet connection.
6. Cost-Effective: Offers a powerful solution for text conversion without any cost, making it accessible to individuals and businesses alike.
7. Improves Readability: By converting text to the appropriate case, it enhances the readability and presentation of documents, reports, and online content.
8. Supports Various Use Cases: Ideal for academic writing, professional documentation, content creation, and everyday text manipulation, catering to a wide audience.

By leveraging the Case Converter Tool, users can ensure their text is always presented in the desired format with minimal effort, enhancing both the efficiency and quality of their work.
Keeping HTML and JavaScript (and CSS) Fully Separated
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-21 14:53:52

_This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature._

## Explainer
In a total very useful separation of concerns, all devs can and should keep all JavaScript and CSS out of HTML markup--not using "on-" event handlers--using DOM element 'id' attribute, largely using the always handy `document.getElementById` method.

## Additional Context
Do web devs still define event handlers in HTML markup, written in an element attribute?

```
/myEntryPage.html
<input type="radio" name="colorSelect" value="red" onchange="selectColor(this);"> Red
<input type="radio" name="colorSelect" value="blue" onchange="selectColor(this);"> Blue
```
Instead all devs should use the HTML `id` attribute (rarely the `class` attribute when needed) along with the JavaScript DOM methods `document.getElementById()` and `document.addEventListener()` to set up document elements with event handlers, rather than using "onclick=" or "onchange=" (or any "on-") element attributes. JavaScript (and particularly the highly recommended TypeScript) is not usually subject to error/code-checking if using script of any kind defined as an element attribute or even with multiple line/statements enclosed in `<script>` tags. The above markup has been re-coded below to fully remove JavaScript from HTML markup and put it properly into `*.js` (or `*.ts`) files. The script shown is TypeScript (highly recommended) so the event handlers are initialized on page load.

```
/myEntryPage.html
<input type="radio" id="colorSelect-red" value="red"> Red
   <!-- id="colorSelect-red" CHANGE="selectColor(this);" -->
<input type="radio" id="colorSelect-blue" value="blue" onchange="selectColor(this);"> Blue
   <!-- id="colorSelect-blue" CHANGE="selectColor(this);" -->

/myEntryScript.ts
document.addEventListener("DOMContentLoaded", (/* event: Event */) => {
   document.getElementById("colorSelect-red").addEventListener("change", (event: Event) => {
      selectColor(event.target as HTMLInputElement);
   });
   document.getElementById("colorSelect-blue").addEventListener("change", (event: Event) => {
      selectColor(event.target as HTMLInputElement);
   });
});
```
(Note, to track elements in markup with event handlers, you might put an HTML comment underneath with the 'id' of the element and the event CAPITALIZED with its code as an aid in documenting/annotating.)
🌟 Today was filled with coding challenges and deep dives into Java fundamentals! 💻
Tags: java, codenewbie, code
Published: 2024-03-21 15:49:24

Solved Reverse full triangles, Diamond patterns, and Reverse strings, while learning about Java data types, naming conventions, instance initializer blocks, Abstract vs. Interface, call by value, and Java regex. Ready to apply these concepts to my projects! #CodeNewbie #Java
10分钟上线SEO友好的免费个人博客
Tags: github, vercel, seo, freelance
Published: 2024-03-21 15:47:25

> 大家好，我是弗雷，一名独立开发者。今天来跟大家一起学习，仅需10分钟就能搭建并部署上线一个免费的SEO友好的个人博客。请务必跟随弗雷的流程走哦！

1. **注册Github**

Github是一个版本控制系统，如果你暂时还不理解何为版本控制系统，不妨将其想象成一个存放代码的大仓库。你可以随时从这个仓库存储代码，也可以随时修改和删除代码。打开[Github](https://github.com/)，并使用邮箱进行注册。

![Github 首页](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufx1318z6stnykr0zfp9.png)

2. **注册Vercel**

Vercel是一个免费的网站托管平台，如果你暂时也不懂什么是网站托管，可以将其理解为一个店铺，用来展示你的仓库中的物品。顾名思义，Vercel可以用来向外界的用户可视化地展示你在Github中存储的代码。打开[Vercel](http://vercel.com)，并使用之前注册的Github账号进行注册登录。


![Vercel 首页](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mu51xniq42vpe01wsg1.png)



3. **部署Vercel模板**

由于当前 Github 中还没有添加代码，我们可以去网络上寻找自己喜欢的网站模板代码，或者直接使用Vercel中提供的精美预设模板。点击Templates，选择一个模板进入。以 astro-paper 为例，这是一个 SEO 友好的博客模板，点击Deploy，网站会自动识别我们的 Github 仓库，输入自定义的仓库名，并点击Create，Vercel 就会自动帮我们生成代码并进行部署。当跳转至Congratulations界面，说明网站已经部署成功啦，点击即可跳转进行预览。此时的域名为Vercel自动为我们分配的子域名，如果你有自己的域名，点击 Add Domain 即可绑定其他域名。


![Vercel 模板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pb6ta3cy4iaclcij5695.png)

![Vercel 部署](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3xnxdyu0tfqz6zfd2ei.png)

![添加域名](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4j0mbwtf04f5eqwcnqs.png)

**现在你已经完成了初级任务，接下来将进行稍微进阶的任务。**

4. **下载并安装 VSCode**

VSCode 是来自微软的一款免费且强大的代码编辑器，前往 [VSCode 官网](https://vscode.com/)，下载对应操作系统的安装程序，并完成安装。后续也可以在网上搜索更多有趣的插件来武装属于你的 VSCode 。


![VSCode 官网](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozisoghsx3s3pzgv5qe3.png)

5. **下载并安装 Git**

Git 是一个开源分布式版本控制系统，可以将其看作联系你的电脑和 Github 仓库的纽带，保证本地电脑中的代码与 Github 中的代码同步。在 [Git 官网](https://git-scm.com/downloads) 下载并安装完成后，我们可以通过命令行界面来使用Git。


![Git 下载](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0z2ki87comy4vulappd.png)

6. **克隆代码至本地**

在本地创建一个文件夹并使用 VSCode 打开，然后点击克隆，并在弹出的输入框中粘贴 Github 仓库的地址，等待片刻即可将代码克隆至本地。

![克隆代码](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ko8ybwq9j0pr09xtwr5j.png)

![Github 仓库链接](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t17pbkjlyb1abo87gxsi.png)

7. **更改模板网站的内容**

在 VSCode 中，我们可以随意修改网站模板的内容，比如更改文本、加入你的项目图片、调整布局等等。当然，这需要我们有一定的编程基础。

8. **提交至 GitHub 仓库**

代码修改完成后，简要输入所修改的内容，然后点击提交和推送，即可将本地代码更新至 Github 仓库中。Vercel 也会自动检测到 GitHub 仓库中的最新更改，并自动部署最新的版本到网站上去。


![提交代码](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhmvzjviiyjzy10uryyk.png)

**刚部署上线的博客空空荡荡，但是随着日积月累，我们的文章越写越多时，每次打开个人网站，都会有一种振奋人心的喜悦，因为这些都是属于我们自己的精神财富。**

**如果我们的文章足够优质，我们甚至可以把网站提交至谷歌搜索引擎。当有越来越多的人在网站上留下足迹时，这些正反馈也会更进一步激励我们去创作更加优质的内容。当网站的访问量足够大时，为网站添加谷歌广告，将带来一份可持续的可观的被动收入。**

> 如果你已经对自由职业，对独立开发，对副业赚钱，对追求更加美好的未来有了一丝丝兴趣，关注 [弗雷](http://freeourdays.com) ，或许是个不错的选择。尽管我可能不会给你直接带来收益，但是交个朋友，准没错！一起加油，追梦者！
What are your favorite Public Speaking tips?
Tags: discuss
Published: 2024-03-21 15:44:59

---
title: What are your favorite Public Speaking tips?
published: true
description: 
tags: discuss
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-03-21 15:43 +0000
---

Next month at [Virtual Coffee](https://virtualcoffee.io/), we're doing a monthly challenge for public speaking. What are your favorite tips or resources?
Capturing Code Brilliance: A Guide to Polacode - The Ultimate Screenshot Creator for VS Code
Tags: vscode, webdev, javascript, programming
Published: 2024-03-21 15:39:47

Introduction:
In the bustling world of software development, effective communication is paramount. Whether you're collaborating with teammates, showcasing your work to clients, or sharing snippets on social media, conveying your code's brilliance is essential. That's where Polacode steps in, revolutionizing the way developers capture and share their code snippets. In this blog post, we'll take a deep dive into Polacode, the ultimate screenshot creator for Visual Studio Code, and explore how it empowers developers to showcase their code in style.

---

1. Introducing Polacode:
   - What is Polacode?
   - Overview of its features and capabilities.
   - Why Polacode stands out among other screenshot creator extensions.

2. Getting Started:
   - Installation and setup guide for Polacode in VS Code.
   - Exploring the Polacode user interface and settings.
   
3. Creating Stunning Code Screenshots:
   - Step-by-step tutorial on capturing code snippets with Polacode.
   - Customizing themes, fonts, and styles to match your preferences.
   
4. Enhancing Visual Presentations:
   - Leveraging Polacode to create visually appealing presentations and documentation.
   - Tips for incorporating Polacode screenshots into slideshows and reports.
   
5. Sharing Code on Social Media:
   - Harnessing Polacode's power to share snippets on platforms like Twitter, LinkedIn, and Dev.to.
   - Strategies for maximizing engagement with code screenshots.
   
6. Collaborative Coding Made Easy:
   - Using Polacode to share code snippets with teammates and collaborators.
   - Facilitating code review and feedback with polished screenshots.
   
7. Polacode Tips and Tricks:
   - Advanced techniques for optimizing your Polacode experience.
   - Keyboard shortcuts, hidden features, and productivity hacks.
   
8. Real-World Examples:
   - Showcase of code snippets captured with Polacode in various contexts.
   - Inspiration for how Polacode can elevate your code presentation game.
   
9. Community and Support:
   - Engaging with the Polacode community on GitHub and other platforms.
   - Troubleshooting common issues and seeking help from fellow users.
   
10. Future Developments and Updates:
    - Insights into upcoming features and improvements for Polacode.
    - How the extension continues to evolve to meet the needs of developers.

Conclusion:
Polacode is more than just a screenshot creator; it's a tool that empowers developers to showcase their code with elegance and flair. Whether you're crafting presentations, sharing snippets on social media, or collaborating with teammates, Polacode revolutionizes the way you communicate your code's brilliance. With its intuitive interface, customizable options, and stunning output, Polacode is a must-have extension for every Visual Studio Code user. Start capturing your code brilliance with Polacode today and take your code presentation to new heights.
(But I Take Screenshot Via Snippet Extension)
How chat GPT can use for Web Developers?
Published: 2024-03-21 12:44:01

ChatGPT can be a valuable tool for web developers in various ways:

Idea Generation: Developers can use ChatGPT to brainstorm ideas for new projects, features, or solutions. By describing their requirements or challenges to ChatGPT, developers can receive suggestions and insights to fuel their creativity.

Code Assistance: ChatGPT can assist developers in writing code snippets or troubleshooting issues. Developers can describe their problem or the code they need, and ChatGPT can provide suggestions, explanations, or even code examples to help solve the problem.

Documentation and Learning: ChatGPT can provide explanations and summaries of technical documentation, programming concepts, or best practices. This can be particularly helpful for developers who are learning new technologies or need quick references while coding.

Feedback and Code Reviews: Developers can use ChatGPT to get feedback on their code or to conduct virtual code reviews. ChatGPT can analyze code snippets, identify potential issues or improvements, and provide constructive feedback.

Prototyping and Design: ChatGPT can help developers flesh out ideas for user interfaces, user experiences, or overall design concepts. By describing their vision to ChatGPT, developers can receive feedback, suggestions, and even design mockups to guide their prototyping process.

Automation and Scripting: ChatGPT can assist developers in automating repetitive tasks or scripting workflows. By describing the desired automation process or task to ChatGPT, developers can receive guidance on scripting languages, libraries, or tools to streamline their workflow.

Natural Language Interface: Developers can integrate ChatGPT into web applications to provide natural language interfaces for user interaction. This can include chatbots for customer support, virtual assistants for task management, or intelligent search engines for content discovery.

Overall, ChatGPT can enhance productivity, creativity, and problem-solving capabilities for web developers by providing instant access to a vast repository of knowledge, expertise, and assistance.
[https://www.rankpointer.com](https://www.rankpointer.com)
Intersection Observer API - One Byte Explainer
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-21 15:31:42

_This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Intersection Observer API._

## Explainer
``Intersection Observer API`` tracks when elements are visible on screen. Avoids expensive event handlers. Optimizes and stays responsive to viewport changes.

Compared to traditional scroll/resize event handlers, it is more efficient while being simpler to implement. Give it a try!

## Additional Context
 Check out this simple code snippet to implement it:
```JS
// Select the target element
const target = document.querySelector('.target');

// Create observer
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      // Element is visible
      console.log('Visible!');
    }
  });
});

// Observe target
observer.observe(target);

```

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->