teleren/devto huggingface dataset:
CSS Art: Motorola RAZR V3
Tags: html, css, showdev, webdev
Published: 2023-03-15 02:49:03

---
title: CSS Art: Motorola RAZR V3
published: true
description: A "realistic" drawing of this iconic cellphone by Motorola
tags: html,css,showdev,webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64a31vf8bkkr0czbrm6r.png
canonical_url: https://alvaromontoro.com/blog/68031/css-art-motorola-razr-v3 
---

Ok, maybe the RAZR is not the best flip phone ever, but it was iconic - and I say that not only because I had one. It was one of the most popular cell phones in the mid-2000s.

The other day, the kids went to sleep early, and I decided to do some CSS art. I picked up the RAZR because it is relatively easy to draw, and I didn't think I'd have much time anyway. So I used [this photo](https://www.cnet.com/a/img/resize/03f41d05502e9dc455926d60e1901c67394caee7/hub/2010/10/21/69f06dd6-cc2e-11e2-9a4a-0291187b029a/motorola-razr-v3i_1.jpg?auto=webp&width=768) from [CNET](https://www.cnet.com/reviews/motorola-razr-v3i-review/) as the base to trace on.

You can see the result in this [demo on CodePen](https://codepen.io/alvaromontoro/full/JjaMMXw):

{% codepen https://codepen.io/alvaromontoro/pen/JjaMMXw %}

Some details about this drawing:

- **It is responsive**: open the demo on CodePen, resize the window, and see how the phone changes size. The cell phone was so iconic that you could also turn it into a CSS icon. (Note: this wouldn't be recommended or encouraged, this drawing is not really efficient.)
- **It is (slightly) interactive**: the phone screen goes to sleep after 10 seconds, and it wakes up after pressing any of the buttons (which are also somewhat animated.)
- **It doesn't open** (and I won't make it open): it is flat and would look awkward... plus it would take time.
- **It has glitches in some browsers**: the outline of the battery/bars is done with `drop-shadow`, so it doesn't look great on Safari; and the phone wake-up is controlled using `:has()`, which is not supported on Firefox. The phone won't wake up on that browser (RIP RAZR). And both of them have issues with the blue notch below the screen 😓
- **The phone has some texture**: it is not perfect (and one of the reasons why it is highly inefficient), but if you look closely, you may notice some horizontal lines simulating a metallic texture. I did a similar effect on this [volume knob drawing](https://codepen.io/alvaromontoro/pen/BadpNdN?editors=1100) (but it is more subtle here.)
- **The picture on the screen is also 100% CSS!** It is a different CSS drawing that I did a few years back ([based on this picture on Unsplash](https://unsplash.com/photos/3TLl_97HNJo)) using only `clip-path`:

{% codepen https://codepen.io/alvaromontoro/pen/abNRmNa %}
ok... today we'll go install commitlint
Tags: reactnative, programming, tutorial, typescript
Published: 2023-03-15 02:48:27

nice... already we can start this section correctly and fixing somes fails or bugs that I found with the previous post

we'll install the commitlint package like dev dependecy
```bash
npm install commitlint -D
```

after that create file config called `commitlint.config.js` and export some config, if you don't know any of this library, this is the [documentation](https://commitlint.js.org/#/), try to read, isn't to hard understand

the file `commitlint.config.js` will have the next config:
```javascript
module.exports = {
  rules: {
    'header-max-length': () => Promise.resolve([0, 'always', 120]),
    'body-max-length': () => Promise.resolve([0, 'always', 120]),
  },
};
```

then if you make a commit you will have follow the rules:
- max body 120 characters
- header max: 120

one more thing for finish this...

you need add the next script for create into folder .husky file bash called `commit-msg` for execute after the pre-commit

```bash
npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"
# OR
yarn husky add .husky/commit-msg "yarn commitlint --edit $1"
```

result file `.husky/commit-msg`
```bash
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn commitlint --edit $1
```

try look the file into `.husky/commit-msg` and be sure that the final argument "$1" because in sometimes this part not be added

okay... now just try to do the next commit:
```bash
git add . && git commit -m "chore(commitlint): install and config done"
```
if you don't follow some of this rules, you'll can't do the commit

------------------------------------------------------------

[previous post, implement linter to project](https://dev.to/juanestban/well-lets-go-to-implement-linter-to-project-2o6j)
next theme for the next post: **thinking about that >.<**

[github profile](https://github.com/Juanestban)

github repo: I'm still working on that >.< srry
Hello world!
Tags: webdev, beginners, introduction
Published: 2023-03-15 02:46:14

### Who am I?

I’m Taiao, a 25-year-old videographer turned software developer. I’m currently studying a diploma in Web Development and hope to land a job as a full-stack developer at the end of this year once I wrap up my studies.

I’m a huge Warhammer 40k nerd and read all of the books, even though I’ve never actually played the tabletop game. I love gaming with my buddies, and I have a lot of creative hobbies like music production, videography, and sound design.

Despite success as a full-time freelancer for around three years, I’d never become a true expert in a subject or even gotten a qualification. In late 2022, I decided coding would be that thing for me and set out to learn all I could.

###  Where to?

I’m really interested in cybersecurity and think it could be a cool career option. I’ve always wanted to help people, especially those in vulnerable communities. So, I figured why not bring that attitude to the online world and use my strengths and skills to do some good?

I know the reality is probably a lot of reading, monitoring stuff, documentation, and meetings, but the interest is there!

Despite that interest, I know there’s a ton of stuff to learn in the world of code, so I’m not completely set on my end destination. I’m confident that as I work my butt off and learn, I’ll end up where I want to be.

### My goals for my dev.to page and beyond

Well, this blog isn't going to be super enlightening (for the near future anyway, check back in a few months).

For now, it’s mostly just a place for me to ramble on about my experiences as a developer. Think of it like my personal “rubber ducky”.

I’ll dive into my workflows, the tools I’m using, and anything else that I find helpful, to the best of my ability.

### How I'm bloggin

Handily, the notes app I already use, [Obsidian](https://obsidian.md/), uses markdown, so today i'm trying it out to write and format this post. I created a new "vault"(note location) purely for blog posts, and I'm currently planning out an efficient workflow to get posts out.

I've also employed the controversial [ChatGPT](https://chat.openai.com/chat) to help me spell check and iron things out when i'm rambling on too much. In the future I may use grammarly instead.

Once I work my head around things and feel like less of a noob, I'll consider doing a write-up of the tools I use.

Anyway, nice to meet you, and I think that's me for today. Cheers!
Add an one way sync from ticktick and github to google calendar
Tags: github, ticktick, calendar, sync
Published: 2023-03-15 02:11:00

> What if you could track your overall progress effortless in google calendar?

## Why

We as developers often experience a sense of working all the time and still feeling like we are not accomplishing enough.

## Solution

To combat this feeling I decided to track my progress from both ticktick and also github, the platforms I use the most. 

So I developed a npm package, called <a href="https://github.com/lucasvtiradentes/gcal-sync#readme">gcal-sync</a>, which basically adds a one way sync between ticktick and github to google calendar.

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

## Requirements

The only thing you need to use this solution is a `gmail/google account`.

## Usage

To effectively use this project, please head to the main [project instructions](https://github.com/lucasvtiradentes/gcal-sync/blob/master/README.md#installation).

## Final words

This project really helped me to track my progress and also makes me feel good about the hard work I put on in a daily basis.

<div align="center"><a href="#"><img src="https://github.com/lucasvtiradentes/my-tutorials/blob/master/.github/images/divider.png?raw=true"></a></div>
<br>

## Related

👉 If you want to check the repository source code, it is [here](https://github.com/lucasvtiradentes/gcal-sync/)
👉 See also all [my projects](https://github.com/lucasvtiradentes/lucasvtiradentes/blob/master/portfolio/PROJECTS.md#TOC)
👉 See also all [my tutorials](https://github.com/lucasvtiradentes/my-tutorials/blob/master/README.md#TOC)
10 Steps to build reliable AI Infrastructure
Tags: devops, devjournal, infrastructure, programming
Published: 2023-03-15 02:05:00

Building a reliable infrastructure for training an AI model can seem daunting, but with these 10 simple steps, you can set up a robust and effective system that will help your model reach its full potential. 


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

1. Identify the specific requirements of the AI model, including the size and complexity of the model, the amount and type of data it will be trained on and the desired training time.

2. Choose hardware that is well-suited to the requirements of your model. This might involve selecting a powerful computer with a fast CPU and lots of RAM, or a cluster of machines with GPUs.

3. Install the necessary software, including a deep learning framework like TensorFlow or PyTorch and any other dependencies your model requires.

4. Choose a storage solution for your data such as a local disk or network-attached storage device, that can accommodate the size and performance requirements of your dataset.

5. Configure your network to allow for efficient communication between your hardware. This might involve setting up a private network or using a cloud service.

6. Set up a way to monitor your training process, such as logging key metrics to a file or using tools like TensorBoard.

7. Consider implementing a system for managing and deploying your trained models, such as a model serving platform or a custom solution.

8. Test your infrastructure to ensure that it is reliable and can handle the demands of training your AI model.

9. Regularly monitor and maintain your infrastructure to ensure it continues to perform well over time.

10. Consider implementing backups and other disaster recovery measures to protect your trained models and data in case of hardware failure or other issues.

Overall, the key to setting up reliable infrastructure for training AI models is to carefully plan and design your system to meet the specific needs of your project.

Thanks for reading this.

If you have an idea and want to build your product around it, schedule a call with [me](https://calendly.com/pragyanatvade).

If you want to learn more in DevOps and Backend space, [follow me](https://dev.to/pragyanatvade).

If you want to connect, reach out to me on [Twitter](https://twitter.com/pragyanatvade) and [LinkedIn](https://www.linkedin.com/in/pragyanatvade/).
lets compare network sockets between Perl and Python
Tags: perl, python, sockets, webdev
Published: 2023-03-15 01:12:27


 

Both Perl and Python provide built-in support for creating and using network sockets. Here are some of the similarities and differences between the two languages:

Socket API: Both Perl and Python provide access to the same low-level socket API, which means that they have similar capabilities for creating, connecting, and communicating over sockets.

Syntax: The syntax for working with sockets is different between Perl and Python. In Perl, you use the "socket" function to create a socket, while in Python, you use the "socket" module. However, the basic concepts are the same, and both languages provide similar methods for working with sockets, such as "bind", "listen", "accept", "connect", "send", and "recv".

Support for protocols: Both Perl and Python support a wide range of network protocols, including TCP, UDP, and raw sockets.

Platform independence: Both languages are platform-independent and provide the same functionality on all operating systems.

Ease of use: Python is generally considered to have a more user-friendly syntax and easier-to-learn API than Perl, which can make it easier for beginners to work with sockets.

Overall, while there are some syntax differences between Perl and Python when it comes to working with network sockets, both languages provide similar capabilities and support for a wide range of network protocols.


some Code-Examples for Network-sockets in Perl and Python?


here are some code examples for creating and using network sockets in Perl and Python:


**Perl Example:**

`perl

use IO::Socket::INET;

#create a TCP socket
my $socket = IO::Socket::INET->new(
    PeerAddr => 'example.com',
    PeerPort => '80',
    Proto    => 'tcp',
);

#send a message to the server
print $socket "GET / HTTP/1.1\r\n";
print $socket "Host: example.com\r\n";
print $socket "\r\n";

#receive a response from the server
my $response;
while (my $line = <$socket>) {
    $response .= $line;
}
print $response;

#close the socket
$socket->close();
Python Example:`



**python**


`import socket

#create a TCP socket
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.connect(('example.com', 80))

#send a message to the server
message = 'GET / HTTP/1.1\r\nHost: example.com\r\n\r\n'
s.send(message.encode())

#receive a response from the server
response = s.recv(1024).decode()
while len(response) > 0:
    print(response)
    response = s.recv(1024).decode()

#close the socket
s.close()`


These examples create a TCP socket and connect to a web server to retrieve a webpage. The Perl code uses the IO::Socket::INET module to create and manipulate the socket, while the Python code uses the built-in socket module. However, the basic concepts are the same: create a socket, connect to a server, send a message, receive a response, and close the socket.
if we compare Conda and Pip - what are the differences?
Tags: conda, pip, python, vscode
Published: 2023-03-15 01:06:29



Conda and Pip are two popular package managers used in Python development. While both are used to install and manage packages, there are some key differences between the two:

Environment management: Conda can create and manage isolated environments, which means you can have different versions of Python and packages installed in each environment. Pip does not have this functionality and only installs packages globally or within a specific user environment.

Cross-platform compatibility: Conda is designed to be cross-platform and can manage packages for different operating systems. Pip is limited to the Python packages that are available on the Python Package Index (PyPI).

Package availability: Conda has its own package repository, called Anaconda, which includes many scientific and data-oriented packages. Pip is limited to the packages available on PyPI, which may not include certain specialized packages.

Dependency resolution: Conda has a more robust dependency resolution system than Pip, which can be important when working with complex software stacks that have many dependencies.

Package installation: Conda installs pre-built binary packages, which can be faster and more reliable than Pip's source-based installations. However, Pip can install packages from source, which can be useful if you need to modify the package source code.

In summary, Conda is a more powerful package manager that includes environment management and cross-platform compatibility, while Pip is simpler and more limited in scope, but can still be a useful tool for installing and managing packages.
Daily UX Writing Challenge Day 10 + 11
Tags: beginners, ux, uxwriting
Published: 2023-03-15 00:51:55

[Day 1](https://dev.to/fuwa/daily-ux-writing-challenge-day-1-50la) | [Day 2](https://dev.to/fuwa/daily-ux-writing-challenge-day-2-4d6p) | [Day 3](https://dev.to/fuwa/daily-ux-writing-challenge-day-3-3cog) | [Day 4](https://dev.to/fuwa/daily-ux-writing-challenge-day-4-5cg8) | [Day 5](https://dev.to/fuwa/daily-ux-writing-challenge-day-5-2hac) | [Day 6 + 7](https://dev.to/fuwa/daily-ux-writing-challenge-day-6-7-1730) | [Day 8 + 9](https://dev.to/fuwa/daily-ux-writing-challenge-day-8-9-p8p)


![Challenge: Ask them where they live and who they are without sounding like you're unnecessarily mining their data.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sirxu4gygxhrrmbdmb55.png)

Honestly, I'm not sure why this site requires a name in order to reveal the content...just the post code should be enough. 
If I was a user I would question it, and I really couldn't think of a good explanation to why a name would be required especially with such a short character limit


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

I feel this is more the job of a copywriter than a UX writer.
DinaWall 0.2
Tags: java, javaf, kde, linux
Published: 2023-03-15 00:34:41

Hello everyone, 3 years ago I started to create DinaWall an app written in JavaFX that implements dynamic wallpapers on Linux, Windows and macOS. After so much time I have decided to continue its development and finish it, which is why I have been working on it for a few weeks. Today it has release version 0.2 and has the following features:

- Allows you to install new dynamic wallpapers
- allows you to create new dynamic wallpapers
- There is a repository on github where dynamic wallpapers are hosted that can be downloaded and installed.
- supports the following environments Linux (Gnome, Kde) and macOS, windows is under development

I invite you to get to know the project and contribute to its development, there is a plan of characteristics and functionalities that have the objective of turning DinaWall into a top application in all operating systems, the support of the community and their contributions are essential to be able to continue its development. I invite you to try the application, leave your comments, ideas, report bugs, create your dynamic wallpapers and share them with the community, help with documentation, code, etc. Any contribution is welcome and can help those who start in the world of software to share knowledge and learn from others. I leave the link to the github repo and my email in case you want to write.

[Github Repo ->](https://github.com/fredericksalazar/dinawall_app)

fsalazars@uoc.edu
💻 Web App Performance: Metrics
Tags: javascript, webdev, beginners, programming
Published: 2023-03-15 00:30:00

In today's digital age, it's essential to have a fast and efficient web app that can cater to users all around the world. A slow-loading app can significantly impact user experience, causing frustration and leading to a negative impact on your business. 

## Some Metrics:

1. **Page Load Time**: This is the time it takes for your web app to load on a user's device. Ideally, you want your web app to load in under 3 seconds.
2. **Time to First Byte (TTFB)**: This is the time it takes for the first byte of your web app to be received by the user's browser. You want your TTFB to be under 200ms.
3. **Time to Interactivity (TTI)**: This is the time it takes for your web app to become interactive, meaning the user can start interacting with the app. You want your TTI to be under 5 seconds.
4. **Page Size**: This is the size of your web app's content, including images, scripts, and other resources. You want your page size to be under 2 MB.

One way to monitor your web app's performance is through cloud-based performance monitoring platforms such as Datadog, New Relic, and etc. These platforms offer real-time insights into your web app's performance, enabling you to optimize performance and improve user experience. 

## 🔧 Some Strategies to Improve Performance

- 🌐 Use a Content Delivery Network (CDN)
- 🖼️ Optimize Images and Other Media
- 📉 Minimize HTTP Requests
- 🗃️ Use Caching
- 💻 SSR

It's crucial to optimize your web app's assets for performance. Optimizing images, scripts, and other assets can significantly reduce load times and improve user experience. Techniques such as minification, compression, and lazy loading can help optimize your web app's assets and reduce page load times.


In conclusion, a fast and efficient web app is crucial in today's digital world. By implementing the above strategies and keeping track of the real metrics, you can ensure that your web app loads quickly and ultimately, a positive impact on your business.
Are You Bored Setting Up Node/Express Server Everytime You Start New Project? Setup Express App In Seconds
Tags: node, express, javascript, mongodb
Published: 2023-03-14 23:55:11

In This Article, We Will Learn How To Setup Express JS Boiler Plate In Some Seconds.

## 📌 Installation

First Of All Install The CLI Globally So You Don't Need To Install It Every Time You Start A New Project.

Install the CLI globally. If you are windows user, run your command prompt/terminal as administrator. If you are macOS user, add `sudo` before the following command.


```
npm i -g @heyitsuzair/express-setup
```

## 📌 Usage

Enter the following in your terminal where you want to initialize app:

```
new-express-app my-app
```

## 📌 Features That Are Currently Supported By CLI

- MongoDB Support
- Mongoose Support
- Nodemon Server
- A Dummy Predefined Routes, Controller And Model So You Can Start Working On It Right In