Daniela ValeroHi, I am Daniela, I write about technical stuff in the web, and other team related stuff too.2022-02-27T10:43:16Zhttps://danielavalero.comDaniela Valerodanielavalero@gmail.comPragmatic Gender diversity: The five things to bring peace to our career growth2019-01-04T00:00:00Zhttps://danielavalero.com/posts/pragmatic-gender-diversity:-the-five-things-to-bring-peace-to-our-career-growth/<div class="u-photo"><img src="https://danielavalero.com/static/img/together-big.png" alt="working together" title="Working together" /></div>
<p><em>Disclaimer:</em> What I write here is my opinion and it applies to work environments where there is a sane level of gender parity awareness. The content here not necessarily applies to environments where there is real and extreme gender discrimination.</p>
<p>I am an advocate of gender diversity and I like to find ways to empower and inspire women to get rid of their fears and find ways to advance on their careers.</p>
<p>In the movement towards gender diversity, is easy to get too emotional or too sensitive about it. Also, being an advocate of gender diversity has an influence on how others perceive you (oftentimes as an over sensitive person) or treat you (with extra care not to get in "trouble").</p>
<p>Lately I have been re-evaluating the list of things I care about, that steal my mental peace (after reading the book how not to give a f**k). I identified that something from the gender initiatives was stealing my peace. After reading and listening to the ideas of Jordan Peterson, I started to understand that the overly sensitive point of view that easy comes with the gender initiatives was stealing my peace and actually holding me back from advancing in my career.</p>
<p>So, here the list of things that I think we should be focusing on, when we want to evolve and growth in our careers, from the gender diversity point of view.</p>
<p>The five things we should care more to evolve our careers from the gender diversity point of view</p>
<ol>
<li><strong>Improve our technical skills and find who you are technically:</strong> By technical skills I mean whatever you do for work: lawyer, medical doctor, developer, designer, etc. Read books, follow newsletters, watch videos, join a Meet-Up, find a mentor. Independently of the tool you decide to use to learn, the most important thing is to identify what or which specific areas from your work field lights your fire. What makes you feel more inspired, and towards what you find yourself always going. Once you find it, that is your Niche! Congratulations, now you can start using your preferred tool and go and learn more on this topic. If you look at big personalities in your field, all of them have a niche, having a niche is what actually positions you into an expert area and gives you the push you might be missing.</li>
<li><strong>Understand which is your Emotional Intelligence IQ, and improve it:</strong> We have emotions, and all our emotions tell us something important about what we care about and what we don't. If we are angry about something at work for example, is a sign that something is not right and that we should look at it from a different angle in order to solve the situation. Understanding how to work and improve our emotional intelligence is really important, the more calm we respond to situations the better our responses will be, and the more people will understand the message we are trying to convey. Daniel Goleman is the best known author that shares about this topic, and is a good place to start.</li>
<li><strong>Be honest about how you want your work-life balance to be:</strong> People in management position tend to work more than 40 hours a week, or/and they are flexible with time of their private life to travel, go to meetings, have calls, solve problems. If you don't want to do those compromises, that is the right thing to do and it is fine, it will just mean that you won't give to work more than you actually want.</li>
<li><strong>Improve our self-confidence and self compassion:</strong> We women have the tendency of having low self confidence, and this often gets in our way. When we had more self confidence, we would be able to make more realistic plans and wiser interactions with our colleagues, which would communicate to them that we are actually competent. A big part of working on our self-confidence is also treating ourselves with compassion, this year I encountered this knowledge and actually has helped me in ways that I can't even start counting. The best known author behind this concept is Kristin Neff, and a good place to start is watching her Ted Talk.</li>
<li><strong>Understand that unconscious bias affects everyone:</strong> all the genders in different ways. This is unavoidable, our brains need it in order to be able to work. We can decide to have a mental fight every time it rains, or we can actually make peace with it, and go out with the right clothes and tools so that we can go out without being wet. The same thing is with unconscious bias, there is enough information online for us women to learn what the tendencies are. We can either have a mental fight every time we are judged in a biased way, or we can learn the right tools to respond to those situations kindly and move on.</li>
</ol>
<h3 id="what-should-we-stop-doing%3F" tabindex="-1">What should we stop doing?</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/pragmatic-gender-diversity:-the-five-things-to-bring-peace-to-our-career-growth/#what-should-we-stop-doing%3F"><span class="sr-only">Permalink to “What should we stop doing?”</span> <span aria-hidden="true"></span></a><ul>
<li><strong>Blaming men or industries for not evolving our own careers:</strong> The industry, men and what not are not to blame for your lack of career advancement. Doing this blaming in psychology is called external locus of control, and in this particular case is holding you back from growing.</li>
<li><strong>Getting too emotional or extremist about gender initiatives:</strong> It is fine to love doing and participating in gender initiatives, but all the extremes are bad. Getting too emotional about this will only make you over sensitive. And to be honest, it does not feel comfortable working with someone who is over sensitive in general, specially about this topics. The reason mainly is, because you never know how the person will take something and make a big fuzz out of that, which might cause unnecessary problems in the team. Which will end mostly on people trying to avoid you.</li>
<li><strong>Self-segregation:</strong> There is nothing good coming from self-segregation, the whole idea about diversity is actually working with people with different points of view. The reason is, because they all come together and help each other to find a solution or create an idea that is more solid and creative. If you are in a self-segregation group, this won't happen.</li>
</ul>
DBT-Bite: My take on our product focus - what does it mean for web developers?2019-05-20T06:43:15Zhttps://danielavalero.com/posts/dbt-bite:-my-take-on-our-product-focus-what-does-it-mean-for-web-developers/<div class="u-photo"><img src="https://danielavalero.com/static/img/thinking-big.png" alt="person thinking" /></div>
<p>Companies are more and more adapting the Product focus, and are going away from standard projects. Working with a product mindset seems to be the “How” that guides the actions to become better actors within the digital world.</p>
<p>But what does this mean for web developers? What does it mean for those who have been working in projects? Let me share my take on this.</p>
<p>Great Engineers and developers are behind the most famous products in the digital landscape, for example Amazon, Facebook, Instagram, Netflix among others. And in many cases, those engineers are as well part of organizations that set trends to shape the web or make decisions on where should we go now depending on how we all developers behave in digital.</p>
<p>These engineers contribute to open source and keep a curious mind with regards to how they do things. They are kind and open to share, and receive ideas and knowledge.</p>
<p>Moreover, a great product is not written by a single brilliant person, it is made by a team of people who organizational psychology would name High performance Team.</p>
<p>You might be asking yourself, what makes an engineer great? It is true that I don’t have a certain answer for that, but one thing I know is that one of the elements they have, is that they stay curious.</p>
<p>A sense of curiosity makes them want to step out of their comfort zone, try new things or master current and old ones. And is that mastering that comes after that sense of curiosity that makes them brilliant.</p>
<p>Designers are not hired to put pixels together, they are hired because of their eye, their singular ideas. We developers should start thinking about ourselves in a similar manner. It is that sense of curiosity what makes us stand out, and is that as well what creates more meaningful bonds among our teams.</p>
<h3 id="how-do-we-start-sparking-that-curiosity%3F" tabindex="-1">How do we start sparking that curiosity?</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/dbt-bite:-my-take-on-our-product-focus-what-does-it-mean-for-web-developers/#how-do-we-start-sparking-that-curiosity%3F"><span class="sr-only">Permalink to “How do we start sparking that curiosity?”</span> <span aria-hidden="true"></span></a><ul>
<li>Read articles and put those ideas in practice within your projects</li>
<li>Write blogposts and share knowledge</li>
<li>Stay eye open to any small opportunity to learn something new, or refresh something old</li>
<li>Create spaces where people connect and share ideas</li>
<li>Go to activities where people get and share ideas</li>
</ul>
Don't test implementation details: What does it mean for react testing?2019-07-29T18:35:56Zhttps://danielavalero.com/posts/don't-test-implementation-details:-what-does-it-mean-for-react-testing/<div class="u-photo"><img src="https://danielavalero.com/static/img/coding-big.png" alt="Developer conding" title="Developer conding" /></div>
<p><em>Illustration from <a href="https://ls.graphics/">ls.graphics</a></em></p>
<h3 id="glossary%3A-setting-the-ground-for-the-article" tabindex="-1">Glossary: Setting the ground for the article</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/don&#glossary%3A-setting-the-ground-for-the-article"><span class="sr-only">Permalink to “Glossary: Setting the ground for the article”</span> <span aria-hidden="true"></span></a><p><strong>Unit Tests:</strong> Testing of individual units like functions or classes by supplying input and making sure the output is as expected.</p>
<p><strong>Testing structure</strong> refers to the organization of your tests. Nowadays, tests are usually organized in a BDD structure that supports behavior-driven development (BDD).</p>
<p><strong>behavior-driven development (BDD)</strong> is a branch of Test Driven Development (TDD). BDD uses human-readable descriptions of software user requirements as the basis for software tests.</p>
<pre class="language-js"><code class="language-js"> <span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'calculator'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token comment">// describes a module with nested "describe" functions</span><br /> <span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'add'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token comment">// specify the expected behavior</span><br /> <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'should add 2 numbers'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token comment">//Use assertion functions to test the expected behavior</span><br /> <span class="token operator">...</span> <br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre>
<p>Note that the general idea behind BDD, is the same that users of cucumber have. (aka: UI automation)</p>
<p><strong>Functional Tests</strong> Functional tests are written from the user’s perspective and focus on system behavior that users are interested in. For the scope of this article, I will refer to this type of tests like the testing of individual units of code (such as functions or modules) in isolation from the rest of the application (meaning: not E2E testing)</p>
<p><strong>Assertion functions</strong> are used to make sure that tested variables contain the expected value. <strong>Snapshot Testing</strong> is when you compare a data structure to an expected one.</p>
<p>What is the difference between unit and functional tests? I like the classification of “unit tests” for developer-perspective code units, and “functional tests” for user-perspective UI tests. - <a href="https://medium.com/javascript-scene/behavior-driven-development-bdd-and-functional-testing-62084ad7f1f2">Erick Elliot</a></p>
<p>In other words: Unit tests: The dev. writes it Functional test: The QA engineer writes it</p>
<p><a href="https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2019-264e19514d0a">Source of all these definitions</a></p>
<h2 id="part-1%3A-unit-testing-mindset." tabindex="-1">Part 1: Unit testing mindset.</h2>
<a class="header-anchor" href="https://danielavalero.com/posts/don&#part-1%3A-unit-testing-mindset."><span class="sr-only">Permalink to “Part 1: Unit testing mindset.”</span> <span aria-hidden="true"></span></a><p>Why people advocate for testing behaviour rather than implementation details?</p>
<blockquote>
<p>“Either way, it’s generally a good idea to treat your tests as black box tests, meaning that the test code should not care about the implementation details of the feature you’re testing” <a href="https://medium.com/javascript-scene/behavior-driven-development-bdd-and-functional-testing-62084ad7f1f2">Erick Elliot</a></p>
</blockquote>
<p>When we write a test for a component, thinking that the component is a black box, then it is natural to go with the <strong>behavior approach.</strong> In pragmatic terms this translates to:</p>
<ol>
<li>Render a react component with the required properties, so that it renders as we need it.</li>
<li>Trigger a mock of a user interaction</li>
<li>Assert that what we need to happen actually happens</li>
</ol>
<p>In contrast, writing a test that relies on <strong>implementation details</strong>, we can also call this white box, the steps are longer</p>
<ol>
<li>Render a react component with the required properties, so that it renders as we need it.</li>
<li>Access to the state of the component and update it accordingly, or access to a local function and re-build manually all the params it needs</li>
<li>Trigger a mock of a user interaction or call directly the local function</li>
<li>Assert that what we need to happen actually happens</li>
</ol>
<p>Because we need to build manually in our test the required state and params that our function needs as input, we are actually relying on implementation details.</p>
<p>The problem with this:</p>
<ol>
<li>We write in our test all the required input that our component or function needs, in the perfect scenario, so that the test passes. As we are the developers writing that code, we are blind towards the scenarios that could happen in the real world, so our tests will not be necessarily realistic. Therefore, it gives you a false sense of security over your unit tests.</li>
<li>Software is in constant change, requirements and features are always moving, specially within the product engineering mindset. What we build, is supposed to live long, and as it does, the implementation of our code will change. If we rely too tightly to implementation details in our tests, then we will have double work when we need to update that code. If we don’t rely on implementation details, when we change the code we will not necessarily have the need to update our tests.</li>
</ol>
<h2 id="part-2%3A-putting-things-into-mental-boxes" tabindex="-1">Part 2: Putting things into mental boxes</h2>
<a class="header-anchor" href="https://danielavalero.com/posts/don&#part-2%3A-putting-things-into-mental-boxes"><span class="sr-only">Permalink to “Part 2: Putting things into mental boxes”</span> <span aria-hidden="true"></span></a><p>When react people speak about react-testing-library, and not testing implementation details, we are not talking about Functional Tests. The reason for this is that when we are writing a test in our development process, we are testing a small, single unit of functionality within the scope of a feature development.</p>
<p>So, the terms can confuse us to think: If I will write a test from the user point of view for my component, then why should I write it at all if the QA engineer will write a very similar one?</p>
<p>Well, the QA engineer is writing their test having a broader view, they will test bigger pieces of functionality, rather than the click of a button in a form. These tests basically ensure that the system works as a whole.</p>
<p><strong>In short:</strong> Functional tests help us build the right product. (Validation) Unit tests help us build the product right. (Verification) <a href="https://en.wikipedia.org/wiki/Software_verification_and_validation">Source</a></p>
<h3 id="part-2.1%3A-how-to-start-writing-a-test%3F" tabindex="-1">Part 2.1: How to start writing a test?</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/don&#part-2.1%3A-how-to-start-writing-a-test%3F"><span class="sr-only">Permalink to “Part 2.1: How to start writing a test?”</span> <span aria-hidden="true"></span></a><p>You can start asking yourself these questions that <a href="https://medium.com/javascript-scene/what-every-unit-test-needs-f6cd34d9836d">Eric Elliot suggests</a></p>
<ul>
<li>What component aspect are you testing?</li>
<li>What should the feature do? What specific behavior requirement are you testing?</li>
</ul>
<h3 id="part-2.2%3A-how-to-write-or-structure-a-specific-test" tabindex="-1">Part 2.2: How to write or structure a specific test</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/don&#part-2.2%3A-how-to-write-or-structure-a-specific-test"><span class="sr-only">Permalink to “Part 2.2: How to write or structure a specific test”</span> <span aria-hidden="true"></span></a><p>Whatever you do, ensure that if your test fails, it tells you in a glance all the following information. This way you or the reader will know directly what has happened.</p>
<ul>
<li>What is the unit under test (module, function, class, component, etc)?</li>
<li>What should it do? (Prose description) What was the actual output?</li>
<li>What was the expected output? How do you reproduce the failure?</li>
</ul>
Accessibility: What is the difference between aria-labeledby, aria-label and aria-describedby?2019-09-13T14:09:34Zhttps://danielavalero.com/posts/accessibility:-what-is-the-difference-between-aria-labeledby-aria-label-and-aria-describedby/<div class="u-photo"><img src="https://danielavalero.com/static/img/204-big.jpg" alt="Naming and describing things for screen readers" /></div>
<h3 id="before-you-start" tabindex="-1">Before you start</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/accessibility:-what-is-the-difference-between-aria-labeledby-aria-label-and-aria-describedby/#before-you-start"><span class="sr-only">Permalink to “Before you start”</span> <span aria-hidden="true"></span></a><p>The first rule of WAI-ARIA is: Not to use WAI-ARIA. The best, more maintainable and future proof experience is provided by using standard HTML elements.</p>
<p>Using WAI-ARIA should be reserved for custom components, where there is no native option. <a href="https://www.w3.org/TR/wai-aria-practices/#aria_ex">There is good list of examples in the w3c site, with explanations of how to use</a></p>
<h3 id="now%2C-the-difference" tabindex="-1">Now, the difference</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/accessibility:-what-is-the-difference-between-aria-labeledby-aria-label-and-aria-describedby/#now%2C-the-difference"><span class="sr-only">Permalink to “Now, the difference”</span> <span aria-hidden="true"></span></a><p>They differ on the type of information they will hold.</p>
<p>It can be primary or auxiliary information.</p>
<p>The <strong>primary information</strong> is basically the name of the element. It ismain information of an element, for example the label of an input field.</p>
<p>The <strong>auxiliary information,</strong> refers to extra information that is necessary to explain further. An example of this would be the validation error of an input field.</p>
<p>Primary information is read first, auxiliary information is read as the last piece of information of the input control. Meaning after its name and role.</p>
<p>Now that you understand this:</p>
<h4 id="aria-label" tabindex="-1">Aria-Label</h4>
<a class="header-anchor" href="https://danielavalero.com/posts/accessibility:-what-is-the-difference-between-aria-labeledby-aria-label-and-aria-describedby/#aria-label"><span class="sr-only">Permalink to “Aria-Label”</span> <span aria-hidden="true"></span></a><p>The <strong>aria-label</strong> property enables you to name an element with a string that is not visually rendered.<br />
It is used for <strong>primary information</strong></p>
<p>Example:</p>
<pre><code><button type="button" aria-label="Close">X</button>
</code></pre>
<h4 id="aria-labeledby" tabindex="-1">Aria-Labeledby</h4>
<a class="header-anchor" href="https://danielavalero.com/posts/accessibility:-what-is-the-difference-between-aria-labeledby-aria-label-and-aria-describedby/#aria-labeledby"><span class="sr-only">Permalink to “Aria-Labeledby”</span> <span aria-hidden="true"></span></a><p>The <strong>aria-labelledby</strong> property enables you to reference other elements on the page to define an accessible name.</p>
<p>It is used for <strong>primary information</strong></p>
<p>Example:</p>
<p>if you have a "read more link" that is embedded in a text.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bees<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bees are disappearing rapidly. Here are seven things you can do to help.<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bees-read-more<span class="token punctuation">"</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bees bees-read-more<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Read more...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<h4 id="aria-describedby" tabindex="-1">Aria-Describedby</h4>
<a class="header-anchor" href="https://danielavalero.com/posts/accessibility:-what-is-the-difference-between-aria-labeledby-aria-label-and-aria-describedby/#aria-describedby"><span class="sr-only">Permalink to “Aria-Describedby”</span> <span aria-hidden="true"></span></a><p>The <strong>aria-describedby</strong> property enables you to give further instructions to the screen reader user of how to use an element, how to fill it, or what to fix if there is an error.</p>
<p>It is used for <strong>auxiliary information</strong></p>
<p>Example:</p>
<p>The validation errors of an input field are `aria-describedby`</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username-error<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username-error<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Fill your username to continue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Note that in this example, the name is the content of the label. That is the primary information.</p>
<p>There the screen reader will say:</p>
<p><em>"Username, input text, fill your username to continue"</em></p>
<p>Native types of descriptions are: `captions` that are used for images or tables.</p>
The 6 roles of building accessible experiences explained2019-10-11T16:04:05Zhttps://danielavalero.com/posts/the-6-roles-of-building-accessible-experiences-explained/<div class="u-photo"><img src="https://danielavalero.com/static/img/1600x500-roles.png" alt="person smiling and thinking" /></div>
<p><em>Illustration from <a href="https://lucaswakamatsu.com/">Lucas Wakamatsu</a></em></p>
<p>There are different roles that are involved when building accessible websites.</p>
<h3 id="1.-the-developer" tabindex="-1">1. The Developer</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/the-6-roles-of-building-accessible-experiences-explained/#1.-the-developer"><span class="sr-only">Permalink to “1. The Developer”</span> <span aria-hidden="true"></span></a><p>They select the right semantic elements for what they need to build, they read and understand the difference components and usages of WAI-Aria to select just the right amount of attributes only when is necessary.</p>
<h3 id="2.-the-visual-designer" tabindex="-1">2. The Visual Designer</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/the-6-roles-of-building-accessible-experiences-explained/#2.-the-visual-designer"><span class="sr-only">Permalink to “2. The Visual Designer”</span> <span aria-hidden="true"></span></a><p>They take care that the text is readable in different screen sizes and zoom levels, they choose colors that can be seen and understood regardless of the color blindness disability and they ensure that all the information the user needs is available even if they don’t see colors.</p>
<h3 id="3.-the-copy-writer" tabindex="-1">3. The Copy Writer</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/the-6-roles-of-building-accessible-experiences-explained/#3.-the-copy-writer"><span class="sr-only">Permalink to “3. The Copy Writer”</span> <span aria-hidden="true"></span></a><p>They write and organize content in the page so that everyone can understand it. They avoid complicated words or highly technical terms, so that people who are not specialist or with dyslexia for example can also understand the message. They also select images and write descriptions to the images that are there to convey meaning.</p>
<h3 id="4.-the-ux" tabindex="-1">4. The UX</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/the-6-roles-of-building-accessible-experiences-explained/#4.-the-ux"><span class="sr-only">Permalink to “4. The UX”</span> <span aria-hidden="true"></span></a><p>They put themselves in the shoes of the user with disabilities, when designing the UX of a site, or when making a judgement call of how a pattern should work, they primarily consider: how does it feel for the user? Is it clear enough? Is it too overwhelming? Do we need to add explanations? Maybe we need less?. They don’t stay close to the book when making judgement calls, they don’t close their eyes and say: let us leave it like this because that is what the standard says. The go one step further, because they understand that sometimes the standard alone is not enough, the standard is just a small part, a beginning. They add more or less details to the UX judging what feels right to the user.</p>
<h3 id="5.-the-qa" tabindex="-1">5. The QA</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/the-6-roles-of-building-accessible-experiences-explained/#5.-the-qa"><span class="sr-only">Permalink to “5. The QA”</span> <span aria-hidden="true"></span></a><p>They take that whole experience created, and test it with different browsers and screen readers tools. They try to break it, they use it as if they were a user who has no idea of what the “right flow, right order, right input” is.</p>
<h3 id="6.-the-po" tabindex="-1">6. The PO</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/the-6-roles-of-building-accessible-experiences-explained/#6.-the-po"><span class="sr-only">Permalink to “6. The PO”</span> <span aria-hidden="true"></span></a><p>They have the vision of the product, they decide and communicate how important accessibility is. To what level do they need or want to comply, and communicate to stakeholders why this is in there, as a definition of done thing.</p>
<h2 id="the-mix" tabindex="-1">The mix</h2>
<a class="header-anchor" href="https://danielavalero.com/posts/the-6-roles-of-building-accessible-experiences-explained/#the-mix"><span class="sr-only">Permalink to “The mix”</span> <span aria-hidden="true"></span></a><p>In the real world, in a common project, most of these roles are present, but they are not included in their role DoD the accessibility part, they build the experiences thinking on users like themselves. Even if they have a temporary disability, there is the tendency where they don’t think even on the rainbow of users that will come to access that site they are building.</p>
<p>What this means is that when a project considers accessibility as a built in thing, it starts by one person, usually the developer, who puts on the hat of all the roles mentioned above, all at once. They explain and communicate with kindness and clarity why this is important, and how can it be achieved as part of the usual day to day work. They become a leader who inspires everyone in the team to care for these users, they make things simpler, find the best solution, finds the time and overall, keeps asking the question, loud and openly: how does this feel for the user with disabilities?</p>
<p>Eventually, the others will start asking the question. Eventually they will get more curious, learn more, advocate more.<br />
The most important thing is, if it is important for your business, and your product (in most of the cases it is), start caring.</p>
<h3 id="moral-of-the-story" tabindex="-1">Moral of the story</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/the-6-roles-of-building-accessible-experiences-explained/#moral-of-the-story"><span class="sr-only">Permalink to “Moral of the story”</span> <span aria-hidden="true"></span></a><p>If you do care, but don’t know how to start, here is your start: learn to use 1 screen reader.</p>
How to keep growing a team's technical knowledge in 2020? (or any year) 2020-01-05T16:10:35Zhttps://danielavalero.com/posts/how-to-keep-growing-a-team's-technical-knowledge-in-2020-(or-any-year)/<div class="u-photo"><img src="https://danielavalero.com/static/img/1600x500-learning-people-big.jpeg" alt="learning people" /></div>
<p>When leading technical teams, one of the most important things we need to take care is to grow the team skills by introducing knowledge, patterns, techniques, that are relevant for the team, the product and that the people are ready to understand.</p>
<p><strong>On finding the right balance</strong></p>
<p>When one person in the team introduces a pattern, or a paradigm, that not everyone is ready to handle, regardless of how strong the solution is, this pattern would introduce a constrain for the other team members on maintaining that part of the code.</p>
<p>Simplicity is on the eyes of the beholder. A pattern can seem very simple for a developer who is very experienced with it. But for the developer who is not familiar with it, the same pattern can be really complex or impossible to understand.</p>
<p>As a technical lead, the decision making in this regard is not an easy one. How to find the balance between two opposite points? What is simple for the most experienced dev, is complex for the less experienced dev (at that particular thing).</p>
<p>Keeping everything simple for the less experienced devs, might involve creating solutions that are not the best for a specific problem. On the other hand, giving room for the most experienced dev to introduce a pattern that are unknown by the rest, would potentially create a stronger technical solution, but would limit the less experienced devs to maintain that piece of code.</p>
<p><strong>The balance</strong></p>
<p>At this point, I tend to get to the idea of: Introducing new patterns slowly, growing the skills of the whole team as a unison while creating a space where the knowledge is openly shared, so that we all learn and grow at unison.</p>
<p>If I were to split it in bullet points I'd say:</p>
<ul>
<li><strong>Build and Communicate the ultimate tech goal:</strong> As a tech lead is important that you have a technical goal and that you communicate it open and transparently to the team, if you can build it together even better. If you don't have a goal yet, then answering the following questions might help: Where should the team be? What should we be able to do?</li>
<li><strong>Deconstruct the goal it in steps and prioritize them with the team:</strong> Sit together when is necessary, and see what small steps the team needs to take in order to get to that goal. It can be for example: <em>"We want to do TDD"</em>, the steps might be: <em>"Write a unit test for every code written"</em>, then <em>"Write strong tests upon which we can rely"</em>.</li>
<li><strong>The technical lead is not the holder of the holy grail:</strong> As a technical lead you don't need to know everything, master every little piece of knowledge that exists in Software. Your role is to give room for people to be able to apply their knowledge, while sharing it and growing the rest of the team members. Just be humble about what you know, and don't pretend, be honest, this is the best way to keep learning yourself!</li>
<li><strong>Define a metric to know when the team is ready to move on:</strong> To keep things interesting, moving and evolving, is important for you and the team to know: "How do we know that we can move on to the next thing?". Having a metric is what will help you to keep moving forward.</li>
<li><strong>Temporal inconsistency is fine:</strong> During the time of learning and practicing a new pattern, there will be inconsistency in the code base, some parts will be written in the old way, others in the new way. Once the team masters the new pattern, the old way written code will be refactored with the time.</li>
</ul>
<p><strong>Tip:</strong> If you have a technical goal, and don't know where to start, unit testing is the answer. Having a strong unit test base, is what will allow you to refactor and move things around without fear of regressions and breaking working things.</p>
<p>If you will remember something of this blogpost, let it be this one:</p>
<p>The solution is always in the middle.</p>
Learn to DevArt: Learning to draw shapes with CSS for website makers. #LearnInPublic2020-02-15T18:07:54Zhttps://danielavalero.com/posts/learn-to-devart:-learning-to-draw-shapes-with-css-for-website-makers.-learninpublic/<p>One of the things I enjoy about being a developer, is the learning mindset that identifies us as community.</p>
<p>Recently I learned about the concept <a href="http://learninpublic.com/workbook/">Learn in Public</a>. The concept of learn in public, is basically: Pick a skill you want to learn, practice it, post about it. Simple but refreshing.</p>
<p>So, I have decided to learn in public about <a href="https://devart.withgoogle.com/">making art with code</a>. Yet the path feels long, the first easy step for me was to draw something with CSS. In this case, myself.</p>
<p>So. Here we go!</p>
<h3 id="the-result" tabindex="-1">The Result</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/learn-to-devart:-learning-to-draw-shapes-with-css-for-website-makers.-learninpublic/#the-result"><span class="sr-only">Permalink to “The Result”</span> <span aria-hidden="true"></span></a><p>Here is the <a href="https://danielavalero.com/posts/learn-to-devart:-learning-to-draw-shapes-with-css-for-website-makers.-learninpublic/codepen"></a><a href="https://codepen.io/DanielaValero/pen/QWbbvEo?editors=1100">codepen</a> of my little exercise.</p>
<div class="u-photo"><img src="https://danielavalero.com/static/img/tada.png" alt="Screenshot of Daniela in CSS" /></div>
<h3 id="learning-goal" tabindex="-1">Learning Goal</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/learn-to-devart:-learning-to-draw-shapes-with-css-for-website-makers.-learninpublic/#learning-goal"><span class="sr-only">Permalink to “Learning Goal”</span> <span aria-hidden="true"></span></a><ul>
<li>Draw something easy with CSS.</li>
<li>Practice the basics of making shapes and placing them around the drawing</li>
<li>Practice the mindset of: what shape do I need to create and concatenate to make what?</li>
</ul>
<h3 id="the-markup" tabindex="-1">The Markup</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/learn-to-devart:-learning-to-draw-shapes-with-css-for-website-makers.-learninpublic/#the-markup"><span class="sr-only">Permalink to “The Markup”</span> <span aria-hidden="true"></span></a><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nani<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>face skinColor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hair<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>smile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>glasses<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neck skinColor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bodyDaniela<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>You see there we have:</p>
<ul>
<li>One container that has all the elements.</li>
<li>The face contains: Hair and the curls, the smile and the glasses.</li>
<li>Then comes the neck and the body</li>
</ul>
<h3 id="positioning-the-body-parts-with-flexbox" tabindex="-1">Positioning the body parts with Flexbox</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/learn-to-devart:-learning-to-draw-shapes-with-css-for-website-makers.-learninpublic/#positioning-the-body-parts-with-flexbox"><span class="sr-only">Permalink to “Positioning the body parts with Flexbox”</span> <span aria-hidden="true"></span></a><p>Flexbox is a modern CSS layout feature that allows us to handle positioning elements in only one dimension, and has very powerful alignment properties.</p>
<p>You see in the code snippet below, that I am using flexbox to place all the body parts:</p>
<ol>
<li>In the center of the X axis of the viewport</li>
<li>All the main body parts vertically on top of each other (face, neck, body)</li>
</ol>
<pre class="language-css"><code class="language-css"><span class="token selector">.nani</span> <span class="token punctuation">{</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span><br /> <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span><br /> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br /> <span class="token property">margin-top</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<h3 id="face%2C-neck-and-body-shapes" tabindex="-1">Face, neck and body shapes</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/learn-to-devart:-learning-to-draw-shapes-with-css-for-website-makers.-learninpublic/#face%2C-neck-and-body-shapes"><span class="sr-only">Permalink to “Face, neck and body shapes”</span> <span aria-hidden="true"></span></a><p>My neck is easy, just a rectangle with a negative margin, to hide behind the face.</p>
<p>The face is not a perfect circle. My face is more like an inverted triangle shape, or like an inverted egg.</p>
<p>The body is a simple inverted triangle.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.face</span> <span class="token punctuation">{</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> $headSize<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> $headSize + 10<span class="token punctuation">;</span><br /> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50% 50% 50% 50% / 40% 40% 60% 60%<span class="token punctuation">;</span><br /> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span><br /><span class="token selector">....<br /><br />.neck</span> <span class="token punctuation">{</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span><br /> <span class="token property">margin-top</span><span class="token punctuation">:</span> -25px<span class="token punctuation">;</span><br /> <span class="token property">z-index</span><span class="token punctuation">:</span> 1000000<span class="token punctuation">;</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.bodyDaniela</span> <span class="token punctuation">{</span><br /> <span class="token property">border-left</span><span class="token punctuation">:</span> 60px solid transparent<span class="token punctuation">;</span><br /> <span class="token property">border-right</span><span class="token punctuation">:</span> 60px solid transparent<span class="token punctuation">;</span><br /> <span class="token property">border-top</span><span class="token punctuation">:</span> 90px solid $skinColor<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>You see there, that in order to achieve the inverted egg shape for the face, I set the height bigger than the with, to create kind of a perfect oval.</p>
<p>Then, to give it the shape of egg, I used the syntax <code>border-radius</code> that has the <code>/</code> operator.</p>
<p>This syntax allow us to create ellipsis shapes by controlling more specifics of the radius of the corners. This means, that the values of the corners will end up being:</p>
<pre class="language-css"><code class="language-css"> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50% 50% 50% 50% / 40% 40% 60% 60%<span class="token punctuation">;</span><br /> <span class="token property">border-top-left-radius</span><span class="token punctuation">:</span> 50% 40%<span class="token punctuation">;</span><br /> <span class="token property">border-top-right-radius</span><span class="token punctuation">:</span> 50% 40%<span class="token punctuation">;</span><br /> <span class="token property">border-bottom-right-radius</span><span class="token punctuation">:</span> 50% 60%<span class="token punctuation">;</span><br /> <span class="token property">border-bottom-left-radius</span><span class="token punctuation">:</span> 50% 60%<span class="token punctuation">;</span></code></pre>
<p>Meaning:</p>
<pre class="language-css"><code class="language-css"><span class="token property">border-radius</span><span class="token punctuation">:</span> top-left-1 top-right-1 bottom-left-1 bottom-right-1 / <br /> top-left-2 top-right-2 bottom-left-2 bottom-right-2<span class="token punctuation">;</span></code></pre>
<p>There you see that the second radius value of both top corners is bigger: <code>40%</code>. That creates a bigger circle shape, while in the bottom they are <code>60%</code>, which creates a more narrow circle. The bigger the value, the more straight looking the line will be, the smaller the value, the more "swollen" the line will be. For example, if I set the values to be: <code>border-radius: 50% 50% 50% 50% / 40% 40% 30% 60%;</code></p>
<p>It will look as if I had a grinder (tooth) problem and my face was swollen:</p>
<div class="u-photo"><img src="https://danielavalero.com/static/img/swolen.png" alt="Daniela with a swollen chic" /></div>
<p>To understand the triangle shape, let's look again to the CSS:</p>
<pre class="language-css"><code class="language-css"> <span class="token property">border-left</span><span class="token punctuation">:</span> 60px solid transparent<span class="token punctuation">;</span><br /> <span class="token property">border-right</span><span class="token punctuation">:</span> 60px solid transparent<span class="token punctuation">;</span><br /> <span class="token property">border-top</span><span class="token punctuation">:</span> 90px solid $skinColor<span class="token punctuation">;</span></code></pre>
<p>The border-top, gives the length to the triangle, and the border-left and border-right, give the width to the edges closer to the neck.</p>
<p>You might be wondering, yes but why this creates a triangle? I actually also wondered that too. To understand why this works I just added different colors to all the borders, and this is what happened:</p>
<div class="u-photo"><img src="https://danielavalero.com/static/img/triangle-learning.png" alt="screenshot of a rectangle in CSS made only of borders" /></div>
<p>As the div does not have a <code>width</code> and <code>height</code> the borders expand doing a natural triangle shape, until they reach the center of the rectangle. So that when we add a triangle doing:</p>
<pre><code> border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 90px solid $skinColor;
</code></pre>
<p>We are:</p>
<ol>
<li>Giving the left and right borders the same size and a transparent background</li>
<li>Giving the top border a higher size and a colored background</li>
<li>Letting the bottom border unset</li>
</ol>
<p>Which will basically draw the top part of the image I placed above, with the difference of not having color in the red parts.</p>
<p>Curious note: If you add <code>width</code> and <code>height</code>, there will be a shape in the middle. So when we are creating layouts, say a box with 1px border, as the content of the box is bigger than the border, it will seem as if "eats" that whole "triangle" shape of the borders. But in reality, that triangle shape remains there.</p>
<p>Why? Because when the borders of each of the edges of a square shape meet each other, the browser will draw a diagonal line. As we always use the same color for all the borders, we never see it.</p>
<p>Curious? Open the dev tools and try changing the colors of one border of a shape you have :) I did.</p>
<div class="u-photo"><img src="https://danielavalero.com/static/img/border-color-see.png" alt="border with different color" /></div>
<h3 id="the-curls" tabindex="-1">The curls</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/learn-to-devart:-learning-to-draw-shapes-with-css-for-website-makers.-learninpublic/#the-curls"><span class="sr-only">Permalink to “The curls”</span> <span aria-hidden="true"></span></a><p>To make the curls, I made a an oval that was wider than taller. At the beginning I made a perfect circle, but was not really looking like my hair, my curls are less tight, so the oval seemed a better choice.</p>
<p>The placing of the curls around my face was the challenge.</p>
<p>I thought about using trigonometry (sin, cos) to find the points at the edge of the circle that makes my face. Which would have worked if I knew the exact point that is in the center of the circle. In my case I did not know it because it will change depending on the viewport. So that was not an option.</p>
<p>The calculation of the points around my face's circle had to depend on the size of it. And in order to actually make it work, I placed the div that makes my hair and the curls inside the div of my face. So this way, as the face is the container element, it could be easier to actually find the points.</p>
<p>This is the HTML</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>face skinColor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hair<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>curl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>smile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>glasses<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>How did I solve it? In the codepen I am using SASS, which allows me to use mixins. I googled a bit, and found this mixin (which I adapted a bit to my needs). I will comment in within the code the interesting parts.</p>
<pre class="language-css"><code class="language-css">// mixin <span class="token property">from</span><span class="token punctuation">:</span> <span class="token property">https</span><span class="token punctuation">:</span>//css-tricks.com/snippets/sass/placing-items-circle/ <br />// circle size will be the size of my head<span class="token punctuation">,</span> and the item size will be the size of the curl.<br /><span class="token atrule"><span class="token rule">@mixin</span> <span class="token function">on-circle</span><span class="token punctuation">(</span>$item-count<span class="token punctuation">,</span> $circle-size<span class="token punctuation">,</span> $item-size<span class="token punctuation">)</span></span> <span class="token punctuation">{</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><br /> // My hair grows to the sides<span class="token punctuation">,</span> so I made it wider than taller.<br /> <span class="token property">width</span><span class="token punctuation">:</span> $circle-size + 10<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> $circle-size<span class="token punctuation">;</span><br /> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br /><br /> <span class="token selector">> *</span> <span class="token punctuation">{</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><br /> <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br /> <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br /> <br /> // These values are kind of arbitrary<span class="token punctuation">,</span> I was just playing around with them<br /> // and kept the ones that felt closer to my hair<br /> <span class="token property">width</span><span class="token punctuation">:</span> $item-size + 10<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> $item-size - 3<span class="token punctuation">;</span><br /> <br /> // My hair is not a perfect circled curl<span class="token punctuation">,</span> so I did not make it 50%<br /> <span class="token property">border-radius</span><span class="token punctuation">:</span> 45%<span class="token punctuation">;</span><br /> <br /> // This <span class="token string">"centers"</span> the curl vertically and horizontally. <br /> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">-</span><span class="token punctuation">(</span><span class="token punctuation">(</span>$item-size / 2<span class="token punctuation">)</span> +3<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <br /> // This part is what makes the magic. I'll explain it below.<br /> $<span class="token property">itemsRotate</span><span class="token punctuation">:</span> $item-count - 1<span class="token punctuation">;</span><br /> $<span class="token property">angle</span><span class="token punctuation">:</span> <span class="token function">-</span><span class="token punctuation">(</span>200 / $itemsRotate<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> $<span class="token property">rot</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /><br /> <span class="token atrule"><span class="token rule">@for</span> $i from 1 through $itemsRotate</span> <span class="token punctuation">{</span><br /> <span class="token selector">&:nth-of-type(#</span><span class="token punctuation">{</span>$i<span class="token punctuation">}</span><span class="token selector">)</span> <span class="token punctuation">{</span><br /> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>$rot * 1deg<span class="token punctuation">)</span><br /> <span class="token function">translate</span><span class="token punctuation">(</span>$circle-size / 1.7<span class="token punctuation">)</span><br /> <span class="token function">rotate</span><span class="token punctuation">(</span>$rot * -1deg<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /> $<span class="token property">rot</span><span class="token punctuation">:</span> $rot + $angle<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token selector">&:nth-of-type(#</span><span class="token punctuation">{</span>$item-count<span class="token punctuation">}</span><span class="token selector">)</span> <span class="token punctuation">{</span><br /> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>$rot * 1deg<span class="token punctuation">)</span> <span class="token function">translate</span><span class="token punctuation">(</span>$circle-size / 1.7<span class="token punctuation">)</span><br /> <span class="token function">rotate</span><span class="token punctuation">(</span>$rot * -1deg<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token selector">&:last-of-type</span> <span class="token punctuation">{</span><br /> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>$rot * 1deg<span class="token punctuation">)</span> <span class="token function">translate</span><span class="token punctuation">(</span>$circle-size / 1.65<span class="token punctuation">)</span><br /> <span class="token function">rotate</span><span class="token punctuation">(</span>$rot * -1deg<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>So, the location of the curls is using <code>trasnform</code>. The idea is:</p>
<ol>
<li>Give me the number of items to place around the circle</li>
<li>We will given that we have the circle size, we will decide where to place the curls based on angles. A circle makes an angle of 360 degrees, as the hair grows only on top and the sides, I picked an angle of: 200 degrees.</li>
<li>For each of the curls, we will calculate the angle where we will place the curl. We do that by dividing the total degree number: 200 by the amount of items we want to place. (I'll explain the -1 below)</li>
</ol>
<pre class="language-css"><code class="language-css"> $<span class="token property">itemsRotate</span><span class="token punctuation">:</span> $item-count - 1<span class="token punctuation">;</span><br /> $<span class="token property">angle</span><span class="token punctuation">:</span> <span class="token function">-</span><span class="token punctuation">(</span>200 / $itemsRotate<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> $<span class="token property">rot</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></code></pre>
<p>Then you see, that taking advantage of <code>transform</code> we can easily say: rotate this item to <code>$angle</code> and then we will translated it right to the edge of my face. This is done by dividing the total circle size / 2 (radius). I deliberately picked a number sightly smaller than 2, because I really don't wear my hair on my face, I find it actually annoying, I always move it a bit to the sides. By picking a smaller number the point where the curl was translated, ended up being wider.</p>
<pre class="language-css"><code class="language-css"> <span class="token atrule"><span class="token rule">@for</span> $i from 1 through $itemsRotate</span> <span class="token punctuation">{</span><br /> <span class="token selector">&:nth-of-type(#</span><span class="token punctuation">{</span>$i<span class="token punctuation">}</span><span class="token selector">)</span> <span class="token punctuation">{</span><br /> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>$rot * 1deg<span class="token punctuation">)</span><br /> <span class="token function">translate</span><span class="token punctuation">(</span>$circle-size / 1.7<span class="token punctuation">)</span><br /> <span class="token function">rotate</span><span class="token punctuation">(</span>$rot * -1deg<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /> $<span class="token property">rot</span><span class="token punctuation">:</span> $rot + $angle<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span></code></pre>
<p>Then we have these two elements. I placed them outside the function, because I have longer hair, and wanted to have some that were a bit "hanging"</p>
<pre class="language-css"><code class="language-css"> <span class="token selector">&:nth-of-type(#</span><span class="token punctuation">{</span>$item-count<span class="token punctuation">}</span><span class="token selector">)</span> <span class="token punctuation">{</span><br /> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>$rot * 1deg<span class="token punctuation">)</span> <span class="token function">translate</span><span class="token punctuation">(</span>$circle-size / 1.7<span class="token punctuation">)</span><br /> <span class="token function">rotate</span><span class="token punctuation">(</span>$rot * -1deg<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token selector">&:last-of-type</span> <span class="token punctuation">{</span><br /> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>$rot * 1deg<span class="token punctuation">)</span> <span class="token function">translate</span><span class="token punctuation">(</span>$circle-size / 1.65<span class="token punctuation">)</span><br /> <span class="token function">rotate</span><span class="token punctuation">(</span>$rot * -1deg<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span></code></pre>
<h4 id="how-the-rotate-and-translate-work%3F" tabindex="-1">How the rotate and translate work?</h4>
<a class="header-anchor" href="https://danielavalero.com/posts/learn-to-devart:-learning-to-draw-shapes-with-css-for-website-makers.-learninpublic/#how-the-rotate-and-translate-work%3F"><span class="sr-only">Permalink to “How the rotate and translate work?”</span> <span aria-hidden="true"></span></a><p>The concepts come from math. Around a circle, an element can rotate and translate. To understand them better, think of the rotation and translation movements of the earth.</p>
<ol>
<li>Translate (as of translation): It's the movement of an object around some space. The earth for example translates over an ellipsis around the sun, because of that we have seasons.</li>
<li>Rotate (as of rotation): This is the movement of the object around one of its own axis. The earth rotates over one of it axis, and because of that we have day and night.</li>
</ol>
<p>How this exactly works, is something I want to learn next. However, what the specific order of the rotate, translate, rotate does is:</p>
<ol>
<li>First rotate: moves the curl around the my face's shape</li>
<li>Translate: Moves the curl from the center of my face, to the edge</li>
<li>Second rotate: rotates the curl so that its horizontal-ish ellipsis shape stays horizontal all the time, regardless of where around my face is.</li>
</ol>
<div class="u-photo"><img src="https://danielavalero.com/static/img/curl-placed.png" alt="one curl placed around my face" /></div>
<p>You might be wondering, what is that black semicircle in that image? That is what gives the frame to the forehead and sides of the face. It's done with <code>inset</code> <code>box-shadow</code>. Why box shadow? Well, box shadow is there to add a shadow at the frame of an element. I wanted to frame my face :)</p>
<p><code>box-shadow: inset 2px 7px black, inset -1px 5px black</code></p>
<p>In there you see two definitions. The first one sets the box shadow to the left side of my face, and the second one to the right.</p>
<h3 id="the-smile-and-the-glasses" tabindex="-1">The smile and the glasses</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/learn-to-devart:-learning-to-draw-shapes-with-css-for-website-makers.-learninpublic/#the-smile-and-the-glasses"><span class="sr-only">Permalink to “The smile and the glasses”</span> <span aria-hidden="true"></span></a><p>The smile is easy, two semi circles, one sightly rotated (because I don't smile mathematically perfect) and the other one longer.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.smile</span> <span class="token punctuation">{</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span><br /> <span class="token property">margin</span><span class="token punctuation">:</span> 0 1em 1em 0<span class="token punctuation">;</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span><br /> <span class="token property">border-bottom-left-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br /> <span class="token property">border-bottom-right-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><br /> <span class="token property">top</span><span class="token punctuation">:</span> 60%<span class="token punctuation">;</span><br /> <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br /> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> 50%<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">z-index</span><span class="token punctuation">:</span> 10<span class="token punctuation">;</span><br /><br /> <span class="token selector">&:before</span> <span class="token punctuation">{</span><br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 55px<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span><br /> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> $skinColor<span class="token punctuation">;</span><br /> <span class="token property">border-bottom-left-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br /> <span class="token property">border-bottom-right-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<p>By defining border radius to the bottom, we make the semi circle. And as a smile is more like a longer and flat semi circle, I made it a semi ellipsis.</p>
<pre class="language-css"><code class="language-css"> <span class="token property">border-bottom-left-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br /> <span class="token property">border-bottom-right-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span></code></pre>
<p>The second semicircle gives some round shape to the top of my smile. This one is a bit longer, and has my skin color as background color, so that it covers the flat top part of the smile, and gives a more "natural" smile effect.</p>
<pre class="language-css"><code class="language-css"> <span class="token property">width</span><span class="token punctuation">:</span> 55px<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> $skinColor<span class="token punctuation">;</span><br /> <span class="token property">border-bottom-left-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br /> <span class="token property">border-bottom-right-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span></code></pre>
<h4 id="the-glasses" tabindex="-1">The glasses</h4>
<a class="header-anchor" href="https://danielavalero.com/posts/learn-to-devart:-learning-to-draw-shapes-with-css-for-website-makers.-learninpublic/#the-glasses"><span class="sr-only">Permalink to “The glasses”</span> <span aria-hidden="true"></span></a><p>They are also straight forward. Just one div, with some size, and as a <code>before</code> and <code>after</code> has defined both glasses. They are a simple squared div, with rounded corners and absolute positioned to the sides.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.glasses</span> <span class="token punctuation">{</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><br /> <span class="token property">top</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span><br /> <span class="token property">left</span><span class="token punctuation">:</span> 53%<span class="token punctuation">;</span><br /> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> 50%<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">z-index</span><span class="token punctuation">:</span> 10<span class="token punctuation">;</span><br /><br /> <span class="token selector">&:before,<br /> &:after</span> <span class="token punctuation">{</span><br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span><br /> <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #121252<span class="token punctuation">;</span><br /> <span class="token property">background-color</span><span class="token punctuation">:</span> #c6d8da<span class="token punctuation">;</span><br /> <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span><br /> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><br /> <span class="token selector">&:before</span> <span class="token punctuation">{</span><br /> <span class="token property">left</span><span class="token punctuation">:</span> -17px<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token selector">&:after</span> <span class="token punctuation">{</span><br /> <span class="token property">right</span><span class="token punctuation">:</span> -18px<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
<h3 id="what-i-learned" tabindex="-1">What I learned</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/learn-to-devart:-learning-to-draw-shapes-with-css-for-website-makers.-learninpublic/#what-i-learned"><span class="sr-only">Permalink to “What I learned”</span> <span aria-hidden="true"></span></a><ul>
<li>How to start thinking on what to do with divs and CSS to create shapes</li>
<li>When to use new layout techniques like flexbox and when is useful to absolute position.</li>
<li>Now that we mentioned absolute position. Just because it's old does not mean is evil. Using this to position my smile and the glasses made total sense because there is no real mathematical function or automatic content-based layout property I could use to place eyes and smile in a way that looks natural. This had to be arbitrary.</li>
<li>Finally understood what the syntax of <code>border-radius: x x x x / x x x x</code> does. And `box-shadow: x , x;</li>
<li>Finally understood how the mechanics of creating a triangle works.</li>
<li>How to make an egg shape.</li>
<li>Face shapes, smiles, and locating eyes and smiles around the face needs to be imperfect, drawing humans is not about making geometrically perfect figures.</li>
</ul>
<h3 id="useful-links" tabindex="-1">Useful links</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/learn-to-devart:-learning-to-draw-shapes-with-css-for-website-makers.-learninpublic/#useful-links"><span class="sr-only">Permalink to “Useful links”</span> <span aria-hidden="true"></span></a><ul>
<li><a href="https://css-tricks.com/the-shapes-of-css/">Basic shapes in CSS</a></li>
<li><a href="https://tympanus.net/codrops/css_reference/transform/">Deeper explanation of positioning elements around the X, Y and Z axis with the <code>transform</code> property</a></li>
</ul>
<h3 id="things-i-want-to-understand-better" tabindex="-1">Things I want to understand better</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/learn-to-devart:-learning-to-draw-shapes-with-css-for-website-makers.-learninpublic/#things-i-want-to-understand-better"><span class="sr-only">Permalink to “Things I want to understand better”</span> <span aria-hidden="true"></span></a><ul>
<li>Practice to understand deeply how the and why the order of <code>rotate transform rotate</code> had to be exactly that way. How the order affects the coordinate system.</li>
</ul>
Interview | Women in Tech: "To drive change for the better, it is fundamental that more women gain a foothold in the tech industry."2020-04-23T09:38:58Zhttps://danielavalero.com/posts/interview-or-women-in-tech:-%22to-drive-change-for-the-better-it-is-fundamental-that-more-women-gain-a-foothold-in-the-tech-industry.%22/<div class="u-photo"><img src="https://danielavalero.com/static/img/women-in-tech-1600x500-big.png" alt="working tools of a woman in tech" title="Image from Foto von Lum3n von Pexels" /></div>
<p><strong>Original interview in German for <a href="https://entwickler.de/online/karriere/women-in-tech-valero-579932304.html?utm_source=danielavalero.com&utm_medium=social&utm_campaign=Diversity%2CPress">Entwikler.de</a></strong></p>
<p>The tech industry is dominated by men - so far, so bad. Slowly but surely, the so-called Boys Club is getting filled by talented women: more and more women are gaining a foothold in the industry.</p>
<p>For this reason, we want to give exciting and inspiring women the opportunity to introduce themselves and tell how and why they chose the way into the tech industry. But issues such as gender prejudice, challenges or funding opportunities are also discussed.</p>
<p><strong>Since when are you interested in Tech? How did the first contact with Tech come about (parents, school, self-interest, studies etc.)?</strong></p>
<p>When I was about 15 or 16 years old, we had the subject programming in school and learned to code basic algorithms in Turbo Pascal. From the beginning I was totally enthusiastic about it and loved the subject so much that I wanted to do my friends' homework as well. So I could spend more time at the computer, because we didn't have one at home.</p>
<p>Later on, when I finally decided to study, I was torn between phycology, i.e. the study of algae, and computer science. But I soon realized that I didn't want to live without codes - so in the end the choice was easier than I thought. At university I was involved in a GNU/Linux user group and thus got in contact with the command line and other "nerdy" applications.</p>
<p><strong>How was your way until your current job? Which different career paths have you taken?</strong></p>
<p>My career began as a Java developer in a very conservative and traditional software company. The company had rules that made no sense to me. For example, all employees were required to wear suits every day - even the developers, although they were all crammed into a large, windowless room and had no customer contact.</p>
<p>Afterwards I worked as a PHP developer for the Venezuelan government. The work culture there was strongly influenced by politics: Who was the bigger Chavez fan? Who had more "friends" in positions of power? Since I am a staunch opponent of the regime, I changed sides.</p>
<p>My next stage in my career was as a webmaster for Venezuela's largest opposition online newspaper - La Patilla. The website was based on WordPress and I was responsible for all aspects of the technology and the platform - from the helpdesk to the implementation and maintenance of functions to the coordination of the server strategy and scaling. We often had to fend off government DoS attacks because the country was in the middle of a media war.</p>
<p>This was the point when I decided to go abroad. I ended up in a small startup in Bonn that had developed an app for document management. There I developed and maintained the new website and designed an online dashboard for the app's users to configure their settings more efficiently. Everything was based on ClojureScript. Since I had never worked with it before, I enlisted help from the backend team to understand the technology. I learned a lot and enjoyed the multicultural environment.</p>
<p>In 2014, I finally joined Publicis Sapient, a consultancy for digital business transformation, where I still work as a technical manager in the front-end area. I really enjoy my work - not least because of the great team and the exciting technology projects for international clients.</p>
<p><strong>Are there people (women) who have supported/promoted you? Do you have a role model?</strong></p>
<p>At Publicis Sapient, three women are my greatest role models: Suse Menne, Alison Walden and Ute Zankl. As Country & Operations Lead, Suse manages the business in Germany, Austria and Switzerland. She is a down-to-earth and cooperative leader who is really good at what she does. Suse has supported me since I joined Publicis Sapient and continues to support me today.</p>
<p>Alison is Director of Experience Technology in our Canadian office in Toronto. She is friendly, humble, a wonderful speaker and a recognized expert in web accessibility. Despite her position as Director on the other side of the world, she always likes to take time out when I ask her for advice. Simply a wonderful woman.</p>
<p>Ute leads the People Strategy department. She actively promotes diversity, is always there for me in difficult moments and stands by my side.</p>
<p>In the tech community I admire Rachel Andrew and Marc Thiele. Rachel because she has achieved so much in her career. She is a renowned CSS expert, member of w3c and editor-in-chief of Smashing Magazine. Marc is the founder of Beyond Tellerand, a diverse event where technology and creativity meet. The environment he creates is inviting and has extremely high quality standards. Marc is always humble, supportive and a great advocate of diversity.</p>
<p><strong>Has someone put obstacles in your way?</strong></p>
<p>During my first jobs I was severely discriminated against and harassed. I was told things like: "You look prettier with your mouth shut" or "Just do what I say if you want to live an easier life here". The working environment was characterised by psychological aggression. One day, even a colleague's wife followed me on the bus after work. When I got off and she noticed, she threatened to kill me. The first two years of my career were really very hard.</p>
<p>After that time I was lucky to work in environments where diversity is appreciated and where you can feel safe. But what I am always confronted with is Unconscious Bias. I have worked with male colleagues whose communication was disrespectful to me. On other occasions I was not considered capable of taking on leadership roles due to subconscious prejudices. It was precisely this Unconscious Bias that caused my career to stagnate at times.</p>
<p>Fortunately, I am a resilient person and know when to ask for help. Despite all obstacles, I have so far achieved every goal I set myself. More slowly and with greater effort than people from social or professional majorities, but I have made it.</p>
<p><strong>Which position do you now hold, in which company? What exactly are you doing/what does your working day look like?</strong></p>
<p>I currently work as a Senior Experience Technology Engineer at Publicis Sapient. In this position, I was responsible for a project for DHL - the front-end delivery of our team and, in close cooperation with the product owner, the further roadmap - as front-end lead last year.</p>
<p>My daily work routine starts with the usual "Daily". The meeting is actually the only predictable thing, because every day is different. Sometimes I am more concerned with administrative tasks such as planning, maintaining and preparing "stories". Other days I concentrate more on optimizing our working methods and the exchange between stakeholders and team members. Or I work directly with the technology, writing code, renewing pull requests or further developing our technical vision.</p>
<p>I also lead the diversity team in our Cologne office. This team drives initiatives for more diversity and inclusion. Fortunately, we have added many dedicated members over the past year and are there for anyone who needs our help.</p>
<p><strong>Have you developed something yourself? If so, describe the project to us.</strong></p>
<p>A few years ago we developed a digital UI library with components for Bosch. The quality standards were the highest we had implemented at Publicis Sapient up to that point. The team I was privileged to lead consisted of highly talented senior developers. It was a tough year, but we exceeded the client's expectations and earned their trust. What we developed was eventually rolled out on various Bosch websites around the world.</p>
<p><strong>Why are there so few women in the tech industry? What hurdles do women still have to overcome today?</strong></p>
<p>In my opinion, we women have many natural strengths, but also some qualities that stand in our way: We tend to judge ourselves too harshly, to be self-critical and easily become insecure about our abilities.</p>
<p>Our industry is patriarchally organized and oriented towards men. The negative qualities of being a woman still too often stand in our way. In addition, men often unjustifiably accuse us of being too emotional and of overreacting to trivialities. In addition, men's more pronounced competitive thinking leads to the fact that we women are often - consciously or unconsciously - belittled so that they themselves are better off.</p>
<p>In many cases one has the feeling that we have to act more like a man in order to be successful ourselves. This is an uncomfortable compromise that few women are prepared to make. Others prefer to stay out of it right away or leave the field again quickly.</p>
<p><strong>Which clichés/stereotypes have you already encountered in relation to "Women in Tech"? What problems does this cause?</strong></p>
<p>The best way to describe stereotypes is the double-bind dilemma. When women move up into leadership positions, people tend to see them as competent. But they don't like them because they are seen as "iron ladies". If we act cautiously and cooperatively, people tend to like us, but do not see us as technically competent. A dilemma.</p>
<p>So we can be considered competent and not be liked, or incompetent but popular. Finding the balance between these two poles is a journey we must embark on during our career.</p>
<p>The problem is that we find ourselves in a state of constant struggle - which is not bearable in the long run. This is why many women tend not to aspire to management positions in technical professions, because once you get there, the struggle becomes even worse.</p>
<p><strong>And why should more women work in the tech industry? Would our world look different if more women would work in STEM? What do you think would be the advantages - on a social, professional, cultural and economic level - if there were more women in the tech industry? Would certain sectors benefit particularly from innovation?</strong></p>
<p>Many studies show that mixed teams that combine both female and male attributes perform better. This has a positive effect on cooperation, well-being, emotional intelligence and psychological security.</p>
<p>In my opinion, the old model of the male software industry is becoming less important every day. Admittedly, this concept is one of the reasons why the industry is where it is today. But for success in the future, male dominance must be broken.</p>
<p>To drive change for the better and to change the way we work in a positive way, it is essential that more women gain a foothold in the tech industry.</p>
<p><strong>What does the future look like - will the diversity debate soon be history?</strong></p>
<p>I believe that this debate will continue for many years to come, with varying degrees of intensity. At present, the social sciences show how important diversity and gender parity are for teams. Not only are better results achieved, but innovations are also positively influenced.</p>
<p>Companies are finally beginning to take diversity seriously and make it a priority. However, societies learn and change very slowly. So it will probably be many years before the fight for more diversity is over.</p>
<p>In the past, it was even more difficult for minorities to hold their own. They had to be strong and have the courage to rebel. My generation does the same now. Today, fortunately, there are more men who are committed to diversity. The next generation will have it easier, but the difficult situation of women in the tech industry will certainly continue for a few years.</p>
<p><strong>Do you have any tips for women who want to enter the tech industry? What should other girls and women know about working in the tech industry?</strong></p>
<p>Find something you love to do and learn to master it. Keep up to date with the latest technology, find mentors, contribute to open source, create codepens and PoCs, and work on your technological skills Being able to show toughness when it's needed is also a great advantage. It is also important to be open and continuously educate yourself, improve your communication and listening skills, and make good use of female emotional intelligence.</p>
<p>If you are able to attend regular meetings of the Women in Tech community, connect with like-minded people and build a network, you are on the right track. You should also be careful to control your emotions, be respectful and friendly, and give open feedback to others when you are harassed or bullied. If it's not worth it, move on. True to the motto:</p>
<blockquote>
<p>If you are going through hell, don't stop, but move on. This is not a good place to stop.</p>
</blockquote>
How to keep calm and carry on in high pressure project times2021-10-25T11:57:16Zhttps://danielavalero.com/posts/how-to-keep-calm-and-carry-on-in-high-pressure-project-times/<p>The pandemic has changed the world and has done it in multiple layers. One of them is the increased awareness we all have on the importance of mental health and work-life balance.</p>
<p>I have learned that quiet time is important, me-time is necessary, and are currently in a new discovery of a new balance, extraversion vs introversion, quiet time vs busy time.</p>
<p><a href="https://helloanselm.com/writings/its-time-for-a-healthy-tech-approach">Anselm Hannemann wrote a nice piece on the topic</a>, he wonders in his article: What do we need to do, to make building digital products more sustainable for us, the people behind them.</p>
<p>His point is: switching the focus to the people.</p>
<blockquote>
<p>Once we start building things for people, we not only make others happier and healthier, we will be happier as well. There’s nothing as long-lasting and uplifting as someone else who is grateful for what you have done for them. Our own happiness will make us calmer and more healthy.</p>
</blockquote>
<p>When we put people's happiness as part of our priorities, we are also putting mental health and well-being right in front of the priority list. And the first step to do this is to revisit your own work time, under the lens of:</p>
<ul>
<li>What can I do, so that during my workday, I have time to just do nothing, unwind and relax?</li>
<li>What rituals can I add to my week, so that I keep an eye on myself in times of high pressure?</li>
</ul>
<h2 id="my-more-well-being-focused-work-week" tabindex="-1">My more well-being focused work week</h2>
<a class="header-anchor" href="https://danielavalero.com/posts/how-to-keep-calm-and-carry-on-in-high-pressure-project-times/#my-more-well-being-focused-work-week"><span class="sr-only">Permalink to “My more well-being focused work week”</span> <span aria-hidden="true"></span></a><p>Currently, I am working on a big and interesting project, which promises a lot of weeks in a state of high pressure and a lot of things to do. In order to make this manageable for me, I have revisited my week, my rituals, and have answered the questions I have shared above.</p>
<h3 id="mondays" tabindex="-1">Mondays</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/how-to-keep-calm-and-carry-on-in-high-pressure-project-times/#mondays"><span class="sr-only">Permalink to “Mondays”</span> <span aria-hidden="true"></span></a><p><strong>Set week goals.</strong> I plan my week and set myself goals for the week. I also make a bullet list of things I will do that day, check the meetings of the week, etc.</p>
<h3 id="every-day" tabindex="-1">Every day</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/how-to-keep-calm-and-carry-on-in-high-pressure-project-times/#every-day"><span class="sr-only">Permalink to “Every day”</span> <span aria-hidden="true"></span></a><p><strong>Start the day slowly</strong>, drink a coffee or a tea, write in my journal, or do sports (can be yoga, running, or some functional training)</p>
<p><strong>Have a do-nothing 5 minutes break</strong>. It changes every day when I do it, usually depending on meetings, but I religiously take the time to just do nothing. I look forward to this time very much every day.</p>
<p><strong>Emergency check-in if necessary at the end of the day</strong>. If there is a situation that drained me more than usual or gave me more than usual energy, I take some time to reflect on it and write down my thoughts about the situation. This helps me to avoid accumulating stress that over time translates into an unhealthy explosion to other people around me.</p>
<h3 id="tuesday---thursday" tabindex="-1">Tuesday - Thursday</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/how-to-keep-calm-and-carry-on-in-high-pressure-project-times/#tuesday---thursday"><span class="sr-only">Permalink to “Tuesday - Thursday”</span> <span aria-hidden="true"></span></a><p><strong>Plan the day.</strong> Check my bullet list, and my weekly goals, mark things as done, and plan the ones I will do on that day, check when I have meetings that day.</p>
<h3 id="fridays" tabindex="-1">Fridays</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/how-to-keep-calm-and-carry-on-in-high-pressure-project-times/#fridays"><span class="sr-only">Permalink to “Fridays”</span> <span aria-hidden="true"></span></a><p><strong>Weekly self-check-in,</strong> I block roughly 2 hours to go to a cafe or some neutral place to reflect on my week. write down what gave me energy, what drained me, How I felt during the week, and if there is something I should keep an eye on so that I can address stressful or conflict situations proactively in a healthy manner. I also write down my successes, what I have achieved.</p>
<h2 id="conclusion" tabindex="-1">Conclusion</h2>
<a class="header-anchor" href="https://danielavalero.com/posts/how-to-keep-calm-and-carry-on-in-high-pressure-project-times/#conclusion"><span class="sr-only">Permalink to “Conclusion”</span> <span aria-hidden="true"></span></a><p>Living a happy life is important if you are in a similar industry like I do, and building the type of products that I do: we are not saving lives.</p>
<p>This means: Work is not everything, leading a happy life is on us, having enough energy in our personal lives is something that we can do, even in high-pressure times, and this should be a priority for every single one of us.</p>
<p>For me, it has become a priority to focus on my own well-being, so that I can bring the best part of my own self to work, and continue creating a safe environment, where people can thrive.</p>
Part 1: Let's talk about burnout and how to catch it early2022-01-30T11:13:49Zhttps://danielavalero.com/posts/part-1:-let's-talk-about-burnout-and-how-to-catch-it-early/<p>Burnout is more common among us than we think, and like any disease, has different stages. The most common is early-stage burnout. Its symptoms are usually exhaustion or cynicism towards our workplace or colleagues.</p>
<p>Having a good understanding of burnout, what is, what causes it, how to recover, and how to prevent it, can be a powerful tool that can help us have a healthier work-life balance.</p>
<p>The topic is wide and has different layers. I will be publishing a series of blog posts in this regard, where I expand on it, to start, let’s define it, and share some tips.</p>
<h2 id="define%3A-burnout" tabindex="-1">Define: Burnout</h2>
<a class="header-anchor" href="https://danielavalero.com/posts/part-1:-let&#define%3A-burnout"><span class="sr-only">Permalink to “Define: Burnout”</span> <span aria-hidden="true"></span></a><p>The <a href="https://www.who.int/news/item/28-05-2019-burn-out-an-occupational-phenomenon-international-classification-of-diseases">World Health Organization</a> recognized burnout as an occupational phenomenon. Yet they don't classify it as a medical condition, it has become so common, that today the WHO labels it as a symdrome, and calls to address it as such, due to its effects on human beings.</p>
<blockquote>
<p>“Burn-out is a syndrome conceptualized as resulting from chronic workplace stress that has not been successfully managed. It is characterized by three dimensions:</p>
<ul>
<li>Feelings of energy depletion or exhaustion;</li>
<li>Increased mental distance from one’s job, or feelings of negativism or cynicism related to one's job; and</li>
<li>Reduced professional efficacy.</li>
</ul>
<p>Burn-out refers specifically to phenomena in the occupational context and should not be applied to describe experiences in other areas of life.”</p>
</blockquote>
<h3 id="what-causes-it" tabindex="-1">What causes it</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/part-1:-let&#what-causes-it"><span class="sr-only">Permalink to “What causes it”</span> <span aria-hidden="true"></span></a><p>Research has shown that burnout is generally a consequence of a dysfunctional relationship between two parties – the individual and the workplace. The individual does not have the support or internal resources to deal with stress, and the organization keeps putting pressure or lacks organizational structures to detect and address it in a timely manner. Among the causes that research has shown to be correlated to burnout are:</p>
<ol>
<li>Unrealistic Deadlines</li>
<li>Unmanageable Workloads</li>
<li>High-Risk Deployments*</li>
<li>Unmanaged technical debt*</li>
<li>Unplanned work</li>
<li>Lack of Support and Autonomy</li>
<li>Miscommunication with Management</li>
</ol>
<p>* Applies to software development</p>
<h2 id="early-indicators" tabindex="-1">Early indicators</h2>
<a class="header-anchor" href="https://danielavalero.com/posts/part-1:-let&#early-indicators"><span class="sr-only">Permalink to “Early indicators”</span> <span aria-hidden="true"></span></a><blockquote>
<p><strong>Exhaustion</strong> is the central symptom of burnout. It comprises profound physical, cognitive, and emotional fatigue that undermines people’s ability to work effectively and feel positive about what they’re doing</p>
<p><strong>Cynicism</strong>, ... represents an erosion of engagement. It is essentially a way of distancing yourself psychologically from your work. Instead of feeling invested in your assignments, projects, colleagues, customers, and other collaborators, you feel detached, negative, even callous</p>
<p>exhaustion and cynicism are the two primary measures of burnout</p>
<p>....</p>
<p>Thus, a potential early warning sign is the presence of one of these two dimension ... For example, during a period of peak demand, employees may become seriously exhausted, but their cynicism remains low because they can address the demands through effective coping.</p>
</blockquote>
<p>Source: <a href="https://www.oreilly.com/library/view/managing-burnout-in/9781843347347/">Managing Burnout in the Workplace </a></p>
<h2 id="what-to-do%3F" tabindex="-1">What to do?</h2>
<a class="header-anchor" href="https://danielavalero.com/posts/part-1:-let&#what-to-do%3F"><span class="sr-only">Permalink to “What to do?”</span> <span aria-hidden="true"></span></a><p>If one thing research as shown clearly is, that in order to prevent and combat burnout, actions from both sides have to be taken: the individual side and from the organization side.</p>
<p>Before we can influence our organizations, or decide if we want to do such a thing. we need to be in good mental health.</p>
<p>Therefore, as the first step to coping constructively with early-stage burnout, here are some science-backed up tips that have worked for me.</p>
<p><em>Disclaimer: These recommendations would work for the early stages, chronic burnout takes up to 3 years to be cured, and that happens with close therapeutic treatment</em></p>
<h2 id="first-3-steps" tabindex="-1">First 3 steps</h2>
<a class="header-anchor" href="https://danielavalero.com/posts/part-1:-let&#first-3-steps"><span class="sr-only">Permalink to “First 3 steps”</span> <span aria-hidden="true"></span></a><ul>
<li>
<p><strong>Take time to unwind, take time off:</strong> If you reach the moment when you can't switch off work from your mind, or you get any of the symptoms (exhaustion or depersonalization), you should slow down, either take less workload or get medical leave.</p>
</li>
<li>
<p><strong>Raise the red flag in your organization:</strong> As important as taking care of yourself, is taking care of others. If this is happening to you, stakes are high that is happening to others in your organization, therefore, talk to your supervisor about this, raise the flag.</p>
</li>
<li>
<p><strong>Self-reflection to identify the cause</strong>: Research shows that when burnout happens, the relationship of the individual and organization to the six strategic areas* of the workplace is imbalanced. Check with yourself which one(s) are causing you more stress.</p>
<p>* These are workload, control or autonomy, reward, community, fairness, and values.</p>
</li>
</ul>
<h2 id="moving-forward" tabindex="-1">Moving forward</h2>
<a class="header-anchor" href="https://danielavalero.com/posts/part-1:-let&#moving-forward"><span class="sr-only">Permalink to “Moving forward”</span> <span aria-hidden="true"></span></a><ul>
<li>
<p><strong>Become aware of what stresses you up</strong>: one of the recommendations is to keep a stress diary. This technique might be of great help to keep an eye on what is stressing you, how much, and how you can cope with it.</p>
<p>The stress diary is a document with a table that has the next columns: date, time, situation, scale, symptoms, efficiency, and reaction</p>
</li>
<li>
<p><strong>Understand and set your boundaries:</strong> every human has a limit, you need to understand where your limits are. Keeping healthy limits is one of the ways you have to keep your mental sanity and continue growing professionally in a sustainable manner. At work, endurance is more important than speed.</p>
</li>
<li>
<p><strong>Change your routines:</strong></p>
<ul>
<li>Create a routine that marks the beginning of the workday</li>
<li>Create a routine that marks the end of the workday.</li>
<li>Exercise daily</li>
<li>Cook healthy meals</li>
</ul>
</li>
<li>
<p><strong>Manage your energy, not your time</strong>: We are workers of the mind, as we are, our productivity not necessarily can be measured in terms of time, but rather in terms of energy. Keeping an eye on and managing how much energy you have, what gives you energy and what drains you is key to preventing burnout.</p>
</li>
<li>
<p><strong>Connect with like-minded people,</strong> having a social support system is one of the elements that research consistently shows as a factor that reduces and prevents stress.</p>
</li>
</ul>
<h3 id="references" tabindex="-1">References</h3>
<a class="header-anchor" href="https://danielavalero.com/posts/part-1:-let&#references"><span class="sr-only">Permalink to “References”</span> <span aria-hidden="true"></span></a><p><a href="https://www.oreilly.com/library/view/managing-burnout-in/9781843347347/">Managing Burnout in the Workplace</a> - ISBN: 9781780634005</p>
<p><a href="https://hbsp.harvard.edu/product/R0710B-PDF-ENG">Manage Your Energy, Not Your Time</a> By Tony Schwartz, Catherine McCarthy</p>
<p><a href="https://www.thisiscalmer.com/blog/5-stages-of-burnout">What are the 5 stages of burnout? August 20, 2020</a></p>
Manifesto of a happy team2022-02-27T10:43:16Zhttps://danielavalero.com/posts/manifesto-of-a-happy-team/<p>We are kind to each other.</p>
<p>We celebrate different voices and perspectives,</p>
<p>Mental health is one of our key stones,</p>
<p>We take care of each other</p>
<p>We are safe here</p>
<p>Yet, every one of us has a different role, some of which with different amplitude of influence,</p>
<p>We treat each other with respect, and listen,</p>
<p>We treat each other like the professionals and humans we are.</p>
<p>By doing this, we are creating a safe space,</p>
<p>where every one of us can bring our uniqueness and contribute to what we all as a team are building,</p>
<p>a space where we can keep calm, and be a better version of ourselves at work</p>
<p>All this translates to:</p>
<ul>
<li>Kindness instead of aggressive behavior or language</li>
<li>Celebration of the diversity of thought instead of single-mindedness</li>
<li>Mental health focus instead of workaholism</li>
<li>Community instead of individualism</li>
<li>Psychological safety instead of an environment of fear</li>
<li>Collaboration instead of competition</li>
</ul>