teleren/devto huggingface dataset:
Looking for a project to contribute to this Hacktoberfest? I've got a few.
Tags: hacktoberfest, beginners, webdev
Published: 2021-10-03 18:38:41

Hello all! If you're looking for a project to contribute to, please feel free to check out my Hacktoberfest repo's below. All skill levels are welcome to contribute.

## Projects
Here are my projects that are open for Hacktoberfest contributions.

### News From The Wormhole
This project was built with React, Typescript, Tailwind, Vite, and the Spaceflight News API. This project lists news articles and blog posts that are related to space flight. You can find the repo link [here](https://github.com/JasonFritsche/news-from-the-wormhole), and can see the site [here](https://jasonfritsche.github.io/news-from-the-wormhole/).

### Motivational Cats
This project does not use a SPA framework. It uses plain ol' vanilla JS, Materialize CSS, and makes a couple of api calls (one to grab cat images, another to grab a motivational quote). This is this project's third Hacktoberfest! I kinda just let the Hacktoberfest contributions from the last two years drive the look and feel of the project and it's been fun to watch it change. It's in a broken state as of the time I'm writing this post. Please contribute, let's give this project another Hacktoberfest. 
You can find the repo [here](https://github.com/JasonFritsche/motivationalCats) and can see the site [here](https://jasonfritsche.github.io/motivationalCats/).

### Where is the ISS
This project shows you where the International Space Station is in real time. This project was made using Angular, Angular Material, and Leaflet. You can view the repo [here](https://github.com/JasonFritsche/where-is-the-iss), and see the site [here](https://jasonfritsche.github.io/where-is-the-iss/app-map).


## Happy Hacking
Please feel free to work on any open issues in the projects I've listed. Also, if you find something you want to fix, or have an idea for a style change, or have an idea for an enhancement, then please create an issue in the project. I hope you all have a happy Hacktoberfest!
Prototyping using codeswing
Published: 2021-10-03 19:28:54

<sub>Photo by <a href="https://unsplash.com/@stationery_hoe">Kasturi Roy</a> on <a href="https://unsplash.com/s/photos/sketch">Unsplash</a></sub>

[Codeswing](https://github.com/lostintangent/codeswing) is an awesome tool made to prototype easily from vscode using any frontend you want (you can already have Svelte, React, Vue or Html/CSS/Js), with an auto-refresh rendering preview.

![Codeswing Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntng6uhjfywlcbtnbkbn.png)

If you wnat to use it from anywhere, you can use the [playground](https://github.dev/lostintangent/codeswing-playground), using vscode in browser, and add codeswing extension.

Hope this helps !
Making the most boring website ever with TypeScript, NestJs, React and others. Part 2. 
Tags: react, typescript, node, webdev
Published: 2021-10-03 19:18:59

I made another video on how to make a very generic website for a local business. In this one we create a new NextJs project for client's side, make a homepage, add a new model for services and a way to manage them in the admin panel. Enjoy :).

{% youtube hHjANr2Gjx0 %}

## A tip from the video: snippets.
For some reason I was very reluctant to make my own snippets. A mean I used build-in ones, or the ones that come with extensions, but I never made my own. Until recently I was using css modules and I got *really* tired typing import for my styles.

So I decided to give it a shot. Turns out even if it does not save you tons of time, I mean typing is like 1% of programming, it surely makes you feel better. So I guess my advice is if you get annoyed about typing something over and over, consider turning that thing into a snippet.

And here is that css modules snippet I was talking about for VS Code.

```json
{
  "Import css module": 
  {
    "prefix": "mcss",
    "body": [
      "import styles from ./$TM_FILENAME_BASE.module.css'"
    ]
  }
}
```
Text-Align Select (Safari Fix)
Tags: css, safari, fix, align
Published: 2021-10-03 17:49:16

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9u84vgcwcoj8tojl0gg7.png)

Have you ever tried to `text-align` a `select` element? Safari is not a fan (no support). The answer to this question has eluded me and seemingly the internet - so here we are with a solution.

#Quick Answer
`direction: rtl;`
[Code Pen Example]( https://codepen.io/dodecahedron/pen/abwrmxM)

Let's start with a simple example. It is important to note that the width of a select element will be as wide as its longest option.

HTML
```
<select>
  <option>1</option>
  <option>10</option>
  <option>100</option>
  <option>1,000</option>
</select>
```

CSS
```
select {
    -webkit-appearance: none; /* turn off drop-down arrow*/
    -moz-appearance: none;
    border: solid 1px grey;
    font-size: 1rem;
    padding: 5px;
    /* direction: rtl; */
}
```

##Styling 💅
The above styling for the input isn't necessary; presumably you would only pursue this article if you are making a custom input element though so why not pretty it up?

##The Fix 🙌
Uncommenting the last line `direction: rtl;` will move the text inside the element to the left. In Chrome you could simply use `text-align: left;` however this will not work in Safari.


##Bonus 🤌
####Change Direction While Selecting Option

A simple line can be added to change the options alignment; essentially the text that will show when we are making a selection. To do this we can add:

```
.select:active {
    direction: ltr;
}
```
C++: A concise introduction to Arrays
Tags: cpp, arrays, theory
Published: 2021-10-03 18:54:53

An array is a collection of elements (values or variables) of the same type that are stored in contiguous memory locations and may be accessed individually using a unique identifier's index. The memory addresses are all next to one other, and the array's size is determined by the number of elements. The first or base address is the memory address of an array's first element. An index, which is usually a non-negative scalar number, is used to select individual objects. The index of an array's initial element is almost always zero. The array value is mapped to a stored object via an index. The following is an example of the mapping.

```c++
map(arrayName, index) → element
```

An example of an array declaration.

```c++
datatype arrayName [elements];
```

There are three types of arrays in C++; one-dimensional,  two-dimensional and multidimensional array.

A one-dimensional is also called a linear array.

```c++
int myArray0[5] = {1, 2, 3, 4, 5};
```

In a two dimensional array there are 'x' number of rows and 'j' number of columns. They are sometimes called matrices or tables.

```c++
int myArray1[2][2] = {{1, 2}, {3, 4}};
```

A multidimensional array can have any number of dimensions.

```c++
int myArray2[2][2][2][2] = {{1, 2}, {3, 4}, {5, 6}, {7, 8}}
```

Arrays can be used to implement other data structures such as lists, hash tables, stacks and strings.


Happy Coding.
Visual Studio Code: MySQL Extension
Tags: webdev, vscode, mysql
Published: 2021-10-03 18:47:00

<!-- wp:paragraph -->
<p>In a recent post I talked about <a href="https://ryanrobinson.technology/all/websites/mysql-workbench/" data-type="post" data-id="1502">how great MySQL Workbench is</a>. A few days later, I discovered a Visual Studio Code extension simply called MySQL. It is not as robust in some ways as Workbench (e.g. bulk importing and exporting).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>However, it does meet all the same core functionality such as:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>browse the tables and databases available to the user, with all the data kept in nice clear and easy-to-read lines</li><li>write your own queries a table and get results in a nice table where you can do things like click sort by different headers</li><li>edit entries directly in the table (no form editor mode like Workbench)</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>It does not do all the more intensive functionality that Workbench does, like importing and exporting with CSV files, but that's the kind of thing that you likely don't have to do regularly. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The big advantage that it has over Workbench is being a part of Visual Studio Code which you are already using. That means a few little things can go faster and more lightweight on your computer's resources. The two little things that I can imagine make a meaningful difference over time are:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>less steps to login, since you are already SSHed to the host</li><li>the ability to have a database open as a tab right beside the code, rather than jumping back and forth between Code in one window and Workbench in another</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Of course it's great to also have Workbench available in your toolbox if you need more intensive functionality, but speaking for myself, I think I might start relying on this extension more often for the majority of my lightweight work.</p>
<!-- /wp:paragraph -->
Introducing Shuttle 🎉 - An Space Blog App for space lovers
Tags: react, webdev, showdev, javascript
Published: 2021-10-03 18:33:10

#Introduction

**Shuttle** is a space blog app for space geeks, people who love reading about space. 

It brings you daily *ISS reports*, *daily blogposts*, and *latest news* all at one place. 

v1 of the app support three features-

* Daily Blog posts

* Daily ISS Reports

* Latest News(Daily update)

More features will come in subsequent versions.

Shuttle under the hood uses [Spaceflight News API(SNAPI)](https://www.spaceflightnewsapi.net/) to dynamically fetch all its content.

#Tech Stack

* **React** - For Front-End

* **Tailwind CSS** - For Styling and Layout

* **Headless UI** - For Components

* **Spaceflight News API** - For blogposts, ISS reports, latest news

#**Link and Screenshots**
Link of the project - [Click Here](https://shuttle-lyart.vercel.app/)

![Full Screenshot of the Shuttle App desktop version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qj4xw5zcu7dto1qwgju.png)

Desktop Screenshot

![Full screenshot of the mobile version of Shuttle App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsdyc4dm5idx6tptunn5.png)

Mobile Screenshot

My current plan for future versions is to improve the desktop design of the blog + add a small ecommerce store to the website.

If you like the [project](https://shuttle-lyart.vercel.app/) please give the feedback.

*Happy Coding!*
The 3 most interesting C++ posts of September 2021
Tags: bestofdev, cpp
Published: 2021-10-03 17:57:55

Let me share with you 3 interesting [#cpp](https://dev.to/t/cpp) posts from September.

I don't take the most popular articles anymore, because I find that while some articles do meet the criteria to add #cpp as a tag, but they are not mostly about C++. So there is a bit of subjectivity to this list. Yet, I try not to include multiple articles from the same author and I don't include the wrap-up of the previous month either ;)

Feel free to share your favourite one in the comments.

***
[Giri](https://dev.to/pgirikishore) initiated a discussion about whether Goland would anytime replace C++ and he inspired many devs to comment and share their opinion.

{% link https://dev.to/pgirikishore/will-golang-replace-c-c-3527 %}

***

[Sandor](https://dev.to/sandordargo) wrote an article that inspired by one of the talks recently given by Walter E Brown about a bug in how we calculate min and max.

{% link https://dev.to/sandordargo/do-we-correctly-calculate-min-and-max-4360 %}

***

Last but not least, [George](https://dev.to/gsoultos) shared a very interesting article about DLL injections. The topic is very actual as the [new OWASP Top 10 (2021)](https://owasp.org/Top10/) is just out!

{% link https://dev.to/gsoultos/dll-injection-30eo %}

Happy coding!

## Connect deeper

If you liked this article, please 
- hit on the like button,  
- [subscribe to my newsletter](http://eepurl.com/gvcv1j) 
- and let's connect on [Twitter](https://twitter.com/SandorDargo)!
Interior Designing courses in Kolkata
Tags: github, startup, gatsby, mobile
Published: 2021-10-03 17:53:10

Interior Designing Course in Kolkata
Interior Design is nothing but artistic planning of a property’s interior. It is all about providing a creative solution to a space. Interior Designing is a perfect reconciliation between art and practical functionality.

For all those who have an interest in designing the interiors, come forward and join our interior designing course in Kolkata at GIFT Design Academy.

Our interior designing course in Kolkata helps in a clear understanding of colors, space planning and construction materials. Our course is equally suitable for existing professionals and newcomers. You get to learn under an experienced team of interior professionals. It is sure that by the end of the course, you as an interior designer will be able to carve out magic out of normal spaces.

We have a huge array of interior designing courses in Kolkata and the course fees entirely depends upon the course you go for. Some of the courses available are:
1) 3 years professional interior designing course and management studies

2) 2 years Professional Interior Designing course

3) 1 year Professional Interior Designing course

Any one who has passed graduation can apply for our interior designing courses in Kolkata. Minimum age requirement is 16 years. Basic knowledge of English will be an added advantage.

Our interior designing course in Kolkata asks, thinks, crafts and iterates to create products that achieve results. Our interior designing institute in Kolkata provides a clear understanding of the following topics:

1) Interior Design Fundamentals
2) Design Principles
3) Human Comfort
4) Ergonomics
5) Color Theory
6) Materials
7) Application
8) Space Planning
9) Aesthetic

This interior design course is all about thinking innovatively, designing for a better social impact and all this comes with practical and project based learning. We encourage the students to develop solutions pertaining to current times and keeping sustainability in mind.
visit us - https://giftdesignacademy.com/
How to implement a Blockchain Solution
Tags: webdev, blockchain, javascript, tutorial
Published: 2021-10-03 16:54:07

## Key Steps for implementing a Blockchain solution

-  Identify the business requirements of the project
-  Evaluate if your project can be implemented with centralized databases or digital signatures
-  Form a mental picture of the benefits of implementing blockchain technology in your project
-  Identify legacy technologies or practices that need to be replaced or augmented
-  Do a cost-benefit analysis of introducing this new technology
-  Identify the key stakeholders and participants of the blockchain system
-  Agree on the governance framework of the operating network and build in accountability from the participants
-  Agree on an implementation methodology
-  Choose a blockchain platform based on your requirements 
-  Identify essential enterprise tools that need to be built to successfully operate the blockchain solution.   For example identity service

## Kool Implementation Strategies

1. Have Stakeholders own and maintain a node on the blockchain network.
2. Make use of Blockchain as a Service(Baas) cloud platforms.
3. Access a public permissionless blockchain to record data. ( For example a public Bitcoin or Ethereum network )

## Popular platforms you can use for financial applications

1. Ethereum - is a blockchain platform with its own cryptocurrency, called Ether (ETH) or Ethereum, and its own programming language, called Solidity.

2. Hyberledger Fabric - is an open-source, permissioned blockchain framework, started in 2015 by The Linux Foundation.

3. Stellar - is a blockchain-based distribution ledger network, Lumens is the cryptocurrency made specifically for that network, and XLM is the coin's symbol.

Once you have executed the above steps properly you can proceed to build your blockchain solution.

> Thank you for reading. 😀 🙏 Follow me on [Twitter](https://twitter.com/CyprianAarons)

> Checkout my [website](cyprianaarons.co.zw).

<a href="https://www.buymeacoffee.com/cyprianaarons" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
Solidity Gas Optimizations pt. 3 - Packing Structs
Tags: blockchain, solidity, ethereum
Published: 2021-10-03 16:35:26

So now that we've looked at some of the basics of assembly reads and writes memory, we can begin to look at how that memory is actually stored on each node. Everytime we make a variable in our solidity code, the evm stores it in a storage slot of 32 bytes (256 bits). That means that every time we have a uint (which is read as a uint256) we have packed a storage slot fully.

So lets look at some code:
```ts
    uint128 a;
    uint256 b;
    uint128 c;
```
What the evm does is try to fit everything into storage slots sequentially, but since variable `b` takes up an entire slot, it cannot fit in in the first one and needs to allocate a total of 3 32byte slots. If you instead order them so that the two smaller slots are next to each other, you can save one such storage operation. A more efficient code would look like this:
```ts
    uint128 a;
    uint128 c;
    uint256 b;
```

That would allow for the EVM to only need to allocate two storage slots and 'pack' your variables. 

## Variable types
Now let's look at the size of some common data types in Solidity:

- `uint256` is 32 bytes
- `uint128` is 16 bytes
- `uint64` is 8 bytes
- `address` (and `address payable`) is 20 bytes
- `bool` is 1 byte
- `string` is __usually__ one byte per character

You can further break down a `uint` into different sizes, `uint8`, `uint16`, `uint32`... just keep in mind that your integer will overflow if you are using solidity version < 0.8.0 or your function will fail if you are using version > 0.8.0. 

The largest number is calculated as `2^(number of bits) - 1`, meaning `uint8` goes up to `((2^8) - 1) = 255` before your function fails. 

I suggest keeping these in mind when you are designing structs.

## Disclaimers

A few small caveats, this only works when you are using `Structs` (custom data objects) and/or declaring variables in your contract storage. Function arguments use memory which does not work in this way. 

 Also, if you will not be packing your structs this way, it actually can be more expensive to use a datatype which is smaller than the 32byte limit! So if you have something like 
```ts
    uint8 a;
    uint256 b;
```
It will be cheaper to make both variables `uint256`! Counter intuitive, I know! 

The reason for this is that the EVM reads 32 bytes at a time and will have to do some operations to make the data it is reading go down to 8 bits (1 byte) which is counter productive. **Lastly, this only really applies when you are doing multiple read and writes to the same struct or storage slot in the same operation**.

When you are writing code, you don't always want to optimize for efficiency, but for developer productivity and readability. Sometimes, it might be OK to do slightly less efficient code if it makes the project easier to maintain. 

We will leave this here, stay tuned for part 4!
AnitaB.org Open Source profile README on GitHub
Tags: opensource, github
Published: 2021-10-03 16:01:51

---
title: AnitaB.org Open Source profile README on GitHub
published: true
description: GitHub announced that Organizations can have profile READMEs so we created one at AnitaB.org!
tags: opensource, github
canonical_url: https://isabelcosta.github.io/posts/anitab-org-github-profile-readme/
//cover_image: https://direct_url_to_image.jpg
---

GitHub [announced](https://twitter.com/github/status/1438276928696463372) the other day, that Organizations can now have their own README.

I love this feature! So when I had the chance I created one for [AnitaB.org Open Source](https://github.com/anitab-org) community.

One thing I’ve learned from being involved with Open Source is that not all communities work the same way. Each one has its mission, way of working, and contribution processes.

**Welcoming every type of contribution is one of our core values**, as is [being beginner-friendly](https://opensource.com/article/21/8/beginner-open-source-community). Having a **README allows us to inform contributors of how we operate and how they can help us**. Now we can show what the community is about right when a contributor finds our organization page on GitHub. 

The first impression we want to pass to newcomers and our community is that they can contribute in multiple ways other than code if they want. So the first draft of our profile README aims to let our contributors know they can join us on [Zulip](https://anitab-org.zulipchat.com/) and contribute to our community in various ways such as reviewing code, implementing features, testing our apps, reporting bugs, suggesting design improvements, blogging for our publication, etc... 

Here’s our profile README 🎉 which you can check out at [github.com/anitab-org](https://github.com/anitab-org) ([source code](https://github.com/anitab-org/.github/blob/main/profile/README.md)).

![anitab.org profile readme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6svf5abxumfonjkypx3.png)

If you have an organization on GitHub and would like to add this feature you can read about it here: [https://github.blog/changelog/2021-09-14-readmes-for-organization-profiles/](https://github.blog/changelog/2021-09-14-readmes-for-organization-profiles/).
12th weekly post, empty string is everywhere. Also, AWS Lambda goes Arm.
Tags: javascript, typescript, arm64
Published: 2021-10-03 15:59:37

## Items of the week

1. **JavaScript** - `anyString.includes('')` returning `true` might seem absurd but the behaviour matches `anyString.substring(0, 0)` returning `''` and `anyString.indexOf('')` returning `0`. Be careful when attempting something like `providedString.includes(searchString)`. More on the method on [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes).

2. **TypeScript** - JSX is the reason we can type cast using the `as` operator (`HTMLElement as HTMLInputElement`) in addition to using angle brackets (`<HTMLInputElement> HTMLElement`) which will be difficult to parse when mixed with JSX HTML-like syntax, as stated on [TypeScript official documentation page](https://www.typescriptlang.org/docs/handbook/jsx.html#the-as-operator).

3. **AWS** - Lambda functions can now run on the Arm-based Graviton2 processors by specifying arm64 as the architecture. It is said to be able to provide up to 34% price performance improvement. Details are available on [the official AWS blog page](https://aws.amazon.com/blogs/aws/aws-lambda-functions-powered-by-aws-graviton2-processor-run-your-functions-on-arm-and-get-up-to-34-better-price-performance/).

## Note of the week

On the week 39 of 2021, I learned that [the Kindle's Vocabulary Builder feature](https://customerdocumentation.s3.us-west-2.amazonaws.com/kug/kindle_paperwhite_11th/v1/en-US/html/kug.html#vocabulary_builder) not only automatically add words as flash cards, but also show the usage of a word in the book. Having that usage context might have encouraged me to use the feature more but I wish I could've discovered it couple of years earlier. That's all for this post, thank you for reading and if you have got any feedback, do let me know by leaving a comment. Have a nice day!
my current work on my game
Tags: gamedev, cpp
Published: 2021-10-03 14:41:26

got basic rendering done using SDL_image which is way better than using OpenGL cuz sdl2 is so "bare-bone" but i feel really proud that ive got an image moving on the screen my next big approach would be to get some physics into the game like gravity, tile collision etc.Till then... Cheers! #gamedev #cpp https://twitter.com/scoopydevy/status/1441387905096683532