teleren/devto huggingface dataset:
Css Selectors By Attribute with 3 Examples
Published: 2021-10-29 15:10:59

**What is an Attribute selector in CSS?**

An attribute selector matches a tag based on the value of its attribute. In other words, it's used to select elements that have a particular attribute.

**Understand Css Selectors By Attribute with examples:**

**Example # 1:**

Select all the elements with an href matching "example.org"

a[href="example.org"] {...}

**Example # 2:**

Select elements with an href containing "example"

a[href*="example"] {... }

**Example # 3:**

Elements that have been set to display: none or visibility='hidden' by default

a[visibility=hidden] {...}

**Don't stop here**! I have another great guide for you.


You can now read our [CSS Selectors cheat sheet](https://www.coderchamp.com/css-selectors-cheat-sheet/) for free 

Learning CSS box-shadows could be difficult?

![Css Selectors By Attribute with 3 Examples](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yubuqkberv3qimrkx2xi.png)

You do not need to worry at all.

Because I have also created a complete 101 guide about [CSS box-shadow](https://www.coderchamp.com/css-box-shadow-property-with-solid-examples/) with several different real-world examples and output.

You will definitely love it.

**Don't forget** to follow my profile here for more cool & instant stuff in web development.

Best of luck!
Koa in the Cloud
Tags: javascript, koa
Published: 2021-10-29 15:07:27

---
title: Koa in the Cloud
published: true
description: In this post you can learn how to run Koa on AWS Lambda and the differences with Express.
tags: javascript, koa
cover_image: https://fusebit.io/assets/images/blog/blog-koa-social-card.png
---

## Express or Koa?

Most developers using Node.js are using frameworks to improve productivity, scalability, and speed of application development, facilitate quick prototyping, and automate processes with the help of libraries, templates, and reusable components.

Two of the most popular frameworks are Express and Koa.

Express is a widely used and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is quick and easy to create a robust API with many HTTP utility methods and middleware available.

Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and a more robust foundation for web applications and APIs. By leveraging async functions, Koa allows you to ditch callbacks and significantly improve the experience of error handling. Koa does not bundle any middleware within its core, and it provides an elegant suite of methods that make writing servers fast and enjoyable for developers.

Even though Express has been called the de facto standard server framework for Node.js and it's the most popular one with 18 million weekly downloads, Koa is rapidly growing in popularity with 1.2 million weekly downloads because it's lightweight, has great user experience and superior performance (37K req/sec vs. 10K req/sec of Express).

![Benchmark of Koa vs. Express](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fsycfopvv3cvy9p6iu0.png)

## Why Use Serverless?

Serverless is a cloud execution model that enables a more straightforward, cost-effective way to build and operate cloud-native applications. The application owner does not purchase, rent, manage, or provision the servers in this cloud architecture. Instead, the cloud provider manages the infrastructure side of things for the applications.

Despite the name, serverless apps do not run without servers 😂. It means that businesses don't need to manage the server-side of the equation and operational concerns, and instead focus on development.

The most significant advantage of this architecture is that the provisioning of servers is done dynamically to meet the real-time computing demand. That is, you pay only for what you use. The same could be said about running monolithic applications on VMs behind an Auto Scaling Group, which was available for years before serverless. The key change in serverless is also the change in the scope of the unit of deployment, from a monolithic app to a single function.

[Click here to learn how to run Express.js and Koa.js on AWS Lambda.](https://fusebit.io/blog/koa-in-the-cloud/?utm_source=dev.to&utm_medium=referral&utm_campaign=post&utm_content=liz)
Creating a Text-To-Speech program in Vanilla JS
Tags: javascript, webdev
Published: 2021-10-29 15:01:23

If you haven't been too traumatized from using a Microsoft browser, you might have discovered Edge's built-in "Read Aloud" feature which will speak the highlighted text out loud right in your browser:

<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1635438522/JS%20Bits/edge-text-to-speech_y88jdn.jpg">

As of now, Chrome has no such feature so we're going to build it ourselves! Here's the code:

```js
function speak() {
  const text = window.getSelection().toString();
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.voice = getFemaleVoice();
  speechSynthesis.speak(utterance);
}

// Optional - select one of several voices
function getFemaleVoice() {
  const voiceIndex = 4;
  return speechSynthesis.getVoices()[voiceIndex];
}
```

So essentially we just pass in the string from `window.getSelection().toString()` to a new instance of `SpeechSynthesisUtterance` and call the `.speak()` method and that's it!

But we need a way to trigger our `speak()` function. You could create a Chrome extension to add this functionality to the context menu but I've chosen to use DevTool's "Snippets" just to keep it simple. Snippets are your own custom saved scripts you can paste into your browser and run at will. They're super handy for utility functions like cookie getter/setters, JS libraries like Lodash or jQuery, custom UI modifications, etc. 

Once you create a snippet, you can run the code either by clicking "Run Snippet" or pressing Command/Control + Enter. You can also run them directly from the DevTools Command Menu. 

Snippets are located in the <b>Sources</b> tab and then on the sidebar click "Snippets":

<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1635440825/JS%20Bits/snippet_tnq2qw.jpg">

We just need a bit more overhead to account for the asynchronous loading of `speechSynthesis.getVoices()` so that our desired voice has loaded before the speech audio runs. The final code looks like this:

```js
if (voiceLoaded()) {
  speak();
} else {
  speechSynthesis.addEventListener('voiceschanged', speak);
}

function speak() {
  const text = window.getSelection().toString();
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.voice = getFemaleVoice();
  speechSynthesis.speak(utterance);
}

function getFemaleVoice() {
  const voiceIndex = 4;
  return speechSynthesis.getVoices()[voiceIndex];
}

function voiceLoaded() {
  return speechSynthesis.getVoices().length;
}
```

<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1635441350/JS%20Bits/text-to-speech-final_d0pssc.jpg">

And now we can do the laundry and have our article read to us at the same time! 🔊

----------
<b>Yo!</b> I post byte-sized tips like these often. Follow me if you crave more! 🍿

I'm on [Twitter](https://twitter.com/JS_Bits_Bill), [TikTok](https://www.tiktok.com/@js_bits) and I have a new [debugging course](https://jsbits-yo.com/bug-bash/) dropping soon!
The Experience Paradox: Solutions
Tags: devrel, learningtocode, changingcareers, freelancing
Published: 2021-11-01 15:02:00

---
title: The Experience Paradox: Solutions
published: true
date: 2021-10-29 14:38:12 UTC
tags: developerexperience,learningtocode,changingcareers,freelancing
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*2fuEcbOhipHa1xwL)<figcaption>Photo by <a href="https://unsplash.com/@olav_ahrens?utm_source=medium&amp;utm_medium=referral">Olav Ahrens Røtne</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>

As I said yesterday, I want to provide the few solutions that I have seen that have dramatically increased chances of getting a job while also sharing another path forward for recent bootcamp grads and those companies, primarily startups, that need developer talent and are more likely to hire junior developers.

#### Solution 1: Build Projects

This is pretty self-explanatory. If your goal is to get a job, you have ‘demonstrate’ experience. It is easy to get stuck in the vortex of ‘I have no experience, you want experience, I will not get hire, etc.’

But, if you build out projects that hiring managers will understand, you will get more looks. Your job is to show them your project. Be courageous in the interview (not rude, there is a difference) and show them what you have built so they ‘see’ experience with their eyes.

#### Solution 2: Freelance

First, let’s get out of the way necessary acknowledgements. Freelancing is hard. You have to know and do a lot more ‘business-y’ things than simple coding. But we live in a world that is making these things better and easier than ever.

I will link to these things in a future blog post.

The problem with freelancing is that there is always more involved than what you simply wanted to do, which for the vast majority of developers is to code.

Bootcamps are pumping out full-stack developers. But with freelancing you have to add DevOps and a host of other things. This is where the tools will come in.

As a freelancer, you are an entrepreneur. You are a startup. So when I write more tomorrow on startups, look for that article because some of the tools I mentioned will be there. As well as some perspective.

Last note: As a freelancer you get to build projects. Building projects is how you demonstrate experience. Therefore you are more likely to get more looks for a full-time job after freelancing.

#### Solution 3: Startups

_I will talk about startups tomorrow._

Suffice it to say, that startups are in a very unique position. If you have not been funded by a VC you are a startup which means risk. You need guarantees. You need developers to be committed to you because time is of the essence and developers need you to be committed to them.

Some of the tools that I will mention tomorrow are the same ones I referred to with freelancing. So look out for those tools tomorrow.
Bots, Hooks, and Extensions
Published: 2021-10-29 14:57:55

---
title: Bots, Hooks, and Extensions
published: true
description: Identify the set of technical challenges you will need to think about and solve to add a robust integration story to your app
tags: 
cover_image: https://fusebit.io/assets/images/blog/bots-hooks-extensions-social-card.png
---

When you are building a modern application, it is only a matter of time before your customers ask for integrations with other systems. Listen to them, and your acquisition and retention will benefit. This post provides a way to frame this space and identifies the set of technical challenges you will need to think about and solve to add a robust integration story to your app.

# Benefits of integrations in your app

Over 90% of SaaS product leaders say that having integration features embedded in their application increases acquisition and retention. 

We live in a world where [an average mid-size company uses close to 140 SaaS products](https://www.blissfully.com/saas-trends/2020-annual-report/). Very few of them make sense in isolation, they all support parts of a bigger business process, which is only possible if they are integrated. The newsletter signups from Pipedrive must flow as leads to Salesforce. Weekly sales numbers from Salesforce must be sent to Slack as a report, etc. 

Customers of SaaS products are increasingly comparing alternative solutions using integration capabilities as the key differentiator. In a crowded space, the integration features of your app can make a difference between closing or losing a deal. Integrations in your app are no longer a checkbox on your customer’s checklist. Showing a logo is not sufficient. Your integration story must have a quality and depth to it to win. 

Integrations are also key to retaining your customers longer. [An average mid-size company changes 39% of their SaaS application stack every year](https://www.blissfully.com/saas-trends/2019-annual/). It is much easier for your customer to replace a disconnected or poorly connected application than to remove an application that has its integration tentacles deeply embedded in several other systems in the customer’s ecosystem.

Making the right technical choices when deciding on the scope and approach to the integration story in your app is key. The rest of this post frames the space and provides an overview of the technical challenges you will need to address along the way.  

# Bots, hooks, extensions - choosing the right integration pattern

Integration capabilities come with different names, but they really revolve around a handful of integration patterns. One useful way of categorizing them is to look at the trigger of the integration behavior. Looking from the perspective of your app, there are outgoing, incoming, or scheduled integrations, or a combination thereof. We will look into each of these in turn.

[Read more about bots, hooks, and extensions and create yours!](https://fusebit.io/blog/koa-in-the-cloud/?utm_source=twitter.com&utm_medium=referral&utm_campaign=post&utm_content=liz)
1 line of code: How to get the closest numeric item of an Array
Tags: javascript, webdev, productivity, codequality
Published: 2021-10-29 14:46:04

 
```javascript
const closestNumber = (arr, number) => arr.reduce((acc, current) => (Math.abs(current - number) < Math.abs(acc - number) ? current : acc) ); 
```
Returns the numerical item closest to the given number.


## The repository & npm package

You can find the all the utility functions from this series at [github.com/martinkr/onelinecode](https://github.com/martinkr/onelinecode)
The library is also published to [npm as @onelinecode](https://www.npmjs.com/package/@onelinecode/onelinecode) for your convenience.

The code and the npm package will be updated every time I publish a new article.

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)


Photo by [zoo_monkey](https://unsplash.com/@zoo_monkey) on [Unsplash](https://unsplash.com/s/photos/fuji)

---
Successfully Completed Hacktoberfest 2021
Tags: css, html, webdev, c
Published: 2021-10-29 14:32:33

Hello Guys , I wanted to share my Hacktoberfest 2021 Journey. Last year in 2020 , when I just entered my college and made new friends, I came to know about this event. I found this event very interesting because of the swags they were sending to all(It was a matter of pride for us posting pics of our swags on social media). However, I was new to coding and lack of knowledge about open sourcing , GitHub etc. restricted me from participating last year. This year I learnt few programming Languages but I still hadn't started contributing on GitHub yet , hence I decided to skip my participation this year too. But suddenly, I got a mail from my college's coding society and they said it is perfect time to kickstart a Open source journey through Hacktoberfest. Then I created a GitHub account and learnt to Pull a Request on any repository from YouTube. I submitted around 10 PRs, some were excluded , some were never accepted but at last I managed to mature my 4 valid PRs by 10/24/2021. I was extremely happy with this achievement. This event helped me learning basics of GitHub and also motivated me to learn about Git and it's command.


Thank You !!
Data Structure and its Types
Tags: data, tutorial, programming
Published: 2021-10-29 14:23:44

A data structure is a particular way of organizing data in a computer so that it can be used effectively.

For example, we can store a list of items having the same data-type using the array data structure.

![Memory location](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1z6n4d020up1l0ka522n.png) 

In programming, we use so many types of data structures to provide a proper structure to our data. A data structure is basically used to collect and organize the data on which we are going to perform the operations.

![Types of Data Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pknb88tspvuwnkxqlyy4.png) 

[Types of data structures](https://www.techgeekbuzz.com/types-of-data-structure) are basically of two broad types:

* **Primitive**
  * Integer
  * (Double) Floating-point Numbers
  * Character
  * Pointer
* **Non-primitive**
  * Linear Data Structure
     * Array
     * List
     * Stack
     * Queue
  * Non-Linear Data Structure
     * Tree
     * Graph
  * File Data Structure

## Conclusion

Data structures are the most important part of a programming language and during tech interviews, the favourite topic of the interviewer. 

That’s probably because the ability to choose the right data structure is one of the vital skills a programmer should possess.
DocuSaurus Adventures and SSG Inspiration
Tags: opensource
Published: 2021-10-29 14:18:37

### DIDNTREADME.MD
Most tools that are created in the world (software or otherwise) have documentation and manuals. I myself experienced this when I made an Static Site Generator called textToHTML and had to write a README file with instructions. 

### The Issue
For basic usage, a README file might be appropriate. However, what happens if your tool has many features, functions, combinations of features to use. All of these examples could get very hard to follow.

### Bring In The DocuSaur
![Coding Dinosaur](https://cdn.drawception.com/drawings/yblcVCvjfl.png)

DocuSaurus provides an easily generated template website to use for documentation. It includes:
* Template MD files for links to blogs/documentation.
* Editable source code to customize look of the template.
* Easily deploying a fully functional template website using "yarn deploy" commands.

### Using the inspiration

I saw how DocuSaurus handled the Markdown features, and also accessibility on their HTML templates. As such I decided for my own SSG to improve the Markdown capabilities and also add `<title>` tags to each of the generated pages. 

Given that we were now allowed to use an open source library to implement these features instead of coding from scratch, I chose **Markdown-it**.
### Down to brass tacks
Implementing the [changes](https://github.com/AndreWillomitzer/textToHTML_V2/commit/2aef898cc28d951c779e47e3b13832d3fad990c9#diff-936abe23603122a101996b9b28ce952b6f455204bfc34cae4fff7d4f8d55d6e0) were fairly simple, as in my original method I used a function to take the content (excluding head, meta tags, body) and process the Markdown using regexp. ***Instead*** what I did now was pass my content to the markdown function which then calls the "md.render()" method and returns that content.
```
var md = require('markdown-it')({
  html: true,
  linkify: true,
  typographer: true
});

const processMarkdown = (data) => {
    return md.render(data);
};
```
### Titles
To implement title tags, I took the file name using path.basename() method, and inside my generated HTML templates I added `<title> ${fileName}</title>` for each file. [Commit Link](https://github.com/AndreWillomitzer/textToHTML_V2/commit/8a584a347c05fc7f154d27cffdf2bbd79a475209#diff-936abe23603122a101996b9b28ce952b6f455204bfc34cae4fff7d4f8d55d6e0).

### Conclusion
Overall the features themselves were not too tricky to implement because luckily my refactoring last week made my code more modular and functional. So when the time came it was a matter of just changing the function logic to use the library rather than my own regular expressions.
Setting up Rubocop correctly with Gitpod and VSCode Ruby
Tags: vscode, devops, rails, ruby
Published: 2021-10-29 14:15:42

I've recently come across [Gitpod](https://gitpod.io/). Gitpod provides cloud-based development environments. They're similar to [GitHub Codespaces](https://github.com/features/codespaces), but in my opinion offer a better experience. Setting up an environment is simpler and they are all about ephemerality. The idea is that each environment just lives for the duration of the task you're working on, and then you throw it away. Like Codespaces, Gitpod uses the Visual Studio Code editor, which you can access with your browser.

I'm slowly adding Gitpod to all of my projects, because the development experience is much better than doing it on my local machine.

For [one of my Rails projects](https://github.com/shafy/fugu/), I had some issues getting the Rubocop linter to work. Here's a short set up guide to so that others can avoid the problem I had.

To configure your environment to work with Gitpod, you need to add a file called `.gitpod.yml` to the root of your project. In my case it looks like this:

```
image:
  file: .gitpod.Dockerfile
ports:
  # Rails server
  - port: 3000
    onOpen: ignore
  # PostgreSQL server
  - port: 5432
    onOpen: ignore
tasks:
  - init: >
      bundle install &&
      rails db:setup
github:
  prebuilds:
    branches: false
    pullRequests: true
vscode:
  extensions:
    - rebornix.ruby
    - wingrunr21.vscode-ruby
```

You can see that it contains simple instructions that Gitpod uses to set up your cloud-based development environment. Importantly, it needs to know which Docker image it will build from. While you can specify a pre-built image, in this example, I reference another file in my project called `.gitpod.Dockerfile` that looks like this:

```
FROM gitpod/workspace-postgres
USER gitpod
# Install the Ruby version specified in '.ruby-version'
COPY --chown=gitpod:gitpod .ruby-version /tmp
RUN echo "rvm_gems_path=/home/gitpod/.rvm" > ~/.rvmrc
RUN bash -lc "rvm reinstall ruby-$(cat /tmp/.ruby-version) \
              && rvm use ruby-$(cat /tmp/.ruby-version) --default \
              && gem install rails \
                 rubocop rubocop-performance rubocop-rails rubocop-rspec"
RUN echo "rvm_gems_path=/workspace/.rvm" > ~/.rvmrc
```

This is a default Gitpod Docker image that works well with Rails and Postgres. Gitpod first runs the commands in the Dockerfile, and then the commands in the `tasks:` key in `.gitpod.yml`. And here is the tricky part: If you only install Rubocop with the `bundle install` command after the Docker image has been set up, [VSCode's Ruby extension](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby) (which we use for linting) won't have access to the command. Therefore, as you can see in the above Dockerfile, you need to install `rubocop` in the same path as you install Ruby.

That's it! If you haven't tried Gitpod or Github Codespaces, I really recommend giving it a spin. For me, this is the next level of abstraction in programming that will increase developer productivity by a significant factor.