teleren/devto huggingface dataset:
CSS 3d rotating image cards
Tags: codepen, css, imagecard, 3dgallery
Published: 2021-12-11 05:48:13

{% codepen https://codepen.io/Abhi7raj/pen/abLmaZQ %}

## CODEPEN LINK

[codepen example link](https://codepen.io/Abhi7raj/pen/abLmaZQ)

## ANY DOUBT OR ZOOM OPTION IN CODEPEN

> guys if you want to see the project in different window sizes then click on the buttons which is in the center bottom of the codepen project. for example 1x , 0.5x and 0.25x


![button for zoom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39ghezaa3b7ze8szheoh.jpeg)

> if you have any doubt please ask.
thankyou guys.
JavaScript Using RegEx
Tags: javascript, webdev, beginners, opensource
Published: 2021-12-11 05:46:34

**Problem:**

Return the number (count) of vowels in the given string.
We will consider a, e, i, o, u as vowels.

The input can consist of Lower case and upper case letters so make sure to count both of them

```
function getCount(str) {
    return str.match(/[aeiou]/gi).length
}
```
This will give you the count of vowels in javascript.


## Stop gninnipS My sdroW!

**Problem:**
Write a function that takes in a string of one or more words, and returns the same string, but with all five or more letter words reversed (Just like the name of this Kata). Strings passed in will consist of only letters and spaces. Spaces will be included only when more than one word is present.

```
function spinWords(string) {
  
 return string.replace(/\w{5,}/g, 
    function(w) {return w.split('').reverse().join('')}
  )
}
```
This will be give correct output like below.

```
spinWords(“Hey fellow warriors”) //returns “Hey wollef sroirraw"
spinWords("This is a test") //returns "This is a test"
spinWords("This is another test") //returns "This is rehtona test"
```
Light-Dark Mode Toggle Using CSS
Tags: webdev, beginners, html, css
Published: 2021-12-11 05:27:44

_This post is inspired by [Online Tutorials](https://www.youtube.com/watch?v=gzCUq_VQ7Y8)_

Hello Guys ✌️✌️✌️

We have seen the dark mode in our mobile and laptops. Ever wonder how this works . 

Today in this post we will be making a simple dark mode toggle animation. 

So lets Start 👩‍💻👩‍💻👩‍💻

<b>Step-1 HTML</b>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9zsdonda2zgka4t8o8l.png)

Only three div tags are required with id our class . And that's it with our HTML. 

<b>Step-2 CSS</b>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwbwhwpr3asx8n00iixz.png)

Now the crucial part comes . You might be thinking from where the ".dark" class came from . You will understand this in Javascript part. 

<b>Step-3 JavaScript</b>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pylxkp2r95hhgzmy0i3r.png)

Now as instructed in the video of Online Tutorials we need to take reference of the body and div. On clicking the togglebtn class , a new class ".dark" is made and toggled . To toggle a class means adding and removing a class. The dark class toggles the background color and the color of text. 

You can see how this works :


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zusgz6ynk4c66qv4n36k.gif)

So you can see how we've made the dark mode toggle using simple HTML, CSS and JavaScript.

So that's it for Today .
Meet you in the Next Post.
Till then Happy Coding 👩‍💻👩‍💻👩‍💻
Master TYPO3 SEO (With TYPO3 Tips & Essential Extensions)
Published: 2021-12-11 05:13:26

TYPO3 is one of the best content management systems with regards to SEO & Speed Performance. But despite the fact that TYPO3 includes features that are just amazing, there's significantly more that you can do to improve the TYPO3 SEO of your website.

Planned SEO strategies and techniques aim to help your pages rank higher in search engines results. This increases your site’s visibility and can help it really take off. Check out the best practices outlined in this article that will help you improve your TYPO3 website rankings, gain more subscribers or sales, and have a better website in general.

_Do you know?
Core Web Vitals is an initiative launched by Google that helps website owners improve the user experience and the quality of their websites. These signals are important for the success of your TYPO3 website. Know more about how excel in TYPO3 web vitals._

All of your TYPO3 website, pages, sitemap, TYPO3 speed performance could affect the SEO of your TYPO3 website! Well since quite a long read, so go ahead and utilize each and every SEO aspect to bounce around with robust TYPO3 SEO.

-> Table Of Content 

1. Improving Search Result In Google
2. 11 TYPO3 SEO Optimization Tricks and Tips
3. Helpful TYPO3 SEO Extensions
4. And That’s It!

Looking for a full SEO guide? here it is, https://t3terminal.com/blog/typo3-seo-guide/
12 Ways To Create TYPO3 Responsive Images!
Published: 2021-12-11 05:09:03

Are you looking for tips & tricks to implement TYPO3 responsive images? To make your TYPO3 site modern responsive way - In this article, you will find 10+ possible ways to create responsive images using TYPO3 core and third-party TYPO3 extensions. Let’s see how!

TYPO3 is a well known OpenSource CMS due to it’s almost 10K+ features within TYPO3 core ;) Example, TYPO3 supports backend crop and resize features since 2016. The core TYPO3 team and community is always eager to add modern features to their lovable CMS to make life better for the editor, integrator and developer.

Of course, TYPO3 responsive design and images are the common practice to support images for  multiple devices. Here, you will find many of the well-known techniques, but I’ve prepared all possible techniques to efficiently implement TYPO3 responsive images.

-> Guide to TYPO3 Responsive Images 

1. TYPO3 core Fluid ViewHelper f:media
2. Using img srcset Attribute
3. Using img data-srcset Attribute
4. Using picture Tag
5. Using TypoScript SourceCollection
6. Using TypoScript in renderObj
7. Define cropVariants in TCEFORM
8. Using EXT.vhs
9. Using EXT.sms_responsive_images
10. Using EXT.fluid_styled_responsive_images
11. EXT.responsive-images
12. Using Custom TYPO3 API ImageProcessorCore (PHP)
Bonus: TYPO3 + WebP
Closure!

Know more about creating responsive images here, https://t3terminal.com/blog/typo3-responsive-images/
Angular 13 CRUD Application  with REST API
Tags: angular
Published: 2021-12-11 04:59:44

Hi All,

Hello all! In this article, we will talk about angular 13 crud application example. you can understand a concept of angular 13 crud operations with web api. Here you will learn angular 13 crud app. We will look at example of step by step crud operation in angular 13.

As we know, currently angular 13 version is released a few months ago. angular 13 provide more feature and improvements. so if you are new or you want to learn crud application in angular then this post will help you to build crud operation in angular 13 with bootstrap 5.

Now, i don't want to confuse here, i will go strait step by step. you need to just follow few step to build crud app in angular 13 application. After completed all steps, you can see layout like as bellow preview.

In this example we will create post crud module with list, view, insert, update and delete post. we will use web service api of jsonplaceholder. so we can easily use their created api. jsonplaceholder provide all apis that we require like list, view, create, delete and update.

Link: https://www.itsolutionstuff.com/post/angular-13-crud-application-example-tutorialexample.html
Progress on Terminus 
Tags: opensource, javascript, webdev
Published: 2021-12-11 04:52:36

So far the problem with Terminus has stayed the same. I am currently trying to find a better way to communicate with the people of the community for my pull request. This repository doesn't get updated quite often so I am hoping that someone can review the pull request soon so I can spend more time improving. Everything was left off with tests working and the headers being passed correctly. 

## Conclusion 
Although this was a short blog post about the status of the pull request, I wanted to go into detail about the entire experience of contributing. When I first picked the issue, I thought I would be working with the Telescope project. I decided to work with this code base because I was very comfortable and understood the project. I also found during this semester that working with newer projects took me a lot longer to learn and setup. Once I found out that I would have to work within Terminus, I was a little intimidated. I was worried it would take time to learn the code and understand how to work with it to get exactly what I needed. Eventually after moving on from being intimidated, I spent each night slowly examining the code and coming up with solutions to the problem. After that process I created the pull request. Working on this problem and the many problems this semester was a journey and I hope to work on more open source projects in the future in OSD700.
Use GitHub secrets in your Android App
Published: 2021-12-11 04:50:07

Alright I am gonna get straight to the point.

- Add 'app/src/main/res/values/secrets.xml' and 'app/src/main/res/values/secrets.xml~' in '.gitignore' file.
- Create 'secrets.xml' file in 'app/src/main/res/values' path.
- Add the following code in 'secrets.xml' :
{% gist https://gist.github.com/supersu-man/8e00140b123b9a4b0c4ccae72b96c55c.js file=secrets.xml %}
- Add the following code to your 'activity.kt' file:
{% gist https://gist.github.com/supersu-man/8e00140b123b9a4b0c4ccae72b96c55c.js file=main.kt %}
- Add the following code under steps in your workflow file rite before build step:
{% gist https://gist.github.com/supersu-man/8e00140b123b9a4b0c4ccae72b96c55c.js file=access-secrets-android.yml %}
- Finally, add the secret to your GitHub repository with key “API_KEY”.
- That’s it. You are good to go.

Here's the example project:
[Spotify Playlist Downloader](https://github.com/supersu-man/SpotifyPlaylistDownloader)
Results: Contributing to a open source project
Tags: opensource, beginners, github, challenge
Published: 2021-12-11 04:49:20

As a closing for Release 0.4, which is the final task of my open source development course, let me share my results.

## Issue
Issue: https://github.com/Seneca-ICTOER/IPC144/issues/64
I worked on the standardized frontmatter across all markdown pages. This open-source project is the C language course notes of my major program.

## Pull Request
Pull Request: https://github.com/Seneca-ICTOER/IPC144/pull/143
I've done the following for the standardization of Frontmatter:
- Added `id`, `title`, `sidebar_position`, and `description` for all markdown pages
- Each property of frontmatter was unified in order
- Unified format of description
- Shortened `description` to maximum 160 characters (Reason: `description` becomes the `<meta name="description" content="..."/>` inside the `<head>`tag, and Google generally truncates snippets to ~155-160 characters)
- Added "Standardize frontmatter" to the CONTRIBUTING.md file

## What I learned 
Unfortunately, my PR isn't merged yet. Also, the issue I filed a few days ago wasn't reviewed, so I'm not sure if I can make another PR. However, I would like to reach out to my professor about my PR and ask what more I can do or improve.
I can't honestly say that I was able to get involved in an open source project technically in this release 0.4. However, I spent time checking everywhere on the repository to see if the Issue I was working on might affect other issues and PRs, and checking most of the files in the project.
Other than that, I often read the Docusaurus documentation for this project and saw and learned how other students are actively involved in the project. Especially one of my classmates, Kevan, who contributes to this project significantly, so communicating with him made my PR easier.

## Conclusion
The 14-week open source development course itself is over today.
However, I won't stop being involved in the open source community. Unlike other courses this was the most interesting course of my 5 semesters so far, as the entire class did not tackle the same assignments or need to take exams. On the other hand, I was a little depressed seeing the efforts of other students. I realized my problem-solving and programming-coding will need some extra work.

In Release 0.4 I made a plan; check the processes and then review all of my results. Now, I would like to make a new plan here on how I will be involved in the open source community in the future.
- Deepen my knowledge of JavaScript and improve my SSG
- Be Involved in testing
- Learn a new programming language and start contributing with a small issue
- Don't hesitate to communicate with other developers

When I started learning git, I was afraid I could break the repositories with my git commands, but I'm comfortable using git now. I will also continue learning git and hopefully become a git master!
Build and Sign Android Apps using GitHub Actions
Tags: android, github, automation, kotlin
Published: 2021-12-11 04:41:37

GitHub actions is really amazing because you can literally build your apps with just a push of your code to GitHub. I’ve been playing with GitHub actions lately and I really really love it. I’ve used GitHub actions before to build Python packages and Electron apps and I thought that why not for Android as well.

Before getting started, complete the following steps:
- Encode your KeyStore file (.jks) to base64.

`openssl base64 -A -in keystore.jks -out base64.txt`
- Copy the content of base64.txt and store it as SIGNINGKEYBASE64 in GitHub secrets.
- Store your alias as ALIAS in GitHub secrets.
- Store your keystore password as KEYSTOREPASSWORD and key password as KEYPASSWORD in GitHub secrets.

Now in your project create a folder “.github” and inside this folder create a folder “workflows”. Inside workflows folder create a file “build.yml” and add the below content in build.yml.

{% embed https://gist.github.com/supersu-man/6605484f84cd19cf9ff3ac118c2b0f67.js %}


You are now good to go. So anytime you create a tag and push the tag to GitHub, the actions is going to build apk and aab files, sign them, make artifacts, create a release with the tag, upload the files in the release as assets.

Here’s an example project of the above usage:
[GitamTransit](https://github.com/supersu-man/GitamTransit)

Want to use GitHub secrets in your Android Apps? Check out [this](https://dev.to/supersuman/use-github-secrets-in-your-android-app-4407) post.
RELEASE 0.4 - Week 3 collaborating on open source projects - Final
Tags: opensource, beginners, programming
Published: 2021-12-11 04:35:22

## Words on taking OSD 600

Hello Everyone, I took this course to learn about open source development but I can say I learned much more from it. Each week, we worked on learning something new and then contributing to each other's code. Also, having great feelings about resolving small bugs and dealing with major issues. To sum up, It all went really well and had a great learning experience.

## Working with other developers

I personally believe the atmosphere around open-source development is important. This was greatly completed in this course due to two applications 1. Slack and 2. Telescope. Reading out each other posts and helping out was something missing during my early education. Pointing out small errors and making all of us realize our mistakes was very important.

## Advise new developers

I would recommend this course to all who want to get a feel on how you contribute to an open-source project. It also teaches you how to interact and help each other out to do better in terms of learning a new language or fixing a bug.

## Final Good-Bye

Thank you each and every one! Have a wonderful holiday! See you all soon.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oj6vptssbxbl4w1kgq0n.jpeg)
My Mini Website Repo
Tags: github, python, html, programming
Published: 2021-12-11 04:26:51

#  Welcome To My Mini Website Repo 👋
![Hi](https://user-images.githubusercontent.com/86920820/142460641-9bfd416c-43bc-4e58-9737-68c5442fc8ca.png)

#  Live Preview ☢️

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7omawni1im3t2puc87u6.jpg)

↗️[Click Here Visit My Website](https://www.kisarapesanjith.ga)↗️

## About Repo

* [Visit My Repo](https://github.com/KisaraPesanjithPerera/kisarapesanjithperera.github.io)
* Template Name: MyResume


<p align="center"><img src="https://stars.medv.io/EvamariaTG/EvaMaria.svg"></p>

# Devs & Contributors
* **🧿[𝙺𝚒𝚜𝚊𝚛𝚊 𝙿𝚎𝚜𝚊𝚗𝚓𝚒𝚝𝚑](https://github.com/KisaraPesanjithPerera)🧿**
* **🧿[𝚂𝚎𝚗𝚞 𝙶𝚊𝚖𝚎𝚛 𝙱𝚘𝚢](https://github.com/SenuGamerBoy)🧿**

![github card](https://github-readme-stats.vercel.app/api/pin/?username=KisaraPesanjithPerera&repo=kisarapesanjithperera.github.io&theme=light)

# Support
<a href="https://www.buymeacoffee.com/KisaraPesanjith"><img src="https://img.buymeacoffee.com/button-api/?text=Buy Me A Pizza&emoji=🍕&slug=KisaraPesanjith&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a></p>
<p align="center">
  <a href="https://github.com/KisaraPesanjithPerera"><img src="https://user-images.githubusercontent.com/77770753/117139498-f081c400-adc9-11eb-9aaf-f895a54ecc67.gif"></a>
    </p>
BSDDialog 0.0.1
Tags: unix, terminal, script, freebsd
Published: 2021-12-11 03:38:05

[BSDDialog](https://gitlab.com/alfix/bsddialog) is an utility to write a script with a Text User Interface. It can build widgets/dialogs: to show messages, to get input and to inform about a computation status.

Example to build a *msgbox* with *Hello World!*:
```default
% bsddialog --msgbox "Hello World!" 8 20
```
[![Hello World Example: a dialog with "Hello World!"](https://gitlab.com/alfix/bsddialog/-/raw/main/screenshot.png)][urllink1]

[urllink1]: https://gitlab.com/alfix/bsddialog/-/raw/main/screenshot.png


Of course, it is possible to use *bsddialog* in a shell script, "Yes-No Question" example:
```sh
#!/bin/sh

${BSDDIALOG_YES=0}
${BSDDIALOG_NO=1}

bsddialog --theme bsddialog --color --title " yesno " \
	--yesno "\nHello \Z3World\Zn!" 10 30

case $? in
	$BSDDIALOG_YES )
		echo "YES!"
		;;
	$BSDDIALOG_NO )
		echo "NO!"
		;;
esac
```

![Yes-No Question example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7fg5s09dxq93q1avzc4.png)

-------------------------------------------------------------

The utility is designed and developed mainly for [FreeBSD](https://www.freebsd.org), the first [version 0.0.1](https://gitlab.com/alfix/bsddialog/-/tags) is out, please consider this a *testing* version, let me know any problem.

To install the port [devel/bsddialog](https://www.freshports.org/devel/bsddialog/):
```default
# cd /usr/ports/devel/bsddialog/ && make install clean
```

To add the package:
```default
# pkg install bsddialog
```

To build from sources:

```default
$ git clone https://gitlab.com/alfix/bsddialog.git
$ cd bsddialog
$ make
```

-------------------------------------------------------------

Features:

```default
% bsddialog --version
bsddialog 0.0.1 (libbsddialog 0.1-devel).
% bsddialog --help

```
[![Terminal prints output "bsddialog --help"](/images/bsddialog001help.png)](/images/bsddialog001help.png)


- **Messages**: infobox, msgbox, yesno.
- **Menus**: radiolist, checklist, menu, treeview, buildlist.
- **Forms**: inputbox, form, mixedform, passwordbox, passwordform, 
- **Bars**: gauge, pause, mixedgauge, rangebox.
- **Date and time**: datebox, timebox.
- **Text**: textbox.


The project has a list of [examples](https://gitlab.com/alfix/bsddialog/-/tree/main/examples_utility), some [screenshot](https://www.flickr.com/photos/alfonsosiciliano/albums/72157720215006074), preview:

<a data-flickr-embed="true" href="https://www.flickr.com/photos/alfonsosiciliano/albums/72157720215006074" title="BSDDialog"><img src="https://live.staticflickr.com/65535/51731768988_ed6090d28c_c.jpg" width="800" height="600" alt="BSDDialog"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

-------------------------------------------------------------

BSDDialog is an open source project released under the term of the BSD 2 Clause License, repository: <https://gitlab.com/alfix/bsddialog>.


*Happy Hacking!*
Cosmopolitan Libc
Tags: c
Published: 2021-12-11 03:14:23

## Portable but not Small

Java was one of the first languages to emphasize cross platform binaries. It did tis with the `.jar` file, which is just a piece of compiled code that is executable on any platform. This does still require a Java Virtual Machine installed.

## Small but not Portable

C on the other hand has never had this luxury. One would need to build C for each platform that exists. However, it allowed for C developers to ship standalone binaries that had no dependancies other than the underlying Libc. 

## Solution

[Cosmopolitan Libc](https://justine.lol/cosmopolitan/) (Cosmo for short) is an implementation of Libc that runs on almost any 64 bit x86 machine. Cosmo does all this in a single binary.

The same file that runs on Linux runs on Windows runs on MacOS. Binaries built with Cosmo, however, have the same lack of dependancies as files built with a standard Libc. Cosmo is everything I love in modern C.

## Example

Start with a simple hello world
```c
#include <stdio.h>

int main() {
    printf("Hello, World!\n");
}
```

Replace all standard headers with a single <cosmopolitan.h>
```c
#include <cosmopolitan.h>

int main() {
    printf("Hello, World!\n");
}
```


Get Cosmopolitan Libc.
```sh
wget https://justine.lol/cosmopolitan/cosmopolitan.zip
mkdir -p cosmo && cd cosmo && 7z x ../cosmopolitan.zip
```

Build the `.c` file into a `.com`
```sh
gcc main.c -O2 -static -fno-pie -mno-red-zone -nostdlib \
    -nostdinc -fno-omit-frame-pointer -o main.com.dbg \
    -Wl,--gc-sections -fuse-ld=bfd -Wl,-T,cosmo/ape.lds \
    cosmo/crt.o cosmo/ape.o cosmo/cosmopolitan.a \
    -Icosmo
objcopy -S -O binary main.com.dbg main.com
```

Run the `.com` file.
```sh
chmod +x main.com
env ./main.com
```
Two Timer
Tags: codepen
Published: 2021-12-11 02:48:19

<p>Experiment inspired by Industrial Facility (<a href="http://goo.gl/zw7aEg" target="_blank">http://goo.gl/zw7aEg</a>). 
Moment.js was used for the clock.
Thanks for cheking out!</p>

{% codepen https://codepen.io/gridchin/pen/vgjFb %}
Merry Christmas
Tags: website, christmas, newyear, xmas
Published: 2021-12-11 02:09:23

Ho Ho Ho .. Christmas is on the way !!

So for this Christmas i have made a website which contains a Christmas countdown , live snowing 😂 etc..

<h3>FEATURES</h3>
<ul>
<li>Live snowing </li>
<li>Christmas Countdown</li>
<li>Mobile Responsive</li>
</ul>


{% github httpanand/Merry-Christmas no-readme %}
⭐ Please star my repo if you like !