teleren/devto huggingface dataset:
Building a Simple Unit Converter with JavaScript
Tags: webdev, extensions, beginners
Published: 2023-07-17 19:11:18

Hey guys! I want to share a fun coding project I worked on: a simple unit converter using JavaScript. It's a handy tool that allows users to convert various units like length, fuel economy, and digital storage.

To begin, we define conversion functions for each category. For example, to convert length units, we have functions like kmToMilesEl and milesToKmEl. These functions handle the actual calculations behind the conversions. Similarly, we have conversion functions for fuel economy and digital storage.


![the declared functions for each category](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqhoc90kvnxbwx7qp4ea.png)

Next, we create a JavaScript object called conversions to store these functions, categorized by their respective units. This object serves as our "conversion dictionary". When a user selects a category, we retrieve the appropriate conversion functions from the conversions object.


![JavaScript objects with the stored functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xq299fzr6xra2ozsv3j.png)

Now, let's talk about the user interface (aka UI). We use HTML and CSS to create an intuitive interface with dropdown menus, input fields, and result displays. The JavaScript code handles the interaction between the interface and the conversion logic. When a user selects a category or modifies the input values, the code updates the UI accordingly with the converted result.


![HTML/CSS code for styling the converter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdtwwz8kgr3extjpsm2x.png)

To make it even more user-friendly, we've added features like pressing the Enter key to trigger the conversion and dynamically updating the conversion units based on the selected category.

With just a few lines of code, we've created a functional unit converter. Feel free to customize it, add more categories or units, and tailor it to your specific needs. 

Happy coding!

[GitHub Repo](https://github.com/PeggyOu/converter-app)
How changes in the tech landscape are affecting the way devs have to look for jobs
Tags: career, developer, webdev
Published: 2023-07-17 18:36:42

Two reasons why you can’t find the job you want in this economy and how you can reverse them.

1 - Your skills are not aligned with the current market needs and desires.

2- Your job search approach is no longer helping you stand out from the rest of the candidates.

The good news is both problems are solvable within 14 days.

The market has shifted from candidate focused to job focused.

Where in the past, companies were competing furiously to attract the best candidates, this is what created concepts like employer branding, employee experience etc..

Things that employers thought would make them more attractive to candidates.

The tables have turned now and it's on candidates to compete and stand out.

So what are the things you can do to stand out?

Full post [here](https://www.linkedin.com/posts/jawadsabra_jobsearch-jobs-interviews-activity-7086655071005868032-sDwp?utm_source=share&utm_medium=member_desktop)
3 VSCode extensions I use for PHP development
Tags: php, wordpress, webdev, programming
Published: 2023-07-17 18:28:45

**TL;DR**
All the mentioned extensions are part of [PHPKit extension](https://marketplace.visualstudio.com/items?itemName=KalimahApps.phpkit).

**[1- PHP Intelephense:](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client)**

![Intelephense logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzzr6oxw0ejqf7929lad.png)

This extension provides PHP code intelligence for VSCode. I have used it for a long time now and it is consistent and reliable. While it has a premium version, the free one is sufficient for most of my work. The autocompletion and the details on hover are the two most features I utilize. 

You can stubs `intelephense.stubs` settings to make it aware of your code. This is a great feature if you develop, for example, with WordPress because there is a built-in stub for it.

However, for other projects you might struggle a little bit to find and add the stubs. For example, WooCommerce does not have a stub (I could not find any). With Laravel you need to use [IDE Helper Generator for Laravel](https://github.com/barryvdh/laravel-ide-helper) to assist the extension resolving Laravel specific functions.


**[2- PHP DocBlocker](https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker)**

![PHP DocBlocker logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ce4rjxeqzyfsj17y8ac7.png)

One of the lacking areas for most developers is documentation. In many projects it is either missing or not complete. I won't go into the reasons for this, but one way to keep the code clear to others (and your future self) is to use [docblocks](https://docs.phpdoc.org/guide/guides/docblocks.html). 

This extensions makes the process very easy. If you place the cursor above a function, type `/**` and then press tab, it will generate a docblock with all related tags.

It is highly configurable but I never found myself needing to change the default values. 


[**3- PHPTaqwim**](https://marketplace.visualstudio.com/items?itemName=KalimahApps.taqwim)

![PHPTaqwim logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kou3ifwhhmzba5atcpqt.png)

This is one my latest extensions. It is a linter/formatter extension for PHP. I was motivated to create for [a few reasons](https://dev.to/kalimahapps/phptaqwim-lint-and-format-php-using-typescript-1olb), but the main ones is lack of maintenance and documentation.

The extension provides an extensive set of rules and is [thoroughly documented](https://taqwim.kalimah-apps.com/docs/) and is highly configurable.

One of the best features is that there is no need for PHP runtime. You don't need to configure PHP executable path at all! Just install and it should work on PHP files.

It also comes as a NPM package, which might be a better option for continuous integration tools.
The Crucial Role and Influence of SEO in B2B Marketing Strategies
Published: 2023-07-17 18:25:15



In the ever-evolving digital landscape, the role of Search Engine Optimization (SEO) has become increasingly significant, particularly in the realm of Business-to-Business (B2B) marketing strategies. The ability to reach the right audience at the right time is paramount for any B2B organization, and SEO is a powerful tool to achieve this.


[SEO](https://www.unthinkable.co/marketing/seo-services/) is a collection of techniques used to increase a website's visibility on search engine results pages (SERPs). It involves optimizing a website's content and design to make it more attractive to search engines. The ultimate goal is to have your website appear on the first page of search engine results for relevant keywords.


In B2B marketing, SEO is vital for several reasons. Firstly, it helps businesses reach their target audience without excessive advertising costs. By optimizing for relevant keywords, businesses can attract high-quality traffic to their website. These are users who are actively searching for the products or services the business offers, making them more likely to convert.


Secondly, SEO helps build credibility and trust. Websites that rank high on SERPs are often perceived as more trustworthy by users. This is particularly important in B2B marketing, where the purchasing process is often longer and requires a greater level of trust between businesses.


Moreover, SEO allows for better user experience. Part of SEO involves making your website easy to navigate and ensuring that it loads quickly. A positive user experience can lead to better engagement rates, longer visit durations, and ultimately, higher conversion rates.


In addition, SEO provides valuable insights into the behavior of your target audience. It allows you to understand what information your potential customers are looking for, and what keywords they are using to find it. This information can then be used to inform your content strategy, ensuring that you provide the information that your potential customers are looking for.


Despite the numerous benefits, SEO in B2B marketing is not without its challenges. It requires a strategic approach and continuous effort. The algorithms used by search engines to rank websites are constantly changing, meaning that businesses need to stay up-to-date with the latest SEO practices.


Furthermore, the results of SEO are not immediate. It takes time to build up a strong online presence and start ranking for competitive keywords. However, the results are often well worth the wait, with businesses that invest in SEO often seeing a significant return on investment.


In conclusion, SEO plays a crucial role in B2B marketing strategies. Its ability to reach a targeted audience, build credibility, improve user experience, and provide valuable audience insights makes it an invaluable tool for any B2B business. While it may be challenging, the impact of a well-executed SEO strategy on a business's bottom line can be significant. Therefore, it is an investment that no B2B business can afford to overlook.
Introducing PETSCIITile Framework - Building Tile-Based Games with ASCII and Graphics!
Tags: refinehackathon, csharp, opensource, showdev
Published: 2023-07-17 18:04:36

# What I built
Category Submission: Open-Source Game Development Framework
Description:
Hey fellow game developers and open-source enthusiasts! I'm excited to share with you my latest project, the PETSCIITile Framework. 🚀

The PETSCIITile Framework is a tile-based game development toolkit that allows you to create awesome tile-based games, such as roguelikes and dungeon crawlers, using ASCII characters and graphics. It's all about bringing back that nostalgic retro feel while providing the flexibility to use graphical assets for a more polished look.

## Link to Source Code: [here](https://github.com/jossse69/PETSCII-Tile)
Permissive License:
The PETSCIITile Framework is licensed under the MIT License, so you can use it freely for your projects without worrying about legal restrictions.

## Background
Ever since I was a kid, I've been fascinated by games and the unique charm they hold as art. As a game developer, I wanted to build a framework that captures the essence of those retro games while providing the modern capabilities of graphical assets.

## How I built it
To build the PETSCIITile Framework, I utilized the power of the SFML library for graphics and window handling. SFML is an excellent open-source multimedia library that fits perfectly with my vision for this framework.

## Throughout the development process, I learned new techniques for efficient map rendering, input handling, and modular properties for each tile. I also experimented with memory streams to load fonts dynamically, allowing users to customize the font style as they desire.

## Additional Resources/Info
For a detailed guide on how to use the PETSCIITile Framework, you can check out the Wiki in the GitHub repository. There, you'll find step-by-step instructions, examples, and code snippets to get you started on your tile-based game development journey.

I'm thrilled to share this project with the open-source community and hope that it sparks your creativity in developing amazing tile-based games. Feel free to contribute, provide feedback, or create your own projects using the PETSCIITile Framework. Let's make some nostalgic and exciting games together! 🎮🔥

(josé luiz costa beker)
AboveInsider - Dynamic insights and Updates
Tags: seo, wordpress, blog
Published: 2023-07-17 17:20:02

[AboveInsider](aboveinsider.com) is a dynamic insights website where you can find a plethora of articles covering various topics such as Beauty Tips, Health Tips, Education, Technology, Lifestyle, Social Media, News, Fashion, Entertainment, and more. Our platform is home to experienced writers who provide valuable insights and information.

We take pride in being your go-to source for the latest content. Whether you’re looking for beauty and health advice, educational resources, technology updates, lifestyle tips, social media trends, news articles, fashion inspiration, or entertainment news, AboveInsider.com has it all.

Our dedicated team ensures that you receive engaging and informative articles that cater to your interests. We strive to keep you well-informed and ahead of the curve.

With AboveInsider.com, you can be the first to explore topics that matter to you. We are committed to providing valuable and diverse content, making us a reliable and trusted platform.

Join us on AboveInsider.com and immerse yourself in a world of captivating articles. Discover new insights, stay up-to-date, and explore a wide range of topics that resonate with you.

We value our readers and welcome your feedback and suggestions. If you have any comments or ideas for content that you would like to see on Aboveinsider, please don’t hesitate to reach out to us aboveinsider@gmail.com.

Thank you for choosing AboveInsider.com as your preferred blogging destination.
Ocupando el método sort() en JavaScript
Tags: javascript, beginners, spanish, webdev
Published: 2023-07-17 17:58:02

Como ya es costumbre en este perfil, hoy vamos a revisar alguna de las bondades que tenemos disponibles dentro del lenguaje de programación JavaScript. Vamos a revisar que cosas interesantes podemos hacer con sort() y algunas de sus aplicaciones prácticas.

El método sort() lo tenemos disponible en los arreglos de JavaScript y funciona básicamente para ordenar los elementos de arreglo. Por ejemplo si tenemos el siguiente arreglo de palabras y lo queremos ordenar alfabéticamente solo tenemos que ejecutar el método directamente.


![Sort con palabras](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0t7tfwxsnjq4gz896f5d.png)

Sort() por si solo ordena de acuerdo a la tabla de valores ASCII, esto quiere decir que con palabras no tiene problemas pero veamos que pasa con los números. Si tenemos un arreglo de numero veamos cual es el resultado.


![Sort con números](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yk288kkm4o31jwaslz2l.png)

Para ello necesitamos pasarle un arrow fuction con dos parámetros, para que nosotros controlemos el comportamiento al momento de ordenar números. Esta sería la forma de ordenar ascendente y si lo quisiéramos inverso, solo invertimos la posición de la variable a y b.


![Sort con números correcto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bz8zu0ed0tr6phnf668d.png)

Lo interesante de sort() es ocuparlo con arreglo de objetos porque podemos ordenar los objetos de acuerdo a ciertos criterios. Supongamos que tenemos el siguiente arreglo.


![Arreglo de ordenes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3sqyoy68e6ib8hh6bu4.png)

Lo podemos ordenar por el total de su compra. Y aplicaríamos el mismo proceso que hicimos en la parte de ordenar números, la diferencia es que ahora tenemos que acceder a la propiedad de los objetos para que se pueda hacer el ordenamiento.


![Sort con objetos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hyuya87a2rgrmmqj5f1.png)

No daría el siguiente resultado.

![Resultado del sort](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pb537nnp7djc19lbq4gy.png)

¿Qué pasa si queremos agregar que el ordenamiento también sea por el nombre en caso de que el total sea el mismo?, muy sencillo solo agregamos una condicional que verifique esto.


![Sort con dos atributos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j79adka0bbbithg8pk7x.png)

El resultado es el siguiente.

![Resultado de sort con dos atributos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3t1ia7gwu4ulck7i2g2m.png)

Como hemos visto el método sort() es bastante útil y sencillo de ocupar. Si este hilo te gusto o aprendiste algo nuevo te agradecería que me siguieras y compartieras para que mas personas puedan aprender de estos temas.
How to use loops in dart programming language.
Tags: dart, howto, programming, learning
Published: 2023-07-17 17:47:20

**Understanding the types of loops in Dart and how to use them**.

**<u>Prerequisites</u>**
To test this code, you should be able to access  [Dartpad.dev](url) or have a Dart SDK platform where you can run this code.

**What are loops?**

The loop is a function of code that allows you to run a desired request repeatedly until an outcome is achieved.
Loops work by checking the given condition and repeating the process until that condition is met.

**Types of loops in dart**.

1. For loop.
2. While loop.
3. Do-while loop (A type of while-loop).
4. For-in loop (A type of for-loop).
5. For-each loop (A type of for-loop).

● **For loop**.


![For loop example ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6iellw73ghfye6xfekc.jpg).

In the main function, we created the for loop by using the **for** keyword.
We then proceeded by creating an integer variable named **I** and assigned **0** to it.
The condition here states that **i < 5; i++** for i is less than 5 adding 1. This means as long as **I** is less than **5** add **1**.

Here is the output.


![For loop output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5zpurtei9ylwalc991l.jpg)


● **While loop**.
In this type of loop, it is written with the keyword **while** before the condition.
On every iteration, the loop checks the condition.

![While loop example ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa6httc6b43se36dr1yb.jpg)

**While(condition){}**

Here is the output.

![While loop output ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asufz6q1hytaedteya5p.jpg). 

**Note:** _Avoid writing a condition that is always true to avoid falling into an infinite loop_.

● **Do-while loop**.
Just as the name indicates, it's simply do-while. It carries the function first before checking the condition.


![Do-while loop example ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y19sjijji8ur62d5od6h.jpg)

The condition is placed last in this type of loop. It is executed at least once.

Here is the result

![Do-while loop output ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a96gu3i8hot75ig3p290.jpg).

● **For-in loop**.
For-in loop is used to loop through the properties of an object.
This loops through the properties in order.


![For-in loop example ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d44x0a45rpu4b90om866.jpg)

For everything in this variable 


Here is the output.


![For-in loop output ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56f3brix19r3owiphul1.jpg)


● **For each loop**.

In this type of loop, you can simplify the **for-in** loop.
The **for-each** loop applies to collections.
For Example.

![For-each loop example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryp3d2pz4xim7x6l7q3m.jpg)


Here is the output.



![For-each loop output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/corcdguizwouxjdgr9is.jpg)
Simplest WebServer for Angular in 6 Lines
Tags: angular, webserver, beginners, spa
Published: 2023-07-17 17:43:06

---
title: Simplest WebServer for Angular in 6 Lines
published: true
description: How do you serve your Angular app? Learn to build a web server for your Angular app in 6 lines of code. Throw in 8 more lines and you have a multi stage Docker build for your web server along with it.
tags: angular, webserver, beginner, spa
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pj0yolq24uldzmv0j90x.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-28 17:19 +0000
---

How do you serve your Angular app? Learn to build a web server for your Angular app in 6 lines of code. Throw in 8 more lines and you have a multi stage Docker build for your web server along with it.

## Angular Web Server in 6 Lines

6 lines of code, that's all it takes for a simple Angular WebServer powered by [Caddy](https://caddyserver.com/):

```
:4200 {
        root * /usr/share/caddy
        encode gzip
        try_files {path} /index.html
        file_server
}
```

## Multi Stage Docker Build in 8 Lines
Now let's throw in another 8 lines of code to get a multi stage Docker build for our Angular frontend. 

As a result you'll get a [Caddy](https://caddyserver.com/) powered container of your Angular app.

```Dockerfile
# 1. Frontend Builder
FROM node:18 as builder
WORKDIR /app
ADD . /app
RUN npm ci && npm run build

# 2. Frontend Container
FROM caddy:2.6.4-alpine
EXPOSE 4200
COPY Caddyfile /etc/caddy/Caddyfile
COPY --from=builder /app/dist/frontend/* /usr/share/caddy
```

Check it out live and working in our Github repo below (folder frontend). Have fun and enjoy!!

{% github https://github.com/crossnative/cloudland-rps %}
Javascript on HTML Page - help ChatGPT and Me
Tags: javascript
Published: 2023-07-17 15:04:53

Hi

I have wasted several hours with ChatGPT trying to get a JavaScript Function to work. I would appreciate your help.

Note I am a "Copy and Paste" coder so have limited sills in fixing ChatGPT errors.

The function copied below correctly finds and formats matching pairs of words in boxes 2 to 5 that exist in box1

eg
Following two strings are in box 1 and 2
"two words"
"this is four words" (it finds and formats as pairs)
but when the following is in box 2 and box 1 
"something Two Words"
it only formats "two words"
I am not sure why it does not choose "something two". 

In any case I would like to modify it so that it finds and formats 2 or more matching words as a string
eg if the following is in box1
"**this is Five Words total** plus something else"
and the following is in box2
"anything **this is five words total** and more"
it should format "**this is five words total**" leaving the other words unformatted.

It already ignores case

Any help in rewriting the function below would be appreciated

Note - there may be unnecessary fluff in the function below


function find2Words() {
// Modified version shoud find matching strings of 2 words+
  const box1 = document.getElementById("box1");
  const boxes = document.querySelectorAll("#box2, #box3, #box4, #box5");

  const box1Text = box1.innerText.replace(/\n/g, " ");
  const box1Words = box1Text.match(/\b\w+\b/g);

  boxes.forEach((box) => {
    const lines = Array.from(box.getElementsByTagName("div"));

    lines.forEach((line) => {
      const lineText = line.innerText;
      let formattedLine = lineText;

      for (let i = 0; i <= box1Words.length - 2; i++) {
        const phrase = box1Words.slice(i, i + 2).join(" ");

        if (lineText.toLowerCase().includes(phrase.toLowerCase())) {
          const regex = new RegExp(`\\b${phrase}\\b`, "gi");
          formattedLine = formattedLine.replace(regex, `<span style="color: #873600;">$&</span>`);
        }
      }

      line.innerHTML = formattedLine;
    });
  });
}