So I made my own research and I bring you a tutorial on how to create one of this spheres. You can implement it either using Vanilla JavaScript or using React.JS.

I want to clarify that I didn't write the code for this effect. I just implement it in my site. The original code is from TagCloud and was written by Cong Ming. Please visit and star his project on Github if you find it useful.

Now... let's get started.

Rotating sphere with vanilla JS and plain HTML

HTML

1. Create a container to hold the TagCloud

    <div class="content"></div>
   

2. Import TagCloud.js script in the document

    <script src="https://cdn.jsdelivr.net/npm/TagCloud@2.2.0/dist/TagCloud.min.js"></script>
   

And that's all about the HTML.

CSS

You can use Raw CSS to customize how the text in the sphere looks like:

.tagcloud {
    font-family: 'Poppins', sans-serif;  
    font-size: 20px;
    font-weight: 650;
    margin-left: 30%;
  }
  .tagcloud--item:hover {
    color: #36454F;
  }

JavaScript

1. Define the tags you want to display. Use a JS array:

   const myTags = [
    'JavaScript', 'CSS', 'HTML',
    'C', 'C++', 'React',
    'Python', 'Java', 'git',
    'django', 'Node.js', 'OpenCV',
    'GCP', 'MySQL', 'jQuery',
   ];
   

2. Render a default TagCloud :

   var tagCloud = TagCloud('.content', myTags);
   

3. If you need to, config the TagCloud behavior this way:

var tagCloud = TagCloud('.content', myTags,{

  // radius in px
  radius: 300,

  // animation speed
  // slow, normal, fast
  maxSpeed: 'fast',
  initSpeed: 'fast',

  // 0 = top
  // 90 = left
  // 135 = right-bottom
  direction: 135,

  // interact with cursor move on mouse out
  keep: true

});

The result should be something like this:

Rotating sphere with React.JS.

You can use TagCloud by installing it into your project using any of the following options:

1. npm install TagCloud
2. import directly from https://cdn.skypack.dev/TagCloud@2.2.0

In this tutorial we are going to do it using the direct link.

For HTML, you only need an element for the React app to render:

<div id="root"></div>

CSS

Again, you can customize your CSS the same way we did as in plain HTML.

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
  background-color: #111827;
}

.tagcloud {
    font-family: 'Poppins', sans-serif;  
    font-size: 20px;
    margin: auto;
    width: 50%;
    color: #79f7d9;
  }
  .tagcloud--item:hover {
    color: #e94152;
  }

JavaScript.

You need to create your component and use the TagCloud inside a useEffect hook (since we only need the sphere to render once):

There is a problem when using React useEffect and React.StrictMode at the same time. Depending on your React version, useEffect will run twice (thus, generating two spheres). I think this happens in version 17 and above. Anyway, this double execution will only happen in development mode. Please read the doc in order to know more about why this happens.

However, if this is the case for you, and React.useEffect runs twice, you can avoid that behavior by using useRef hook.

This is how your componen should look like:

import React, { useRef } from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
// If you install TagCloud via npm:
//import TagCloud from "TagCloud";
import TagCloud from "https://cdn.skypack.dev/TagCloud@2.2.0";

const App = () => {
  const sphereMounted = useRef(false); // useRef hook: Avoids behavior where useeffect runs twice in development mode. 
  React.useEffect(() => {
        if(sphereMounted.current === false){
 // Again, define your tags  
            const myTags = [
                'JavaScript', 'CSS', 'HTML',
                'Node.js', 'C++', 'React',
                'Python', 'Jest', 'git',
                'JSON', 'Webpack', 'ES5/ES6',
                'Express', 'MongoDB', 'github',
            ];
            // Render a tagCloud with custom configuration
            var tagCloud = TagCloud('.sphere', myTags,{

                // radius in px
                radius: 200,

                // animation speed
                // slow, normal, fast
                maxSpeed: 'fast',
                initSpeed: 'fast',

                // 0 = top
                // 90 = left
                // 135 = right-bottom
                direction: 135,

                // interact with cursor move on mouse out
                keep: true,
            });
        }
        return () => sphereMounted.current = true; // useRef 
    }, []);
// This is what will render the tagcloud:
  return(
   <span className="sphere"></span>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))

Result is this:

And that's all for today! Hope you find it useful.

Today I want to share some of the webpages that have helped me through my journey as web developer. I hope you find them useful just like I do.

Flexbox Froggy

This is an interactive web page designed to help you understand how "flexbox" in CSS works.

There are 24 different levels in which you have to help some froggies to get their lilypads. Depending on the code you write, the froggies will rearrange on the screen. If you do it right, every froggy will get to the right place. If not, you'll have to keep trying different values until you get it right.

This website has several languages to play and learn with and you can also change the difficulty if you think you are ready enough.

Grid Garden

Similar to Flexbox Froggy, grid garden allows you to learn the grid property used in CSS.

There are 28 different levels in which you have to grow your carrot garden. Depending on the code you write, the "water" will be displayed in a different place. If you do it right, you will be able to water your carrots.

It also has different languages. However, I could not find an option to change the difficulty, though that option might unlock once you clear all levels.

CSS Reference

They describe themselves as a free visual guide to CSS. And they are.

On the main page you can find different CSS properties and where you can apply them. For example, the property "align-content" can only be used if you are working on a box with "flexboxDisplay

But if you go to the collections section, you'll find a really useful guide for animations, typography, etc.

HTML reference

Similar to CSS reference, this site will help you understand how the different HTML elements work.

On the main page, you can find the different HTML elements, their default display mode and the type of element they are.

If you go to the collections section, you can find easy examples of how to implement each HTML tag.

HTML Color codes

This is a website where you can easily pick a color you like and get the HEX code for that color.

Besides, when coding, you might have noticed that you can use some name for colors instead of an Hex code. For example: blue, yellow, pink, papayawhip, plum, etc.

In this site you can find the name for each color defined in HTML/CSS that you can use instead of writing the Hex code.

It's just amazing and really helpful when you need to use preset colors.

Hi everyone. It's been more than a month since I started my journey as a web developer. I think it's been relatively easy. But it was not always like this. Some months ago I tried to become a web developer but the results were totally different.

Why is that?

You know, when I gave it my first try, I didn't have a clear guidance. I just looked for some tutorials on Youtube. But most of them are incomplete or not consistent with the tools they use or the methodology they use in order to teach.

This makes it difficult to learn. One day I was writing my first html document and the next day I was styling it using CSS. And the following day I was using JavaScript to create some "cool" stuff. You might think this is great, and it would be, except for the fact that I didn't know the basics.

Although I was writing some JavaScript to modify the DOM, I didn't even know what DOM is. I didn't know what "Semantic HTML" is. I didn't know lots of things. And there I was... trying my best to become a developer. It was frustrating each time I wanted to do something cooler, but my limited knowledge didn't help me to do so.

I remember when I wanted to implement a button to play and pause a video, using JavaScript. First, I started by learning how to "write" a button in HTML. Then I had to learn how to link that button to a JavaScript code. I discovered something called "querySelector". And since I wanted to understand everything, I had to learn something about media elements.

At the time, I found some of this stuff really complex. That's why I quitted.

And I think that's why many people quit as well.

They don't have a clear guidance. They just learn what they think they must learn in order to create what they want to create.

And this is not a good methodology, because you might need some advanced knowledge. And if you don't have the basics, it will not only be frustrating, but time-consuming as well.

Now, in my second try, everything is different. I received help from some of my friends. And everything seems to be easier.

I don't want people to get frustrated at coding.

I don't want people to quit.

That's why I decided to create a roadmap. A roadmap which will be a guide to make your path smoother.

If you're already a developer, this might not be useful for you. But it might be for your friend, your partner, or you little brother.

The roadmap part 1.

The following roadmap is intended to be a guide for everyone who wants to become a web developer and has no idea about where to start. This is just the beginning (wait for the second part) but it is enough to get you started.

1. Prework: Choose your OS and configure your computer (Windows, Linux or Mac)

1. What is a browser?
2. Browser and its devtools.
3. Install and customize your text editor (recommended: Visual Studio Code)
4. What is a Live Server and how to use it.
5. Installing Homebrew (or equivalent, depending on your OS) and NodeJS.
6. Basic Terminal commands
7. What is Git and Github?
8. Working with Git and Github: Commits, push and pull request, SSH and HTTPS keys, versions and conflicts. (I'll write a whole roadmap for Git and Github)

2. Web developer fundamentals

1. Frontend definition
2. Backend definition
3. Full Stack definition
4. Static vs. Dynamic pages.

3. HTML

1. Anatomy of a webpage: What is HTML?
2. Index file
3. Head tag and its content
4. Body tag and its content
5. Parts of an HTML tag
6. Semantic HTML
7. Basic HTML tags
8. Media tags: img, figure, video
9. Image formats: Lossy and lossless
10. Form tags: form, input, calendar, autocomplete, require, select.
11. Differences between "input type submit" and button tag.

4. CSS

1. What is CSS?
2. Using CSS: tag, selector, class and ID.
3. Pseudo-class and pseudo-elements.
4. Anatomy of a "CSS rule"
5. Box model
6. CSS Inheritance
7. CSS specificity
8. CSS combinators
9. Measurements: Absolute measurements, EM, REM
10. Position
11. Display
12. Display flex
13. Display grid
14. Variables
15. Webfonts

5. Responsive Design

1. Media queries
2. Mostly Fluid
3. Layout shifter
4. Column Drop
5. Best practices for responsive design
6. Media in responsive design: Page load time.

6. Mobile First Design

1. Why mobile first?
2. Growing your project from mobile to desktop.

7. Basics of web accesibility

1. Semantic HTML
2. Text
3. Labels, alt and title.

9. Basic Frontend development: HTML and CSS integration

1. Browser engine definition
2. Most used HTML tags
3. Display: block, inline and inline-block
4. Z-index
5. Most used CSS properties
6. CSS Architectures definition
7. OOCSS, BEM, SMACSS, ITCSS and Atomic Design
8. Build your first functional WebSite

10. CSS Transform and CSS transitions.

1. Why and when to use CSS animations?
2. Properties used to create animations
3. Pseudo-classes and pseudo-elements in animations
4. Timing functions, planes and axes
5. Transform translate
6. Transform rotate, scale, skew and matrix
7. Transform origin
8. Transform style and perspective
9. Backface visibility
10. Parallax effect: HTML structure
11. Parallax effect: CSS styling
12. Transition property and duration
13. Transition timing function and delay
14. Accesibility and performance

11. CSS Animations

1. CSS Counters
2. Stacking context
3. Animation name and keyframe
4. Animation duration
5. Animation timing function
6. Iteration count and delay
7. CSS Triggers: layout, paint and composite
8. Animation debugging using devTools
9. Best practices for web animation

12. Introduction to JavaScript

1. What is JavaScript and why JavaScript?
2. Variables, functions and syntax
3. Function declaration and function expression
4. Scope
5. Hoisting
6. Coercion
7. Truthy and Falsy values
8. Operators
9. Conditionals
10. Switch
11. Arrays
12. Loops: For and while
13. Objects
14. Closures

13. Basics of Object Oriented Programming (OOP)

1. Differences between OOP and structured programming
2. UML
3. Objects
4. Abstraction and class.
5. Modularity
6. Inheritance
7. Class definition
8. Methods or functions
9. Atributes
10. Constructor Method
11. Instance
12. Encapsulation
13. Polymorphism

14. POO using JavaScript

1. All in Basics of OOP, but using JavaScript, plus:
2. Object literal and prototypes
3. Getters and setters

And that's all for now. I think this is pretty good to start with. Eventually, there is a lot more to learn, but we will talk about it in another post.

It's been a month since I started my journey as a web developer. I'm still learning a lot of new stuff and I practise almost everyday. It's good to learn from everyone and now I think I'm ready to start sharing with you part of what I've learnt.

Since the very first moment I started learning, I noticed the tech community was divided into two main groups: the ones who have lots of opportunities, and the ones who are always struggling to get a job/project. I started to wonder why this is happening.

And I realized it's a matter of mindset. But not just mindset. Mindset by itself serves nothing. It's about the stuff you do. It's about how people thinks of you.

Remember this: Nobody talks about the things they don't have in mind.

Read it again: Nobody talks about the things they don't have in mind.

So. It doesn't matter if you are super ultra really good at coding. If few people knows about it, then you're likely to be always looking for a job.

Well, let me tell you something. Instead of looking for a job, you could have that job looking for you. How is it possible? By working on your personal brand.

I'm not going to talk about your personal brand (not in this post, although you should Google it if you're interested). I'm going to talk about a particular element of your personal brand: your portfolio.

✅ Increasing your odds

Think about this: What if I recommended you to invest in cryptocurrencies? What if I told you to use Bitso instead of Binance? It doesn't matter which one you choose. What matters is why you choose it. Here are a few things you might do before you make your final decision:

1. Look for it into Google.
2. Look for user reviews.
3. Look for comparisons between the two platforms.
4. Look for pros and cons.
5. Look for specific features you need/want.

Whichever you choose. You'll make sure you choose what serves you best. But what would happen if, let's say, you cannot find Bitso on Google? or what if they don't have reviews to show? or what if you cannot find the answers to your questions on their page?

All of that influence your decision.

And that's pretty much the same that happens when you're applying for a job.

Most of the times, recruiters will choose the candidates that show best their projects/portfolio. Because you're not the only one applying for that job. It is easier for them to get a quick glance at your portfolio than waiting for a response from you or trusting what you tell them without any proof.

Now you understand what I mean?

Creating a portfolio gives recruiters the opportunity to get to know what you are capable of. And they can take the time needed to do so.

You can think this is unfair. You can say things like "No, recruiters shouldn't ask for a portfolio in order to hire someone". And you're right. They shouldn't. But if you don't do a portfolio, someone else will. And guess what? That's marketing. That's sales. The one who has a better marketing, the one who can sell themselves better, is the one who will get the job.

And having a portfolio increases your value in the market. A lot.

I hope you're convinced to create a portfolio by now.

So, this is the question: How to create a portfolio? Let me answer that in the following lines.

🤓 🖥 Creating your portfolio.

Did I tell you I started learning to code a month ago? Yup. That's me. I don't have the knowledge to create a website from scratch. Not a complex one. But I can do some pretty cool basic stuff. And I can show that to the world.

But how am I supposed to show that stuff to recruiters?

🤔 💡 Think like a recruiter

First, you must know that recruiters are not always technical experts. That's specially true in Latin America.

In the beginning you are in this level where recruiters are from Human Resources department. And most of the time they have no idea of what Node.js (React, Python, decorators, POO, etc..) is. Let's say this is the first filter.

Secondly, if you succeed in the first filter, you might now encounter a technical expert. And this is where there is usually a knowledge assessment. But before the assessment, this technical expert might (surely will) have a glance at your portfolio. This is the second filter.

You cannot show your portfolio the same way in both filters.

In the first filter you may want to show an overview of each of your projects. No technical aspects, but a mention of the technologies/skills implemented in those projects. I suggest answering the following questions:

1. What is the project about?
2. How does it work?
3. Who was it made for?
4. Which technologies/skills did you use?
5. Links to your Github / Gitlab repositories.
6. Link to live project (if possible)

I suggest you have a Youtube channel or a blog for this. The format you should use is the very same you would use to promote an app or a product. People don't care about the maths and coding behind it. They just care about its main features and how this solve their problems (recruiting someone).

In the second filter, the most important question is the following one:

1. How did you do it?

You can be a little bit technical here. It's better if you make tutorials teaching how to do some of the stuff you implemented in that project. Besides, you have to comment your code in your public repositories.

I know some projects are private. And you don't need to exhibit that code to the public. But you can take some sections of it and teach people how to do it. You just need to modify some stuff and use your imagination. It's not that hard.

🥴 How do I get projects if nobody hires me to begin with?

I know I know. I always see people tweeting the same stuff once and again.

The answer is: You have lack of imagination.

Doing a personal project is free. And if you're already experienced enough, you have no excuses.

Look at this portfolio (Spanish): https://midiaenunosminutos.com/

It is pretty basic and it might not have an amazing design. But it's better than nothing. You can always improve it when you learn something new.

Besides, there are websites where you can participate in challenges. For example, if you are a frontend developer, you can use Frontend Mentor.

There are multiple sites. You just have to look for them. And if you cannot do that, wel... maybe you shouldn't apply for that job. Because we are talking about proactivity here. And that's the first thing you need. Even before coding.

😎 I have projects, what platform should I use to show them?

Short answer: A personal website.

You can have multiple profiles in different platforms, but it's better if you get all together into one place. That should be www.yourname.com

Why?

Firstly, because you want people to know all the places where they can find you: Youtube, Github, Medium, Hashnode, etc. You can use direct links on your website.

Secondly, it is easier to navigate through your stuff if it is all in one place. For example, I can describe a project, show pictures of it, embed a video and show some code or links of interest. All in the same page. That's better than having people opening several tabs for each platform.

Mine is www.miguelhernandezmx.com. By the time I'm writing this, my site is still under construction.

I'm using Wordpress, but eventually, when I improve my skills, I'll switch to one made from scratch.

🙉 Conclusions

• Having a portfolio will give you a clear advantage over those who doesn't have one.
• Design your portfolio according to the different profiles of people you want to show it to.
• Even if you've just started your career, you can always have personal projects to show in your portfolio.
• Use different platforms like Youtube, Github, etc, but get all together into one place: your personal website.

PS. I'm practising my English. Let me know if something is not clear and how I can improve it. 🌽🇲🇽