teleren/devto huggingface dataset:
Triangles in Pure CSS
Tags: css, html, webdev, tutorial
Published: 2021-12-27 16:31:46

Today we will learn how to create shapes in CSS.

## What is CSS?
CSS is a Cascading style sheet. We can create UI for modern web pages with CSS. W3C first introduced CSS on December 17, 1996. And Håkon Wium Lie is the father of CSS.

## What is a shape in CSS?
In Math, You can define a shape as the outline or as the form of an object, This is true for CSS as well, but in CSS it is in 2D form.

## Why do we need to create shapes in CSS?
Shapes are an important part of the UI. If you are a UI designer, then you should know that how important are shapes.
Everything in the UI is some kind of a shape. It is very helpful when creating the UI.
You can create new and complex shapes using some simple shapes.

## Triangle shape in CSS
First we will write HTML
`<div>
	<div class="triangle">
	</div>
</div>`
Coll
Now we will write CSS to create our triangle.
`.triangle {
	height: 0;
	width: 0;
	border: 25px solid transparent;
	border-bottom: 50px solid orange;
}`

There you go. Our Pure CSS triangle.

[The Full article is on my website, where I explaned every step of it and many more new shapes.](https://www.rareprogrammer.com/how-to-create-shapes-in-css)
3 magic steps to create and monetize an app ✨
Tags: javascript, tutorial, webdev, beginners
Published: 2021-12-27 16:18:29

If you think about creating a source of passive income, or you would like to challenge yourself with creating an app from scratch, **I have good and bad news for you.** 👌

The good news is that it’s really simple, and the bad news is... that it’s really simple, so it won’t be that challenging.

But let’s get to the point. In LiveChat, we run a Developer Program that allows external developers to create custom extensions and integrations for our product. These apps can be later bought by LiveChat’s users (all 34k of them) in our Marketplace.

In our Program, we help you with the ideas for apps and support you with distribution among our users. (If you wonder what apps we currently are looking for, check out [this site](https://developers.livechat.com/app-ideas/?utm_source=devto&utm_medium=referral&utm_campaign=magic_video_tutorials).) You can also consult the technical details with our staff while creating your application.

A couple of days before Christmas, Oliwia, our Technical Writer, created three short video tutorials which will help you get along with our Developer Console.

In these three videos, you will see her becoming a wizard 🧝‍♀️ and learn about the basic functionalities of our Developer Console. She will also explain to you how to submit an app through the dashboard and how to monetize it.

**Check it out!**

### 1. Introduction to the LiveChat Developer Console

{% youtube z_7fGblf7dQ %}

### 2. Creating an App

{% youtube QmnFM-p8zpg %}

### 3. Monetization

{% youtube yVO7-jt_SQY %}

If you have any questions about the Developer Console or you would like to start building your own app, let me know in the comments! You can also check out our [Developer Program site](https://developers.livechat.com/?utm_source=devto&utm_medium=referral&utm_campaign=magic_video_tutorials).
tailwind css | grid | content-{start,center,stretch} content-around content-evenly
Tags: tutorial, webdev, tailwindcss, beginners
Published: 2021-12-27 16:14:14

tailwind css | grid | content-{start,center,stretch} content-around content-evenly
https://youtu.be/gxwr8MUFb64
If you liked our content help us by subscribing on the channel and leaving a nice comment
5 Articles every WebDev should read this week (#51)
Tags: webdev, tutorial, javascript, programming
Published: 2021-12-27 16:10:03

A curated list of the top five web development must-reads from last week. Don't miss out on the latest web development stories and insights. Read all about the cutting edge in web development, working in tech and the new tools and frameworks while learning a few new tricks.

---

## React Conf 2021 Recap

> Last week we hosted our 6th React Conf. In previous years, we’ve used the React Conf stage to deliver industry changing announcements such as React Native and React Hooks. This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features.

https://reactjs.org/blog/2021/12/17/react-conf-2021-recap.html

---

## Improving Core Web Vitals, A Smashing Magazine Case Study

> At Smashing, we’ve struggled with amber Core Web Vitals score for a while. Then after 6 months we finally managed to fix it. Here’s a little case study on how we detected and fixed the bottlenecks, and how we ended up with green scores, all the way.

https://www.smashingmagazine.com/2021/12/core-web-vitals-case-study-smashing-magazine/

---

## Why are hyperlinks blue?

> The internet has ingrained itself into every aspect of our lives, but there’s one aspect of the digital world that I bet you take for granted. Did you ever notice that many links, specifically hyperlinks, are blue? When a co-worker casually asked me why links are blue, I was stumped.

https://blog.mozilla.org/en/internet-culture/deep-dives/why-are-hyperlinks-blue/

---

## Writing clean JavaScript tests with the BASIC principles

> Production code, the main code where the features live, might not be perfect. That’s a risk or a debt that teams manage in multiple ways. For testing code, the risk is much more dramatic — It can be abandoned altogether. Vanish, gone, not doing anything anymore. Hundreds of coding hours, meetings, and sweat can just get lost.

https://yonigoldberg.medium.com/fighting-javascript-tests-complexity-with-the-basic-principles-87b7622eac9a

---

## Guidelines for choosing a Node.js framework

> I often see the question "What’s the best Node.js framework?" crop up on message boards and social media. The replies tend to be full of strong opinions. Some developers will even get into arguments about it. If you’re trying to figure out the right framework for your project, none of this is going to be much help.

https://simonplend.com/guidelines-for-choosing-a-node-js-framework/

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr).

Photo by [Alex Kulikov](https://unsplash.com/@burntime) on [Unsplash](https://unsplash.com)

---

[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---
Baloonza IT newsletters weekly digest #17
Tags: javascript, webdev, startup, css
Published: 2021-12-27 16:05:47

### Product Hunt Daily
- [Don't be a grinch](https://app.baloonza.com/issues/10721?baloon_issue_id=17)
- [Let's wrap this up](https://app.baloonza.com/issues/10799?baloon_issue_id=17)
- [Out of ideas](https://app.baloonza.com/issues/10859?baloon_issue_id=17)
- [Bookmarked 🔖](https://app.baloonza.com/issues/10879?baloon_issue_id=17)
- [New traditions](https://app.baloonza.com/issues/10925?baloon_issue_id=17)
- [Something's stirring...](https://app.baloonza.com/issues/10970?baloon_issue_id=17)


### Data Science Weekly Newsletter
- [[in case you missed it] Data Science Weekly - Issue 421](https://app.baloonza.com/issues/10770?baloon_issue_id=17)
- [Data Science Weekly - Issue 422](https://app.baloonza.com/issues/10955?baloon_issue_id=17)


### css, web development, javascript
- `CSS Layout News` [Issue 333](https://app.baloonza.com/issues/10777?baloon_issue_id=17)
- `CSS-Tricks` [📝 [CSS-Tricks] 282: We shouldn’t treat accessibility like the cool new thing of the week](https://app.baloonza.com/issues/10812?baloon_issue_id=17)
- `Frontend Focus` [Looking back at all things frontend in 2021](https://app.baloonza.com/issues/10872?baloon_issue_id=17)
- `Frontend Weekly` [Frontend Weekly - Issue 285](https://app.baloonza.com/issues/10877?baloon_issue_id=17)
- `CSS Weekly` [Issue #486: Reverting Animations, :has() selector](https://app.baloonza.com/issues/10882?baloon_issue_id=17)
- `Awesome React Newsletter` [💻 Issue 210 - "Learning Patterns" - a free ebook on JavaScript + React design & performance patterns from Lydia Hallie and Addy Osmani](https://app.baloonza.com/issues/10950?baloon_issue_id=17)
- `Awesome Javascript Newsletter` [💻 Issue 292 - Patterns.dev is a free book on design patterns](https://app.baloonza.com/issues/10946?baloon_issue_id=17)


### Ariyh
- [🎓 Give your products space](https://app.baloonza.com/issues/10820?baloon_issue_id=17)

***
Dead Event Store in Universal Messaging
Tags: webmethods, universalmessaging
Published: 2021-12-29 11:41:46

---
title: Dead Event Store in Universal Messaging
published: true
date: 2021-12-27 16:03:38 UTC
tags: webmethods, universalmessaging
canonical_url: https://tech.forums.softwareag.com/t/dead-event-store-in-universal-messaging/254168
---
## What is Dead Event Store :

A Dead Event store is a channel/queue which can be configured for another channel/queue. The main use of DES is to keep the events which are removed by the realm server for later processing if required. UM Realm server remove the events automatically from channel/queue and move them to configured Dead Event Store – When,

- TTL of individual event expire (or)
- Channel/Queue TTL expires (or)
- Number of events exceeds the channel/queue capacity policy and  
and those events which are not yet consumed.

Read the full article in the [Software AG Tech Community](https://tech.forums.softwareag.com/t/dead-event-store-in-universal-messaging/254168) and learn how to configure **DES in UM**, how to configure **DES through EM, Java API, and through runUMTool**. Additionally, get to know in detail how does **DES works in UM**.
The most important sites for employment and remote work
Tags: webdev, programming, beginners, news
Published: 2021-12-27 16:00:27

1- [Supportfinity](https://supportfinity.com/skilled-people/building-profile/Y0DrL)

2- [Turing](https://developers.turing.com/signup)

3- [Arc.dev](https://arc.dev/)

4- [Weworkremotely](https://weworkremotely.com/)

5- [Stack overflow jobs](https://stackoverflow.com/jobs)

6- [Angel](https://angel.co/)

7- [Remoteok](https://remoteok.io/)

8- [Remotive](https://remotive.io/)

10- [Dribbble](https://dribbble.com/)

11- [glassdoor](https://www.glassdoor.com/index.htm)

12- [vanhack](https://vanhack.com/jobs?gclid=Cj0KCQiA5aWOBhDMARIsAIXLlkfQGAoBadpMs6LMGWkNjFj-c-eB1iA4bAn8tosFUlpgHO6pofqSaoUaAnn5EALw_wcB)

All the best for you.
Power Automate - How to get filtered list items by termset
Tags: powerautomate, filter, taxonomy, termset
Published: 2021-12-27 15:54:35

---
title: Power Automate - How to get filtered list items by termset
published: true
description: Filtering lists by termset terms.
tags: 'powerautomate, filter, taxonomy, termset'
cover_image: 'https://raw.githubusercontent.com/campelo/documentation/master/posts/assets/cover.png'
canonical_url: null
id: 453658
date: '2021-12-27T15:54:35Z'
---

###### :postbox: Contact :brazil: :us: :fr:

[Twitter](https://twitter.com/campelo87)
[LinkedIn](https://www.linkedin.com/in/flavio-campelo/?locale=en_US)

---

Using **Sent an HTTP request to SharePoint** action, it's possible to get filtered items using ODATA query string. But if you use termset taxonomy, you could use a xml to send that filter conditions.

Each condition it's analysed by pair. So, there isn't an **AND** or **OR** with three or more conditions inside them. For that, you should use subgroups of pair conditions.

In this exemple, we would get all items that one of date fields (FirstDate, SecondDate, ThirdDate) is today. So, we must to create **OR** subgroups with max of 2 conditions each.

```xml
/_api/web/lists/getbytitle('ListName')/GetItems(query=@v1)?@v1={"ViewXml":"
<View>
	<Query>
		<Where>
			<And>
				<Or>
					<Eq>
						<FieldRef Name='FirstDate' />
						<Value Type='DateTime' IncludeTimeValue='FALSE'>@{formatDateTime(utcNow(),'yyyy-MM-dd')}</Value>
					</Eq>
					<Or>
						<Eq>
							<FieldRef Name='SecondDate' />
							<Value Type='DateTime' IncludeTimeValue='FALSE'>@{formatDateTime(utcNow(),'yyyy-MM-dd')}</Value>
						</Eq>
						<Eq>
							<FieldRef Name='ThirdDate' />
							<Value Type='DateTime' IncludeTimeValue='FALSE'>@{formatDateTime(utcNow(),'yyyy-MM-dd')}</Value>
						</Eq>
					</Or>
				</Or>
				<Or>
					<Eq>
						<FieldRef Name='Status' />
						<Value Type='TaxonomyFieldType'>Termset name 1</Value>
					</Eq>
					<Eq>
						<FieldRef Name='Status' />
						<Value Type='TaxonomyFieldType'>Termset name 2</Value>
					</Eq>
				</Or>
			</And>
		</Where>
	</Query>
</View>
"}
```

An important tip is that the complex conditions is more difficult to be computed. For better performances, it's suggested to use simple conditions first and complex ones after. Like as the example, we use the date conditions first and termset conditions after those ones.

![Image 1](https://raw.githubusercontent.com/campelo/documentation/master/posts/power-automate/how-to-get-filtered-list-items-by-termset/assets/img1.png)

## Typos or suggestions?

If you've found a typo, a sentence that could be improved or anything else that should be updated on this blog post, you can access it through a git repository and make a pull request. If you feel comfortable with github, instead of posting a comment, please go directly to https://github.com/campelo/documentation and open a new pull request with your changes.
Ruby on Rails with Vim
Tags: rails, vim, programming, productivity
Published: 2021-12-27 15:47:06

Hi folks! 

Hope you enjoy your holidays, and you are preparing self for 2022! 

Meantime, I’ve wrote new article [Ruby on Rails with Vim](https://medium.com/@grzegorz.smajdor/ruby-on-rails-and-vim-6bcf84e0bc08) 
Happy reading!
How to change the window-size of the mate-terminal
Tags: linux
Published: 2021-12-27 15:42:01

## This method is probably not the right one.

### change window size
select File -> New Profile
select General tab(default)
check "Use custom default terminal size"
change to the window size you preferred

### confirm
```shell
$ gsettings get org.mate.terminal.global profile-list
['default', 'profile0']
```

### change default value
```shell
$ gsettings set org.mate.terminal.global profile-list [\'profile0\']
```

### Yeah 
![big size mate-terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpui3n19e97lg5owkat3.png)
UI/UX Designer looking to Collaborate 
Tags: webdev, beginners, programming, css
Published: 2021-12-27 15:38:15

Hello, community! 

I'm a Junior UI/UX designer looking to find projects on which I can collaborate on for free in order to expand my portfolio showcase. 

Here's a link : https://vangelov1.github.io/NewPortfolio/
- It's still nowhere and needs a ton of polishing. 

If anyone would like to work with me please drop a message. 

I hope this is a good place to post this, otherwise I'd like to apologize.
Complete Authentication using firebase
Tags: firebase, nextjs, react, webdev
Published: 2021-12-27 15:31:27

Hello guys 👋,

I made a complete authentication module using firebase. Frontend is built using next.js and database I'm using is mongoDB. 

It also have user email-verification and password-reset functionality. I made this app to learn about how to export firebase user data to another database like mongodb.

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

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

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

## How to setup

Step 1: Clone project from [here](https://github.com/mukulrajpoot262610/dev-case-app)

Step 2: Run `npm install` to install dependencies

Step 3: Create a firebase project and mongoDB cluster.

Step 4: Generate a `.env` file and add your firebase and mongodb uri in that file.

Step 5: Setup your service account on firebase and generate a new private key and add them in your env file.

Step 6: You are good to go. 😎

Deployed Link: [Live Link](https://dev-case-app.vercel.app/)
Github Link: [GitHub](https://github.com/mukulrajpoot262610/dev-case-app)
2022 Text PNG image with transparent background
Published: 2021-12-27 15:12:52

New Year is the time or day at which a new calendar year begins and the calendar's year count increments by one. Many cultures celebrate the event in some manner. In the Gregorian calendar, the most widely used calendar system today, New Year occurs on January 1 (New Year's Day). This was also the first day of the year in the original Julian calendar and the Roman calendar (after 153 BC).

Other cultures observe their traditional or religious New Year's Day according to their own customs, typically (though not invariably) because they use a lunar calendar or a lunisolar calendar. Chinese New Year, the Islamic New Year, and the Jewish New Year are among well-known examples. India, Nepal and other countries also celebrate New Year on dates according to their own calendars that are movable in the Gregorian calendar.

During the Middle Ages in Western Europe, while the Julian calendar was still in use, authorities moved New Year's Day, depending upon locale, to one of several other days, including March 1, March 25, Easter, September 1, and December 25. Since then, many national civil calendars in the Western World and beyond have changed to using one fixed date for New Year's Day, January 1— most doing so when they adopted the Gregorian calendar.
[2022 Text PNG image with transparent background](https://toppng.com/tags/2022)
All Resources To Help You Start Your Open-Source Journey: Open Source Gallery
Tags: opensource, tutorial, github, beginners
Published: 2021-12-27 15:07:31

Do you want to start your open source journey? Don't know where to start? Difficulty in finding suitable projects according to your tech stack? Then this article is for you. In this article, I am going to discuss a resource gallery that I curated to help beginners get into the open-source world. 

# [Open Source Gallery](https://github.com/Astrodevil/Open-Source-Gallery)

### About❓
Are you a beginner? Wants to start open-source? Don't know how, where, why to start?

You are welcome! You are in right place.😊

Open-Source-Gallery provides you with all the resources needed to become a good open-sourcer.

The motive🎯 of this project is to help new learners like you to get familiar with the world of open-source.


### Contents🔥
Every Learner has different preferences, some find docs are easy to understand and learn from there, some prefer video. I have taken care of all that while curating these resources. 

Even after being willing to start, newbies find it difficult to find projects and communities I have taken care of that. 

Open Source Gallery includes: 
- Videos📹
- Articles📝
- Projects🦾
- Programs and Internships Opportunities☕
- Communities🔥
- Key Peoples🧑‍💻

### What Else⚡
I have also included some [other resources](https://github.com/Astrodevil/Open-Source-Gallery#more-resource-gallery) and resources gallery apart from open source. Hope it will help you in your learning.

This resource gallery was 1st curated on Notion but now it is hosted on GitHub. If you find this helpful, don't forget to give it a [⭐](https://github.com/Astrodevil/Open-Source-Gallery) on GitHub.

Happy learning.👍

So, What are you waiting for? [Start here](https://astrodevil.github.io/Open-Source-Gallery/)

### Final Words✅
Open Source Gallery is made with a view to helping everyone, It will be constantly updated with new and valuable resources. So you all are welcome to add more resources to the [repository](https://github.com/Astrodevil/Open-Source-Gallery) and share it with everyone out there who is going to start open-source in 2022.

Don't forget to give it a [⭐](https://github.com/Astrodevil/Open-Source-Gallery) on GitHub.

#### If You ❤️ My Content! Connect Me on  [Twitter](https://mobile.twitter.com/Astrodevil_) or Supports Me By Buying Me A Coffee☕👇🏼

<a href="https://www.buymeacoffee.com/Astrodevil"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&amp;emoji=Astrodevil&amp;button_colour=FFDD00&amp;font_colour=000000&amp;font_family=Cookie&amp;outline_colour=000000&amp;coffee_colour=ffffff"></a>
Spacebar Click Test - how fast can you press the spacebar
Published: 2021-12-27 15:05:35

Spacebar tests speed also called Spacebar CPS test, also known as spacebar counter clicker, is the term used for [spacebar ](https://spacebarclicktest.info/)keyboard Click-Per-Second test. It could be an 10--second easy test. It is important to press and release (press then release) your spacebar at least as many times as you can before the time runs out. 
You are able to play the rounds as many times as you'd like. Be sure to score the highest score (CPS CPS, which stands for CPS - Click Per Second). Based on our huge analysis an average Spacebar CPS stands at 6.27. It is important to note that the keyboard plays crucial roles for this assessment. Be sure to have the keyboard you prefer to use when taking this test.
VIM - uncommenting using Visual-Block
Tags: vim, beginners
Published: 2021-12-27 15:04:07

Hey guys!

I don't know about you, but sometimes when I copy and paste something from the web and paste it to VIM I get these ## or // that comments out. Not sure why. Safety?

My prior ([click here](https://dev.to/haxnet/vim-commenting-using-visual-block-2idd))post shows how to add things using visual blocks, this time it is how to remove them. You would think it's the same process, but it isn't.

Okay let's get to it.

Ctrl-v (start visual block)
press j or k or the up and down arrows
press l or h or the left and right arrows to highlight the text(s) you want to delete
press d or x

That's it!

Happy Coding!
Less red tape on reviewing PRs with the Ship / Show / Ask strategy
Tags: productivity, github, culture, teamwork
Published: 2021-12-27 15:02:24

The PR model discourages quick iterations. Effectively, it kills small refactorings and documentation improvements. 


When PR approvals are obligatory, I build hierarchies of PRs or isolate refactorings in separate commits. Still, I feel it's too complicated, and often I choose not to do anything.

[Rouan Wilsenach](https://www.rouanw.com/) observes that not all code changes were born equal and require the same ceremony before the merge:


1. "Ship" -- No PR. Small and safe changes that can go directly to the mainline.
2. "Show" -- Open a PR and merge when automated tests pass. Then notify others to share your knowledge or ask for improvement advice. Btw, @gitlab has a magic checkbox "Merge when pipeline succeeds".
3. "Ask" -- Open a PR and wait for the review. It works well when you're not sure you're taking the right approach and need a second opinion.

The code author has the freedom to decide in which category the code change falls, which sounds like unprecedented blasphemy in teams with trust issues.

On the other hand, I worked in a team where we naturally applied this approach. We felt incredibly productive and nothing bad happened.

Read more about this approach and how to make it work for your team.

[Ship / Show / Ask](https://martinfowler.com/articles/ship-show-ask.html)