teleren/devto huggingface dataset:
The Admin Framework for Minimalist
Tags: admin, ruby, library, webdev
Published: 2022-11-01 14:03:24

---
title: The Admin Framework for Minimalist
published: true
description: 
tags: admin, ruby, library, webdev
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-01 13:40 +0000
---

[thoughtbot/administrate](https://github.com/thoughtbot/administrate) is a well-known framework for administrative screen, but it's not developer friendly。I implement my own template files for Administrate, so when new Administrate version released, **it is hard to update Administrate because template file is changed.**

But administrative screens are very easy to commonize, so I want to use a framework or library.

I done this.

[cc-kawakami/micro-admin: A minimal Administration dashboard parts.](https://github.com/cc-kawakami/micro-admin)

It can be used with Ruby on Rails or other frameworks because I implemented with [trailblazer/cells](https://github.com/trailblazer/cells).

You can define `ApplicationDashboard`.

```ruby
class ApplicationDashboard < MicroAdmin::Dashboard::Base
    # もし Rails を使うなら
    self.view_paths = [Rails.root.join("app", "views", "dashboards")]
end
```

And you extends it, define dashboard classes for models and define attributes to show each screens.

```ruby
class UserDashboard < ApplicationDashboard
    def index_attributes
        [:id, :name]
    end

    def show_attributes
        [:id, :name]
    end

    def form_attributes
        [:name]
    end

    def model_class
        User
    end
end
```

It is a point, MicroAdmin does not have template for form items. So you must write template files for input or select , etc.

```html:/app/views/dashboards/user_dashboard/new/name.erb
<input type="text" name="name" class="form-control">
```

The `value` variable will come to the edit template.

```html:/app/views/dashboards/user_dashboard/edit/name.erb
<input type="text" name="name" value="<%= value %>" class="form-control">
```

It can be rendered by calling the following.

```ruby
smith = User.new(id: 1, name: "Smith")
james = User.new(id: 1, name: "James")
dashboard = UserDashboard.new
```

```erb
<%= dashboard.index([smith, james]) %>
```

```erb
<%= dashboard.show(smith) %>
```

```erb
<%= dashboard.new(errors: ["Name is required!"]) %>
```

```erb
<%= dashboard.edit(id: 1, values: {name: "Smith"}, errors: []) %>
```

As an example, the edit method output HTML like this.

```html
<header class="navbar border-bottom py-4">
  <h2 class="m-0">Create TestModel</h2>
  <div>
    <a href="/admin/user" class="btn btn-primary">
      Back to index
    </a>
  </div>
</header>
<main class="p-4">
  <ul class="alert alert-danger">
    <li class="ml-3">Name is required</li>
  </ul>
  <form method="patch" action="/admin/user/1">
    <div class="mb-3">
      <label for="name" class="form-label">name</label>
      <input type="text" name="name" value="Smith" class="form-control"/>
    </div>
  </form>
</main>
```

**And you can style the screens by loading Bootstrap!**

The points:
- the html of form item is customizable
- not only Ruby on Rails

Thank you.
Amazon S3 Encryption
Tags: s3encryption, sses3, ssekms, ssec
Published: 2022-11-01 14:02:14

### Encryption:
While in-transit .ie. data traveling to and from Amazon S3-use
SSL/TLS and while at rest .ie. data stored on disks in Amazon S3 data centers - use SSE, CSE.

### Server Side Encryption options (SSE):
- SSE-S3: AWS S3 Managed keys. Each object encrypted with unique key. Cost effective.
- SSE-KMS: Customer Master Keys stored in AWS Key Management Service.
- SSE-C: Customer-Provided keys

### Client Side Encryption (CSE):
Encrypting data before sending it to Amazon S3.

Image by <a href="https://pixabay.com/users/markusspiske-670330/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=3655668">Markus Spiske</a> from <a href="https://pixabay.com//?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=3655668">Pixabay</a>
Amazon S3 Security
Tags: s3security, resourcepolicy, presignedurl, blockallpublicaccess
Published: 2022-11-01 14:00:12

Amazon S3 Bucket accessible only to user who created or account owner. How to grant access to other users?. Follow any one the methods below: 

### IAM:
Create user and manage access to buckets/objects.
Contains permission for other than S3 as well.

### Bucket policy (resource policy):
Using tags/prefixes configure permissions to all / set of objects. This must have principal. 

### Pre-signed URLs: 
Grant time-limited access with temp URLs

### ACL (resource policy): 
This makes individual object accessible to users. This is Legacy, use bucket policies/IAM policies.

### Block Public Access:
By default, any bucket created has "block all" public access.

### Amazon S3 Object Ownership
Object usually owned by the account or user that uploaded it ("Bucket owner"). If other AWS account uploads an object then only that account is the owner. To overcome this, use "Amazon S3 Object Ownership" option.("Bucket owner preferred").

Image by <a href="https://pixabay.com/users/jarmoluk-143740/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=428549">Michal Jarmoluk</a> from <a href="https://pixabay.com//?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=428549">Pixabay</a>
Learn HTML Styles - codemarch
Tags: webdev, html, programming, tutorial
Published: 2022-11-01 13:56:55

####   Original Tweet From  [@codemarch](https://twitter.com/codemarch)
{% embed https://twitter.com/codemarch/status/1586685670851895296 %}

Learn HTML Styles


The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

###The HTML Style Attribute

- Setting the style of an HTML element can be done with the style attribute.
- The HTML style attribute has the following syntax: ![Twitter Image 0](https://pbs.twimg.com/media/FgUAupdVIAAv8pT.jpg) 

###Background Colour

- The CSS background-color property defines the background color for an HTML element.

 Example ![Twitter Image 1](https://pbs.twimg.com/media/FgUI4C5VsAAeua2.jpg) 

###Text Color

- The CSS color property defines the text color for an HTML element:

 Example - ![Twitter Image 2](https://pbs.twimg.com/media/FgUJDXBVUAEGV9R.jpg) 

##Fonts
The CSS font-family property defines the font to be used for an HTML element:

Example - ![Twitter Image 3](https://pbs.twimg.com/media/FgUJUCaUcAA-C_d.jpg) 

That's all for the time being.
Please do the following if you enjoyed this thread:

1. Retweet the initial tweet.

2. Follow us and enable notifications: 
[@codemarch](https://twitter.com/codemarch)

Also, take a look at our HTML &amp; CSS Visual Treat! ebook Here:👇
 [https://codemarch.gumroad.com/l/hxazr](https://codemarch.gumroad.com/l/hxazr) 



Click [Here](https://www.knowledge-twitter.com/?utm_source=dev.to)  For More Posts Like This [https://www.knowledge-twitter.com](https://www.knowledge-twitter.com/?utm_source=dev.to)
Websites you need to start an online business in 2023- heyeaslo
Tags: business, productivity
Published: 2022-11-01 13:51:57

####   Original Tweet From  [@heyeaslo](https://twitter.com/heyeaslo)
{% embed https://twitter.com/heyeaslo/status/1586907358273294337 %}
10 websites for starting an online business in 2023: 

###1|. Pitch

Create beautiful presentations.

 [https://pitch.com/](https://pitch.com/) 

###2|. JasperAI

Generate marketing copy in seconds.

 [https://www.jasper.ai/](https://www.jasper.ai/) 

###3|. Circle

Manage your course &amp; community.

 [https://circle.so/](https://circle.so/) 

###4|. Tally

Create forms &amp; surveys.

 [https://tally.so/](https://tally.so/) 

###5|. Make

Automate your business.

 [https://www.make.com/en](https://www.make.com/en)

AdSpace Here!! 

###6|. Typedream

Build landing pages in minutes.

 [https://typedream.com/](https://typedream.com/) 

###7|. ConvertKit

Send marketing &amp; sales email.

 [https://convertkit.com](https://convertkit.com) 

###8|. Canva

Create designs from professional templates.

 [https://canva.com](https://canva.com) 

AdSpace Here!!

###9|. Gumroad

Set-up product pages in minutes.

 [https://gumroad.com](https://gumroad.com) 

###10|. Notion

Hub for projects, content calendar, and CRM.

 [https://www.notion.so](https://www.notion.so) 

Bonus: TweetHunter

All-in-one platform to help you grow your Twitter audience.

Try it today for free:
 [http://tweethunter.io/?via=jason-chin](http://tweethunter.io/?via=jason-chin) #aff 

That's a wrap!

If you enjoyed this thread:

1. Follow me [@heyeaslo](https://twitter.com/heyeaslo) for more of these
2. RT the tweet below to share this thread with your audience  [https://twitter.com/heyeaslo/status/1586907358273294337](https://twitter.com/heyeaslo/status/1586907358273294337) 



Click [Here](https://www.knowledge-twitter.com/?utm_source=dev.to)  For More Posts Like This [https://www.knowledge-twitter.com](https://www.knowledge-twitter.com/?utm_source=dev.to)
Friend Class
Tags: cpp, beginners, tutorial
Published: 2022-11-01 13:49:58

Friend Class A friend class can access private and protected members of other class in which it is declared as friend. It is sometimes useful to allow a particular class to access private members of other class. For example, a LinkedList class may be allowed to access private members of Node. 

A friend class can access both private and protected members of the class in which it has been declared as friend.




```
#include <iostream>
using namespace std;

 
 
 
class Bestfriend1 
{

 
public:
int age;

private:
string purse;

 
public:
 
Bestfriend1 () 
  {
    
age = 14;
    
purse = "pink";
  
} 
 
void demo () 
  {
    
cout << "I am " << age << " years old\n";
    
cout << "I have " << purse <<
      " purse and I don't share it with anyone except my friend\n";
  
} 
friend class Bestfriend2;
  
//bestfriend2 is its friend
//it cant do anything except being 
//a frnd here, as it is declared and defined before its frnd //class
};


 
class Bestfriend2 
{

 
public:
int age;

private:
string dress;

 
public:
Bestfriend2 () 
  {
    
age = 14;
    
dress = "lilac";
  
} 
void show (Bestfriend1 & bf) 
  {
    
cout << "I am " << age << " years old\n";
    
cout << "I have " << bf.purse << " purse and " << dress << " dress\n";
  
} 
friend class Bestfriend1;
  
//it can access members of bestfriend1

};


 
class Stranger
{

public:
int age;
  
string dress;
  
string purse;
  
 
Stranger ()
  {
    
age = 14;
    
dress = "purple";
    
purse = "blue";
  
} 
 
void show ()
  {
    
cout << "I am " << age << " years old\n";
    
cout << "I have " << purse << " purse and " << dress << " dress\n";

} 
 
};


 
 
int
main () 
{
  
Bestfriend1 bf1;
  
bf1.demo ();
  
Bestfriend2 bf2;
  
bf2.show (bf1);
  
 
Stranger s1;
  
s1.show ();
  
return 0;

}



```

### Object

```
I am 14 years old
I have pink purse and I don't share it with anyone except my friend
I am 14 years old
I have pink purse and lilac dress
I am 14 years old
I have blue purse and purple dress

```
Debugging code in C language with a Makefile on MAC
Tags: c, debug, makefile, code
Published: 2022-11-01 13:38:04

**Debugging** its code remains a fundamental step in solving bugs. Some programs seem less bulky in terms of a line of code and don't really require the need for debugging. On the other hand, others contain several hundred lines of code, and it becomes almost impossible to fix bugs without debugging.

In this tutorial I will explain how to debug in C with a configured makefile.

The debugging option is by default integrated in visual studio,
In C to debug we need to install an extension that you will find on this [link](https://code.visualstudio.com/docs/languages/cpp).

Once the extension is installed it is now time to start the configuration.

**Create a .vscode folder**
**In this folder create a launch.json file in which you will put the code below**

```
{
    “version”: “0.2.0”,
    “configurations”: [
        {
            “name”: “C/C++: clang++ build and debug active file”,
            “type”: “cppdbg”,
            “request”: “launch”,
            “program”: “${workspaceFolder}/[execName]”,
            “args”: [arg1, arg2],
            “stopAtEntry”: true,
            “cwd”: “${workspaceFolder}“,
            “environment”: [],
            “externalConsole”: false,
            “MIMode”: “lldb”,
            “preLaunchTask”: “make re”
        }
    ]
}
```
In summary, this config allows us to set up our debugger by giving it a name, the program to run, the arguments to pass etc...
The most **important** things to notice and modify are the name of your program and the various arguments you pass when running your program.

**NB:** The list of arguments must be in comma separated strings.

**Only one last step**
Have you noticed that the last line of our launch.json file contains an attribute **“preLaunchTask”: “make re”**, this line will be useful in the step below.

Let's create another **tasks.json** file in the same .vscode folder located at the root of your project, in this folder we will define some tasks to execute before launching our debugger.
A simplified version of this file should look like this.
```
{
    “version”: “2.0.0”,
    task:
    [
        {
            “label”: “make re”,
            “type”: “shell”,
            “command”: “make”,
            “args”: [“re”]
        }
    ]
}
```
**NB:** The **label** and the **preLaunchTask** must be identical to create the link.

To summarize this config allows us to launch our command **make** followed by an argument **re** which means "rebuild" so that the new instance of debugger contains the latest changes.

**NB:** For breakpoints to work you must include the #-g# attribute among the compilation flags of your project, for example: >gcc -g -wall -wextra etc...
otherwise all the work done so far will be in vain.

We're all good, all you have to do is click on the third tab on the left of your editor to launch your debugger.

![debugger image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1rwoc4qruwmlp2r5o1p.png)

Happy coding to you, and see you next week for a new article.
Let's Build a Responsive Car Website Using HTML CSS JavaScript
Tags: css, javascript, webdev, tutorial
Published: 2022-11-01 13:26:50

{% youtube DcTLSTbDXww%}

Let's Build a Responsive Car Website Using HTML CSS JavaScript

This video will show you how to build a creative agency website using html css javascript

[Github Repo](https://github.com/codewithsadee/pixology)

---

🔗 Essential links
-----------------------------
[Download the starter file to practice](https://drive.google.com/file/d/10ssXyyO4zFiGLs6AM_DtoHzYNnS4caGm/view?usp=sharing)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
5:25 - File structure
5:54 - Project initial
12:08 - Header
27:10 - Hero section
42:44 - Service section
56:14 - Feature section
1:01:44 - Project section
1:12:08 - Newsletter section
1:17:15 - Blog section
1:27:19 - Footer
1:41:23 - Media queries

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)
Some cool GitHub features to enhance your development experience
Tags: github, opensource, tutorial, beginners
Published: 2022-11-01 13:21:10

Hello everyone, [Leonardo](https://twitter.com/Balastrong) here!

Today we talk about GitHub and some cool features it offers to improve the context and the communication between developers, through Issues and Pull Requests.

As usual, before diving into the article, let me share the video version you can find on my [YouTube channel](https://www.youtube.com/c/DevLeonardo):

{% embed https://youtu.be/G6x-gUD409U %}

These are some of the features shown in the video:

### Code suggestions
With a special syntax, you can suggest code changes when commenting a Pull Request.

Everyone with write access to the repo will see a "commit" button to immediately commit the suggested change.
![Code suggestions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgldtjmc4ycpgqdckxg0.png)

---

### Render labels
Yes, labels can be nicely rendered as well, here's an example:
![Rendered labels](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rg7iqzr90dxolrbtgzwi.png)

---

### Show details of linked issues
When you link an issue with `#` followed by the issue number, a link is rendered. However, if you do so in a list, the issue (or PR) is expanded and the name and the status are displayed as well.

By the way, you can mention issues with `GH-[IssueNumber]` as well!

![Details of linked issues](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2mz0t6cpmxoslwncfw4.png)

---

### Close issues automatically when PR is merged
Mentioning an issue in a PR, with some special keywords (for example `closes #3` or `fixes #3`), will enable this cool feature. As soon as the PR is merged, the issue will be marked as closed.

If this is activated, you can see it in the bottom right corner of the Pull Request.

![Closing issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o4mlbn56pspreqlw9fx.png)

---

### Marking an issue as duplicate
If you type `Duplicate of` and mention an issue, that one will be marked as duplicate and it is shown right below your comment.

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

---

If you want to see all of these in action plus some additional ones, you can watch them in this 3 minutes video!

If you want to support me, go watch it and leave a like ❤️

{% embed https://youtu.be/G6x-gUD409U %}

---

**Do you know of some other cool features? Let me know in the comments!**

---

Thanks for reading this article, I hope you found it interesting!

Do you like my content? You might consider subscribing to my YouTube channel!
You can find it here:
[![YouTube](https://img.shields.io/badge/YouTube:%20Dev%20Leonardo-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/channel/UC-KqnO3ez7vF-kyIQ_22rdA?sub_confirmation=1)

Feel free to follow me to get notified when new articles are out ;)
{% embed https://dev.to/balastrong %}
Bye for now VSCodeTips community!
Tags: vscodetips, vscode, community
Published: 2022-11-01 13:17:32

This short post mentions that community.vscodetips.com went offline on November 1st, 2022.

{% embed https://twitter.com/vscodetips/status/1587425527807238147 %}

I'm a big fan of VS Code, hence the community I created, but it was no longer maintainable for me for a couple reasons:

* Engagement – Engagement on the site was pretty low. Although we had almost 1300 members on the site, no one was really posting content. Aside from myself, I believe there have been one or maybe two articles published by members since April 2022.

* Managing the community – I work full-time as an engineer, so my time is limited. There were only so many hours I could dedicate to building the community. TL;DR, the number of hours was really low.

I want to thank the folks who helped me moderate things. Shoutout to @thomasbnt and @michaeljolley and, I think, another community member. Apologies, but your name has escaped me at the moment.

The cost was not a factor. I paid about 25$ CAD a month for my Digital Ocean droplet (including backup).

Thanks to all that were part of the community. I encourage you to continue to post about VS Code, but instead of on our now defunct community, I encourage you to post on dev.to or wherever brings you joy.

👋🏻
Cálculo do Seno, Cosseno e Tangente em Python
Tags: python, beginners, tutorial, braziliandevs
Published: 2022-11-01 13:08:42

Vamos calcular o seno, cosseno e tangente em Python. Não é uma tarefa difícil, mas requer atenção para alguns detalhes.

Antes de qualquer coisa, precisamos importar a biblioteca `math`:

```py
import math
```
Em seguida, precisamos ler o valor do ângulo que o usuário irá inserir. Mas uma observação importante, o cálculo requer o valor do ângulo em radianos.

Logo, basta realizar essa conversão de ângulo para radianos. Como? Usando o método `radians()` da biblioteca `math`:

```py
ang = int(input('Ângulo: '))
rad = math.radians(ang)
```
Com o valor do ângulo em radianos, podemos agora, calcular os valores do seno, cosseno e tangente. Usaremos os métodos `sin()`, `cos()` e `tan()` da biblioteca `math()`:

```py
seno = math.sin(rad)
cosseno = math.cos(rad)
tangente = math.tan(rad)
```
Introduction to Concurrency in Go
Tags: go, beginners, programming, concurrency
Published: 2022-11-01 13:07:22

One of the best Go features is how easy we can use concurrency. The language gives us `goroutines`, which are like lightweight threads managed by the Go runtime. It help us to run several functions at the same instant and is very helpful if you wish to improve the performance of your application.

Using this feature is easy as adding the `go` keyword before any function call. This will make the function run concurrently. To make it simpler, let's show you the code. Here I've written the `SleepSort` algorithm, which uses the `sleep` method to sort each element in its place.

```go
package main

import (
	"fmt"
	"time"
)

func main() {
	arr := []int{3, 1, 5, 6, 9, 2, 0}

	fmt.Println("Sorting", arr)
	for _, v := range arr {
		go Sort(v)
	}
}

func Sort(x int) {
	time.Sleep(time.Duration(x) * time.Second)
	fmt.Printf("%d ", x)
}
```

In this code, we have the `sort` function which sleeps for x seconds and prints the value. When every function finishes its execution, we will have the array in the correct order, right? Unfortunately, the answer is no!


![Response at the beggining](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5lxza9xm8x7f5zjfgu8.png)

As the functions run concurrent to the main process, we only see what the main has to return. One way to fix this issue is to make all processes talk somehow with the main process. For that, Go give us the `channel` concept which is like a pipe/conduit responsible for send data between processes. Let's update our code to use this feature!

```go
package main

import (
	"fmt"
	"time"
)

func main() {
	arr := []int{3, 1, 5, 6, 9, 2, 0}
	c := make(chan int)

	fmt.Println("Sorting", arr)
	for _, v := range arr {
		go sort(v, c)
	}

	fmt.Println("Sorted:")
	for range arr {
		x := <-c
		fmt.Printf("%d ", x)
	}
}

func sort(x int, c chan int) {
	time.Sleep(time.Duration(x) * time.Second)
	c <- x
}
```

And finally, we have a response:


![Response after introducing channels](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3i1ne5hhsdyul34eoh9.png)

We can notice that `channels` have a special operator `<-`. To understand how it works we have to think about it as an arrow. The data will always flow to where the arrow is pointing out. For example, inside the function `sort`, data is sent through the channel by using `c <- x` and the main process receives it and assigns to a new variable by using `x := <-c`.

It is also important to say that we had to change the `sort` function signature was updated to accept a `chan`. It is initialized in the main function and then given to the `goroutines`.

As we can see, starting using concurrency in Go is quite simple. The language also supports more advanced options but we can talk about it in the next blog post. If you like the subject, you can also find me on **[Twitter](https://twitter.com/mfbmina)**, **[GitHub](https://github.com/mfbmina)**, or **[LinkedIn](https://www.linkedin.com/in/mfbmina/).** You can also find this text in **[Portuguese](https://dev.to/mfbmina/introducao-a-concorrencia-em-go-1c0g)**.