teleren/devto huggingface dataset:
3D Rotating Cube Using HTML, CSS
Tags: freecodez, react, html, blog
Published: 2023-10-14 20:47:53

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

**3D Rotating Cube Using HTML, CSS**

![3D Rotating Cube Using HTML, CSS](https://res.cloudinary.com/freecodez/image/upload/v1697316467/images/jgtu8xu5kooy4ipzxt5r.webp)

For full source code visit : [https://freecodez.com/post/435doai](https://freecodez.com/post/435doai)


```
<!-- https://freecodez.com -->
<div class="scene">
    <div class="cube rotating">
        <div class="cube-face front"></div>
        <div class="cube-face inner-faces inner-face"></div>
        <div class="cube-face inner-faces inner-face2"></div>
        <div class="cube-face inner-faces inner-face3"></div>
        <div class="cube-face back"></div>
        <div class="cube-face left"></div>
        <div class="cube-face right"></div>
        <div class="cube-face top"></div>
        <div class="cube-face bottom"></div>
    </div>
</div>
```

Source Code : [https://freecodez.com/post/435doai](https://freecodez.com/post/435doai)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
Is it to late...
Tags: learning, programmers, newbie, mentalhealth
Published: 2023-10-14 20:37:17

Or am I on the right path finally? 

My name is Björn and I come from Sweden and I am a newbie here. The question in the head is probably me second guessing my self.

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

😃
I am a man in my later 40s. The last 8 years I have been home on pension from the state, after a car accident where my wife and one daughter died. 

During my whole life I have known that I didn't work as my peers, I couldn't cope with stuff as my friends. 
During 30 years I tried to be 'normal' and act "the way I should", but it ended with me burning out 2 -6 times /year.

When I was 45 I finally got my answers, I have ADHD 🧠 and Autism🥴. Now, when I finally have accepted my self I feel that it is time to get back on the horse. Earlier I have studied ux and behaviour design, but during the last 6 months I have getting to understand that I love to code.

Now the question above...

I really wanna get in to tech and code writing, innovating, data science and research/analytics. AM I TO OLD? 
,........!

Can you start over in tech, this late in life? And if so, is python and some c# a good road to start walking on.

I need to get in to the business and start making contacts, get inspired and keep pushing. So... give me your best tips, tricks and knowledge... 

Thank you so much for reading 📚  all this text...

Best regards 

Bjorn
How to structure your frontend code in ReactJS [with explanations]. 🚀
Tags: javascript, react, webdev, nextjs
Published: 2023-10-14 20:34:11

📁 my-react-app
├── 📄 read.md file
├── 📁 public
│ ├── 📄 index.html
│ ├── 📄 favicon.ico
│ ├── 📁 CSS
│ └── 📁 images
├── 📁 src
│ ├── 📄 index.js
│ ├── 📄 App.js
│ ├── 📁 components
│ │ ├── 📄 Header.js
│ │ ├── 📄 Footer.js
│ │ └── ...
│ ├── 📁 containers
│ │ ├── 📄 Home.js
│ │ ├── 📄 ProductList.js
│ │ └── ...
│ ├── 📁 context
│ │ ├── 📄 AuthContext.js
│ │ └── ...
│ ├── 📁 hooks
│ │ ├── 📄 useApi.js
│ │ ├── 📄 useForm.js
│ │ └── ...
│ ├── 📁 styles
│ │ ├── 📄 App.css
│ │ ├── 📄 Header.css
│ │ └── ...
│ ├── 📁 utils
│ │ ├── 📄 api.js
│ │ ├── 📄 helpers.js
│ │ └── ...
│ └── ...
├── 📁 tests
│ ├── 📁 unit
│ ├── 📁 integration
│ ├── 📁 e2e
│ └── ...
└── 📁 node_modules


## 𝗔𝗽𝗽.𝗷𝘀:
 The control center of your React app, where you set up and manage everything.

## 𝗽𝘂𝗯𝗹𝗶𝗰:
 A storage room for publicly accessible assets like HTML templates, images, and stylesheets.

## 𝘀𝗿𝗰:
 The core of your React app.
index.js: The entry point connecting your app to the DOM.

## 𝗔𝗽𝗽.𝗷𝘀:
 The main component defining the overall layout and routing.

## 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀:
 Reusable building blocks for your UI, like buttons and cards.

## 𝗰𝗼𝗻𝘁𝗮𝗶𝗻𝗲𝗿𝘀:
 Main views or pages of your app, such as Home or Profile.

## 𝗰𝗼𝗻𝘁𝗲𝘅𝘁:
 Central hubs for managing global app state, like user authentication.

## 𝗵𝗼𝗼𝗸𝘀:
 Custom tools for handling common functionality, like API requests or local state management.

## 𝘀𝘁𝘆𝗹𝗲𝘀:
 Definitions for CSS or SCSS to style your components.

## 𝘂𝘁𝗶𝗹𝘀:
 Handy tools for tasks like data validation and date formatting.

## 𝘁𝗲𝘀𝘁𝘀:
 Exams for your app to ensure it works correctly, including unit, integration, and e2e tests.

## 𝗻𝗼𝗱𝗲_𝗺𝗼𝗱𝘂𝗹𝗲𝘀:
 Your toolbox is filled with automatically installed dependencies for building your app.
10 game-changing shortcut links that can supercharge your online productivity. 💼🚀
Tags: productivity, webdev, coding, javascript
Published: 2023-10-14 20:25:31

[meet.new](meet.new) - Quickly launch a Google Meet for your virtual meetings.
[repo.new](repo.new) - Quickly create a new GitHub repository.
[notion.new](notion.new) - Quickly open a new Notion page for your ideas and projects.
[replit.new](replit.new) - Quickly open a new Replit workspace for coding experiments.
[doc.new](doc.new) - Quickly create documents with Google Docs.
[sheet.new](sheet.new) - Quickly handle data with Google Sheets.
[slide.new](slide.new) - Quickly craft engaging presentations using Google Slides.
[form.new](form.new) - Quickly build surveys and forms with Google Forms.
[canva.new](canva.new) - Quickly design eye-catching visuals with Canva.
[design.new](design.new) - Quickly collaborate on design projects using Figma.
These shortcuts can save you precious minutes every day! 🕒

Do you know any new shortcuts that aren't on this list? 😄
If so, drop them in the comments below! Let's share the knowledge and make life even easier for everyone. 🚀

Feel free to use this LinkedIn post to share these valuable shortcuts with your network. Engage with comments to foster a discussion and discover even more shortcuts from your connections! 🙌🔍
Is Butter Considered Dairy? The Ghee Perspective
Published: 2023-10-14 19:45:54


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

Indeed, [butter is a dairy product](https://milkio.co.nz/is-butter-considered-dairy/), churned from milk or cream. But when it comes to a healthier and lactose-friendly alternative, ghee, the clarified form of butter, takes center stage:

✨ What Makes Ghee Better?

Lactose Removal: During ghee production, lactose, the milk sugar responsible for dairy intolerance, is meticulously removed. This makes ghee more digestible for individuals with lactose sensitivities.

High Smoke Point: Ghee boasts a higher smoke point compared to regular butter. It's an excellent choice for high-heat cooking, frying, and sautéing without the risk of burning or producing harmful compounds.

For those exploring dairy-free or lactose-friendly options, ghee stands out as a versatile, healthier, and flavor-packed choice. Embrace the buttery essence without the dairy concerns! 🌟🥞
Day 7: Created a Catphoto Web-app, flexbox was the main idea
Tags: webdev, javascript, programming, html
Published: 2023-10-14 19:40:59

Greetings,

I am excited to discuss my web development journey with you today. Each day, I am fascinated by the increasing complexity of the field, and I find immense joy in learning new concepts regularly.

One such concept that has captured my attention is Flexbox, a layout model that allows for the creation of responsive web designs capable of adapting to various screen sizes. I recently utilized Flexbox to develop a cat photo website, ensuring its seamless responsiveness across all devices.

Flexbox offers a plethora of features, including but not limited to flex-direction and flex-wrap. I am pleased to report that I successfully tackled today's challenge and eagerly anticipate tomorrow's tasks.

Check out the link below: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijrulpgervhrasu2nx70.jpg)
15 Best Product Launch Videos Ever
Tags: webdev
Published: 2023-10-14 19:30:08



B2B video marketing can be stressful. When it comes to [product launch videos](https://www.contentbeta.com/best-product-launch-videos/), pinning down a strategy can possibly be even more time consuming and head scratching than creating the product itself.

But having videos in your B2B or SaaS product marketing can put you far ahead in the game than your competitors. Videos are the perfect way to
quickly provide your target audience with important information all the while keeping it entertaining.

Did you know that 73% more visitors who watch product videos will make a purchase? For your next product launch video, here are some excellent examples that you need to know about.
What is your favorite operating system?
Tags: discuss, developer, beginners, experience
Published: 2023-10-14 19:24:52

What is your all time favorite operating system and what makes it the best in your opinion?

Throughout the past few decades there have been several different computer operating systems built for specific purposes. From MacOS, Windows, and Linux to iOS, Android and everything in between.

If you're like me some of these stick out above all others and one will be, in your opinion, the best operating system of its time or maybe even of all time. Let's talk about your first time seeing it and what you used it for.
Stop Manually Uploading Your Site To The Hosting Service
Tags: ftp, webdev, githubactions, github
Published: 2023-10-14 19:00:00

So, you are done creating or editing a website and now you need to upload it to your hosting service. What is your next step?

Let me answer that: there was a time when I uploaded all my files to the shared hosting service using a FTP Client. I needed to open the client, login, search for the folder I wanted to upload in, and then drag all the website files into it.

If you identify yourself in this routine, I say those days are over!

Let's create, today, a very simple script to automate this boring work.

Just like in the [last week's post](https://dev.to/joaotextor/using-github-actions-to-publish-a-node-package-automatically-kgp), we'll be using GitHub Actions to perform this automation.

## 1. Setting up the environment

If your project is not yet on GitHub, let's start by publishing it.

Then create a YAML file in your project's repository under the .github/workflows directory. You can name the file something like `publish-ftp.yml`.

```
└── .github
    └── workflows
        └── publish-ftp.yml
```

This is going to be the content of your YAML file:

```yml
on:
  push:
    branches:
      - main
name: 🚀 Deploy website on push
jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
      - name: 🚚 Get latest code
        uses: actions/checkout@v3

      - name: 📂 Sync files
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: /path/to/your/project
          exclude: |
            README.md
            .editorconfig
            **/.git*/**
            **/.git*
            **/node_modules/**
```

## 2. Understanding the configuration

This YAML file is pretty straightforward: we start by defining that the workflow should run on each `push` to the repository and it will only run on `main` branch. Then, there's the usual code for configuring GitHub Actions and the configuration to use the FTP-Deploy-Action from SamKirkland.

Next, we will...

## 3. Set up the secrets

In here, we have 3 secret keys we must setup before committing and pushing to our remote repository.

Follow these steps:
a. Go to your GitHub repository.
b. Click on the "Settings" tab.
c. In the left sidebar, click on "Secrets and variables" and then "Actions".

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

github actions
d. Click the "New repository secret" button.
e. Name the secret "FTP_SERVER".
f. Paste the URL to your ftp server.
g. Click "Add secret" to save it.
h. Repeat with the other 2 keys, providing your credentials.

Also, don't forget to inform the exact path to your project inside your server on `server-dir` property.

Now that everything is set up correctly, it's time to commit your changes, push to your repository and wait for the ninja cats from GitHub to do their work :cat:!

See ya and until the next post!
Becoming an Efficient Programmer Without the 24/7 Hustle 🚀
Tags: productivity, discuss, programming, webdev
Published: 2023-10-14 18:38:26

Hey there, fellow code enthusiast! 🌟👋 If you've clicked on this article, you're probably looking for ways to level up your programming skills without chaining yourself to a desk all day. Good news! 🎉 Here are some tips to help you become an efficient programmer without feeling overwhelmed or burned out.

1. **Begin With Clarity** 📝: Before diving into coding, take a few minutes to understand your goal. Outline the features, draw a quick flowchart 📊, or jot down some pseudocode. A little planning can save you hours of debugging later on.

2. **Master Your Tools** 🛠: Just as a chef knows their knives 🔪, a programmer should be intimately familiar with their tools. Learn the shortcuts ⌨️, features, and capabilities of your IDE. The faster you navigate, the more efficient you'll be.

3. **Break Tasks into Chunks** ⏳: Coding for hours can be counterproductive. Try the Pomodoro Technique 🍅: work intensely for 25 minutes, then take a 5-minute break. This maintains focus while giving your brain some TLC.

4. **Stay Updated but Not Distracted** 🔄: Tech is ever-evolving. Dedicate time each week to learn about new tools 🧰 or updates. But remember, while staying updated is essential, jumping onto every trend can be distracting. Stay true to your goals.

5. **Invest in Continuous Learning** 📚: Set aside time for courses, tutorials, or coding challenges. Platforms like LeetCode or Codecademy can be fab places to practice. But balance is key. Don't forget to apply what you learn!

6. **Ask for Help** 🙋‍♂️🙋‍♀️: Stuck? Reach out. Whether it's a coworker, mentor, or friendly folks on Stack Overflow, many are ready to assist.

7. **Prioritize Self-care** 💆‍♀️💆‍♂️: One of the best things for programming efficiency? Self-care. Eat healthily 🥦, exercise 🏋️‍♂️, and sleep well 🌙. A refreshed mind is a productive one!

8. **Set Clear Boundaries** 🚫: It's essential to set work limits. Decide on your daily hours and stick to it. When it's time to log off, really log off—no sneaky peeks at code!

9. **Celebrate Small Wins** 🎊: Programming can sometimes feel like an uphill battle. Celebrating small victories—whether it's fixing a bug 🐛 or learning something new—keeps you motivated.

10. **Remember Your Why** ❤️: Amidst all the code, algorithms, and late-night debugging, remember why you started. Your passion will keep you driven.

Remember, becoming an efficient programmer isn't about working more; it's about working smarter. With these tips in mind, embrace the journey and happy coding! 🥳🎈👩‍💻👨‍💻
Mastering Data Modeling in PostgreSQL
Tags: postgres, database, opensource, apacheage
Published: 2023-10-14 18:33:02

**Introduction**
In addition to its outstanding performance, PostgreSQL is renowned for its adaptability when it comes to data modeling. Every efficient database system is built on effective data modeling. In this post, we'll examine the key PostgreSQL data modeling ideas and show you how to create a strong database structure.

**Understanding Data Modeling**
The process of establishing your database's structure, including its tables, columns, relationships, and constraints, is known as data modeling. Large dataset management is made more effective and efficient by using a well-designed data model.


**Key Components of Data Modeling**

**Tables:** A relational database's basic building elements are tables. You create tables in PostgreSQL to arrange and store your data. Every table in your application relates to a certain entity, such as "users," "products," or "orders."

**Columns:** The characteristics or fields of your tables are defined by their columns. A "users" table, for instance, might contain columns for "user_id," "username," and "email."

**Primary Keys:** Each row in a table is uniquely identified by a main key. It gives a reference for building relationships with other tables and guarantees data integrity.

**Foreign Keys:** Foreign keys connect tables together. They allow you to link data from one database to another by referencing the primary key of another table.

**Constraints:** Data in your tables must abide by certain criteria, which are defined by constraints. Unique constraints, check constraints, and not-null constraints are examples of common constraints.

**Designing Data Model:** 

**Identify Entities:** To start, list the key entities that make up your application. These may include customers, goods, orders, etc.

**Define Attributes:** List the columns or characteristics that characterize each entity. Define characteristics. Think about the attribute's data type, such as integers, text, or dates.

**Establish Relationships:** Identify the connections between your entities. To establish connections and guarantee data consistency, use foreign keys.

**Normalize Your Data:** To reduce redundancy, normalize your data model. To lessen data duplication, this procedure involves dividing huge tables into smaller, linked ones.

**Optimize Query Performance:** Consider the types of queries your application will run as you optimize for query performance. Create your data model to effectively accommodate the most popular query types.

**Conclusion**
In conclusion, Data modeling in PostgreSQL is a crucial step in creating a robust and efficient database system. By following best practices and considering your application's specific requirements, you can design a data model that ensures data accuracy, maintains consistency, and delivers high performance. Whether you're building a small application or a large-scale system, mastering data modeling is a key aspect of successful database management in PostgreSQL.
Website automation and what's next
Tags: website, aws, github, codebuild
Published: 2023-11-20 14:38:18

---
title: Website automation and what's next
published: true
date: 2023-10-14 18:21:56 UTC
tags: Website,AWS,Github,CodeBuild
canonical_url: 
---

# Summary

This website is build with Hexo, a static NodeJS blog framework. It allows a developer to define pages, posts, and all the elements using markdown format. Then the framework compiles them into static html, and the website is ready to be deployed on an accessible repository.

# The pipeline

## Website code - Source

The code is hosted on Github, and each commit on the master branch fires a run in the CodeDeploy pipeline hosted on AWS. The website can be tested locally using the hexo framework before pushing the code

## Build

The build runs on CodeBuild which: takes the code downloaded from github, compiles the website using the same commands as they were run locally, and prepares the artifact to be deployed

## Deploy

The deploy just takes the zipfile artifact and deploys it unzipped on the s3 bucket that is served on the internet using cloudfront. Up to now a manual refresh cache is requested, but it could be automated.

# Serving the content

In order to let cloudformation serve the content on S3, it is necessary to deploy a Lambda@edge that redirects the sub-pages

# What’s next

Here’s a (surely incomplete) list of what it should be done on the website:

- better documentation of the steps to try the website and deploy it
- automate on cloudformation the deploy of the lambda that redirects the index.html on sub-pages
- unify the dev and prod account in one account, allowing two different processes for dev and prod website and
  - keep pushes on the branches for deploying on dev website
  - use pushes on master to deploy on prod website
Deploying A Multi-container Application Using Azure Kubernetes Service
Published: 2023-10-14 18:16:01

This article is part of a series that delves into developing an application using both AWS and Azure. Please refer to [this article](https://dev.to/aybims/deploying-a-multi-container-application-using-aws-eks-5g8e) for more information on multi-container applications and the advantages of using them.

## Prerequisites for the project
To deploy this application using Azure Kubernetes Service (AKS), a few conditions need to be satisfied. You need to have:
1. An Azure Account
2. Azure CLI installed
3. A Github Account

## Implementation Of the Project

### Setting Up Your Environment
- You will need to clone the github repository containing the code in order to get started. You can find the starter files [here](https://github.com/AyBims/multi-container-deployment-k8s-azure)

- After successfully cloning the files, you will need to connect to your azure account using the `az login` command. 

### Creating Azure Resources
- Create an Azure resource group that will contain all your resources
![Resource Group Creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scciu3qj3lc91d9ra055.png)

- Create your Azure kubernetes service(AKS) cluster. Specify the resource group you created in the previous step as well as the number of nodes you want your container to have
![AKS container Creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cwkizspk8qb9c2stp8g.png)

- Connect your AKS cluster to kubectl
![connect AKS to kubectl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pemjhp1sf8smp0hkhufr.png)

- Get the node groups to confirm that your AKS cluster has been properly setup and configured with kubectl
![kubectl get nodes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5fxn0sm95ej4o9g7g32.png)

### Deploying Your Aplication
- Run `kubectl apply -f ./config` to apply the configuration files. Get the list of services and get the external IP address of the frontend service 
![Kubectl get services](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opy5qsus4yci13cs3uli.png)

- Visit the external Ip address to view the application
![Working Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zby3xnxkep383m7aul3b.png)


### A Word On Cleanup
It is advisable to terminate any resource that is not currently in use. You can always provision them again when you're ready.
* Delete the Services and pods that you have provisioned
![Delete deployments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkqblv5mnb98bktodmnl.png)


* Delete the AKS cluster

![Delete AKS Cluster](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kr8on10vbdwyogzclpcx.png)

* Finally, delete the Azure resource group
![Delete Resource Group](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbs6q6nsyag1c8wtu42a.png)

## Conclusion
This guide covered how to use the Azure Kubernetes service to deploy your applications. I hope that it has helped motivate you to get started using AKS. Happy deploying!