teleren/devto huggingface dataset:
Deploy Sendy on AWS EC2 with Apache in Ubuntu
Tags: php, aws, ubuntu, apache
Published: 2024-05-12 02:41:15

To begin, you'll need an AWS account and lunch EC2 instance with your specific requirement. I have used AWS EC2 t4g.small instance with Ubuntu OS, as it provides a balance between computing power and cost-efficiency, making it ideal for hosting applications like Sendy.

**Installing Necessary Software**
Connect to your instance via SSH, proceed with the environment setup. Update your server's package index and install the necessary software packages:

```
sudo apt update
sudo apt install mysql-server apache2
sudo apt install php-fpm php-mysql php-xml php-mbstring
```
These commands install MySQL for database management, Apache2 for serving your application, and PHP along with essential extensions that Sendy requires to function properly.

**Configuring MySQL**
create a database and user for Sendy

```
sudo mysql
```
```
CREATE DATABASE sendy_db CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
CREATE USER 'sendy_user'@'localhost' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON sendy_db.* TO 'sendy_user'@'localhost';
FLUSH PRIVILEGES;
EXIT;
```
Replace, sendy_db with your actual database name, sendy_user with your actual database user and password with your password

**Uploading and Configuring Sendy**
Upload Sendy's files to your server, typically in the **/var/www/sendy** directory.
Update **/var/www/sendy/includes/config.php** for configuring database and domain in sendy
```
sudo vi /var/www/sendy/includes/config.php
```

```
define('APP_PATH', 'https://domain_name.com'); // Domain
$dbHost = ''; //MySQL Hostname
$dbUser = ''; //MySQL Username
$dbPass = ''; //MySQL Password
$dbName = ''; //MySQL Database Name
```

**Configuring Apache**
Set up a virtual host for Sendy in Apache:

```
sudo vi /etc/apache2/sites-available/sendy.conf
```
```
<VirtualHost *:80>
    ServerName domain_name.com   // Use Sendy Hosting Domain
    DocumentRoot /var/www/sendy

    <Directory /var/www/sendy>
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
```
Enable the site and necessary modules, then restart Apache and PHP to apply the changes:
```
sudo a2ensite sendy.conf
sudo a2enmod rewrite
sudo systemctl restart apache2
sudo systemctl restart php8.1-fpm
```

**Securing Your Server with SSL**
Install Certbot and set up an SSL certificate to secure your Sendy installation:

```
sudo apt-get install certbot python3-certbot-apache
sudo certbot --apache
```

**Installing Sendy**
Navigate to https://domain_name.com/install.php to run the Sendy installer. Follow the on-screen instructions to complete the setup.

**Enable Cronjob**
Set up a Cron job to handle scheduled tasks:

```
sudo crontab -u www-data -e
```
Add Line below
```
*/5 * * * * /usr/bin/curl -s http://domain_name/scheduled.php > /dev/null 2>&1
```

```
sudo systemctl reload cron
```

> Please note that Sendy is not officially tested on Nginx. Sendy is only officially supported and tested on Apache.
Gallery Spaces - Create your own gallery and share
Tags: netlifychallenge, devchallenge, webdev, javascript
Published: 2024-05-12 01:22:35

*This is a submission for the [Netlify Dynamic Site Challenge](https://dev.to/challenges/netlify): Visual Feast.*

*This is a submission for the [Netlify Dynamic Site Challenge](https://dev.to/challenges/netlify): Build with Blobs.*

## What I Built
I've developed a gallery platform that empowers users to create their own galleries, manage them (uploading and deleting images), share their work with others, and customize images before downloading.

Key features include:

- Gallery: Leveraging Netlify Image CDN to showcase our image galleries.
- Image Customization: Utilizing Netlify Image CDN for on-the-fly image customization prior to download.
- Image Uploader System: Employing Netlify Blobs to store user-uploaded images.
- Authentication System: Utilizing Netlify Blobs to store user authentication data.

## Demo

[Demo Link](https://gallery-spaces.netlify.app/)
[User Gallery Example](https://gallery-spaces.netlify.app/gallery/view/christophergonzalez)

Go ahead and create your own gallery and share to everyone too 😸

Some pictures

![App gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3l7vpw5bz4q1t78atwib.gif)

![App homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmppv969is567p92d2pl.png)

![Gallery viewer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdy9lw0l3zf3g9u1u56s.png)

![Image gallery viewer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnsul3lhjd8nlsnfi7kk.png)

## Platform Primitives

To submit my entry, I utilized **Netlify Image CDN** and **Netlify Blobs** Platform Primitives.

For enhanced user image experiences, Netlify Image CDN proved invaluable, enabling flexible image customization:

- All Gallery Images [(Example Gallery)](https://gallery-spaces.netlify.app/gallery/view/christophergonzalez) are loaded using Netlify Image CDN.
- Gallery Image customization (such as clicking on an image) is facilitated by Netlify Image CDN, allowing for image transformations before download.
- Throughout the website, Netlify Image CDN, integrated with NuxtImg, ensures optimized image customization.

To store datas, such as authentication, images, and gallery data, I employed Netlify Blobs with separate stores for authentication, gallery, and images, each dedicated to user data:

- The authentication system, including user credentials and JWT tokens, is stored with Netlify Blobs, utilizing mainly directories.
- Image uploads, including profile pictures and gallery images, leverage Netlify Blobs, eliminating the need for additional file storage systems.
- User gallery data is organized and stored using directories provided by Netlify Blobs, ensuring efficient data management.

If you're curious to delve deeper, the submission code is open source on my GitHub. Feel free to check it out!

[Github Repository](https://github.com/gabrielsenadev/gallery-spaces)-
What is NetQuick Social Network?
Tags: netquick, networking, socialmedia
Published: 2024-05-12 00:49:23

[NetQuick](https://netquick.site) – the revolutionary social network shaping the future of digital interaction, founded by Lê Phạm Quốc Khoa and officially launched on May 10th, 2024. As a trailblazer in the social media landscape, NetQuick transcends conventional networking by harnessing the power of advanced technology to create a seamless and engaging user experience.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1m0vlr4nejhamavipjv.png)

Personalized User Experience: At the heart of NetQuick lies a deeply personalized user experience designed to adapt to individual preferences and behaviors. The platform utilizes sophisticated algorithms to curate content, connect users with like-minded peers, and recommend activities aligned with their interests.
Dynamic Content Sharing: NetQuick redefines content sharing with its dynamic interface, allowing for the effortless dissemination of multimedia content, from high-definition images and videos to articles and blogs. The platform supports real-time interactions, ensuring users are always part of the conversation.
Privacy First: Recognizing the importance of privacy in the digital age, NetQuick offers robust privacy controls and encrypted communication channels. Users have complete authority over who sees their information and how their data is utilized across the network.
Business Integration: Businesses find a haven in NetQuick, benefiting from the platform's targeted marketing features and analytics tools. Companies can engage with their audience, gain insights into consumer behavior, and optimize their online strategies for maximum impact.
Community Building: NetQuick excels in fostering a sense of community among users. With features designed to support groups and event coordination, the platform encourages collaboration, shared experiences, and brings together individuals from all walks of life.
 
As an emergent force in social media, NetQuick is steadfastly committed to innovating and providing a premier online environment for its global user base. Its dedication to enhancing connectivity and community on the web marks the inception of a new era in social networking.
Advanced Techniques in Deep Learning with TensorFlow
Tags: webdev, javascript, beginners, programming
Published: 2024-05-12 00:34:15

## Introduction

Deep learning has gained significant attention in recent years for its ability to process large amounts of data and make accurate predictions. TensorFlow, developed by Google, is a popular deep learning platform that allows researchers and developers to implement complex neural networks. In this article, we will explore the advanced techniques in deep learning with TensorFlow.

## Advantages of TensorFlow

1. **Flexibility and Scalability:** TensorFlow offers a flexible and scalable platform for building neural networks. It supports multiple programming languages and can be easily deployed on different platforms.

2. **Distributed Computing:** TensorFlow has a distributed computing framework that allows scaling to multiple machines, making it suitable for handling massive datasets.

3. **Easy Debugging:** TensorFlow provides a debugger that helps in troubleshooting errors and analyzing the performance of the neural network.

## Disadvantages of TensorFlow

1. **Steep Learning Curve:** TensorFlow has a steep learning curve, and beginners may find it challenging to use. It requires a solid understanding of machine learning concepts and programming skills.

2. **Limited Visualization Tools:** TensorFlow lacks advanced visualization tools, making it challenging to interpret the results of the neural network accurately.

## Key Features of TensorFlow

1. **TensorFlow Hub:** It is a repository that provides pre-trained models and parameters, allowing users to create powerful and accurate models quickly.

    ```python
    import tensorflow_hub as hub

    # Load a pre-trained model from TensorFlow Hub
    model = hub.load("https://tfhub.dev/google/imagenet/inception_v3/feature_vector/4")
    ```

2. **TensorBoard:** This feature of TensorFlow enables users to visualize the training process, making it easy to monitor and debug the neural network.

    ```python
    # Setup TensorBoard in TensorFlow
    import tensorflow as tf
    tensorboard_callback = tf.keras.callbacks.TensorBoard(log_dir="./logs")

    # Start training and use the TensorBoard callback
    model.fit(x_train, y_train, epochs=5, callbacks=[tensorboard_callback])
    ```

## Conclusion

Advanced techniques in deep learning with TensorFlow offer numerous advantages such as flexibility, scalability, and ease of debugging. However, it also has a steep learning curve and limited visualization tools. Overall, TensorFlow remains an excellent platform for implementing complex neural networks and continues to drive innovation in the field of deep learning.
Progress Update: Moving Forward with a New Functionality Implemented
Tags: update, movingforward, gettinginthegroove, motivated
Published: 2024-05-12 00:07:10



Hey everyone, Juan Jose here with a much-needed update on my TechTribe Pro project. I'm excited to share some positive developments and progress with you all!

Slow but Steady Progress:
Over the past few weeks, I've been steadily chipping away at TechTribe Pro, despite some initial setbacks and challenges. While progress may have been slower than anticipated, I'm proud of the strides I've made and the lessons I've learned along the way. Sometimes, the journey to success is more of a marathon than a sprint, and I'm committed to staying the course.

New Functionality Implemented:
I'm thrilled to announce that I've successfully implemented a new functionality within the project! 🎉 After countless hours of coding, testing, and debugging, I've managed to integrate login functions for users. This marks a significant milestone in the development of TechTribe Pro and brings me one step closer to realizing my vision for the project.

Celebrating Small Victories:
While it's easy to get caught up in the grand vision of the project, I've learned to appreciate the importance of celebrating small victories along the way. Each completed functionality, no matter how small, represents progress and brings me closer to my ultimate goal. Today, I'm taking a moment to acknowledge and celebrate this achievement, no matter how humble it may seem.

Looking Ahead:
As I reflect on the journey so far, I'm filled with a sense of gratitude and determination. I know that there are still many challenges to overcome and features to implement, but I'm more motivated than ever to keep pushing forward. With your continued support and encouragement, I'm confident that TechTribe Pro will continue to evolve and grow into something truly remarkable.

Thank you all for being part of this journey with me. Your feedback, encouragement, and camaraderie mean the world to me, and I'm grateful to have such an amazing community to share this experience with. Here's to many more victories, big and small, on the road ahead!
Modern Python REPL in Emacs using VTerm
Published: 2024-05-12 00:18:12

---
title: Modern Python REPL in Emacs using VTerm
published: true
date: 2024-05-11 23:47:00 UTC
tags: 
canonical_url: https://protagon.space/2024/05/modern-python-repl-in-emacs-using-vterm/
---

As alluded to in [Poetry2Nix Development Flake with Matplotlib GTK Support](https://dev.to/hiro98/poetry2nix-development-flake-with-matplotlib-gtk-support-5521), I’m currently in the process of getting my “new” python workflow up to speed. My second problem, after dependency and environment management, was that fancy REPLs like [ipython](https://ipython.org/) or [ptpython](https://github.com/prompt-toolkit/ptpython.git) don’t jazz well with the standard `comint` based inferior python repl that comes with `python-mode`. One can basically only run ipython with the `--simple-prompt` flag which removes features like syntax-highlighting and auto-completion. Especially annoying is, that only the `tkinter` backend for `matplotlib` works in this mode.

The package `elpy` comes with some improvements, especially when it comes to sending part of a buffer to the repl, but it comes with all sorts of baggage that interfere with my emacs setup.

From my jolly [Julia](https://julialang.org/) days I’m used to [julia-vterm](https://github.com/shg/julia-vterm.el). This emacs package runs a Julia REPL using a full terminal emulator ([emacs-libvterm](https://github.com/akermu/emacs-libvterm)). So in the pursuit of a nice hack, I `M-x replace-string`’d the word `julia`with `python` and gave it a shot. Remarkably, the whole thing just worked without much tweaking and you can enjoy the result by checking out the [GitHub repo](https://github.com/vale981/python-vterm.el).

The idea of extending the original `julia-vterm` package to support python as well is not without elegance. However, the code base is not too large and – owing to the differing sensibilities of the julia and python communities – the feature-set is likely to diverge in the future.

![Figure 1: And this is the result!](https://protagon.space/ox-hugo/2024-05-11_20-12-52_screenshot.png)
_Figure 1: And this is the result!_
A litle bit CSS & Variable Fonts Magic
Tags: css, webdev, tutorial, codepen
Published: 2024-05-11 22:58:34

{% embed https://www.youtube.com/watch?v=K7R8lOO-JAE %}

**This demo scene is made with just one div element and CSS**

The first thing you need is variable fonts. In short, these are fonts that can be additionally changed using preset parameters. More details can be found at the [link](https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts). And some font examples [here](https://v-fonts.com/character-sets/dingbats-emoji). 

**Such fonts, for example, [support animation](https://variablefonts.typenetwork.com/examples/animation/bicycle)!!!**

The technology itself is old (2017) and is [supported by all browsers](https://caniuse.com/variable-fonts). (even in iphone, yes safari you are now a new IE, deal with it)

Take [Wavefont](https://fonts.google.com/specimen/Wavefont) and connect

```css
@font-face {
  font-family: "Wavefont";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://fonts.gstatic.com/l/font?kit=L0xjDF00m0cP6hefyOCpRdycFsGxSrqDyx4fE4tvQYb4bdT9BMpjKNNBaEg89a5MNuLeF1NOtSWF0DO3TeLnas9-UFAV50jD2MVCwuLxW9QGD-RdzQg4xEMmac-c01PLIiWA_utv7FG1lphvBzyKrk89iF8hOHu7BOJlKCbYDWByr1XoHkD2hr8Li65ZySOVwJ-cbMABOnalrQ7Bl8VCYtB0ldGbZzqVPP3KwTr6XOyeraWl0nxmzPJ9bj1Mqj5r6amJuhWSl_UCHsPRfaQPQxsFkuD_FShKP7gQwHNe_6vjYiTWhniwb4AmPdJoPUgKf57EEfSDBa_DbJhfs6hA-Uop13_HQizh08PnIVufXstx3mdRwN2YNTxv0mlgulcxePwhPGp1ENYSOdHCj_FuvB0xmye7ebYXUHoyE_p3akl41OuwMyxvCWnHSlC9MRkVLHdUaz5B9XonbFQE7OZJ&skey=8f673a4f0b34837&v=v10)
    format("woff2");
}
```

Defining the CSS properties of a div element

```css
.wavefont-div {
  /**/
  font-family: "Wavefont", Tofu;
  font-variation-settings: "ROND" -100, "YELA" -40;
  background: linear-gradient(180deg, transparent 20%, #000 60%, var(--hga)),
    repeating-linear-gradient(transparent 0 6px, var(--g1) 4px 20px),
    repeating-linear-gradient(90deg, var(--g2) 0 4px, var(--g3) 4px 20px);
  filter: drop-shadow(0px -139px 71px var(--hgb));
  background-clip: text;
  color: transparent;
  /**/
}
```
Please note that the gradient uses a variable, they must be declared via @, this is important for animation

```css
@property --bg1 {
  syntax: "<color>"; /* thanks to specifying the type of the variable, the CSS engine will understand how to animate this variable */
  inherits: false;
  initial-value: transparent;
}
```

and the animation itself

```css
@keyframes time {
  0% {
    --hga: #dadae0;
    --hgb: #fef869;
    --g1: transparent;
    --g2: transparent;
    --g3: transparent;
  }

  25% {
    --hga: navy;
    --hgb: #fc0;
    --g1: black;
    --g2: white;
    --g3: black;
  }
/**/
}
```

Done, the full example below, despite support in different browsers, behaves differently due to different implementations, and everywhere except chrome the animation is lame, even in stoned fox :)

_Thanks for reading!_

[](url){% codepen https://codepen.io/tetragius/pen/PovwZLa %}
Unveiling the Power of the <img> Element in HTML
Published: 2024-05-11 22:16:19

The Image Element:
The image element in HTML is denoted by the tag . This tag is used to embed an image into a web page by specifying the source of the image using the src attribute. The basic syntax for using the image element is as follows:
Image Source
In this syntax, “image-source.jpg” should be replaced with the actual source or file name of your image file. The browser will then load and display this image on your web page.

Attributes of Image Element
The tag has several attributes that can be used to customize its behavior and appearance on a web page. Some of these attributes include:

1 src: This attribute specifies the source or URL of an image file. It is mandatory for displaying an image on a web page.

2 alt: This attribute provides alternative text for an image if it fails to load or if a user with disabilities needs assistance accessing its content.

3 title: This attribute provides additional information about an image when a user hovers their cursor over it.

4 width and height: These attributes specify the width and height (in pixels) of an image on a web page.

5 border: This attribute specifies whether or not to display a border around an image.

6 style: This attribute allows you to apply CSS styles directly to an image element.
Using CSS with Image Element
CSS (Cascading Style Sheets) can be used to further customize and enhance images on your web page. For example, you can use CSS background images for styling elements like buttons or backgrounds, create responsive images that adapt to different screen sizes, or even animate images using CSS animations.

Conclusion
The tag in HTML plays a crucial role in enhancing the visual appeal and user experience of a website by allowing you to embed images into your web pages. By understanding how this tag works and its various attributes, you can create visually stunning websites that engage users effectively. Additionally, combining HTML’s tag with CSS opens up even more possibilities for customizing images on your website according to your design preferences.
Mastering Lists in HTML: A Comprehensive Guide
Published: 2024-05-11 22:00:59

Lists are fundamental elements in HTML, serving as essential tools for organizing and presenting information on web pages. Whether you're creating a simple bullet-point list or a complex nested structure, understanding how to leverage HTML's list elements is crucial for effective web development. In this article, we'll explore the different types of lists in HTML, how to use them, and their underlying principles.

Types of Lists in HTML

HTML provides three main types of lists:

1. Ordered Lists (`<ol>`):

Ordered lists are numbered lists where each item is preceded by a numerical or alphabetical indicator. They are ideal for presenting information in a sequential or hierarchical order.

2. Unordered Lists (`<ul>`):

Unordered lists are bulleted lists where each item is preceded by a bullet point or other custom marker. They are commonly used for listing items without any specific order or hierarchy.

3. Definition Lists(`<dl>`):

Definition lists consist of terms (`<dt>`) and their corresponding definitions (`<dd>`). They are commonly used for glossaries, dictionaries, or any content requiring term-definition pairs.

How to Use Lists in HTML

Using lists in HTML is straightforward. Here's a basic example of each list type:

```html

<!-- Ordered List -->

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

<!-- Unordered List -->

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

<!-- Definition List -->

<dl>

<dt>Term 1</dt>

<dd>Definition 1</dd>

<dt>Term 2</dt>

<dd>Definition 2</dd>

</dl>

```

How Lists Work

Lists in HTML follow a hierarchical structure, with the list element (`<ol>`, `<ul>`, or `<dl>`) containing one or more list items (`<li>` for ordered and unordered lists, `<dt>` and `<dd>` for definition lists). Each list item represents an individual entry within the list and can contain any valid HTML content, including text, images, links, and even nested lists.

Lists can be styled and customized using CSS to match the design of the web page. Developers can control various aspects such as bullet styles, numbering formats, spacing, and alignment to achieve the desired visual presentation.

Summary

Lists are indispensable components of web development, providing a structured and organized way to present information on web pages. HTML offers three main types of lists—ordered, unordered, and definition lists—each serving specific purposes and accommodating various content formats.

By understanding how to use and manipulate lists in HTML, developers can create well-structured and visually appealing web pages that effectively convey information to users. Whether you're creating a simple navigation menu, a detailed product catalog, or an educational resource, mastering lists in HTML is essential for building robust and user-friendly websites.
Binary Lab
Tags: codepen, webdev, javascript, learning
Published: 2024-05-11 21:33:16


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hroe2omx1duzm143oyp.jpeg)

A web app for learning decimal-binary conversions. Built with JQuery, Tailwind. 
Provides an interactive interface to explore step-by-step operations. 

Key features: display power of 2 table, convert decimal to binary/binary to decimal with detailed tables illustrating each step, input validation, responsive design. 

A good resource for learning number systems and computer arithmetic concepts through an engaging, visual approach.

{% codepen https://codepen.io/abenteuerzeit/pen/XWwJmyo %}