teleren/devto huggingface dataset:
I Just Had My Mind Blown: Variables In Vanilla CSS 🤯
Tags: webdev, webdesign, css, coding
Published: 2022-03-03 14:35:14

---
title: I Just Had My Mind Blown: Variables In Vanilla CSS 🤯
published: true
date: 2022-03-03 13:48:21 UTC
tags: webdev,webdevelopment,webdesign,css,coding
canonical_url: https://simondoescoding.hashnode.dev/i-just-had-my-mind-blown-variables-in-vanilla-css
---

Yesterday, I was having a little chat with a friend on Twitter about creating HTML templates; this is something I'd looked at doing before but I wasn't able to provide the level of customizability that I would have liked. I have been trying to aim my templates at non-technical users who may not have any knowledge of CSS or HTML. As you can imagine, it's quite difficult to change a picture or brand colours when the user has no idea what HTML or CSS is.

After chatting with my friend, I thought it'd be best to just have a very detailed .README file that explains everything that the user would need to change and how they would go about doing it. I got off on a tangent, as I usually do, and started googling things and then I stumbled across something... the holy grail! Exactly what I had been looking for! Variables in vanilla CSS! 🤯🤯🤯🤯🤯

### I Found It!

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1646313611392/_XoLWWFPr.png)

I had to refresh the page a few times to make sure I wasn't getting trolled, I checked the date to make sure it wasn't April Fools Day but no, this was real! All my problems... well most of my coding problems were solved!

### Here's how you do it

Enough of my life story, lets looks at how we actually implement this!

You have a psuedo-class in your CSS file and create a custom property inside that; this property can then be used throughout the CSS file.

```
:root {
    --primary-color: #C0B9DD;
}

.some-class {
    background-color: var(--primary-color);
}

```

Here's a quick codepen I put together so you can see it working for yourselves!

[https://codepen.io/Simon\_9/pen/yLPGwOp](https://codepen.io/Simon_9/pen/yLPGwOp)
Trending Web Development Technologies in 2022
Tags: javascript, webdev, beginners
Published: 2022-03-03 13:46:26

Web development is always changing and evolving, and the latest trends are always emerging. Here are some of the hottest trends in web development right now:

- Progressive Web Apps
- Serverless Architecture
- Chatbots
- Artificial Intelligence
- Augmented Reality/Virtual Reality

## 1. Progressive Web Apps
Progressive Web Apps (PWAs) are quickly becoming one of the most popular web development trends. PWAs are websites that act like apps, and they can be installed on devices like phones and laptops. They’re designed to be fast, reliable, and secure, and they can be used offline.

## 2. Serverless Architecture
Serverless architecture is another hot trend in web development right now. With serverless architecture, there is no need to set up or manage a server. Functions are run in response to events, and the user only pays for the time they use the function. This can be a more cost-effective option for businesses, and it also speeds up development time.

## 3. Chatbots
Chatbots are another hot trend in web development right now. Chatbots are interactive programs that can communicate with people using natural language. They’re used to automate tasks, and they can be used to provide customer support or sell products.

## 4. Artificial Intelligence
Artificial intelligence is another hot trend in web development right now. AI is being used to create smarter chatbots and to make websites and apps more user-friendly. It’s also being used to create predictive analytics and to personalize content.

## 5. Augmented Reality/Virtual Reality
Augmented reality and virtual reality are two of the hottest trends in web development right now. AR and VR are being used to create more immersive user experiences. They’re also being used to create training simulations and marketing campaigns.

## 5. HTTP/2
HTTP/2 is a new version of the HTTP protocol that was released in 2015. It offers many improvements over the previous version, including increased performance and security. All major browsers now support HTTP/2, so it’s worth using this protocol when developing web applications.

These are just a few of the top web development trends for 2018. Keep these in mind when designing and building your web applications this year. And be sure to stay up-to-date on the latest trends, as they are sure to change over time.

If you’re looking for a web development company that can help you stay up-to-date on the latest trends and technologies, follow our news. We would be happy to help. It can be hard to keep up with the latest trends and technologies, but it’s definitely worth it.
Updating on current works
Published: 2022-03-03 13:37:51

# [Mobile home page](https://github.com/Seneca-CDOT/telescope/pull/3020)
The PR needs some changes and updates. Firstly, I need to change the file structure of <code>student-quotes</code>. On this [conversation](https://github.com/Seneca-CDOT/telescope/pull/3020#discussion_r811227118), we found a good approach by moving the student quotes service to a folder that can be shared by both web application and mobile application. I filed an [issue](https://github.com/Seneca-CDOT/telescope/issues/3081) about that so that everyone will know, and if they are interested, they can pick it up. Another problem of the current home page is it is lack of image service. This service will randomly display a picture to Telescope Banner component. The issue can be found and picked up [here](https://github.com/Seneca-CDOT/telescope/issues/3082).
In order for the PR to get merged. I need to fix the <code>View</code> of all the screens.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irwwclx723es1km5g3pb.png)
As you can see in the picture above, the screen is not positioned properly. The reason behind is that I did not use <code>SafeAreaView</code>. So what is <code>SafeAreaView</code>? It is used to avoid your screen to overflow the whole mobile screen. For example, on top of the screen of your phone, there will be a lot of features like time, battery checking, etc. If develop a mobile app without using safe area view, all the components of your mobile app's screen will override the above features. However, it is weird that <code>SafeAreaView</code> of React Native will not always work. And I got that problem, I used margin top to solve that issue but with different screens, we need different margins. A better approach is using <code>SafeAreaView</code> of <code>react-native-safe-area-context</code>. I fixed my PR using it and also rebased the PR. I am waiting for everyone to review and it is going to be merged soon.
#[Dashboard contributor card](https://github.com/Seneca-CDOT/telescope/issues/2961)
I have been stuck on this one the most. My main problem was finding the wait to test locally. I have worked with the Dashboard page before but it was related to front-end. This issue was from the server side, with Handlebars. During the time I was looking for the solution, <code>staging</code> did not have this issue anymore. Due to this [comment](https://github.com/Seneca-CDOT/telescope/issues/2961#issuecomment-1054827129), this is because Github Token was not added. This issue may be closed and reopened if it keeps happening after we add both tokens to <code>staging</code> and <code>production</code>
The major difference between web 2 and web 3
Tags: beginners
Published: 2022-03-03 13:36:21

**Not a technical write up**
**Simple to the core**
Blockgames: https://blockgames.gg/
Nestcoin: https://nestcoin.com/
Zuri: https://zuri.team/
#Task 1 

No doubt, The Internet has changed the world on how we communicate,transact and interact with people. It all started with Web 1.0 and gets better with Web 2.0 and now everybody is talking about Web 3.0 - With Much/little understanding of what it's all about. I think I fall in the category of people with little understanding... Lol
Below I will simplify my view on the difference between Web 2.0 and Web 3.0

In Web 1.0 - READ only - Researcher creates a mark-up language to share files with colleagues. 
In Web 2.0 - Here you can READ and WRITE - Platforms like Facebook are created where you could post(write), read other people's posts (read), monetize your skill, advertise your product, etc. Most of these cool platforms are free but not entirely free because they take your data in exchange for whatever free services you're enjoying from them. For the fact you don't know what they exactly doing with these data should send a Javascript "Alert" to you. Lol
Web 3.0 - Still the same webservices built on Web 2.0 but here you have better control of your data.

In conclusion, One of the major difference between Web 2.0 and Web 3.0 is the way they store data. The former has a centralized server for storing data while the former store's data in Decentralized form through the help of blockchain tech.
WooCommerce Multi Vendor Plugins
Published: 2022-03-03 13:35:29

**WooCommerce Multi Vendor Plugins**

```
add_filter('gettext', 'Gomahamaya_change_sku_text', 10, 3);
function gomahamaya_change_sku_text($translation, $text, $domain) {
   if ($domain == 'woocommerce') {
        switch ($text) {
             
            case 'SKU:':
                $translation = 'Custom Text:';
                break;
        }
   }
    return $translation;
}
```

**1. Dokan Multivendor**

The Dokan Multivendor is, so far, the most popular WooCommerce multi-vendor plugin. It’s super easy to use and includes many features to create a multi-vendor marketplace like Amazon, eBay, or Alibaba in less than an hour!
Unlike any other WooCommerce multi-vendor plugins, Dokan comes with an extensive one-of-a-kind frontend for vendors. Every vendor gets a dashboard where they can precisely monitor and maintain their business.

**2. WCFM Marketplace**

The WCFM marketplace from WC Lovers is a WooCommerce multi-vendor plugin that comes with plenty of features to give you overwhelming control over your online marketplace. It’s perfect for those who look forward to a great deal of flexibility.
With WCFM, every vendor gets a Vendor Mobile App with deep monitoring and customization opportunities over their products, bookings, inquiry, reports, etc. For example, If a vendor needs to change the name, price, stock, or image of a product, they can do it quickly with the app.

**3. WC Marketplace**

The WC Marketplace is a dependable WooCommerce multi-vendor plugin. It comes with an effortless setup procedure, especially considering the number of functionalities offered.
WC Marketplace provides the admin with convenient authority over the marketplace, including views, sales, sales reports, and commission sections. Furthermore, there are various commission plans to choose from, offering you greater flexibility.

**4. WC Vendors Marketplace**

This plugin stands in a unique position in terms of usability — it offers you centralized administration over your entire marketplace and vendor storefronts, providing a comprehensive frontend dashboard. This means you can focus on the marketing and sales growth of your online marketplace.
With WC Vendors, merchants can enjoy a restrictionless marketplace and sell all kinds of products, including physical, digital, subscriptions, booking, or even auctions. You can also sell membership plans to your vendors, setting up parameters and limits on their selling products.


**Reference Blog**
[WooCommerce Multi Vendor Plugins](https://www.gomahamaya.com/best-woocommerce-multi-vendor-plugins-wordpress/)
URL Routing Params are only valid for relative urls
Tags: tip, routing
Published: 2022-03-03 13:32:38

It took me a while to get this one, because I don't usually have root urls that need matrix params. An app with such urls:

`https://someurl.com/;page=1;category=mice`

That won't work, they must turn into query params

`https://someurl.com?page=1&category=mice`

W3C says so.

> It is only sensible for relative URls which start with ";" to take a set of attribute values which are different from those of the base URL.

So in Angular, you have to watch `queryParamMap `instead.
Learning the reduce function part 1
Tags: javascript, beginners, webdev, tutorial
Published: 2022-03-03 13:22:49



I won't lie. 
I struggle with reduce, even now!
But it is powerful and it is worth learning.

---


## What is reduce?

> function used on arrays/object
> reduce will loop over every item
> gives a single result

####Let's start with a basic (and overly used!) usage:
#####Finding a total...

```javascript
array = [3, 12, 14, 23, 2, 3, 2, 13, 0, 2, 234, 213]

const total = array.reduce((previousValue,currentValue,indexNumber,array)=> {
code here
},initialValue)

```

Reduce takes 4 arguments, for this example we will only need the first two.  The initialValue will be zero.



```javascript
const total = array.reduce((previousValue,currentValue)=>{
code here
},0)
```
### Refactoring tip

> To make it more easily readable I will make the 2 arguments into a callback function. This is sometimes called the _'reducer'_

```javascript
const total = array.reduce(reducerTotal, 0)

function reducerTotal(previousValue, currentValue) {
  console.log('Previous Value:', previousValue)
  console.log('CurrentValue:', currentValue)
  console.log('------')
}
```
Have a look what happens, change the 0..what happens?

Currently it is correctly looping, but we are not totalling the numbers.

> Whatever you **return** is what the previousValue is going to be. 

That is why we got 'undefined' as there was no function return.

Try to return something silly like "I love Reduce" and study what now happens!

Now let us actually add, to create our total so..

```javascript
const total = array.reduce(reducerTotal, 0)

function reducerTotal(previousValue, currentValue) {
  return previousValue + currentValue
}
console.log(total)
```
Yes!

## Challenges!

1. Use this reducer and caluclate an average(mean).

2. See if you can rewrite all the above into one line of code, maybe with an arrow function!

3. Create a new reducer, that takes a total amount of money say £1000 and your array are amounts of money that you spend. Reduce this to see how much you have left..

Scroll Down for answers(please try before!)
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.






There may be other (and better ways!) Please share below!!


```javascript

const oneLiner = array.reduce((prev, curr) => prev + curr)
console.log(oneLiner)
```

```javascript
const average = array.reduce(reducerTotal, 0) / array.length

function reducerTotal(previousValue, currentValue) {
  return previousValue + currentValue
}

console.log(average)

```

```javascript
spendings = [3, 12, 14, 23, 2, 3, 2, 13, 0, 2, 234, 213]
const money = 1000

const howMuchDoIHaveLeft = spendings.reduce(reducerTotal, money)

function reducerTotal(previousValue, currentValue) {
  return previousValue - currentValue
}

console.log(howMuchDoIHaveLeft)

```
You could also expand on this task, by adding a currency, rounding to 2 decimal places, even a warning check _if_ your money goes _below 0_
Why should we use Kotlin for Android Development?
Published: 2022-03-03 13:21:43

Kotlin is one of the most popular languages used for Android development. With Google announcing first-class support for Kotlin on Android, there's been a lot of interest in the language lately. 

**Kotlin offers several features that help developers build robust apps:**

- **Concise:** Kotlin code requires fewer lines of code than Java to get the same functionality. This makes it easier to read and understand and reduces the potential for errors.

- **Safe:** Kotlin doesn't have some of the headaches Java does, including bugs that can be particularly frustrating to find and fix. This makes Kotlin more reliable as an Android development tool than Java.

- **Interoperable:** You can use Kotlin with Java in the same project, so you don't have to choose between them or migrate everything at once. This lets you add Kotlin into your app gradually as you see fit.

Less prone to bugs: Using Kotlin for Android development allows developers to write better code with fewer bugs than with Java. 

So, get started for android development with Kotlin by hiring a dedicated Kotlin developer from a trusted company like **WebClues Infotech.**

I hope the post answers your query on why you should choose Kotlin for android app development.
React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website
Tags: react
Published: 2022-03-03 13:12:55

<!-- wp:paragraph -->
<p>Hi there👋,</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I wanted to build a portfolio which is different and unique with design and little bit animations.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For this project I have used these libraries,<br>▶️ React JS<br>▶️ Framer-motion for Cool transitions and animations<br>▶️ Styled-Components<br>▶️ Particle JS<br>▶️ React Router</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>First I have created design in Figma, and used some of it's awesome plugins and resources. I have listed all the resources used in this website in the github ReadMe file.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here is the tutorial how I have created this website! </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong> Read Complete Tutorials : <a href="https://www.codelivly.com/react-portfolio-website-tutorial-from-scratch-build-deploy-react-js-portfolio-website/">React Portfolio Website Tutorial From Scratch – Build &amp; Deploy React JS Portfolio Website</a></strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Things that I have learned building this project,<br>▶️ Complex Styling with Styled-components<br>▶️ How to create Page Transition effects using Framer-motion<br>▶️ How we can leverage advantages of component structure<br>▶️ How to use ParticleJS in React JS for awesome background effects<br>▶️ Uses of Lazy and suspence in reactJS to make components load faster<br>▶️ Many awesome pure CSS animations.</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>You can use this portfolio and if you want to use it else where small credit would be appreciated (not compulsory), just check license of all images and other assets before usi
![Uploading image](...)ng it commercially.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>I will try to improve it's speed and performance.<br>Feel free to try different designs and animations with it and you can also tag me or share your link in the comments.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Any suggestions are welcomed!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4><a href="https://dev.to/codebucks/build-a-stunning-portfolio-with-react-js-p1#share-your-portfolio-in-the-comments-so-that-all-the-other-peoplebeginners-can-get-the-different-ideas-as-well-as-inspiration"></a>Share your portfolio in the comments, So that all the other people/beginners can get the different ideas as well as inspiration.</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3><a href="https://dev.to/codebucks/build-a-stunning-portfolio-with-react-js-p1#thanks-for-reading"></a>Thanks For Reading😄</h3>
<!-- /wp:heading -->
Gaming UI Dashboard
Tags: uiweekly, tailwindcss, css, react
Published: 2022-03-03 12:56:14


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

#gaming #dashboard #ui #design

Design Tools: XD, Adobe Illustrator

ui, ui design, vue, react, js, javascript, ux, tailwind, bootstrap, front end, wordpress, website animation, website, crypto, crypto trading
Jquery Alert, Sweet Alert, Dialog Kullanımı
Tags: javascript, jquery, webdev, html
Published: 2022-03-03 12:47:48

`<iframe style="width:100%;min-height:220px;" allowfullscreen="true" allowtransparency="true" frameborder="no" src="https://ismailgultekin.com/kodla/jquery-alert-sweet-alert-dialog-kullanimi" title="Jquery Alert, Sweet alert, Dialog Kullanımı"></iframe>`
Top Javascript frameworks for frontend development in 2022
Tags: javascript, webdev, beginners, programming
Published: 2022-03-03 12:38:47

JavaScript frameworks are becoming more and more popular for frontend development. In this post, we’ll take a look at the top 10 frameworks and see what makes them stand out. We’ll also explore some of the pros and cons of using them. So, if you’re looking to learn a new framework or want to know which one to use for your next project, [read on here](https://syntaxexplained.com/top-javascript-frameworks-for-frontend-development-in-2022/).
Strategy Pattern in Angular
Tags: javascript, angular, programming, seo
Published: 2022-03-03 12:16:15

[Strategy Pattern in Angular](https://pawan-kumawat.medium.com/strategy-design-pattern-in-angular-c15a281aa9ab
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kn0yyo2bwacoijxyl12g.jpg))
Static code analysis tool

Tags: c, cpp, java
Published: 2022-03-03 12:15:10

SoftaCheck is a static code analysis tool for C/C++, integrated with GitHub. Generate code documentation automatically with Doxygen.

SoftaCheck automatically creates your code documentation for you in a few minutes with easy integration to your GitHub repository.

The SoftaCheck app allows detecting critical bugs elevating your code and yourself to a higher professional level. Avoid embarrassing errors and set an example for your colleagues. How do we do it? We use well-known open-source tools such as CPPCheck & Clang-Tidy. SoftaCheck is easily integrated into your GitHub repository with a click of a button. 
SoftaCheck will make your documentation look amazing, save you time and present you as a professional developer.

For more info: [http://softacheck.com](http://softacheck.com)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4drpnd75wsly1ka4l3vu.png)
Simple Telegram Bot to Analyze Images
Tags: azuretrialhack, azure, telegram, dotnet
Published: 2022-03-03 12:02:52

### Overview of My Submission

Simple telegram bot to analyze images and give you appropriate tags, categories, and captions. This telegram bot uses Azure Computer Vision to analyze the image. "Smart bot" is hosted at Azure App Service.

### Submission Category: 

[Note]: # (AI Aces, Computing Captains, Low-Code Legends, Java Jackpot, or Wacky Wildcards:)

AI Aces


### Link to Code on GitHub

{% github berviantoleo/telegram-bot-ai %}


### Additional Resources / Info

* Telegram bot username: `@smart_azure_bot`

* Screenshot:

![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gi00ouoxroe59wliv0tt.png)

* Demo

{% youtube 2aai65IhFkU %}