teleren/devto huggingface dataset:
Flystar SaaS: A modern SaaS website built using Next.js and Tailwind CSS
Tags: sass, website, nextjs, tailwindcss
Published: 2024-02-18 16:26:35

---
title: Flystar SaaS: A modern SaaS website built using Next.js and Tailwind CSS
published: true
date: 2024-02-18 00:09:00 UTC
tags: Sass,WebSite,Nextjs,TailwindCSS
canonical_url: https://reactjsexample.com/flystar-saas-a-modern-saas-website-built-using-next-js-and-tailwind-css/
---

## Flystar Saas
 ![Flystar SaaS: A modern SaaS website built using Next.js and Tailwind CSS](https://reactjsexample.com/content/images/2024/02/Code_2024-02_23-00-24.jpg)

Flystar SaaS is a modern software-as-a-service platform built using Next.js and Tailwind CSS. It offers intuitive tools and features aimed at streamlining workflows and boosting productivity.

<iframe width="100%" height="415" src="https://www.youtube.com/embed/itj-RteLFdg?si=lHwum8joAkfjjbWi" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
[View Github](https://github.com/Seyma44/flystar-saas-website)

Powered by Next.js, the platform ensures efficient rendering, enhanced performance, and seamless navigation with fast loading times.

With Tailwind CSS integration, Flystar SaaS boasts a sleek and responsive design, providing users with a visually appealing and user-friendly interface.

Additionally, TypeScript support enhances code readability and maintainability, further improving the development experience.
Embarking on the Digital Ocean Journey: Unleashing the Power of CLI with doctl
Tags: digitalocean, cli
Published: 2024-02-18 00:03:09

### Step 1: Install `doctl`

First, you will need to install `doctl` on your local machine. You can download the binary from the official website or use a package manager if you are on a supported system.

#### Linux/Mac:

```bash
curl -L https://github.com/digitalocean/doctl/releases/latest/download/doctl-$(uname -s)-$(uname -m) -o /usr/local/bin/doctl
chmod +x /usr/local/bin/doctl
```

#### Windows:

Download the latest `doctl` executable from the official website and install it following the instructions.

### Step 2: Create a Digital Ocean Account
Click below to create a free account with credits to spend within digital ocean

[![DigitalOcean Referral Badge](https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%201.svg)](https://www.digitalocean.com/?refcode=496c78a72997&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)

### Step 3: Create a Digital Ocean Account API key
Log in to your Digital Ocean account and navigate to the "API" 
https://cloud.digitalocean.com/account/api/tokens
section in your account settings. Generates a new API key with sufficient permissions to access and manage container registries.

### Step 4: Configure `doctl`

Open a terminal and run the following command to configure `doctl` with your API key:

```bash
doctl auth init
```

Follow the instructions to enter your API key and select your preferred settings.
Absolutely! Here's the closing for your post:

---

And that wraps it up! With `doctl` now installed, you're all set to make the most of Digital Ocean directly from the command line. In the upcoming posts, we'll delve into the myriad possibilities and capabilities that Digital Ocean offers through the terminal. From resource management to advanced deployments, I'll guide you through the powerful tools that will help you optimize your cloud experience. Stay tuned to discover how to elevate your projects to new heights with Digital Ocean! 🚀🌐 

---

I hope you find this closing suitable for your post! If you need anything else, feel free to ask!
Run Vagrant VMs in a M1/M2/M3 Apple Sillicon Chip
Tags: vagrant, hashicorp, mac, vmware
Published: 2024-02-18 00:01:02

If you're a Mac user equipped with an Apple Silicon chip (M1/M2/M3...) and facing challenges setting up a Vagrant infrastructure due to the lack of supported hypervisors, this tutorial is tailored for you. It will guide you through configuring Vagrant to run using VMware Fusion technology as a hypervisor. Simply follow the steps outlined, and should you encounter any issues along the way, feel free to reach out to me for assistance.


#### Step 1: Install Rosetta
```
/usr/sbin/softwareupdate --install-rosetta --agree-to-license
```

#### Step 2: Install VMware Fusion tech (you will have to create a VMware account)
```
https://customerconnect.vmware.com/downloads/get-download?downloadGroup=FUS-TP2023
```
You may also need to provide a license key, you can opt for the free one.

#### Step 3: Create a symbolic link
```
ln -s /Applications/VMWare\ Fusion\ Tech\ Preview.app /Applications/VMWare\ Fusion.app
```

#### Step 4: Install vagrant (on MacOS)
```
brew tap hashicorp/tap
brew install hashicorp/tap/hashicorp-vagrant
```

#### Step 5: Install vagrant vmware utility
```
https://releases.hashicorp.com/vagrant-vmware-utility/1.0.22/vagrant-vmware-utility_1.0.22_darwin_amd64.dmg
```

#### Step 6: Install vagrant plugin
```
vagrant plugin install vagrant-vmware-desktop
```

#### Step 7: Create a Vagrantfile
*This configuration will create 2 VMs (master and slave)*
```
mkdir vagrant-project
cd vagrant-project
touch Vagrantfile
cat << EOF > Vagrantfile
Vagrant.configure("2") do |config|
    config.vm.define "master" do |master|
        master.vm.box = "spox/ubuntu-arm" 
        master.vm.box_version = "1.0.0"
        master.vm.hostname = 'master'
        master.vm.provision "docker"

        master.vm.network :private_network, ip: "192.168.56.101"

        master.vm.provider "vmware_desktop" do |v|
            v.allowlist_verified = true
            v.gui = false
            v.vmx["memsize"] = "2048"
            v.vmx["numvcpus"] = "2"
      end
    end

    config.vm.define "slave" do |slave|
        slave.vm.box = "spox/ubuntu-arm" 
        slave.vm.box_version = "1.0.0"
        slave.vm.hostname = 'slave'
        slave.vm.provision "docker"

        slave.vm.network :private_network, ip: "192.168.56.102"

        slave.vm.provider "vmware_desktop" do |v|
            v.allowlist_verified = true
            v.gui = false
            v.vmx["memsize"] = "2048"
            v.vmx["numvcpus"] = "2"
      end
    end
  end
EOF
```
**Note: gui parameter is mandatory** 

#### Step 8: Now you can run the vagrant program
```
vagrant up
```

#### Additional commands
##### Check the status of the VMs
```
vagrant status
```

##### Connect to the VMs
```
vagrant ssh <hostname>
```
In our example we can use either
```
vagrant ssh master
```
Or
```
vagrant ssh slave
```

##### Stop the VMs
```
vagrant halt
```

##### Delete the VMs
```
vagrant destroy
```
Caption This! 🤔💭
Tags: watercooler, discuss
Published: 2024-02-18 00:00:00

---
published_at : 2024-02-18 00:00 +0000
---
Think you've got what it takes to whip up the cleverest caption for this image? Give it a shot!

![Canvas with a plaster nose on it on a shelf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnxwg5yfxbmsw4cx20r2.jpg)

---

Follow the DEVteam for more online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Build something useful in one day with Mark Conroy
Tags: css, podcast
Published: 2024-02-23 16:00:13

---
title: Build something useful in one day with Mark Conroy
published: true
date: 2024-02-18 00:00:00 UTC
tags: [css, podcast]
canonical_url: https://www.oliverdavies.uk/archive/2024/02/18/build-something-useful-in-one-day-with-mark-conroy
---

This week on the Beyond Blocks podcast, I'm joined by Mark Conroy - Director of Development at Annertech to discuss all things front-end development and building something useful in one day.

[Listen now](https://www.oliverdavies.uk/podcast/11-mark-conroy)

## Talking points

- Building better websites faster, including Drupal distributions, such as LocalGov.
- What Drupal gives you out of the box and using the right tool for the job.
- Drupal migrations and migrating Drupal configuration from a spreadsheet.
- Saving time and improving efficiency by standardising base builds with Docksal and Composer.
- How to build projects, like the Running Plan Generator, in a day and training for 10Ks and marathons.
- Prioritising tasks.
- Annertech's development workflow and standardisation by developing on remote servers.
- Why you may not need preprocessors and complicated front-end build tools, and reducing complexity using vanilla CSS, JavaScript and web components.
- Lowering the barrier to entry to contribute to open-source projects.
- Building a design system/component library with web components.
- The Content Access by Path module that was developed for Essex County Council.

P.S. There's less than a year until Drupal 7's end-of-life date. [Plan your upgrade to Drupal 10 now!](https://www.oliverdavies.uk/drupal-upgrade)
Working with Bytes in Python
Tags: python, beginners, programming
Published: 2024-02-17 23:27:23

In this post, we'll explore how to use bytes in Python.

Bytes are sequences of 8-bit integers, commonly used to represent binary data or text encoded in a specific character encoding. In Python, bytes can be created using the `bytes` or `bytearray` constructors, or by prefixing a string literal with the letter `b`:

```{python}
# Using the bytes constructor
data = bytes([72, 101, 108, 108, 111])
print(data)

# Output: b'Hello'
```

```{python}
# Using the bytearray constructor
data = bytearray([72, 101, 108, 108, 111])
print(data)

# Output: bytearray(b'Hello')
```

```{python}
# Using a bytes literal
data = b"Hello"
print(data)

# Output: b'Hello'
```

Bytes can be encoded and decoded using various character encodings, such as UTF-8 or ASCII. The `encode()` method can be used to encode a string into bytes using a specified encoding, and the `decode()` method can be used to decode bytes into a string using a specified encoding:

```{python}
# Encoding a string into bytes
text = "Hello, world!"
data = text.encode(encoding="utf-8")
print(data)

# Output: b'Hello, world!'
```

```{python}
# Decoding bytes into a string
data = b"Hello, world!"
text = data.decode(encoding="utf-8")
print(text)

# Output: Hello, world!
```

Python also provides the `base64` module for encoding and decoding binary data using Base64. The `b64encode()` function can be used to encode binary data into a Base64-encoded string, and the `b64decode()` function can be used to decode a Base64-encoded string into binary data:

```{python}
import base64

# Encoding binary data into a Base64-encoded string
data = b"Hello, world!"
encoded_data = base64.b64encode(s=data)
print(encoded_data)

# Output: b'SGVsbG8sIHdvcmxkIQ=='
```

```{python}
# Decoding a Base64-encoded string into binary data
encoded_data = b"SGVsbG8sIHdvcmxkIQ=="
data = base64.b64decode(s=encoded_data)
print(data)

# Output: b'Hello, world!'
```

To remove the `b` character from the output of a bytes object, you can decode it into a string using the `decode()` method:

```{python}
data = b"Hello, world!"
text = data.decode(encoding="utf-8")
print(text)

# Output: Hello, world!
```

In conclusion, bytes are a powerful tool for representing and manipulating binary data in Python. With the ability to encode and decode bytes using various character encodings, as well as encode and decode binary data using Base64, you'll be able to work with binary data in a wide variety of applications.
First steps with Go linters
Tags: go, development, linter, intro
Published: 2024-02-17 23:21:33

Linter is a static code analysis tool used to find programming errors, bugs, leaks of code standards, and even security flaws. These tools help developers because they save time by identifying issues before they happen in the production environment. It also keeps developers from unnecessarily checking if your colleague used the team standards.

Each programming language has their own tools: Ruby has [Rubocop](https://github.com/rubocop/rubocop), JS has [Eslint](https://eslint.org/), and Go can't be different. Searching at [Awesome Go](https://github.com/avelino/awesome-go?tab=readme-ov-file#code-analysis), a curated list of Go software, many tools can lint your code, but my favorite is [**golangci-lint**](https://github.com/golangci/golangci-lint/tree/master). It is an aggregator of linting tools, meaning you only need one tool for multiple linters in your project.

You can run it during your development lifecycle by having it on your machine. The way to go is to [install](https://golangci-lint.run/usage/install/#local-installation) the official distribution for your operation system. After installing, you are ready to go and can run `golangci-lint run` at your terminal. Easy peasy! If you wish, you can also setup your [favorite IDE](https://golangci-lint.run/usage/integrations/) to use it as default!

The coolest about this tool is being able to configure it using configuration files, being able to even choose which linting will be executed, what is the desired parallelism, rules for each linter, etc. To configure your project, create a `.golangci.yml` file and place your settings there. There is a [reference file](https://github.com/golangci/golangci-lint/blob/master/.golangci.reference.yml) from the developers that shows all the possibilities, but it is too complex. [@maratori](https://github.com/maratori) made an excellent curation of the best configuration, and you can find it [here](https://gist.github.com/maratori/47a4d00457a92aa426dbd48a18776322)!

Having a configuration file for your project, you can ensure that everyone has the same checkings as you during their development lifecycle. You can also use it within your CI, ensuring extra confidence when reviewing your colleagues' PR. If your team uses GitHub Actions, there is one [ready-to-go action](https://github.com/golangci/golangci-lint-action).

This is a small blog post presenting the [golangci-lint](https://golangci-lint.run/) tool and demonstrating how to use it. If you wish to know more about it, visit their [website](https://golangci-lint.run/).

You can also read it on my [personal blog](https://mfbmina.dev/en/posts/golangci-intro/
).
live streamoceania track championships cambridge 2024 live free broadcast **#5tht
Published: 2024-02-17 21:02:59

In 2024, the world of live streaming is set to offer an abundance of free entertainment, with an array of exciting features. Users can anticipate unlimited access to free live TV streams, providing a diverse range of content for viewers. Additionally, the year brings opportunities for free gift cards and random codes, making it an enticing period for those seeking complimentary rewards. The prospect of free gift cards adds a delightful element to the streaming experience, creating an avenue for users to enjoy more perks without any cost.

CLICK HERE GET FREE➤GIFT CARD https://t.co/rQJp9Pey5t

CLICK HERE GET FREE➤GIFT CARD https://t.co/rQJp9Pey5t

The allure of free card random codes further enhances the excitement, offering users unexpected surprises and bonuses. With these enticing incentives, 2024 promises a unique blend of entertainment and rewards for streaming enthusiasts. As technology continues to advance, the streaming landscape evolves, presenting viewers with innovative and cost-free options. Embrace the upcoming year with open arms, as unlimited live free streaming TV, free gift cards, free card random codes, and much more await, transforming the digital entertainment experience for all. Get ready for a year filled with endless entertainment and surprises, all at the convenience of your fingertips.
Infrastructure provisioning with AWS CloudFormation
Tags: cloudcomputing, aws, beginners, cloud
Published: 2024-02-17 22:54:27

## Introduction
Provisioning of infrastructure can be a tedious task when carried out on the AWS console, it has a lot of limitations when it comes to tasks like creating same infrastructure when a mistake was made, recreating the same infrastructure for another project or case of not following the exact same steps needed for the infrastructure creation on the console.
Situations like this and more are the reasons why infrastructure as code (IaC) was created, to give developers the ability to write out code for their infrastructure which can be used multiple times.

In this article, we would be looking at AWS very own infrastructure as code (IaC) tool called "CloudFormation", which is written in YAML language and creating a network infrastructure which consist of a Virtual Private Network (VPN), Subnet, Internet gateway, Elastic IP, NetGateway, Routing table.

The code used for this Demo can be found [here](https://github.com/get2bash/Cloudformation-v1/blob/main/Project-network.yml).

## Creating a CloudFormation stack

To create a CloudFormation stack, the following AWS command will be passed into the terminal.
- create-stack: Desired stack name.
- template-body: Name of the YAML file containing the IaC.
- parameters: Key value pairs that can be used as parameter in the YAML file.
- region: Desired region in which the infrastructure will be created.
```
aws cloudformation create-stack \
  --stack-name AppDeploy \
  --template-body file://network.yml \
  --parameters ParameterKey=EnvironmentName,ParameterValue=AppDeploy \
  --region=us-east-1
```

When it is successful, the following output will be displayed on the terminal, showing the stack ID.
![stack creation initiation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqpxx0l0b74247ejiy2q.png)

On your CloudFormation dashboard in AWS console, it will display the name given to the stack and a status of CREATE_IN_PROGRESS.

![stack and a status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvv9eg5xoi35afy65jqp.png)

Click the name of the stack, and check under the "resources" section to see the list of the resources indicated in the template that are being created.

![resources indicated in the template that are being created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8na1exs02sues1g6fxg.png)

After successful creation of the resources, you can visit the VPC dashboard to view the just created VPC.

![new VPC created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqhrkt96z0d3o66zi2gi.png)

We were able to look at how to use CloudFormation for infrastructure provisioning by creating a group of networking resources which was deployed as a stack on the CloudFormation dashboard.
Hiring Xcode and Android Studio developer
Tags: xcode, android, androidstudio
Published: 2024-02-17 22:52:23

Wizard's Toolkit is a low-code development library which makes Progressive web apps (PWA) quickly and easily.

## Hiring Xcode and Android Studio developer

Ideal candidate is up-to-date on Xcode and Android Studio development and plans to keep up-to-date with those environments.

This is a long-term position but will only be worthwhile if you are already working in these environments and keeping them current on your computer.  If you are, then this opportunity is perfect for you.  The process would then be simply:

- add App Icons that will be provided
- point to a specific web page
- compile and upload to Apple App Store and/or Google Play Store

## Compensation
$160 for Xcode compile and upload to Apple App Store
$160 for Android Studio compile and upload to Google Play Store

This is what I _think_ is fair and would be extremely attractive to buyers but I am open to discussion.  Once the price is agreed upon WTK will keep 20% with the remaining 80% going directly to the App developer.  In above example the offer to clients would be $200 for an App, of which developer receives $160.  If the client wanted to have any additional custom coding done that would be handled directly between you and them and whatever hourly rate you normally charge.

## History
I created Wizard's Toolkit in 2009 and have built websites for many clients.  They are responsive design and look great on phones as well as tablets and computers.  For a few clients we created mobile apps which accessed camera, uploaded photos, and made phone calls as well as the normal accessing of SQL databases, etc.
 
I hired an Xcode developer in September to make a simple app which just pointed to the login page.  It uses ReactNative and worked great.  The JavaScript in Wizard's Toolkit includes ReactNative code to natively trigger photos, manage uploads, etc.  Based on a JS variable setting determines whether pages utilize the ReactNative code for mobile app, or the HTML5 code for regular web access.  However now Xcode has upgraded and will no longer compile without ad nauseam changes.

## Summary
I'm looking for a long term relationship with a developer.  I'll pay them to create the first Xcode app and Android Studio app which will be uploaded to the app stores as prototype demos of what Wizard's Toolkit apps can do.  Then I will advertise to current and future Wizard's Toolkit customers that we have an in-house developer who will compile apps and upload them to the app stores for a flat fee.  Clients will have to be using Wizard's Toolkit and write their own code which they upload to their own web servers.  The App developer's only job will be adding the icons, setting the URL to point to their website, and recompiling.

If you are interested I can send you a link to the prototype page and the Xcode files which were completed in September to review.  See more details and contact me through:

[https://wizardstoolkit.com/hiring.htm](https://wizardstoolkit.com/hiring.htm)
[Golang] Criando App Desktop com Go e Fyne
Published: 2024-02-17 22:43:00

E aí galera, criei um vídeo com um passo a passo para criar aplicações Desktop com GOlang e o ToolKit Fyne.


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

[**YouTube Video**](https://youtu.be/VkqCIIPLY24)


Github: https://github.com/Brunoquindeler/fylogin
TooKit Fyne: https://fyne.io
Meu Linkedin: https://www.linkedin.com/in/brunofq/

#golang #gui #fyne
netscanner
Tags: network, ping, scan, rust
Published: 2024-02-17 22:00:19

Hi,
For purposes of teaching myself Rust, I made a TUI App for MacOS and Linux for scanning local networks.
I was pretty tired of writing over and over the same or a little bit different commands for nmap, iw, or other CLI apps that would show me what was happening on my local network, what devices were connected and what's my IP address.
I made a small App with the help of awesome library ratatui that would help me with the problem that I've been trying to solve for a few weeks.
I presenting you a `netscanner` - https://github.com/Chleba/netscanner
Tool that I hope made not just me but at least a few people their life a little bit easier. 
[netscanner](https://github.com/Chleba/netscanner)