teleren/devto huggingface dataset:
Generating Flutter Themes
Tags: flutter, tutorial, fluttertutorial, appdevelopment
Published: 2022-10-21 13:58:51


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

With Parabeac’s latest update, we now officially offer three different project types: Themes, Components and Screens. While Components and Screens have been included in previous iterations of our Figma to Flutter conversion tool, we’re excited to offer an entirely new function: Themes! 

Maintaining consistent brand colors and styles is critical to making a polished and cohesive user experience. Parabeac addresses this directly with its new project type. Themes is capable of not only created ColorStyles and TextStyles, but “light” and “dark” themes (as specified in (Material Design 2)[is capable of detecting [Material Design elements](https://docs.flutter.dev/development/ui/widgets/material), as well. Having a generated list of colors and styles devs can easily reference, makes the entire process of coding an app’s UI not only easier, but faster as well.

We recently released a video demo on how this works [here](https://youtu.be/sNpV9_cuS6c), but let’s dive into how to make this happen:

1. **Create a Style Sheet in Figma**
    
    Clone [our existing sample style sheet](https://www.figma.com/file/BNqNAmenGsbiGAQEIOgpuR/Parabeac-Theming?node-id=4%3A2), and edit it to match your desired application colors. (or create your very own Figma file!)
    
   
![Style Sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h35sym39xa7bgq7fgxwf.png)
    
2. **Convert your Figma design to Flutter using [Parabeac] Cloud](app.parabeac.com)**
    
    The process is very similar to how we’ve converted projects in the past. All you need is the link to your Figma file and access to your Figma account (either through a personal access token or by logging in through Parabeac). 
    
    
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6atx310j390rvt3uejz2.png)
    
3. **Use the themes in your project**
    
    Import the generated .g.dart files to an existing project, or build a new application on the Parabeac generated project files. If you created light or dark themes, you can call them as normal—otherwise you can call individually generated colors. As usual, all names correspond to how they were labeled in Figma.

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

For more tips and tricks on how to use Themes, check out [this handy article](https://towardsdev.com/tips-and-tricks-to-make-flutter-development-easier-with-parabeac-693d03a80b38) written by our very own CTO, Ivan Vigalante.

For more detailed information on how themes work or how to generate them using Parabeac, check out our documentation [here](https://docs.parabeac.com/docs/learn-the-parabeac-way/global-styling).
To-Doer (Task Tracker)
Tags: webdev, react, css
Published: 2022-10-21 13:55:47

Hello Developers, Long time No see. I hope you are coding well. Let me tell you something, Before I get started. _Planning is everything_. The one who plans well, executes well is the one who lives well. The day starts for everyone when they get off from their bed. Everyone wants the day to be more productive than yesterday. So, Here I am, With this website you can track your tasks that you should do in your day. So, By the end of the day you can remove them from your to-do list, Once they are done. You can mark them as important, If you want to prioritize them. Here are some of the sample screens of the website. Hope that'll drive your further. 


**1. Click "ADD" to add the task**

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

**2. Enter the Task Name and Date**

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


**3. Click on the "Save Task" to save your task**


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


**4. Double click on the Task to set it as Reminder**

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


**Click the below link to add your tasks**
[Link🔗](https://praveenkumarpanchadarla.github.io/To-Doer/)

That's pretty much it. I hope that helps.
What is Security Hub?
Tags: aws, beginners, security
Published: 2022-10-21 13:55:19

## Image before study

I don't know much about it except that it's an AWS service.

## Research

### What is Security Hub?

It is a service that checks and centrally manages AWS services.
There are various AWS services, but it is difficult to check each service one by one.
Therefore, the Security Hub aggregates security alerts for AWS services and allows you to view them on a single management screen.
Security Hub is a service that aggregates security alerts for AWS services and allows you to view them on a single management screen.

Currently, the target services are as follows

- Amazon GardDuty
- Amazon Inspector
- AWS System Manager
- AWS Health
- AWS config
- AWS Firewall Manager
- AWS IAM Access Analyzer
- Amazon Macie

### Benefits of the Security Hub

- Data Aggregation

The security checks of the services listed above can be viewed in a single Security Hub.
This saves you the time and effort of visiting each service.

- Automated security checks

The Security Hub can also perform compliance checks.
You can automatically check for compliance with certain standards, such as PCI DSS.

### Security Hub Precautions

There are a few things to keep in mind when using the Security Hub.

- AWS Config must be enabled for security checks.

AWS Config must be enabled as it will be used as data.

- It must be enabled on a region-by-region basis.

Security Hub only processes data for the region of interest.
If you want to see several regions, you need to enable it for each region.

## Image after study

I was looking at it for a while and thought it was similar to TRUSTED ADVISER.
I wonder if this one is more specialized in compliance and security?
Well, I guess there are some parts that are covered.
20 Best Website Designs for Constructions Business in 2022
Tags: webdev, websitedesign
Published: 2022-10-21 13:46:12

A website is more crucial than ever if you run a construction company. Having a website enables prospective clients to discover more about your business, see examples of your work, and get in touch with you quickly. In addition, having a website can help you rank higher in search engine results pages (SERPs), which can increase your website’s traffic and sales.

Why Do You Need an Appropriate Website Design for Construction?
Your company’s online presence ought to be just as significant as its physical presence. Customers and businesses expect to be able to obtain all the information they require online. New customers may be switching to your competition with a good website if your company can’t keep up. A good website design for construction should be professional, simple to use, and able to turn visitors into customers. After all, in most circumstances, that is the business’s objective. Here we have a list of the top 20 best website designs for construction businesses in 2022.

Read more: [https://arturobackoffice.com/blog/website-design-for-construction/](https://arturobackoffice.com/blog/website-design-for-construction/)
Node.js v19.0.0 --watch option
Tags: node, javascript, webdev, programming
Published: 2022-10-21 13:30:12

> short

Node has released their 19th version. Many important new additions have been made in this version. One addition I find very interesting. 

We have been using `nodemon` to watch script changes for a long time. Now, we don't have to rely on this third party library. Because, Node.js has just added `--watch` option in their new version, which will work exactly like `nodemon`. CMD `node --watch [your-file-name]`. Example: `node --watch app.mjs` 

[Follow me on Twitter](https://twitter.com/sabbirsobhani)
Follow Friday: NoSQL Edition (21 October 2022)
Tags: meta, writing, database, nosql
Published: 2022-10-21 13:00:00

_Happy Friday, friends! 🎉 Follow Friday is your weekly opportunity to shout out fellow DEV Community members doing awesome work. Check out the comments and follow someone new!_

As the name suggests, NoSQL databases are non-SQL (or not-only-SQL), meaning that they store and retrieve data using a format other than relational tables.

Some popular examples of NoSQL databases are Redis, MongoDB, Azure's Cosmos DB, Amazon's DynamoDB, Elasticsearch, Couchbase — and the list goes on!

So, devs! Who are your favorite authors writing about NoSQL databases?

_**Formatting tip**: to populate a card with a follow button, use the liquid tag syntax `{% embed https://... %}` and insert the URL of your favorite author's profile._

Join in on the #FollowFriday fun by @mentioning your favorite author to follow on the topic of NoSQL (and letting us know why you love their posts!) ⤵️
Tutorial hell: The escape (part one)
Tags: beginners, react, javascript, webdev
Published: 2022-05-03 13:50:36

#Hi!
Sooo, after months of postponing it, I'll finally start to develop a project from the ground up using React. I tried a few times following tutorials, but I **always** got that feeling of _"Ok, what do I do know?_ So, this time **I decided to not follow any tutorials** because:

- I want to escape tutorial hell;
- I want to improve my problem-solving skills;
- Why not?

_Oh, I'm João, by the way!_ I currently live in Brazil and I'm a 20 years old self-taught developer. It's nice to have you here, fellow stranger! 😄

## The Project
I'm going for a kanban-styled app. You didn't read it wrong, it's not a to-do list! _yikes_

I plan to **develop new features gradually**, a**s I get more comfortable** with the logic and with React. I thought of plan everything from the get-go, but that was overwhelming, so I decided to go with basics first, features later.

## Structure

The project, at the current stage, has the following structure:
```md
    \---modules
        \---kanban
            +---Card
            |       Card.css
            |       Card.jsx
            |
            +---ColumnStack
            |       ColumnStack.css
            |       ColumnStack.jsx
            |
            \---KanbanApp
                    KanbanApp.css
                    KanbanApp.jsx
```

_Now, explaining each component:_

- **KanbanApp:** contains the entire project;
- **ColumnStack:** the column of cards _(to do, in progress, in revision, concluded)_. Each column holds its respective cards.
- **Card:** contains the info from each task; belongs to one of the columns.

Ok, I know that a lot of things are missing _(add new cards, edit existing cards, move cards arounds, etc)_, but as I said, I plan to implement these things later, for now I just want to get started.

_Oh, And i'm following the modules/domain structure!_

## What to expect?

Frankly, I don't think I'll be able to write daily about the project, but you can stay tunned on [my github repo](https://github.com/joaoHass/kanban-react)! **I do plan to fully develop this app**, or at least, most of it, because I know that's the only way to keep moving forward.

Also, I know that **I need to improve my writing skills.** I have to make things enjoyable not only for me, but for you as well, dear reader.  English is not my primary language,  so I know that creating the habit of writing a blog or something will greatly improve my fluency.

**Buuut I'm enjoying racking my brains**, trying to figure things out on my own. You see, when you follow a tutorial, you are just... following. So, starting fresh with no directions is kinda freeing and exciting? 

Well, I gotta go back to develop this little project of mine. **I    really hope to see you here next time**, fellow stranger. **Godspeed**! 😊
Nested Dynamic Routes in React Router v6 🎯
Tags: react, javascript, webdev
Published: 2022-10-21 12:37:31

When I first started to develop my portfolio, I fetched GitHub Repos and ran into the issue of needing to present the repo data when clicking on the repo name precisely as seen in the image below.

![Nested Dynamic Routes in React Router v6 Gif image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7xvrv6ytxw6womnb9mr.gif)

If you look closely, you'll see that the URL is dynamically altered to reflect the chosen repository's name and the proper repo data is rendered. The term "dynamic routing" refers to this behavior.

I came up with this [Sandbox demo](https://codesandbox.io/s/dynamic-routing-with-react-router-dom-dw8kln) example to help you better understand this type of behavior.





{% codesandbox dw8kln %}
🦊GitLab Cheatsheet - 14 - Cloud Seed
Tags: gitlab, cheatsheet, tutorial, cloud
Published: 2022-10-21 12:24:14

This Cheatsheet is about Cloud Seed, a new projet created by the GitLab Incubator Team.

<a href="https://jeanphi-baconnais.gitlab.io/img/cheatsheet/GitLabCheatsheet-14-Cloud-Seed.jpg" alt="14 - Cloud Seed" target="blank">
<img src="https://jeanphi-baconnais.gitlab.io/img/cheatsheet/GitLabCheatsheet-14-Cloud-Seed.jpg"/>

</a>

I will create others cheatsheet. Tell me if you have comments or suggest about those cheatsheet 😃.
Algoscale Technologies
Tags: aws, machinelearning, azure
Published: 2022-10-21 12:23:32

Algoscale is a Data Analytics & [AI consulting firm](https://algoscale.com/) that provides world-class solutions and product engineering services to start-ups and Fortune 100 companies, with a focus on ISVs, media publications, and retail service providers. Modernization and a data-first philosophy fuel our efforts to deliver cutting-edge products and solutions.
Best Types of Web applications to build with Ruby on Rails
Published: 2022-10-21 12:18:13


From a startup to a multi-national company Ruby on rails has always become the preferred choice of framework. Even after 16 years, ROR got introduced and the glory of Ruby on rails has constantly grown. Along with the rapid increase of development demand to **hire Ruby on rail developers** is getting more and more. Among all the other frameworks ruby on rails makes the tasks of web development much easier and smoother because of the extraordinary features it serves. 

If you are a business owner and not sure which framework to choose for web development then Ruby on rails is surely the best choice for you. 

With the help of Ruby on Rails,  businesses can explore and think of building various types of applications. There are various types of web applications Ruby on rails developers help build suitable for your business requirements.

Let’s know various types of web applications that are possible to build with the help of Ruby on rails:


**1.eCommerce site:**

eCommerce is typically the greatest option when using Ruby on Rails development services for one of these types of websites if you want to generate money from it. This is so because an e-commerce website's main objective is to sell things to customers, not to monetize content through advertisements or use content to generate income.


**2.Brochure website:**

A brochure website might be considered a condensed version of a business website. A more reliable and SEO-friendly traditional business website frequently has less information about the company. In other words, if you have the means, you ought to invest in a full-featured company website.


**3.Informative site:**

Businesses [hire ruby on rail developers](https://www.bacancytechnology.com/ruby-on-rails-development) to build an informational website with robust features. On these kinds of websites, which go into great detail about specific topics, users cooperate by adding their own information to already existing pages or creating their own pages to add to the collection.

**4.Business sites:**

Choose the top Ruby on Rails development services if you currently have one but don't have a website to advertise it on. These websites are becoming more and more crucial because it's estimated that between 70 and 80 percent of clients do their research on businesses online before making a purchase. However, fewer than half of all businesses have websites.

## Conclusion:
Thus There is no doubt in saying why they _hire ruby on rails developers_ by looking at some of the best types of applications built with ROR. So all business owners have a look at such types of applications and pick the ideal pick for their business.
Understanding Time zones
Tags: javascript, react, webdev, beginners
Published: 2022-10-21 12:17:17

Let's talk about time-zone, before that you need to know:

- latitude - imaginary horizontal lines on earth's surface
- longitude - imaginary vertical lines on earth's surface

![latitude and longitude](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twlzl01zsd2jbsyfc3ex.png)

Now latitude/longitude being clear lets move back to the topic.

---

#What actually is time zone? 

Timezone is a region/area which experiences a same time. that means if you travel longitudinally, then you won't experience any change in time zone

##How are time zones made?

Earth rotates at equator with speed of 1000miles per hour.
The earths rotation is directly related to our time. So if we calculate then earth rotates about 15deg every hour.
That means total number of hours in a day are 24hr

> 360/15 = 24hours

if you look from top-view (north-pole) then you would find a line passing through north-pole. One of its side is called prime meridian and other one is called international dateline.


![prime meridian and international dateline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50r7kqzqbl4kqa4jngxg.png)

If we go towards western hemisphere then we need to subtract 1hr every 15degs and vice-versa.

![prime meridian and international dateline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hvvs4nm556fl6ta50ql.png)

so if its 12am at prime meridian then it will be 12pm at international dateline.

There are name given to every time zone and we call it as IST,PST,PDT etc... **_GMT & UTC have no time difference_**. Prior to 1972, this time was called Greenwich Mean Time (GMT) but is now referred to as Coordinated Universal Time or Universal Time Coordinated (UTC).

Also there are political changes made in time zone value i.e, some countries prefer to stay in other time zone to keep things little less complicated and more maintainable.

#Conclusion

So now I hope you have good knowledge about time zones. Now you might get a little help in using `Date` constructors etc... 😅

Stay happy, Keep your surroundings clean,
Signing off Meet Bhalodiya,

Peace ✌
Clean Code Tip: Avoid subtle duplication of code and logic
Tags: cleancode
Published: 2022-10-21 12:16:24


Duplication is not only about lines of code, but also about **data usage and meaning.**
Reducing it will help us minimize the impact of every change.

Take this class as an example:

```cs
class BookShelf
{
    private Book[] myBooks = new Book[]
    {
         new Book(1, "C# in depth"),
         new Book(2, "I promessi paperi")
    };

    public int Count() => myBooks.Length;
    public bool IsEmpty() => myBooks.Length == 0;
    public bool HasElements() => myBooks.Length > 0;
}
```

Here, both `Count` and `IsEmpty` use the same logical way to check the length of the collection: by calling `myBooks.Length`.

What happens if you have to change the `myBooks` collection and replace the array of Books with a collection that does not expose the `Length` property? You will have to replace the logic everywhere!

So, a better approach is to "centralize" the way to count the items in the collection in this way:

```cs
class BookShelf
{
    private Book[] myBooks = new Book[]
    {
         new Book(1, "C# in depth"),
         new Book(2, "I promessi paperi")
    };

    public int Count() => myBooks.Length;
    public bool IsEmpty() => Count() == 0;
    public bool HasElements() => Count() > 0;
}
```

If you will need to replace the myBooks data type, you will simply have to update the `Count` method - everything else will be the same.

Also, `HasElements` and `IsEmpty` are a logical duplication. If they're not necessary, you should remove one. **Remove the one most used in its negative form**: if you find lots of `if(!HasElements())`, you should consider replacing it with `if(IsEmpty())`: always prefer the _positive_ form!

Yes, I know, this is an extreme example: it's too simple. But think of a more complex class or data flow in which you reuse the same logical flow, even if you're not really using the exact same lines of code.

By duplicating the logic, you will need to write more tests that do the same thing. Also, it may happen that if you found a flaw in your logic, and you fix it in some places and forget to fix it in other methods.

Centralizing it will allow you to build safer code that is easier to test and update.

A simple way to avoid "logical" duplication? Abstract classes!

Well, there are many others... that I expect you to tell me in the comments section!

Happy coding!

🐧
In One Minute : HTML5
Tags: html, webdev, beginners, oneminute
Published: 2022-10-21 12:08:26

HTML5 is a markup language used for structuring and presenting content on the World Wide Web.
It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation.

{% embed https://youtu.be/7E7n2T5B9Nw %}

HTML5 was first released in a public-facing form on 22 January 2008,with a major update and "W3C Recommendation" status in October 2014.

Its goals were to improve the language with support for the latest multimedia and other new features; to keep the language both easily readable by humans and consistently understood by computers and devices such as web browsers, parsers, etc.,

HTML5 introduces elements and attributes that reflect typical usage on modern websites.

In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs) that can be used with JavaScript.

HTML5 is designed so that old browsers can safely ignore new HTML5 constructs.

Official website :- https://html.spec.whatwg.org/
Closer look at Novu
Tags: javascript, webdev, programming, react
Published: 2022-10-21 11:35:21

# Introduction 
Open Source community is growing more diverse and energetic every day. No matter what your interests are or which field you work in—you will be able to find someone who can help you there.


# What is Novu 🎯
Novu is an open-source notification infrastructure, built for engineering teams to help them build rich product notification experiences without constantly reinventing the wheel.

Novu is a notification center for web and mobile apps that manages multi-channel content, schedules notifications, digest engine, user preferences, and delivers email, SMS, and chat notifications using a single API.

# Hacktoberfest with aviyel 😍

Open Source community is growing more diverse and energetic every day. No matter what your interests are or which field you work in—you will be able to find someone who can help you there. Open source software, advocacy efforts, and other collaborative projects benefit from the community that supports them. This backbone of support is what makes these endeavors possible—and that’s where Aviyel comes in.   

# Closer Look at Novu 👀

At this event we have with us Emil Pearce, who’s a DevRel at Novu and also an avid open-source enthusiast. Join us as he talks about his journey at Novu and what they’re building at Novu. Tune In 
<img src="https://aviyel.com/assets/uploads/files/1666333467582-hacktoberfest-12-resized.png">

# Contribute to Novu ✍🏻

Github Stars ⭐ 10.9k
- [Novu](https://novu.co/)
- [Novu GitHub](https://github.com/novuhq/novu)
- [Novu Documentations](https://docs.novu.co/overview/introduction/)
- [Novu Discord Community](https://discord.com/invite/9wcGSf22PM) 

## Connect with me ⬇

[Twitter](https://twitter.com/ganeshstwt) 
[Github](https://github.com/ganeshpatil386386)
[Youtube]
(https://www.youtube.com/channel/UCjMse2JYXPbtlzcnkbXmVQQ)
[Linkedin](https://www.linkedin.com/in/ganeshpatil386386/)