teleren/devto huggingface dataset:
Non-coders Guide to Contributing to Open Source
Tags: opensource, tutorial, beginners, career
Published: 2023-04-27 13:28:51


![Tweet Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3qd96pnvmw2yxh5qhyy.png)

In 2023, I can't think of a better way to showcase your skills than contributing to open source.

And that's not only for experienced programmers, but ANYONE having a career in tech. 

In this post, I will cover contributions that non-coders can make to started with their open source journey (right away).

Let's dive in! 🚀 

---

## TL;DR

- [Report Issues 🐞](#report-issues)
- [Suggest Improvements 💡](#suggest-improvements)
- [Participate in Discussions 💬](#participate-in-discussions)
- [Improve Documentation 📝](#improve-documentation)
- [Spread the Word 🗣️](#spread-the-word)

## Report Issues 🐞

Every project has some areas of improvement.

• Broken links
• UI glitch
• Cryptic error messages

You can battle-test the product
And help maintainers identify bugs.

Make sure you provide context and steps to reproduce the issue.

![report issues](https://media.giphy.com/media/ghUYvOphX3RKaeWNlO/giphy.gif)

## Suggest Improvements 💡

If you can’t find any obvious bugs...

Think what could have improved your user experience?

How is app rendering on mobile?
Is page load speed ok?
Any instructions which are not clear?

Raise improvements as feature requests.

## Participate in Discussions 💬

Collaboration is key in open source.

Be active in project related discussions.

Depending on the project it can be over:
• Discord/Slack
• Mailing Lists
• GitHub Issues

See where you can add value or share a perspective.

## Improve Documentation 📝

![improve documentation](https://media.giphy.com/media/xT4uQwLt2AyurOGWFW/giphy.gif)

Open source projects should be easy to use and understand.

Lot of it depends on the documentation.

You can audit project repo to know what’s missing.
And contribute in form of:

• User Guides
• Demo Videos
• FAQs

## Spread the Word 🗣️

Lastly..every open source project needs evangelism.

Share your experience of using it in a:
Tweet
Blogpost
Or a YouTube video

That’s how projects get visibility and reach.
And you’ll learn some marketing 🙂

## Wrapping Up 🎬

![wrapping up](https://media.giphy.com/media/1XdfVRTyn5d31Q1lG0/giphy.gif)

That's it!

These are some ideas on how can you make valuable no-code contributions to an open source project.

BTW - If you’re looking for an open source project...

Here’s mine: [AskDevs](https://github.com/codewithvoid/AskDevs)

If you liked this post, follow me for more of these 🙂

Also, would love to hear any no-code contribution I missed in comments 👇
Improve GitHub issues with AI 🦾
Tags: githubhack23, javascript, ai, productivity
Published: 2023-04-27 13:23:11

I would like to share the progress of my GitHub + DEV 2023 Hackathon project and receive feedback. The project is a Github action that triggers when a new issue is created. It creates a comment that includes a summary, related issues, and custom sections with the assistance of OpenAI API.

I have noticed that many open-source projects have few maintainers and a lot of issues. Some issues are duplicates, while others are related to each other. These details are usefull to the maintainer. With the assistance of AI, this action will create a "related issues" section in the comment.

In addition, I believe it is beneficial to summarize lengthy issues and provide feedback to the issue author on how to improve the issue text. I am also considering adding a label suggestion / assigne features.

What are your thoughts on this project? Are there any additions or changes that would be useful?

For further information, please visit this project on Github.

https://github.com/MaurerKrisztian/issue-improver-action
Top 3 Reasons To Hire Magento Certified Developers For eCommerce Solutions
Tags: magento, magentodesigner, react, webdev
Published: 2023-04-27 13:21:07


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9m9xua7irp5go1hqujz.png)
Magento is one of the most popular eCommerce platforms, powering over 250,000 online stores. To fully take advantage of Magento's capabilities, it's important to **[hire Magento-certified developers](https://www.webcluesinfotech.com/magento-development-services)**. In this blog post, we'll discuss the top 3 reasons why you should hire Magento developers for your eCommerce solution.

**1. Expertise in Custom Magento Solutions**
Magento-certified developers possess extensive knowledge of Magento's architecture, functionality, and best practices. This expertise allows them to create custom Magento solutions that align with your business goals and requirements. A certified Magento developer can create a unique user experience for your customers, streamline your business processes, and provide scalability for future growth.

**2. Efficient and High-Quality Development**
Certified Magento developers are experts in their field, meaning they can develop your eCommerce solution more efficiently and to a higher standard than a non-certified developer. They can also provide better support and maintenance for your eCommerce solution, ensuring that your store is always running smoothly and efficiently.

**3. Access to Latest Magento Updates and Features**
Magento is constantly evolving, with new updates and features being released regularly. Certified Magento developers have access to the latest updates and features, meaning they can implement them into your eCommerce solution, keeping it up-to-date and ahead of the competition.

**Conclusion**
Hiring Magento-certified developers for your eCommerce solution provides numerous benefits, from expertise in custom Magento solutions to access to the latest Magento updates and features. If you're looking for a reliable and efficient eCommerce solution, [hire Magento developers](https://www.webcluesinfotech.com/magento-development-services) from WebClues Infotech is the way to go.
Top React JS Benefits for Developing Successful Web Applications
Tags: react, development, developer
Published: 2023-04-27 13:17:00

The field of information technology is diverse and is constantly changing. Numerous tools and technologies appear, take root, become popular, and then fade away in favor of more cutting-edge alternatives. But when it comes to efficiency, a select few technologies are unbeatable, unavoidable, and always produce the best results. This group includes the framework ReactJS. Since Facebook first made ReactJS available, its popularity has never decreased.

**What is React.JS?**

ReactJS is a free JavaScript library for creating user interfaces that can be used everywhere. It was developed by Facebook and made available to the developer community in 2013. It makes it simple for developers to create reusable UI components. Additionally, ReactJS offers a quick and effective approach to updating and rendering UI changes in real time.

**Benefits of React.JS** 

1. Reusable Components
2. JavaScript XML
3. High Performance
4. SEO-friendly
5. Large Community
6. Compatibility with Other Libraries and Frameworks

**Here are some factors that make React JS the best choice for your project**

1. React's Unidirectional Data Flow
2. Large Community helps everyone grow 
3. Virtual DOM boosts efficiency
4. Easy to Learn 
5. Declarative Programming makes it easier for programmers
6. Server-side rendering makes React SEO-friendly
7. Cross-platform Compatibility helps save time and cost
8. High Performance makes it the best choice
9. Strong Ecosystem makes development faster
10. Interactive UI (User Interface) gives the best UX (User Experience)
11. Flexibility to provide the best results
12. Fast Rendering means more efficient

In this rapidly changing digital age, technology can only endure with amazing qualities. ReactJS has everything. As a result, it may be the ideal option for creating profitable, effective web apps. We have covered all of React's significant benefits in this essay. To create the best software, we must only employ the most appropriate technology. Why are you holding out? Develop your customized [React.JS app](https://www.marketingsource.com/post/top-advantages-of-react-js-to-create-thriving-web-applications) right away.
Next Level Stego Ideas
Tags: stego, obfuscation, base64, tts
Published: 2023-04-27 13:16:11

I'm working on an idea to code an app that will essentially:

1. Encode a given string to Base64
2. Reverse the resulting string of characters
3. Generate an accurate phonetic spelling of the result
4. Parse the result through a TTS engine (e.g. Elevenlabs)
5. Reverse the resulting audio.
6. Embed the resulting reverse audio binary within another normal audio file without corrupting the original audio stream.

How easily could such hidden data be stumbled upon? Any ideas would be welcome.
5 Different Ways to Center a Div
Tags: programming, css, webdev, tutorial
Published: 2023-04-27 13:14:01

### Horizontal Centering
Horizontal centering is useful when we want to center a div horizontally on the page. To do this, we can use the following CSS code:
```css
div {
   margin: 0 self;
   width: 50%;
}


```

This code centers the div horizontally by setting an automatic left and right margin and setting the width of the div to 50% of the parent container.

### Vertical Centering
Vertical centering is a bit more complicated, but can be achieved with the following CSS code:
```css
.container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}

.content {
   /* Style the div to be centered */
}

```

In this example, we create a parent container with display flex, and set the justify-content property to center and align-items to center. We then set the height of the container to 100vh. Next, we define styles for the div we want to center.

### Horizontal and Vertical Centering
To center a div both horizontally and vertically, we can combine the above techniques. The following CSS code can be used:
```css
.container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}

.content {
   margin: self;
}

```

In this example, we use the same vertical centering technique as the previous technique, but we add an automatic margin to center the div horizontally.

See more at: https://tablognews.netlify.app/posts/post/5-formas-diferentes-de-centralizar-uma-div
#GitHubHack23 : Raw Story
Tags: githubhack23
Published: 2023-04-27 13:06:58

This Project come up in our mind-blowing conversation on Discord. We (@mkubdev and me), sharing about "How your day?", "What you working today!?", "Did you found something wrong different?", and etc.

We love skate 🛹 and familiar with word "Freestyle" (That's feel jumping from the first paragraph 🤣). We love doing something unusual in our coding-story, trying pushing the limit and think something magically impossible (in our knowledge 😜)

## The Starting Point


![Discord Conversation #1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9try1s1exs4rnf103ks.png)

And here my printer thermal setting page:

![Printer Thermal Setting Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44h40jl75alho4cdk0cg.png)

And other conversation:

![Discord Conversation #2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8bl6knwmwg0kbauk7hr.png)

This project is like skate playground for both of us and we're so proud to 📢 this playground on Internet.

![Discord Conversation #3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htosly4ebhzp6ymlykdf.png)

Both of us is not really thinking about the project or organization name. Then... @mkubdev 

![Discord Conversation #4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4hl2q5fzp8hist5ua8c.png)

## The Name is Coming!

![Discord Conversation #5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8sjdfs7hpiqtd9wd30u.png)

This our first paragraph that defined [Street Community Programmer](https://github.com/StreetCommunityProgrammer) in raw model 🥩. Then become amazing in @mkubdev interpretation:

_Hello Punk! We are street programmer that work out of the box in every way of traditional theory and we're not calling snippet of code but called as Metaphor._

_We know that programming is more than just code. It's an art form, and like all art, it's open to interpretation. That's why we've created a space for metaphor stories in each programming language. Each story is a unique interpretation of programming in a particular language, and it's a great way to expand your thinking and learn new skills. Whether you're a seasoned programmer or just starting, our stories will inspire and challenge you to think outside the box._

_We called our member **Punk/Freestyler/Software Freestyle Engineer** that create some Metaphor to make this world more better._

This is going wild 🦁 🏞

![Discord Conversation #6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1gxxyerm0mzp7z1mihm.png)

I think enough to share what happen before happening 😸. See you in the next series.
Looking for a good tech newsletter? I found one. (Daily Tip #1)
Tags: tech
Published: 2023-04-27 12:59:55


Honestly, for years I looked for a good newsletter to read about tech stuff. No, before you ask, this isnt an endorsement and I am not getting paid for this, but I read [Tech Brew](morningbrew.com/emerging-tech/r/?kid=8d71dcb8). It is a tri-weekly newsletter with a bunch of news about all things tech. I totally recommend it, it is so in-depth and informative. That is today’s daily tip! Also, with their epic referrals system, each time i hit a milestone from the referral link in this post, a giveaway automatically starts, and you can enter here
Decoupled CMS
Tags: frontend, architecture, decoupled, storybytes
Published: 2023-04-27 12:59:18


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41k8xnwqblfmfmh08zt8.png)
Decoupled and headless CMS Platforms are on the rise. In the past few years, there has been a significant surge in the popularity of decoupled and headless CMS platforms. If you're considering a launch or relaunch of your digital identity, it's essential to understand the differences between coupled, decoupled and headless CMS architectures. Let’s begin with a coupled CMS: A coupled or traditional CMS does contain all the back-end and the front-end architecture together. All contents, code and assets are created, managed and stored in the back end. A Decoupled CMS, on the other hand, splits the architecture like your brain into two sections: one part is in charge of creating and storing content. In contrast, the other delivers that content to users on their devices. Now, how does a decoupled CMS differ from a Headless CMS? An easy way to understand the difference between headless CMS and decoupled CMS architecture is to think of decoupled as proactive and headless CMS as reactive. Decoupled architecture prepares the content on the back end and then can proactively deliver and present formatted content to various channels. Headless CMS, on the other hand, is a content-only data source with no functionality within the CMS to present content to an end user. This means that a headless CMS implementation is “API only, UI anything”; it can push content to any device or channel. Decoupled CMS architecture separates the back end (content creation and storage) and front end (content display) into distinct systems. This front-end agnostic approach takes advantage of web services and APIs to deliver raw content to any front-end design, providing the flexibility of headless CMS while still allowing for templates like in a traditional CMS platform. Decoupling your CMS provides numerous benefits, such as faster and more flexible content delivery, resiliency against changes in the user interface, rapid design iterations, enhanced security, fewer dependencies for publishers and developers, and more straightforward deployment. In the 2000s, it was enough for businesses to have a website. In the 2010s, it was enough to have a website and an app. In the 2020s, businesses must deliver interwoven digital experiences that are personal, contextual, and varied.
Need help with Go or java jar linking to Tarantool.
Published: 2023-04-27 12:29:29

hey there,
I need to capture "box.info" output from tarantool server remotely. I've only succeeded to do it from python, but i need something.... 
- compiled into exe (but not like py2exe) 
- or imported within Jython (i.e. an example over jar file) 
- or maybe i overlooked some vendor-supported CLI which can work "non-interactively", i.e. executing like "tarantoolcli.exe user=user command=box.info" would work fine. 
It's all about 2.x tarantool version, requesting from Windows OS. 
Any advice?
Learn how to develop apps for Microsoft Teams using Teams Toolkit for Visual Studio Code video series
Tags: microsoft365dev, gettingstarted, microsofteams
Published: 2023-04-27 12:59:00

---
title: Learn how to develop apps for Microsoft Teams using Teams Toolkit for Visual Studio Code video series
published: true
description: Are you a developer looking to start creating apps for Microsoft Teams? We are delighted to share with you the 'Build and deploy apps for Microsoft Teams using Teams Toolkit for Visual Studio Code' video playlist.
tags: #microsoft365dev #gettingstarted #microsofteams
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gk82lbhr16hbua0y21h.png
# Use a ratio of 100:42 for best results.
published_at: 2023-04-27 12:59 +0000
---

Are you a developer looking to start creating apps for Microsoft Teams?

We are delighted to share with you the [Build and deploy apps for Microsoft Teams using Teams Toolkit for Visual Studio Code](https://www.youtube.com/playlist?list=PLR9nK3mnD-OUj_N95-MsO0kcuufOzRTTh) video playlist.

Teams Toolkit for Visual Studio Code is a tool for building apps for Microsoft Teams, fast. 

It is the quickest way to create, build, debug, test, and deploy apps for Microsoft Teams.

This playlist teaches you basic concepts of building apps for Microsoft Teams using Teams Toolkit.

You will learn how to:

- Get started
- Build a bot
- Build a tab
- Use Teams JavaScript library
- Deploy your app to Azure

Happy coding! 👋

Full playlist URL: https://www.youtube.com/playlist?list=PLR9nK3mnD-OUj_N95-MsO0kcuufOzRTTh

{% youtube https://www.youtube.com/watch?v=tOoEnTqlG60&list=PLR9nK3mnD-OUj_N95-MsO0kcuufOzRTTh %}


> All videos in the playlist were recorded in the weekly Microsoft 365 Platform and Power Platform community call. Learn more: [https://aka.ms/community/calls](https://aka.ms/community/calls)
Adding permissions for Vendure plugins
Tags: opensource, webdev, vendure, tutorial
Published: 2023-04-27 12:54:12

Adding permissions for your custom functionality is important for improving the security, compliance, customization, and control of an application. By adding custom permissions, you can create a more personalized and flexible experience for your users and helps you control access to specific features or functionality within your application. Manage user roles, delegating tasks, and ensure that only authorized individuals have access to sensitive data and specified functionality.

In Vendure we can create [PermissionDefinitions](https://www.vendure.io/docs/typescript-api/auth/permission-definition/) to create new permissions and require them to specific queries /mutations. Let's create a permission for setting an API key

```ts
// apikey-permission.ts

import { PermissionDefinition } from '@vendure/core';

export const apiKey = new PermissionDefinition({
    name: 'SetApiKey',
    description: 'Allows setting API key',
});
```

Now, we can use [@Allow() decorator](https://www.vendure.io/docs/typescript-api/request/allow-decorator/) to limit access to the mutation

```ts
// apikey.resolver.ts

import { Allow } from '@vendure/core';
import { Mutation, Resolver } from '@nestjs/graphql';
import { apiKey } from './apikey-permission';

@Resolver()
export class ApiKeyResolver {

  @Allow(apiKey.Permission)
  @Query()
  apiKey() {
    // ...
  }

  @Allow(apiKey.Permission)
  @Mutation()
  setApiKey() {
    // ...
  }
}
```

And to register `apiKey` permission in Vendure we pass it to `VendureConfig`

```ts
// apikey.plugin.ts

import gql from 'graphql-tag';
import { VendurePlugin } from '@vendure/core';
import { ApiKeyResolver } from './apikey.resolver'
import { apiKey } from './apiKey-permission';

@VendurePlugin({
  adminApiExtensions: {
    schema: gql`
      type ApiKey {
        id: ID!
        apiKey: String!
      }

      input ApiKeyInput {
        apiKey: String
      }

      extend type Query {
          apiKey: ApiKey
      }

      extend type Mutation {
        setApiKey(input: ApiKeyInput!): ApiKey!
      }
    `,
    resolvers: [ApiKeyResolver]
  },
  configuration: config => {
    config.authOptions.customPermissions.push(apiKey);
    return config;
  },
})
export class ApiKeyPlugin {}
```

Finally, `apiKey` permission can be found in the Role detail view of the Admin UI for `superadmin`, and can be assigned to other Roles as required.

When requiring separate permissions for create, read, update and delete we can use [CrudPermissionDefinition](https://www.vendure.io/docs/typescript-api/auth/permission-definition/#crudpermissiondefinition) which simplifies the creation of the set of 4 CRUD permissions.👌
How to Create Personal Portfolio Website Using HTML & CSS
Tags: html, css, webdev, beginners
Published: 2023-04-27 12:42:08

{% youtube Ez4IIVAU2zM %}
Hi guys, today we want to show How To Create a Personal Portfolio Website Using HTML & CSS

Creating a personal portfolio using HTML and CSS is a great way to showcase your skills, experience, and accomplishments to potential employers or clients. With the help of these two programming languages, you can design a professional and visually appealing website that sets you apart from the competition.

Here’s a step-by-step guide on how to create your own personal portfolio using HTML and CSS:

Step 1: Plan your website
Before you start designing your website, it’s important to plan out its structure and content. This includes deciding on the number of pages, the layout, and what information you want to include.

Step 2: Code the basic structure using HTML
Once you have a clear idea of what you want your website to look like, it’s time to start coding. Begin by creating the basic structure using HTML tags such as html, head, body, etc. You should also add links to any external files (CSS, images, etc.) that you’ll be using.

Step 3: Style your website using CSS
Now that the basic structure is in place, it’s time to style your website using CSS. Start with the background colour, font size, and font family. Then move on to styling individual elements such as headings, paragraphs, and buttons.

Step 4: Add your content
With the structure and style in place, it’s time to add your content. This includes your name, a brief introduction, your work experience, your education, and any other relevant information.

Step 5: Test and adjust
Before launching your website, it’s important to test it thoroughly to make sure everything works as expected. Check for broken links, spelling errors, and any other issues that might arise. Make adjustments as needed until you’re happy with the final result.

Step 6: Launch your website
Once you’ve completed all the necessary steps, it’s time to launch your website. Publish it on a web hosting platform or your own server and start sharing it with potential employers, clients, and colleagues.

In conclusion, creating a personal portfolio using HTML and CSS is a great way to showcase your skills and experience. With the help of these two programming languages, you can design a professional-looking website that sets you apart from the competition. So, take some time to plan out your website, code the basic structure using HTML, style it using CSS, add your content, test and adjust, and finally launch it for the world to see. Good luck!
Please, if you love it, support us with Like & Subscribe.🙏🙏❤️❤️

Let's be friends and connect
📩 Subscribe:https://shorturl.at/BCTV8
📷 Instagram: https://www.instagram.com/soudemy/
📱 Behance: https://www.behance.net/soudemy
🐦 Twitter: https://twitter.com/SoudemyAcademy

In the comments, you can say what design you want so that we can prepare the video for you.