teleren/devto huggingface dataset:
Happy holidays!
Tags: css, 3d, easter, sphere
Published: 2023-04-08 13:17:03

---
title: Happy holidays!
published: true
date: 2023-04-08 13:21:59 UTC
tags: css, 3d, easter, sphere
canonical_url:
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/870m6wuauql4q1hw9wjw.png
---

This is my homage to the tradition of painting eggs - an art I'm still fascinated as ever but have not actively practiced for years. So today, I coded one, instead:

{% codepen https://codepen.io/MackFitz/pen/VwEYrpB %}

Pardon the mid-90's internet level of stylelessness. It's obviously rushed, done partly late last night, but mostly this morning among the noise and the fury of spring cleaning and Easter preparations. My wife's stare right now could kill ;) I myself still have two batches of wallnuts to press oil out of, and then bake at least two pastries out of the resulting walnut meal to gift to our family.

I might also try dyeing eggs with onion peels or aronia juice.

And add more patterns to the CSS egg in the coming days. So many ideas?

Anyway, merry Easter, everyone! What are your favorite holiday traditions and foods?
What is Programming?
Tags: programming, computerscience, codenewbie, beginners
Published: 2023-04-08 11:13:37

Programming is the process of designing, writing, testing, debugging, and maintaining the source code of computer software. It is the foundation of modern technology, and it plays a critical role in our everyday lives. Whether we are using a smartphone app or a website, we are interacting with software that was created by a programmer.

Programming can be a daunting task, but it is an essential skill to have in today's world. There are many different programming languages, each with its own syntax and set of rules. Some of the most popular programming languages include Python, Java, C++, and JavaScript. Each language has its own strengths and weaknesses, and it's important to choose the right one for the task at hand.

One of the most important aspects of programming is understanding the problem that needs to be solved. Before writing any code, it's important to understand what the program needs to do and how it should be designed. This is known as the problem-solving phase, and it is essential for creating an effective solution.

Once the problem has been identified, the programmer can begin to write the code. This involves creating a set of instructions that the computer can follow to complete the task at hand. The code must be written in a specific programming language, and it must follow the syntax and rules of that language.

After the code has been written, it must be tested to ensure that it works correctly. This involves running the program and checking the output to make sure it matches the expected result. If there are any errors or bugs in the code, they must be identified and fixed before the program can be released.

Once the program has been tested and is working correctly, it can be released to the public. This involves making the program available for download or uploading it to a website. It's important to keep the program updated and to fix any bugs that are discovered over time.

In conclusion, programming is an essential skill for anyone who wants to work in the technology industry. It requires problem-solving skills, attention to detail, and the ability to learn and adapt to new technologies. With the right skills and knowledge, anyone can become a successful programmer and make a significant impact in the world of technology.
The one piece of advice I'd give to anyone who is starting out as a software engineer
Tags: beginners, programming, career
Published: 2023-04-08 13:16:45

As a software engineer, I've learned that mastering the fundamentals is crucial for long-term success in this ever-evolving industry. But, as a newbie engineer eager to make a mark, it's easy to get caught up in the excitement of learning new, shiny technologies and overlook the importance of the basics.

In my experience as a Frontend engineer specializing in Angular, I've encountered many sophisticated technologies and concepts crucial for building robust web applications, such as Rxjs, state management, and SEO. And don't get me wrong; these are essential topics you need to know to build a cutting-edge application.

However, here's the catch: focusing solely on these advanced concepts without laying a solid foundation, you're setting yourself up for failure. Trust me; I've been there. I lacked the basics of how an application works, which resulted in setbacks, bugs, and time-consuming troubleshooting.

So, what did I do to improve my skills? I took a step back and concentrated on reinforcing my core concepts. I reached out to my mentors and colleagues, seeking their guidance on the fundamentals, and I worked on building a solid mental foundation.
Nowadays, I dedicate some time every weekend to filling gaps.
During my regular week, I noted down the ticket, the problem I faced, and the knowledge gap that prevented me from solving my problem more quickly.
The upcoming weekend, I would dedicate time to that topic.

Another example that is particularly interesting for all who do anything Java related is: Study the architecture behind it. JVM, JRE, how Java code is compiled into byte code etc. 
This was knowledge I lacked for a long time until I realized that no matter how comfortable I am with Java and how uncomfortable it can be to dive deep into those topics, It was essential to understand the underlying concepts.

The result?

1. Debugging took up far less time
2. I was able to make more efficient decisions on my software architecture (choice of collections etc)
3. I started to appreciate the level of abstraction some modern programming languages provide.

In conclusion, I advise new software engineers to don't neglect the basics. Don't always take the levels of abstraction for granted. Be curious about how and why things work as they work. 
Seek guidance from experienced colleagues and mentors and build a solid mental foundation. Remember, balancing learning new, shiny technologies and reinforcing the core concepts is essential. Doing so will potentially save you hours of debugging and will separate you from those, who just copy-paste code from Stack Overflow or ChatGPT.
ecmascript
Tags: webdevelopersblog, javascript, programming, webdev
Published: 2023-04-08 13:12:41

> ECMAScript is the official name for the scripting language that is used to create web pages... 

[
![ecmascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gll86m8zzbua25g4arlp.png)](https://www.webdeveloperblogs.com/2023/04/ecmascript.html)
CSS
Tags: css, webdev, beginners, programming
Published: 2023-04-08 13:11:39

CSS (Cascading Style Sheets) is a fundamental part of modern web development. It allows developers to separate the presentation of a web page from its content, making it easier to create beautiful, responsive, and consistent designs across different devices and platforms. In this blog post, we will explore the basics of CSS, its benefits, and some essential concepts to get started.

What is CSS?

CSS is a language used to describe the look and formatting of a web page. It provides a set of rules that dictate how the content should be displayed, including the font, color, size, spacing, and positioning. With CSS, developers can style HTML elements to create visually appealing designs that enhance the user experience.

Why is CSS important?

CSS offers many advantages for web development. Some of the key benefits include:

Separation of Concerns: CSS allows developers to separate the visual presentation from the content of a web page, making it easier to manage and update.

Consistency: CSS provides a way to create a consistent look and feel across all pages of a website, which helps to establish brand identity and improve user experience.

Flexibility: With CSS, developers can create responsive designs that adapt to different screen sizes, making the web page accessible to a wider audience.

Basic CSS Syntax

CSS uses a set of rules that dictate how HTML elements should be styled. Here's a basic example:

```
body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 36px;
  color: #333333;
}
```

In this example, we have two CSS rules. The first rule applies to the body element, setting the background color to a light gray and the font family to Arial. The second rule applies to the h1 element, setting the font size to 36 pixels and the text color to a dark gray.

CSS Selectors

CSS uses selectors to apply styles to specific HTML elements. There are several types of selectors, including element selectors, class selectors, and ID selectors.

Element selectors target specific HTML elements. For example:

```
p {
  color: #333333;
}
```
This rule sets the text color of all paragraph elements to dark gray.

Class selectors target elements with a specific class attribute. For example:

```
.highlight {
  background-color: yellow;
}
```
This rule sets the background color of all elements with a class of "highlight" to yellow.

ID selectors target elements with a specific ID attribute. For example:

```
#header {
  background-color: #f2f2f2;
}
```
This rule sets the background color of the element with an ID of "header" to light gray.

Conclusion

CSS is an essential tool for modern web development. It allows developers to create beautiful, responsive, and consistent designs that enhance the user experience. With CSS, you can separate the visual presentation from the content of a web page, making it easier to manage and update. By understanding the basics of CSS syntax and selectors, you can start creating stylish and functional web pages in no time.
WebGL
Tags: webdeveloperblogs, javascript, webdev, programming
Published: 2023-04-08 13:08:39

> WebGL (Web Graphics Library) is a JavaScript API (Application Programming Interface) that allows developers to render 3D and…
[
![webgl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apdzsswydtk90dxyn5ch.png)](https://www.webdeveloperblogs.com/2023/04/webgl.html)
"JavaScript: The Powerhouse of Web Development!"
Tags: javascript, programming, webdev, beginners
Published: 2023-04-08 12:45:42

**Hey fellow developers ✌️,**

Are you ready to level up your web development game? Look no further than JavaScript! JavaScript, also known as JS, is a powerful programming language that is widely used for front-end and back-end web development. It allows you to create interactive and dynamic websites that engage users and deliver seamless user experiences.

Here are some reasons why JavaScript is the powerhouse of web development:

- Versatility: JavaScript can be used for both front-end and back-end development, making it a versatile language. With JavaScript, you can create interactive user interfaces, build responsive websites, develop server-side applications, and even create cross-platform mobile apps using frameworks like React Native or Ionic.

- Large Ecosystem: JavaScript has a massive ecosystem of libraries, frameworks, and tools that make development faster and more efficient. Popular front-end libraries like React, Angular, and Vue provide robust solutions for building interactive user interfaces. On the back-end, Node.js allows you to use JavaScript to build scalable server-side applications. With a plethora of packages available on npm, the world's largest package registry, JavaScript developers have access to a wealth of resources to streamline their workflow.

- Active Community: JavaScript has a vibrant and active community of developers who are constantly pushing the boundaries of what's possible with the language. From online forums and communities to meetups and conferences, there are plenty of opportunities to learn from experienced developers, collaborate on open-source projects, and stay updated with the latest trends and best practices.

- Cross-Browser Compatibility: JavaScript is supported by all modern web browsers, making it a reliable choice for building cross-browser compatible websites and web applications. This allows you to reach a wide audience without having to worry about compatibility issues.

- Continuous Evolution: JavaScript is a dynamic language that continues to evolve with new features and updates. ES6 (ECMAScript 6) introduced a plethora of new language features like arrow functions, destructuring, and classes, making JavaScript more powerful and expressive. With regular updates and improvements, JavaScript is constantly evolving to meet the changing needs of web development.
In conclusion, JavaScript is undoubtedly a powerhouse in the world of web development. Its versatility, large ecosystem, active community, cross-browser compatibility, and continuous evolution make it an indispensable tool for building modern, interactive, and scalable web applications. So, if you're a web developer looking to level up your skills and create cutting-edge web experiences, don't underestimate the power of JavaScript!

Happy coding!

[Coding Stella]
💻 Don't Forget to Follow us on [Instagram](https://www.instagram.com/coding.stella)
Digital Security Tools
Published: 2023-04-08 12:16:52

1. [World's Biggest Data Breaches & Hacks](https://informationisbeautiful.net/visualizations/worlds-biggest-data-breaches-hacks/):World’s Biggest data breaches and hacks. Regularly updated.

2. [';--have i been pwned?] (https://haveibeenpwned.com/):  a free resource for anyone to quickly assess if they may have been put at risk due to an online account of theirs having been compromised or "pwned" in a data breach. I wanted to keep it dead simple to use and entirely free so that it could be of maximum benefit to the community.

3. [How Secure Is My Password?](https://www.security.org/how-secure-is-my-password/): this tool to help you better understand password security.

4. [IANA](https://www.iana.org/):The global coordination of the DNS Root, IP addressing, and other Internet protocol resources is performed as the Internet Assigned Numbers Authority (IANA) functions.

5.[ICANN |Lookup ](https://lookup.icann.org/en):The ICANN registration data lookup tool gives you the ability to look up the current registration data for domain names and Internet number resources. The tool uses the Registration Data Access Protocol (RDAP) which was created as a replacement of the WHOIS (port 43) protocol.

6. [SearchDNS netcraft](https://searchdns.netcraft.com/): Search Web by Domain

7. [intoDNS](https://www.intodns.com/): IntoDNS checks the health and configuration and provides DNS report and mail servers report. And provides suggestions to fix and improve them, with references to protocols’ official documentation.

8. [TinEye](https://tineye.com/):Reverse Image Search

9. [NameCheck](https://namechk.com/):CHECK OVER 30 DOMAINS
AND MORE THAN 90 SOCIAL MEDIA ACCOUNTS

10. [Spokeo](https://www.spokeo.com/):Search by name, phone, address, or email to confidentially lookup information about people you know such as yourself, friends, family, acquaintances, and old classmates.

11. [Shodan](https://www.shodan.io/): Shodan is the world's first search engine for Internet-connected devices. Discover how Internet intelligence can help you make better decisions.

12. [LittleSis](https://littlesis.org/):LittleSis* is a free database of who-knows-who at the heights of business and government

13. [Whoisology](https://whoisology.com/): Whoisology is a domain name ownership archive with literally billions of searchable and cross referenced domain name whois records.

14. [Email Format](https://www.email-format.com/):Save time and energy - find the email address formats in use at thousands of companies.

15. [EDGAR](https://www.sec.gov/edgar/search-and-access):Search and Access

16. [OSINTFRAMEWORK](https://osintframework.com/): OSINT framework focused on gathering information from free tools or resources. The intention is to help people find free OSINT resources. Some of the sites included might require registration or offer more data for $$$, but you should be able to get at least a portion of the available information for no cost.
HOW TO STYLE YOUR REACT COMPONENT WITH CSS
Tags: react, webdev, beginners, tutorial
Published: 2023-04-08 12:01:31

When I started learning React js newly, I have always wondered how I will style my React js components with CSS. This really made me to be hesitant to learning React js, but I really have to, because I need it for my work as a front-end developer because React js will save you a lot of stress as a developer 😁👨‍💻.

There are two amazing ways to style your React js components with CSS

1. You can style it through in-line styling 

2. You can use external styling as well.

THE IN_LINE STYLING 
You should be familiar with this kind of styling if you have some experience in HTML and CSS. You can implement this kind of styling by introducing the style attribute in your element but with a little trick, here is the trick. Your style attribute should be like this `style={{color:"red",fontSize:"1rem"}}`. Hope you have seen the trick here? When I was still new to React js, I made a very silly mistake, I wanted to style my component just like the way we usually do it in HTML 🤣🤣🤣, I regretted my life then because I was so frustrated. But thank God, you won't make such mistake like me, this article will help you out.

THE EXTERNAL STYLING
This kind of styling is also similar to the HTML external styling, but the only difference here is the linking of the style sheet. 
Although you have two options here, you can write your CSS styles in the index.css file not the app.css file(you can delete your app.css file to avoid confusion). 

Just like the way you select elements in css(with IDs,Class and Tag names). Don't worry about linking it because, it is automatically linked. Every file (more accurately, Components)you will create will receive their styles from the index.css. 
If you want a component to have it's own unique styles, you can create a separate CSS file with the usual .css extension and import that file into that component you want to give a unique style. Here is an example

`import uniqueStyle from "./unique.css;`
I hop you got that correct right 😀? Happy coding!
Training Materials
Published: 2023-04-08 11:58:03

###Facilitator

1. [Workshopper] (https://www.workshopper.com/) : Workshopper.com hosts the best content to support Workshoppers with tried-and-tested workshop formats, helpful articles and guides, interviews with well-known and respected Workshoppers, and inside looks at some of the world’s best workshop spaces.

###Design Thinking

1. [ STANFORD D.SCHOOL] (https://dschool.stanford.edu/) : The Stanford d.school is a place where people use design to develop their own creative potential.

2. [IDEO] (https://www.ideo.com/about) :IDEO is a global design company. We believe a better future is for all of us to design.

3.  [Innovation Training] (https://www.innovationtraining.org/): We offer virtual, online and in-person innovation facilitation and training with a network of trainers, facilitators, and speakers in London UK, Singapore, Germany, Australia and across the globe.
Next.js vs React.js: Which JavaScript Framework is Right for You?
Tags: webdev, react, nextjs, javascript
Published: 2023-04-08 11:32:25

#### Comparing features, benefits, and use cases of two popular JavaScript frameworks

Next.js and React.js are two popular JavaScript frameworks that are often compared. While both frameworks are used for building web applications, they have some differences.

React.js is a JavaScript library for building user interfaces. React provides a declarative approach to building UIs, making it easy to create reusable components and manage the application state. React uses a virtual DOM to efficiently update the UI and provides a rich ecosystem of libraries and tools.

Next.js is a framework for building server-side rendered React applications. Next.js adds server-side rendering, automatic code splitting, and static site generation to React. Next.js also provides built-in support for TypeScript, CSS modules, and hot module replacement.

## Here are some key differences between Next.js and React.js:

- **Server-side rendering:**
Next.js provides built-in server-side rendering, while React.js is focused on client-side rendering. With Next.js, your pages are rendered on the server before being sent to the client, which can improve performance and SEO.

- **Routing:**
Next.js provides built-in routing, while React.js does not. With Next.js, you can define your routes in a 'pages' directory and Next.js will handle the routing for you.

- **Static site generation:**
Nxt.js provides support for static site generation, which can improve the performance and scalability of your application. With static site generation, your pages are pre-rendered at build time and served as static HTML files.

- **Development experience:**
Next.js provides a smoother development experience compared to React.js. With Next.js, you can use hot module replacement to see changes to your code without refreshing the page, and you can use the built-in support for TypeScript and CSS modules.

## Conclusion
In conclusion, Next.js and React.js are both powerful frameworks for building web applications. If you need server-side rendering, automatic code splitting, and static site generation, Next.js may be a better choice. If you are focused on client-side rendering and want more control over your application, React.js may be a better choice.

**Which framework do you prefer for building web applications - Next.js or React.js? And why?**
KCD Chennai 2023 Blogathon Contest 🎉
Tags: cloudnative, cncf, kubernetes, devops
Published: 2023-04-08 11:21:12



## Blogathon
Either write something worth reading or do something worth writing. --**Benjamin Franklin**

Blogging is a powerful means of sharing knowledge and promoting your thoughts and views.As of 2022, there are more than 572 million blogs on the internet (and this number is constantly growing). Over 7 million blog posts are published daily. 77% of people regularly read blogs online.[_Source:firstsiteguide.com_]

Kubernetes Community Days (KCD) Chennai 2023 is hosting a Blogathon. If you are a seasoned blogger, or an occasional writer, or the one searching for right reason to start blogging, we invite you to participate!! Unleash the writer in you.

##How do I Participate?
- Register yourself [here](https://docs.google.com/forms/d/e/1FAIpQLSdjcqWzI2ck-wn3Ta1amAttHajlPVDFfExoTXLFzqlnKdaUmw/viewform?usp=sf_link)
- Upon registration you'll receive an email containing further steps to be followed within few hours

## Important Dates

17-April-2023 : Blogathon begins
19-April-2023 : Workshop on Blogging Tips
31-May-2023  : Blogging ends
20-June-2023 : Know the winners

## What topics can I write about?

We invite Technical blogs on a wide variety of topics. You are allowed to write about any topic you are passionate about, as long as the content is technical.

## Publishing your blog

When you create a new blog, under 'Create Post' choose '_Kubernetes Community Days Chennai_' as shown below.

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

## Rules

- Blogs published during 17-April to 31-May alone would be considered. (Tip: Keep publishing as many good-quality blogs as possible)
- You are allowed to publish any number of blogs; there is no restriction.
- You are allowed to cross-post blogs you've already published in other blogging sites e.g. medium, hashnode, wordpress etc.
- You are allowed to publish blogs you've already published in DEV under your personal account.
- Published blogs would be reviewed by our team. If the blog is offensive, violates copy rights or we detect plagiarism, such blogs would be removed.

## Can I promote my blogs?
Of course yes! Feel free to promote your blogs via Social media, Emails, Newsletters, WhatsApp etc. This would help increase the views and reactions!!

## Contact Us

If you have further questions or need help, post it in the #kcd-chennai channel in https://cloud-native.slack.com