DEV Community: hebert villafuerte

How to Display Styled Messages in the JavaScript Console

hebert villafuerte — Fri, 20 Sep 2024 00:51:27 +0000

Learn how to show messages in the JavaScript console with custom styles to make debugging more effective and visual.

The developer tools console is a fundamental part of the debugging process in web development. Often, we want our messages to be more informative and visually appealing. In this post, you’ll learn how to display messages in the JavaScript console with custom styles, similar to what large web applications do.

Simple Messages
The most basic way to display a message is by using console.log():

console.log("This is a simple message.");

Messages with CSS Styles
You can apply styles to messages using %c. Here’s an example:

console.log("%cThis is a styled message", "color: blue; font-size: 20px; font-weight: bold;");

Attention-Grabbing Messages
If you want to make a message stand out more, you can combine multiple styles:

console.log("%cAttention!%c This is important.", "color: red; font-size: 24px; font-weight: bold;", "color: black; font-size: 16px;");

Grouping Messages
To better organize your messages, you can use console.group() and console.groupEnd():

console.group("Message Group");
console.log("%cMessage 1", "color: green;");
console.log("%cMessage 2", "color: orange;");
console.groupEnd();

Adding Icons
Another way to make your messages more visual is to add icons:

console.log("%c✅ Success:", "color: green; font-size: 20px;", " The operation completed successfully.");

Complete Example
Here’s an example that combines several of these techniques:

console.group("Operation Summary");
console.log("%c🔔 Alert:", "color: orange; font-size: 20px;", " This is an alert message.");
console.log("%c✅ Success:", "color: green; font-size: 20px;", " The task was completed successfully.");
console.log("%c❌ Error:", "color: red; font-size: 20px;", " An unexpected error occurred.");
console.groupEnd();

Conclusion
Customizing console messages not only makes debugging more efficient but also enhances the developer experience. Now it’s your turn to experiment with these styles and make your messages more engaging!

visit the same article on my website hebertdev

Movie Code: The Best Cinematic Inspirations for Programmers

hebert villafuerte — Fri, 09 Jun 2023 07:17:02 +0000

In the age of information, where technology and programming have become essential parts of our daily life, what better way to find inspiration than through the big screen? We present you a ranking of the best movies that every programmer, both novice and experienced, should watch to find inspiration and motivation.

"The Social Network" (2010)

Directed by David Fincher, this movie is an adaptation of the book "The Accidental Billionaires", which tells the story of how Mark Zuckerberg created Facebook while at Harvard. Although some aspects are dramatized for the cinema, "The Social Network" provides a fascinating insight into the life of a programmer and the process of creating a revolutionary tech product.
Watch Trailer

"WarGames" (1983)

In "WarGames", a young hacker, played by Matthew Broderick, accidentally finds himself connected to a military supercomputer. While the technology in the movie may seem outdated today, the story remains relevant and raises important ethical questions about hacking and the responsibility that comes with programming knowledge.
Watch Trailer

"The Imitation Game" (2014)

This movie is a moving biography of Alan Turing, a British mathematician who is considered one of the fathers of modern computing. "The Imitation Game" offers a look at the history of programming and is an inspiration for anyone interested in this field.
Watch Trailer

"Her" (2013)

In "Her", a lonely writer falls in love with an intelligent operating system, personified by Scarlett Johansson's voice. While the movie focuses more on artificial intelligence than on programming, it offers an intriguing reflection on the relationship between humans and technology.
Watch Trailer

"Ex Machina" (2014)

In "Ex Machina", a young programmer is selected to participate in an innovative experiment in artificial intelligence, evaluating the capabilities and consciousness of an attractive female robot. This movie is not only an exciting thriller but also raises interesting questions about AI and ethics in programming.
Watch Trailer

These movies not only provide entertainment but also offer a unique perspective on the challenges, dilemmas, and triumphs that programmers can face. Each of these movies can provide you with a new perspective or inspiration on your programming journey. So get your popcorn ready and enjoy!

View this post in my website:

Websites for design inspiration and html and css template downloads

hebert villafuerte — Tue, 24 May 2022 00:26:58 +0000

Best websites for web design inspiration and html and css template downloads.

If we work as freelance web developers, it is very important for us not to spend so much time designing everything from scratch and to focus only on the business logic.

So in this long time as a web developer, I have collected the best websites that have good material for both design inspiration and easy free or paid html and css template downloads.

this listing is not a top.

w3layouts

In w3layouts you will find resources and designs for any category of websites. You will also find templates for wordpress.
It is one of the first pages I used for my designs.

Templatemonster

Undoubtedly one of the best sites with a wide variety of designs for any type of web page, you will also find templates for wordpress, shopify, wooCommerce, prestashop and joomla.

Themeforest

Very similar to template monster, it contains a wide variety of templates for any ecommerce and also designs for any website.

Themewagon

it is a website where you can find templates made with css framework like bootstrap, tailwind.

if you liked this post. You can follow me on instagram to continue publishing this type of content.

INSTAGRAM.COM/HEBERTDEV1

FACEBOOK.COM/HEBERTDEV

MY WEBSITE

Useful online tools and websites for web developers

hebert villafuerte — Mon, 11 Apr 2022 04:34:53 +0000

As application and website developers we need to perform good SEO practices, optimizations, share our code, document our application, among other things that do not go hand in hand with the logic of our application and sometimes this takes more development time.
However, there are tools that make life easier for web developers, here I present them to you.

1 METATAGS.IO
https://metatags.io/

meta tag is a tool to generate meta tags. You can also preview how your web page will look like on Google, Facebook, Twitter and more.
And so you will be having a good SEO.

2 CARBON
https://carbon.now.sh/

Carbon is a tool for creating and sharing beautiful images from your source code. Start typing or drop a file into the text area to get started

3 README.SO
https://readme.so/

is an editor that allows you to quickly add and customize all the sections you need for your project's readme file.

4 PAGESPEED
https://pagespeed.web.dev/

Page speed is a Google tool that shows how long it takes to load all the resources on a page.
This tool gives us information about files or elements from a specific URL, which delay or delay the full load of the page in order to improve your time.

5 EXTRACT CSS
http://extractcss.com/

allows you to extract element id, class and inline styles from html document and output them as css stylesheet

Top 5 - Temas en modo oscuro para Visual Studio Code

hebert villafuerte — Sun, 27 Mar 2022 22:35:24 +0000

Estos son los 5 temas en modo oscuro que más me gustan para Visual Studio Code.

1 Palenight Theme

2 Dracula

3 Night Owl

4 Material Theme Palenight

5 Monokai Pro New

Puedes explorar todos los temas que hay disponible en Visual estudio code
en:
https://vscodethemes.com/
Las imágenes tambien provienen de vscodethemes.com

¿Qué es una dApp (aplicación descentralizada)?

hebert villafuerte — Sun, 06 Mar 2022 03:38:12 +0000

Una dApp es una aplicación descentralizada que utiliza "blockchain" para que los usuarios se relacionen directamente entre ellos y cierren acuerdos sin que exista una entidad central que interfiera en la transacción

Características de una aplicación descentralizada

- Resistentes a la censura: No existe gobierno empresa o autoridad que pueda censurar o cancelar a una aplicación descentralizada.

- Resilientes: Debido a que la lógica del negocio está contenida en tecnologías P2P , es imposible detener su funcionamiento.

- Transparentes: El uso de tecnología BLOCKCHAIN y de almacenamiento distribuido permite que todo su código , información y estado este siempre disponible para consultas.

Apps tradicionales vs dApps

Tecnologías de apps tradicionales y dApps