teleren/devto huggingface dataset:
How to share your styles with your team in Figma
Tags: figmatips, figma, uidesign, uxdesign
Published: 2022-01-21 00:34:05

---
title: How to share your styles with your team in Figma
published: true
date: 2022-01-10 19:56:00 UTC
tags: figmatips,figma,uidesign,uxdesign
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*lUu0zm9d1OTmH-Ps.jpg)

In this quick post, we’ll see how to share your component in Figma.

### Watch Video Tutorial

{% youtube jYHo8fx4nnw %}

### Share styles to the library

In order to share your styles with your team, let’s head to the **Assets** tab in the left-hand sidebar.

![](https://cdn-images-1.medium.com/max/528/0*P2rEP-akNlIYjJMO.png)

- Hit the **Team Library** icon in the right corner of the **Assets**  panel.

![](https://cdn-images-1.medium.com/max/484/0*PVvJom3JKtFPQcLI.png)

- In the **Libraries** modal box, hit the **Publish** button beside your file’s name.

![](https://cdn-images-1.medium.com/max/988/0*aMAfKRHcWnrNO8Yj.png)

![](https://cdn-images-1.medium.com/max/910/0*keqz7P7oDtIDb6Oi.png)

### Import and Use styles from a different file

To access styles from anther file, Go to the **Assets** tab in the left-hand sidebar.

![](https://cdn-images-1.medium.com/max/528/0*NcYo6hUOJsOBHa4m.png)

- Hit the **Team Library** icon in the right corner of the **Assets**  panel.

![](https://cdn-images-1.medium.com/max/484/0*23M6PoNZAt6Ggywk.png)

- In the **Libraries modal** find your file’s library and switch its knob on.

![](https://cdn-images-1.medium.com/max/932/0*8KOdyJbIs3HeoTPM.png)

![](https://cdn-images-1.medium.com/max/940/0*X2CPQe7tJbnRausB.png)

### Access shared color styles

To access your shared styles, go to the right-hand sidebar and hit the **four dots** icon to trigger the styles menu.

You can also access the color styles in the **Fill section** , the Text styles in the **Text section** , the Grid styles in the **Layout grid** section, and Effect styles in the **Effects section**.

![](https://cdn-images-1.medium.com/max/1024/0*glzEbErQFQwyOe5q.png)

That’s everything about sharing styles in Figma.

### Before you go

Feel free to visit our website [**captain-design.com**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/how-to-share-your-styles-with-your-team-in-figma/) _on January 10, 2022._
Discount Portal - Send Discount Newsletters
Tags: atlashackathon
Published: 2022-01-10 19:51:35

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
Discount Portal is Web based application that sends out discount newsletters to a subscriber or list of subscribers.


### Submission Category: 
Choose Your Own Adventure

[Note]: # (E-Commerce Creation, Prime Time, Action Star, Automation Innovation, or Choose Your Own Adventure)


### Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

{% github https://github.com/harik8/discount-portal %}


### Additional Resources / Info

React JS - Frontend
Python - Backend

[Mongo Atlas](https://docs.atlas.mongodb.com/)
[Realm Functions](https://docs.mongodb.com/realm/functions/)
[Triggers](https://docs.mongodb.com/realm/triggers/trigger-types/)
[Data API](https://docs.atlas.mongodb.com/api/data-api/)
[Diagrams and Image](https://draw.io)

{% youtube NthhIFHp0rA %}

#### Flow Chart Diagram

![Discount Portal Flow Chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uocbd4xd6wmjtfueqr5l.png)

(Please click on the image to view clearly or view on Github).
Sudoku Neumorphism Design
Tags: codepen, html, css, showdev
Published: 2022-01-10 18:33:50

<p>Sudoku Neumorphism Design</p>

This CodePen was created by @amaralflavio (aka my little brother), it shows a take on Neumorphism Design, the code is on codepen to try it out and the credit to the author of the design. The code and demo https://codepen.io/flavio_amaral/pen/oNGPqEN

Sharing here to give him some love.


{% codepen https://codepen.io/flavio_amaral/pen/oNGPqEN %}


<p>Credits:

- Design based: <a href="https://dribbble.com/shots/11097923-Sudoku-Redesign-Neumorphism-UI" target="_blank">https://dribbble.com/shots/10474707-Experimental-UI-animation</a>

- Font: <a href="https://fonts.google.com/" target="_blank">https://fonts.google.com/</a>
</p>
Baloonza IT newsletters weekly digest #19
Tags: javascript, webdev, css, programming
Published: 2022-01-10 18:15:17

### web development
- `CSS Layout News` [Issue 334](https://app.baloonza.com/issues/11177?baloon_issue_id=20)
Alternate column scroll navigation, prefers-color-scheme

- [CSS Animation Weekly #282  - 2022!](https://app.baloonza.com/issues/11222?baloon_issue_id=20)
How to animate input elements, some very seasonal animations and VueJS transitions

- [📝 [CSS-Tricks] 284: New Year, New Color, Newsletter](https://app.baloonza.com/issues/11249?baloon_issue_id=20)
Upcoming color features in CSS, overflow-behavior: contain

- [Frontend Weekly - Issue 287](https://app.baloonza.com/issues/11311?baloon_issue_id=20)
The Best Coding Practices, How to Use Reduce to Total an Array of Objects in JavaScript, The Simplest JavaScript PDF Viewer Ever

- `Frontend Focus` [Understanding the browser rendering cycle](https://app.baloonza.com/issues/11351?baloon_issue_id=20)
Container Queries, Improving Core Web Vitals, A Smashing Magazine Case Study, Frontend Developer Resources for 2022

- `Awesome React Newsletter` [💻 Issue 212 - The Full-Stack Developer Vocabulary(The Full List!)](https://app.baloonza.com/issues/11384?baloon_issue_id=20)
A Complete Guide to React Router, Meet the new hook useSyncExternalStore

- `Awesome Javascript Newsletter` [💻 Issue 294 - Since we weren't able to go to a fireworks display in person, I made one with JavaScript and the HTML5 canvas.](https://app.baloonza.com/issues/11381?baloon_issue_id=20)
JavaScript Rising Stars in 2021, Copy-Paste hack using plain JS

- [Hacker Newsletter #585](https://app.baloonza.com/issues/11402?baloon_issue_id=20)

- `CSS Weekly` [Issue #487: Year in Review](https://app.baloonza.com/issues/11408?baloon_issue_id=20)


### Product Hunt Daily
- [Loud noises](https://app.baloonza.com/issues/11233?baloon_issue_id=20)
Shout-outs from your community

- [Not another meal kit](https://app.baloonza.com/issues/11271?baloon_issue_id=20)
Grocery concierge vs meal kits

- [Who will you nominate?](https://app.baloonza.com/issues/11314?baloon_issue_id=20)
Nominations for the Golden Kitty Awards 2021 are open!

- [Collecting evidence](https://app.baloonza.com/issues/11356?baloon_issue_id=20)
A new approach to security compliance


### Data Science Weekly Newsletter
- [Data Science Weekly - Issue 424](https://app.baloonza.com/issues/11395?baloon_issue_id=20)

***
Optional CSS transform with CSS variables
Published: 2022-01-10 17:58:56

Assuming you have a component which has a default transform property value(s) and can also have additional ones, which are optional, then logically it should be written as so:

```css
.component {
             |-- default ---| |-- optional --|
  transform: translate(100px) var(--transform);
}
```

But...It does not work as intended if the `--transform` variable is **not defined**. 

I am unsure why, but it can be easily fixed using this trick:

```css
.component {
  transform: translate(100px) var(--transform, );
}
```

Did you notice? There is a fallback defined to **nothing**: (`, )`

### [W3 Spec](https://www.w3.org/TR/css-variables-1/#using-variables):

> _In an exception to the usual comma elision rules, which require commas to be omitted when they’re not separating values, a bare comma, with nothing following it, must be treated as valid in var(), indicating an empty fallback value._

## Demo: 
https://jsbin.com/vejusaj/edit?html,css,output
Top 10 VS code keyboard shortcuts to boost your productivity
Tags: vscode, webdev, tips, beginners
Published: 2022-01-10 17:58:49

So, you use VS code. 
**Are you using it properly?**

If you are doing most of the tasks by clicking the mouse I think you are not using it properly. 

Using a mouse doesn't seem like a time waste but, in reality, if you are using the mouse all the time you are wasting a ton of time. 

To use the full potential of VS code you need to use keyboard shortcuts. Shortcuts will save you a ton of time when you code for hours. 🕵️

So, Today I’ll share the top ten vs code keyboard shortcuts that will boost your productivity. 

let’s get started: 

Note: if you prefer video, check it out here. 

{% youtube vQ9ItpzWG1M %}

### #1. Ctrl + X

With this shortcut, you can cut a line of code without selecting. 

And then you can paste it anywhere with Ctrl + V. 

### #2. shift + Alt + Down Arrow

You can duplicate a line without selecting it. 

### #3. shift + up or down arrow

With this shortcut, you can select a big block of text or code. 

### #4. Alt + up or down arrow

With this shortcut, you can move a line-up or down without selecting. 

### #5. Ctrl + p

It opens up the search bar, from there you can easily open any files from your project. 

### #6. Ctrl + G

It opens up a search bar where you can type a line number then, you’ll go to that specific line.

### #7. Ctrl + Shift + p

It opens up the command pallet, from there you can go to settings and many more. 

### #8. Ctrl + `

You can easily open up the terminal with this command. 

### #9. CTRL + B

With this shortcut you can easily toggle the sidebar, you won’t need to close it manually. 

### #10. CTRL + Tab

With shortcuts, you can easily toggle between tabs. 

## Conclusion
These are the shortcuts, I use all the time. 
What's your favourite VS code shortcut? 
Let me know in the comment below. 

If you are still lurking here 😃

check out my  [newsletter ](https://www.getrevue.co/profile/coderamrin) where I share 5 web development resources each Saturday.  
Are you on Twitter? let’s connect [coderamrin](https://twitter.com/CoderAmrin)
What is SSR or Server-side rendering?
Tags: javascript, webdev, nextjs
Published: 2022-01-10 17:54:42

In the arena of **SPA**s (**Single Page Application**) or React/Vue/Angular it's essential to know what server-side rendering is.

**So, What is server-side rendering?**

Server-side rendering is what you can say rendering in server.

As all JS libraries give us some functions that actually render all HTML, all styles, and all interactivity. So, that is what gives you the fast loading. But here comes the tricky part all browsers may not support JavaScript or in some cases, you shouldn't rely on JavaScript.

So in server-side rendering, all JavaScript functions run in the Server, and when your browser requests for data, it provides the compiled HTML, CSS, etc. Your website just renders like a pure HTML, CSS-written website.

**Okay, But why should I care?**

In this bright time of technology we just don't write HTML. It's the digital face of your brand. So you must ensure that everyone can see what you intended everyone to see. You cannot predict the end-user issues or what and what not that browser doesn't supports but for sure that browser supports plain HTML, CSS, so you should provide that as much as you can, to prevent unexpected behavior or an error.

That's where server-side rendering comes in handy. As it provides the server-side rendering, it actually helps the browser or any browser that asks for data to show it doesn't matter if that browser supports JavaScript or not.

**How can we do that?**

There are lots of frameworks out there, are just ready for use like Next.js, Gatsby.js. I personally like to use Next.js but every other framework is fine as well. It also provides code splitting and a whole other bunch of handy functionality. But with all of this, It's just making sure your powerful JS framework gives the most out of it, by ensuring server-side rendering.

**Are there any other rendering methods out there?**

Yes, as from previous you can guess that the framework provided JS functions can be run by and in your browser (which all updated browsers can just run fine) but ensuring the best user experience is what we frontend developers do.

So lastly, there is a lot of libraries and frameworks for you to make a difference, choose what works for you best and keep accessibility in mind and do good deeds.
I built a real-time logging platform
Tags: showdev, javascript, productivity, webdev
Published: 2022-01-10 17:35:24

Today, I launched logmyapp. While we dont have a formal website our app is live at app.logmyapp.io and the npm package for it is here https://www.npmjs.com/package/logmyapp.

What does logmyapp do?
Its actually quite simple. We log your logs. Have a .catch? use our package to effectively log your errors from production. Want to know when data is succeeding? Use our package to log it. Think of logmyapp like a way to see what your users are doing or errors they are seeing in production. 

How do I use it?
You can view the package details here https://www.npmjs.com/package/logmyapp

Or start by simply heading to app.logmyapp.io -> create a project -> head over to https://www.npmjs.com/package/logmyapp -> download the package (npm i logmyapp) include it in your components and start using it! After that you will see logs in real-time by heading to app.logmyapp.io -> find your project and click view real-time logging.

Have a question?
Email us or comment below bryan@logmyapp.io
Setting Schedule Push notification
Tags: atlashackathon
Published: 2022-01-10 17:32:51

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)


### Submission Category: Automation Innovation

[Note]: # (E-Commerce Creation, Prime Time, Action Star, Automation Innovation, or Choose Your Own Adventure)


### Link to Code `https://github.com/Bawanthathilan/Schedule-Push-notification`

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)


### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note:] # Screenshots/demo videos are encouraged!

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent to the person who posts this submission and they will distribute the prize evenly.)

[Reminder]: # (Submissions are due on January 13th, 2022 @ 11:59 PM PT/2 AM ET on January 14th, 2022/6 AM UTC on January 14th, 2022).
CREATION OF REPORTS IN RADZEN BLAZOR USING DATABASE VIEWS
Tags: blazor, radzen, report, view
Published: 2022-01-10 17:15:05

In this video, I show you how to create sql server database view, import the view into a RADZEN SERVER SIDE BLAZOR project, customize the report page created in RADZEN and perform additional code customizations for the report in the code behind file of the report page and at the database service layer.
{% youtube hhE_vqaXrQA %}

Source code and database files can be pulled from {% github benjaminsqlserver/IyaElepoAppLessonSeven %}
5 Articles every WebDev should read this week (#02)
Tags: webdev, tutorial, javascript, programming
Published: 2022-01-10 16:57:08


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.

---

## Nuxt 3 Beta: What’s New and How to Get Started

> In this article, we’ll explore the most notable new features and improvements offered by Nuxt 3, and we’ll also look at how most of them can be used in practice. This will provide a good overview of what’s possible with Nuxt 3 and how you can implement its goodies in your projects.

https://www.sitepoint.com/nuxt-3-whats-new-get-started/

---

## My first impressions of web3

> Even strictly on the technological level, though, I haven’t yet managed to become a believer. So given all of the recent attention into what is now being called web3, I decided to explore some of what has been happening in that space more thoroughly to see what I may be missing.

https://moxie.org/2022/01/07/web3-first-impressions.html

---

## How to Create a Browser Extension

> In this article, I will give you an introduction on how to create one. Ultimately, we’ll make it work in multiple browsers.

https://css-tricks.com/how-to-create-a-browser-extension/

---

## Imperative vs Declarative Programming

> Learn the difference between imperative and declarative programming and why you'll usually want to use one over the other.

## https://www.youtube.com/watch?v=E7Fbf7R3x6I

---

## Introducing fuite: a tool for finding memory leaks in web apps

> Debugging memory leaks in web apps is hard. The tooling exists, but it’s complicated, cumbersome, and often doesn’t answer the simple question: Why is my app leaking memory?

https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/


---

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/)

---
Deploy Strapi on Digital Ocean APP error
Tags: discuss, help, tutorial, programming
Published: 2022-01-10 16:53:59

Greetings Guys,

I have a problem regarding Strapi deployment to Digital Ocean using „new“ APP approach. I have followed an official tutorial from Strapi developers [here](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/digitalocean-app-platform.html#configure-your-strapi-project-for-deployment).
I have fulfilled the described steps and I’m having this issue during build time:

`Error: Could not load js config file /workspace/config/env/production/database.js: Cannot read properties of undefined (reading 'charAt')`

Full log:

`[2022-01-10 16:40:14] > backend@0.1.0 build
[2022-01-10 16:40:14] > strapi build
[2022-01-10 16:40:14] 
[2022-01-10 16:40:17] Error: Could not load js config file /workspace/config/env/production/database.js: Cannot read properties of undefined (reading 'charAt')
[2022-01-10 16:40:17]     at loadJsFile (/workspace/node_modules/@strapi/strapi/lib/core/app-configuration/load-config-file.js:18:11)
[2022-01-10 16:40:17]     at loadFile (/workspace/node_modules/@strapi/strapi/lib/core/app-configuration/load-config-file.js:35:14)
[2022-01-10 16:40:17]     at /workspace/node_modules/@strapi/strapi/lib/core/app-configuration/config-loader.js:16:18
[2022-01-10 16:40:17]     at Array.reduce (<anonymous>)
[2022-01-10 16:40:17]     at module.exports (/workspace/node_modules/@strapi/strapi/lib/core/app-configuration/config-loader.js:13:6)
[2022-01-10 16:40:17]     at module.exports (/workspace/node_modules/@strapi/strapi/lib/core/app-configuration/index.js:56:21)
[2022-01-10 16:40:17]     at new Strapi (/workspace/node_modules/@strapi/strapi/lib/Strapi.js:54:23)
[2022-01-10 16:40:17]     at module.exports (/workspace/node_modules/@strapi/strapi/lib/Strapi.js:492:18)
[2022-01-10 16:40:17]     at module.exports (/workspace/node_modules/@strapi/strapi/lib/commands/build.js:18:26)
[2022-01-10 16:40:17]     at /workspace/node_modules/@strapi/strapi/bin/strapi.js:52:14
[2022-01-10 16:40:17]     at processTicksAndRejections (node:internal/process/task_queues:96:5)
[2022-01-10 16:40:17] building: exit status 1
[2022-01-10 16:40:17] ERROR: failed to build: exit status 1
[2022-01-10 16:40:48] 
[2022-01-10 16:40:48] For documentation on the buildpacks used to build your app, please see:
[2022-01-10 16:40:48]    Node.js: https://do.co/apps-buildpack-node
[2022-01-10 16:40:48] 
[2022-01-10 16:40:48]  ! Build failed`

Please Help.
Demystifying Python basics.
Tags: beginners, python
Published: 2022-01-10 16:49:28

Python is a very powerful programming language. It is general-purpose and can be used in data science, mathematics, web development, and other programming areas. It is also multi-platform which means it can run on any operating system: Windows, Linux, MacOS, among others. It is also open-source and free. The most amazing part is that despite it being multi-functional, it is easy to learn and therefore beginner-friendly. Let’s have a look at some Python basics for those who are looking to learn this language. 
The first thing we will look at is the Python syntax. Syntax in general refers to the structure of a language or the basic rules it follows that makes that language unique. In Python, comments are marked by using a # sign before the actual comment. This applies to both single-line and multi-line comments. For example, if you wanted to write a comment that says a given piece of code multiplies even numbers, you would write it as #multiplies even numbers. Everything written after the pound sign (#) will be ignored by the interpreter. 
One unique thing about Python that probably makes it easy for beginners is that you do not to terminate statements with any symbol. In languages like C, you have to terminate each statement using the semicolon (;) symbol. In Python however, you can just write statements without having to terminate. 
Another very important unique thing is indentation. It is used to differentiate blocks of code. For example: 
	for i in range(100):
   	    # indentation indicates code block
   	    total += i
As you have noticed, there is a colon (:)right before the indented code. This applies in all blocks of code in Python. Before you indent a certain line or lines of code, ensure there is a colon at the end of the previous code. Indentation also brings uniformity and readability to your code. The number of spaces you use as a programmer depends entirely on you, but just make sure you are consistent in the number of spaces you decide. 
Python variables are locations that store data values in memory. Python has no specific command for naming a variable. It is created as soon as you assign a value to it. For example:
x = 8
y = "Sharonah"
print(x)
print(y) 
As shown above, we use the assignment operator (=) to assign a value to the variable. The variables declared do not necessarily have to be of any type. You are even able to change the type even after assigning values to the variable. You also have the option of assigning more than one value to a number of variables, as shown below:
a, b, c = "Hello", 1, 99

print (a)
print (b)
print (c)

We also have constants in Python. These are variables also but their values can’t be changed. Variables are given values in the format shown below:
Pi = 3.14

These are the basics of Python and are very important things that one should familiarize themselves in as they plan to start the Python journey.