<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Maria Antonella 🦋</title>
    <description>The latest articles on DEV Community by Maria Antonella 🦋 (@antoomartini).</description>
    <link>https://dev.to/antoomartini</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F581836%2F90503238-0843-4393-bc4e-fb2e0cbca6d1.jpg</url>
      <title>DEV Community: Maria Antonella 🦋</title>
      <link>https://dev.to/antoomartini</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/antoomartini"/>
    <language>en</language>
    <item>
      <title>Building More Inclusive and Accessible Mobile Apps: Lessons from My React Native Journey</title>
      <dc:creator>Maria Antonella 🦋</dc:creator>
      <pubDate>Wed, 12 Feb 2025 20:07:34 +0000</pubDate>
      <link>https://dev.to/antoomartini/building-more-inclusive-and-accessible-mobile-apps-lessons-from-my-react-native-journey-4996</link>
      <guid>https://dev.to/antoomartini/building-more-inclusive-and-accessible-mobile-apps-lessons-from-my-react-native-journey-4996</guid>
      <description>&lt;p&gt;When I first started developing mobile apps with React Native, accessibility wasn't my top priority. Like many developers, I focused on functionality, UI design, and performance. But as I gained experience, I realized that an app is only truly successful if everyone can use it, regardless of their abilities. Over time, I learned through trial and error how to make my applications more inclusive and accessible.&lt;/p&gt;

&lt;p&gt;In this post, I want to share the key accessibility principles I’ve learned and how they can help create a better experience for all users. Accessibility is not just about compliance with WCAG guidelines—&lt;strong&gt;it’s about giving everyone the opportunity to interact with our apps.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Screen Reader Compatibility
&lt;/h2&gt;

&lt;p&gt;One of the first things I learned was how crucial it is to make apps compatible with screen readers like VoiceOver (iOS) and TalkBack (Android). These tools enable visually impaired users to navigate apps through audio cues.&lt;/p&gt;

&lt;p&gt;✅ What I do now:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Add &lt;em&gt;accessibilityLabel&lt;/em&gt; to important UI elements.&lt;/li&gt;
&lt;li&gt;Use &lt;em&gt;accessibilityRole&lt;/em&gt; to clarify an element’s function.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example in React Native:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;Button 
  title="Submit"
  accessibilityLabel="Submit form"
  accessibilityRole="button"
/&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🔹 Now, screen readers can accurately describe the button’s purpose.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Touchable Areas and Spacing
&lt;/h2&gt;

&lt;p&gt;Early in my journey, I made buttons that were too small, making them difficult to tap. I later learned that touch targets should be at least 48x48dp to accommodate users with motor impairments.&lt;/p&gt;

&lt;p&gt;✅ My new approach:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Ensure buttons and touchable elements have proper padding.&lt;/li&gt;
&lt;li&gt;Avoid placing interactive elements too close together.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example in React Native:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;TouchableOpacity
  style={{ padding: 12, minWidth: 48, minHeight: 48 }}
  onPress={handlePress}
&amp;gt;
  &amp;lt;Text&amp;gt;Submit&amp;lt;/Text&amp;gt;
&amp;lt;/TouchableOpacity&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🔹 This ensures users can easily tap the button without accidental touches.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Color Contrast and Readability
&lt;/h2&gt;

&lt;p&gt;At first, I relied too much on aesthetic color choices, only to realize that some users couldn’t read my content due to poor contrast. Now, I check for a contrast ratio of at least 4.5:1 for text against backgrounds.&lt;/p&gt;

&lt;p&gt;✅ What I changed:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use high-contrast color combinations.&lt;/li&gt;
&lt;li&gt;Avoid using color alone to convey meaning.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🔹 Before (low contrast, hard to read)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;Text style={{ color: '#a0a0a0', backgroundColor: '#ffffff' }}&amp;gt;
  Hard to read text
&amp;lt;/Text&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🔹 After (high contrast, easy to read)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;Text style={{ color: '#000000', backgroundColor: '#ffffff' }}&amp;gt;
  Accessible text
&amp;lt;/Text&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🔹 Pro tip: Use tools like WebAIM Contrast Checker to validate contrast ratios.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Respecting User Accessibility Settings
&lt;/h2&gt;

&lt;p&gt;I used to enforce fixed font sizes and animations, but I soon realized that many users customize their devices for better accessibility. Now, I respect their settings.&lt;/p&gt;

&lt;p&gt;✅ My new approach:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Allow font scaling based on system preferences.&lt;/li&gt;
&lt;li&gt;Reduce motion when users disable animations.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example in React Native:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { useWindowDimensions } from 'react-native';

const { fontScale } = useWindowDimensions();

&amp;lt;Text style={{ fontSize: 16 * fontScale }}&amp;gt;
  Scalable text for better accessibility
&amp;lt;/Text&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🔹 This ensures text adjusts based on the user's preferences.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Supporting Multimedia Accessibility
&lt;/h2&gt;

&lt;p&gt;I once built an app with great videos but no captions—excluding users with hearing impairments. Now, I ensure multimedia content is accessible.&lt;/p&gt;

&lt;p&gt;✅ What I do now:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Add captions to videos.&lt;/li&gt;
&lt;li&gt;Provide alternative text for images.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example in React Native:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;Image
  source={{ uri: 'image.jpg' }}
  accessibilityLabel="Person holding a welcome sign"
/&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🔹 This allows screen readers to describe the image meaningfully.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Accessible Forms and Inputs
&lt;/h2&gt;

&lt;p&gt;In the past, I didn’t always label input fields properly. Now, I ensure that every input has clear labels and descriptions.&lt;/p&gt;

&lt;p&gt;✅ What I do now:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use accessibilityLabel and accessibilityHint for inputs.&lt;/li&gt;
&lt;li&gt;Announce validation errors clearly.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example in React Native:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;TextInput
  placeholder="Email"
  accessibilityLabel="Enter your email"
  accessibilityHint="Must contain an @ symbol and domain"
/&amp;gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🔹 This helps users understand what is expected without visual cues.&lt;/p&gt;




&lt;h2&gt;
  
  
  Final Thoughts: Accessibility is for Everyone
&lt;/h2&gt;

&lt;p&gt;At first, accessibility felt overwhelming, but I now see it as an essential part of development. Every improvement makes a difference in someone’s ability to use an app. By following these best practices, we can create apps that are not just functional, but truly inclusive.&lt;/p&gt;

&lt;p&gt;🔥 Key Takeaways:&lt;/p&gt;

&lt;p&gt;✅ Support screen readers.&lt;br&gt;
✅ Ensure large, easy-to-tap touch targets.&lt;br&gt;
✅ Use high-contrast colors.&lt;br&gt;
✅ Respect user accessibility settings.&lt;br&gt;
✅ Provide clear navigation and structure.&lt;br&gt;
✅ Announce feedback and errors audibly.&lt;br&gt;
✅ Label form fields properly.&lt;br&gt;
✅ Test with accessibility tools and real users.&lt;br&gt;
✅ Make multimedia content accessible.&lt;/p&gt;

&lt;p&gt;The best part? Accessibility improvements benefit everyone, not just people with disabilities. Let’s build apps that welcome all users! 💙&lt;/p&gt;

&lt;p&gt;If you have more accessibility tips, feel free to share them in the comments below! 💬💡&lt;/p&gt;

</description>
      <category>reactnative</category>
      <category>mobile</category>
      <category>programming</category>
      <category>learning</category>
    </item>
    <item>
      <title>Checklist Essential for Starting a Mobile Project from Scratch</title>
      <dc:creator>Maria Antonella 🦋</dc:creator>
      <pubDate>Tue, 11 Feb 2025 17:31:22 +0000</pubDate>
      <link>https://dev.to/antoomartini/checklist-essential-for-starting-a-mobile-project-from-scratch-28ec</link>
      <guid>https://dev.to/antoomartini/checklist-essential-for-starting-a-mobile-project-from-scratch-28ec</guid>
      <description>&lt;p&gt;&lt;strong&gt;What No One Tells You When You Start a Mobile Project from Scratch&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If you've ever been asked to estimate how long it will take to develop an app from scratch, you've probably had that moment of doubt: "How long is this really going to take?" After more than four years of developing mobile apps, the same challenges always arise. It doesn't matter if the app is for food delivery, task management, or a social network; there are certain things you absolutely need to consider. Let's go through them in a simple and relatable way, with a few examples from my experience using React Native.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Authentication and Authorization:&lt;/strong&gt; &lt;br&gt;
Almost all apps require users to log in. And this is not just about adding a form with a username and password—there are many things to consider:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Log in / Log out&lt;/li&gt;
&lt;li&gt;User registration&lt;/li&gt;
&lt;li&gt;Temporary or initial password&lt;/li&gt;
&lt;li&gt;Password recovery and update&lt;/li&gt;
&lt;li&gt;(Optional) Multi-factor authentication (MFA)&lt;/li&gt;
&lt;li&gt;(Optional) Biometric authentication (Face ID, fingerprint)&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;My comment while developing with React Native&lt;/em&gt;: For a member management app, we used an external API with Keycloak for authentication. It seemed straightforward at first, but integrating the login flow and token refresh with the mobile app took longer than expected, especially to ensure compatibility between iOS and Android.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;2. Design and UX: Making It Look Good Everywhere&lt;/strong&gt;&lt;br&gt;
Design is not just about "looking pretty," it's about ensuring it works well across different devices and resolutions. Some key things to keep in mind:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use of existing design systems (Material Design, Human Interface Guidelines)&lt;/li&gt;
&lt;li&gt;Platform-specific customization (iOS / Android)&lt;/li&gt;
&lt;li&gt;Responsive design for multiple screen sizes and orientations&lt;/li&gt;
&lt;li&gt;Accessibility (WCAG &amp;amp; specific mobile guidelines)&lt;/li&gt;
&lt;li&gt;(Optional) Light/dark mode support&lt;/li&gt;
&lt;li&gt;Optimized asset loading (lazy loading)&lt;/li&gt;
&lt;li&gt;Skeleton loaders to improve speed perception&lt;/li&gt;
&lt;li&gt;Smooth animations and transitions&lt;/li&gt;
&lt;li&gt;Offline support and data synchronization&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;My comment while developing with React Native&lt;/em&gt;: It always happens that styles look different on iOS vs. Android, so you have to test the app on both operating systems and make the necessary adjustments. Details like icon sizes, fonts, and shadows never look exactly the same.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;3. Data Handling: Not Everything Is Instant&lt;/strong&gt;&lt;br&gt;
Mobile apps rely on APIs to function, but there are a few things to consider:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Management of global/local state (React Context, Redux, Zustand, MobX)&lt;/li&gt;
&lt;li&gt;Integration with APIs (REST, GraphQL, WebSockets)&lt;/li&gt;
&lt;li&gt;Cache management and data storage (AsyncStorage, SecureStore, SQLite, MMKV)&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;My comment while developing with React Native:&lt;/em&gt; If you don't plan this properly, you end up with screens that take forever to load or data that disappears when the user closes the app.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;4. Security&lt;/strong&gt;&lt;br&gt;
Handling sensitive data is crucial:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Protection against XSS, CSRF, and API vulnerabilities&lt;/li&gt;
&lt;li&gt;Secure authentication and session management (JWT, OAuth)&lt;/li&gt;
&lt;li&gt;Secure storage of sensitive data (AsyncStorage, Keychain, EncryptedStorage)&lt;/li&gt;
&lt;li&gt;Input Validation and Sanitization: Never trust the data users input. Sanitizing inputs means removing malicious characters to prevent attacks like SQL Injection or XSS. Validation also helps prevent unexpected errors by ensuring only correct data in the expected format is sent.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;5. Components and Interactions:&lt;/strong&gt;&lt;br&gt;
Component development is not just about code, but also about how they interact with the user:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Handling interactions and events (touch gestures)&lt;/li&gt;
&lt;li&gt;Reusability and scalability of components&lt;/li&gt;
&lt;li&gt;Integration with UI frameworks (Native Base, React Native Paper, UIKit)&lt;/li&gt;
&lt;li&gt;Forms and validation&lt;/li&gt;
&lt;li&gt;(Optional) Animations and transitions (Reanimated, Lottie)&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;My comment while developing with React Native:&lt;/em&gt; I’ve often encountered problems with touch gestures, particularly on iOS, where elements like nested scrolls inside modals can cause unexpected behavior or interference. These superimpositions can make it challenging to implement smooth touch interactions. Ensuring that gestures work as expected across both iOS and Android requires extra testing and sometimes custom solutions.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;6. Integrations with External Platforms&lt;/strong&gt;&lt;br&gt;
An app rarely works alone; it almost always needs to be integrated with external services:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Platform-specific integrations (iOS and Android SDKs)&lt;/li&gt;
&lt;li&gt;Third-party APIs (Maps, payments, camera, notifications)&lt;/li&gt;
&lt;li&gt;External platforms &amp;amp; services:&lt;/li&gt;
&lt;li&gt;Firebase (Auth, Firestore, Push Notifications)&lt;/li&gt;
&lt;li&gt;Payment gateways (Apple Pay, Google Pay, Stripe)&lt;/li&gt;
&lt;li&gt;Deep linking and universal links&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;7. User Experience and Error Handling&lt;/strong&gt;&lt;br&gt;
Details matter when it comes to UX:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Confirmation modals (to delete, update, or cancel actions)&lt;/li&gt;
&lt;li&gt;Warnings before leaving without saving changes&lt;/li&gt;
&lt;li&gt;Accessibility and internationalization with i18n&lt;/li&gt;
&lt;li&gt;Caching strategies to improve performance&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;8. Error Handling and Logging&lt;/strong&gt;&lt;br&gt;
No matter how well you code, errors will occur:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Error and exception handling&lt;/li&gt;
&lt;li&gt;Reporting mobile-specific crashes (Firebase Crashlytics)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;9. Notification System&lt;/strong&gt;&lt;br&gt;
Notifications are key to maintaining engagement:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Push or pull strategies (FCM, APNs)&lt;/li&gt;
&lt;li&gt;In-app notifications&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you're just starting with mobile app development, these are just some of the challenges you'll encounter. Don’t underestimate details like authentication, adaptive design, and performance. React Native is a great tool for faster development, but it also has its own pitfalls.&lt;/p&gt;

&lt;p&gt;After years in this field, I can tell you that there will always be unforeseen issues, but by planning well from the start, you can save yourself a lot of headaches. Have you ever had to estimate a mobile project? Share your experience in the comments! 😊📱&lt;/p&gt;

</description>
      <category>mobile</category>
      <category>learning</category>
      <category>programming</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Patch-Package to the Rescue! 🛠️✨</title>
      <dc:creator>Maria Antonella 🦋</dc:creator>
      <pubDate>Thu, 04 Jan 2024 20:04:52 +0000</pubDate>
      <link>https://dev.to/antoomartini/patch-package-to-the-rescue-5flf</link>
      <guid>https://dev.to/antoomartini/patch-package-to-the-rescue-5flf</guid>
      <description>&lt;p&gt;👋 Hello everyone! I'm back after a long time haha. This time I'm going to tell you something that I apply and apply in my day-to-day work.&lt;/p&gt;

&lt;p&gt;As part of the React Native developer community, I often face challenges when working with third-party libraries, especially when modifications are needed. Especially when aligning these libraries with the latest updates or changes in React Native. In such cases, modifications become necessary. &lt;/p&gt;

&lt;p&gt;This article presents patch-package as a very valuable tool 🛠️, which allows React Native developers to work smoothly and overcome these obstacles when modifications to third-party dependencies are needed.&lt;/p&gt;

&lt;p&gt;And I will do so by telling a real case 📖.&lt;/p&gt;

&lt;p&gt;I was developing with React Native and incorporated the &lt;strong&gt;react-native-swipe-gestures&lt;/strong&gt; library to detect user gestures for expanding or collapsing a customizable modal I created.&lt;/p&gt;

&lt;p&gt;But I found a problem during testing on iOS: after implementing swipe gestures, the vertical scrolling within the modal, which had a ScrollView component as a child, stopped working as intended.&lt;/p&gt;

&lt;p&gt;The goal was to have a modal that expanded or collapsed based on the user's swipe direction. However, the unintended consequence was the disruption of the vertical scrolling functionality within the ScrollView nested inside the modal. This made it impossible for users to scroll the content vertically, impacting the overall user experience.&lt;/p&gt;

&lt;p&gt;So, let's do some magic ✨ I found a temporary solution on &lt;a href="https://github.com/glepur/react-native-swipe-gestures/issues/78"&gt;Github with pacth-package&lt;/a&gt;. How did I solve it?&lt;/p&gt;

&lt;p&gt;Firstly, ensure you have patch-package installed in your project. You can install it via npm:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install patch-package --save-dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Creating a Patch&lt;/em&gt;&lt;br&gt;
First thing to do: Identify the Issue. You have to locate the bug or the change you want to make within your dependency.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Make Changes:&lt;/em&gt;&lt;br&gt;
&lt;strong&gt;Once you've identified the issue, make the necessary changes directly in the dependency's code within node_modules.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I made this change on the dependencies:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Nf4cBijQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hclubp4gheb8zzifzr6t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Nf4cBijQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hclubp4gheb8zzifzr6t.png" alt="Changes on the dependencies" width="559" height="166"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Generate Patch&lt;/em&gt;&lt;br&gt;
After making your changes, run the following command to generate a patch file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx patch-package &amp;lt;package-name&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Replace  with the name of the package you modified.&lt;/p&gt;

&lt;p&gt;In this case what I did was to replace and run the following&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx patch-package react-native-swipe-gestures
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command will create a .patch file inside a patches directory in your project's root folder.&lt;/p&gt;

&lt;p&gt;In my case, the results were: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IAbpt-wW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bt49jfjcy9gnsrb8lsg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IAbpt-wW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bt49jfjcy9gnsrb8lsg.png" alt="result of applyng the patch command" width="343" height="112"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Applying the Patch&lt;/em&gt;&lt;br&gt;
To apply the patch during installation or deployment &lt;em&gt;add to Scripts&lt;/em&gt; in your &lt;em&gt;package.json&lt;/em&gt;, add a script to apply patches after installing or before building your project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"scripts": {
  "postinstall": "patch-package"
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Run Postinstall Script&lt;/em&gt;&lt;br&gt;
Whenever you run npm install, the postinstall script will automatically apply the patches located in the patches directory.&lt;/p&gt;

&lt;p&gt;Easy, isn't it? patch-package streamlines the process of applying temporary fixes to third-party modules, allowing developers to overcome obstacles without waiting for official updates. 🛠️&lt;/p&gt;

&lt;p&gt;On the other hand, I would like to remind the importance of thorough testing on different environments and devices. Look how it worked perfectly on Android but not on iOS 😞&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>reactnative</category>
      <category>mobile</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Nobody talks about this in the IT world</title>
      <dc:creator>Maria Antonella 🦋</dc:creator>
      <pubDate>Wed, 29 Jun 2022 00:53:33 +0000</pubDate>
      <link>https://dev.to/antoomartini/nobody-talks-about-this-in-the-it-world-31ph</link>
      <guid>https://dev.to/antoomartini/nobody-talks-about-this-in-the-it-world-31ph</guid>
      <description>&lt;p&gt;This is not a post where I'm going to share with you some tips on how we can manage our anxiety in the programming world. &lt;strong&gt;There are no tricks, no tips, no secrets.&lt;/strong&gt; I'm not going to tell you how to be the best programmer in the world. I'm not going to share any steps to learn a new programming language.&lt;/p&gt;

&lt;p&gt;To be honest, at first, I wanted to write a post about how important it is to write and share our questions and doubts in forums like stackoverflow or github. This is going to be my next article 🙂 &lt;/p&gt;

&lt;p&gt;I changed my mind because I found in my Notion’s notes the following:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;"I found myself thinking about this question: what am I going to learn the next few months, what about the rest of the year, what do I want to learn?"&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;This situation made me do some research on what kinds of things were out there, on the internet and booming, to learn. The thing is, everyone around me seems to know everything. Everything. Everyone knows about new frameworks, libraries, languages, improving skills, web3, data science... everything.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;What about me? What do I know?&lt;/em&gt; It seems like I should know and learn about everything because, on the other hand, I'm a complete dumb person. _I feel like I'm nobody _(ha! damn impostor syndrome) It's a horror! Feeling that way.&lt;/p&gt;

&lt;p&gt;Let's see, I've been working with react native and mobile app development for two years. I know that I know how to develop, about react native, about hooks, redux, firebase, push notifications, in app purchase, about analytics libraries, blah blah blah... I’m aware of that. &lt;strong&gt;But many times I think I don't know anything. It's exhausting.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Does it happen to you?&lt;/strong&gt; I started to write this post one day when I was over anxious and feeling that I'm very small in such a big, egocentric and egoistic world as tech is. &lt;br&gt;
And this goes beyond the company, the project, the team.&lt;/p&gt;

&lt;p&gt;*&lt;em&gt;Everyone talks about how great it's to work in the IT world. *&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;How much you can earn. But no one talks about the great tolerance you have to have to work in this area and the stress you suffer every day.  I've cried because of the stress! &lt;strong&gt;(Please don't get to this point)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The only thing I can share from my point of view and that helped me feel better is: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Enjoying my free time.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I went on vacation. After two and a half years working non-stop. &lt;strong&gt;First big mistake.&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Always take vacation days.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I started going for a walk after work, I started going to the gym for extra physical exercise, this helped me to clear my mind and sleep better at night.&lt;/p&gt;

&lt;p&gt;I hang out with my friends during the week. So that the week is not so long and tedious. I spend time with family and enjoy it.&lt;/p&gt;

&lt;p&gt;I also sometimes take short naps after work, and that's okay. Before i feel like unproductive because of that. But then I realized that &lt;em&gt;it helps me to feel better.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;I continue to go to my therapy sessions with my psychologist. &lt;strong&gt;I take care of my mental health.&lt;/strong&gt; Please, if you can go to therapy, &lt;strong&gt;do it.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I know I'm missing a lot. Because I feel that way. Sometimes I feel like the stress is going to eat me up. But also, I have felt like I beat the stress, the frustration, the impostor syndrome. I'm beating fear. &lt;strong&gt;And I feel powerful about myself.&lt;/strong&gt; 🙂&lt;/p&gt;

&lt;p&gt;I think that as I started to balance my life and my free time, I started to believe a little more in myself. And to understand that I know a lot of things, and that I still have a lot to know and learn. And &lt;strong&gt;that's okay&lt;/strong&gt;. It doesn't mean I'm dumb or stupid.&lt;/p&gt;

&lt;p&gt;But the most important thing: everyone handles it or tolerates it in different ways. Maybe, at this point, you know how to manage your anxious or maybe not. Maybe you feel like you can explode out of frustration (I'm sure you can deal with it, I can, you can, I believe in you and you should believe in yourself).&lt;/p&gt;

&lt;p&gt;I would love to read how you deal with it, so that we all feel a little less alone and a little more accompanied.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>productivity</category>
      <category>programming</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Add custom fonts react-native for iOS and don't die trying</title>
      <dc:creator>Maria Antonella 🦋</dc:creator>
      <pubDate>Sun, 08 May 2022 15:45:48 +0000</pubDate>
      <link>https://dev.to/antoomartini/add-custom-fonts-react-native-for-ios-and-dont-die-trying-7bg</link>
      <guid>https://dev.to/antoomartini/add-custom-fonts-react-native-for-ios-and-dont-die-trying-7bg</guid>
      <description>&lt;p&gt;Today I'm going to share with you an issue that bothered me for several days. So I thought it was a good idea to write how I solved it. Because I couldn't find the exact solution to fix this, not even on stackoverflow.&lt;/p&gt;

&lt;p&gt;My problem was the following:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I installed new fonts for the project I'm working on. When the app opened, everything worked correctly, but when it went to the background, and then back to the foreground, the new fonts stopped rendering and the styling was not applied.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I followed all the steps that appear in many places. I share below two links with these steps, because this is what is everywhere:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://dev.to/aneeqakhan/add-custom-fonts-in-react-native-0-63-for-ios-and-android-3a9e"&gt;https://dev.to/aneeqakhan/add-custom-fonts-in-react-native-0-63-for-ios-and-android-3a9e&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://medium.com/react-native-training/adding-custom-fonts-to-react-native-b266b41bff7f"&gt;https://medium.com/react-native-training/adding-custom-fonts-to-react-native-b266b41bff7f&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;However, even though everything was in order, the bug kept reproducing itself. I followed all the steps, installed the fonts correctly but the bug was still there.&lt;/p&gt;

&lt;p&gt;So after so many hypotheses, searches and that almost makes me crazy, the only thing that finally helped me is the following:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Rename the fonts: remove all spaces, removing all hyphens or any special characters contained in the font name.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Be careful, not only to change the name of the font file, but in its properties, the following:&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Fontname&lt;/li&gt;
&lt;li&gt;Family Name&lt;/li&gt;
&lt;li&gt;Name For Humans&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rU-f-ur---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4p39gph1fmp3nl17wn57.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rU-f-ur---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4p39gph1fmp3nl17wn57.png" alt="Example of a font properties file" width="496" height="182"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The new font name has to be the same in all three fields mentioned above, including the file name.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;And the bug is fixed! 😁&lt;br&gt;
I hope it helps!&lt;/p&gt;

&lt;p&gt;Anto&lt;/p&gt;

</description>
      <category>reactnative</category>
      <category>ios</category>
      <category>mobile</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Back to the Future: 🕸 Web3 🕸</title>
      <dc:creator>Maria Antonella 🦋</dc:creator>
      <pubDate>Tue, 02 Nov 2021 21:42:53 +0000</pubDate>
      <link>https://dev.to/antoomartini/back-to-the-future-web3-1bi5</link>
      <guid>https://dev.to/antoomartini/back-to-the-future-web3-1bi5</guid>
      <description>&lt;p&gt;Days ago I wanted to start getting into the world of BlockChain and Web3. But to do so, I had to understand some concepts first.&lt;/p&gt;

&lt;h3&gt;
  
  
  ~ To know where we are going, we must know where we came from.
&lt;/h3&gt;

&lt;p&gt;The first thing to know: &lt;strong&gt;&lt;em&gt;The Internet we currently use we have no control of our data.&lt;/em&gt;&lt;/strong&gt; &lt;br&gt;
It is broken and vulnerable. Every time we interact on the Internet, copies of our data are sent to the server of every service provider we use (from Facebook to Instagram, Twitter and any kind of app).&lt;/p&gt;

&lt;p&gt;And every time this happens, we lose control of our data which raises issues of &lt;strong&gt;trust&lt;/strong&gt;. Where is our data? Who is using it? What for? &lt;/p&gt;

&lt;p&gt;And Web3 is here to revolutionize this. But to understand Web3, you have to know where it comes from. &lt;/p&gt;


&lt;h2&gt;
  
  
  📝 Back to the Future: 🕸 Web1 🕸
&lt;/h2&gt;

&lt;p&gt;The birth of the WWW in the early 1990s increased the usability of the Internet. Tim Bernes Lee introduced a new standard that allowed to create visually "attractive" pages, with few lines of code, and to navigate the Internet through links, instead of using command line interfaces.&lt;/p&gt;

&lt;p&gt;Here, only content could be consumed. It's information that could be accessed for reading and consuming but without the possibility of interacting. Communication was unidirectional. It included browsers such as Internet Explorer, search engines such as Yahoo Answers and email providers.&lt;/p&gt;


&lt;h2&gt;
  
  
  📝 Back to the Future: 🕸 Web2 🕸
&lt;/h2&gt;

&lt;p&gt;Applications can be used to read and write simultaneously. There are producers and consumers of information. That is, communication is now bidirectional.&lt;/p&gt;

&lt;p&gt;This web is based on user communities and services that encourage collaboration and agile exchange of information between users of a community or social network, such as Facebook, Twitter and Instagram.&lt;/p&gt;

&lt;p&gt;It is dynamic, interactive, reading and writing, develops collective intelligence and favors collaborative work as was and is Wikipedia, platforms such as YouTube and e-commerce.&lt;br&gt;
But there is always an intermediary: a platform acting as a trusted intermediary between two people who do not know or trust each other.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;While Web2 was a Front-End revolution, Web3 is a Back-end revolution.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  📝 Back to the Future: 🕸 Web3 🕸
&lt;/h2&gt;

&lt;p&gt;If we assume that the WWW revolutionized information and that Web2 revolutionized interactions, Web3 has the potential to revolutionize agreements and value exchange.&lt;/p&gt;

&lt;h4&gt;
  
  
  The Front-end remains the same as in Web2, but the data structure, in the Back-end, changes.
&lt;/h4&gt;

&lt;p&gt;In this context, a universal state layer is introduced, reinventing the way data is stored, managed by all nodes in the network.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4q6r7ndeomldctkpw1ei.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4q6r7ndeomldctkpw1ei.jpg" alt="Back to the future: Movie Scene"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This single state layer provides a layer for the Internet without the presence of intermediaries. This enables true &lt;strong&gt;&lt;em&gt;P2P&lt;/em&gt;&lt;/strong&gt; → transactions (in few words, a peer-to-peer network is a network of computers that function simultaneously as clients and servers with respect to the other nodes in the network allowing direct exchange of information between the interconnected computers).&lt;/p&gt;

&lt;p&gt;Agreements are executed with P2P connections with &lt;strong&gt;&lt;em&gt;smart contracts&lt;/em&gt;&lt;/strong&gt;. In this web, anyone can participate in the verification of transactions and be compensated for their contribution with a network token.&lt;/p&gt;

&lt;p&gt;The main structure of this Web3 is represented by a series of blockchain networks or distributed ledgers that are managed by a special application called &lt;strong&gt;&lt;em&gt;"wallet"&lt;/em&gt;&lt;/strong&gt; → (in few words, distributed ledgers is a type of database that is shared, replicated and synchronized between members of a decentralized network recording transactions, such as the exchange of assets or data, between network participants).&lt;/p&gt;

&lt;p&gt;The most important:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;💡 Tokens are to Web3 what websites were to Web1.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There are a lot of new concepts! But that is all for now. I'm going to share everything I'm learning :)&lt;/p&gt;

</description>
      <category>web3</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>🥴💭Don’t be afraid to ask or to admit that you need help</title>
      <dc:creator>Maria Antonella 🦋</dc:creator>
      <pubDate>Tue, 19 Oct 2021 16:06:20 +0000</pubDate>
      <link>https://dev.to/antoomartini/dont-be-afraid-to-ask-or-to-admit-that-you-need-help-4pkf</link>
      <guid>https://dev.to/antoomartini/dont-be-afraid-to-ask-or-to-admit-that-you-need-help-4pkf</guid>
      <description>&lt;h2&gt;
  
  
  Help, I need somebody! .... The Beatles would say.
&lt;/h2&gt;

&lt;p&gt;Today I am writing this post from an experience that happened to me last week. I was working on my current project when it came up that there was a very important functionality, which had a bug. A bug that had to be fixed as soon as possible.&lt;/p&gt;

&lt;p&gt;A bug that took me about one week to fix.🥴&lt;/p&gt;

&lt;p&gt;But my goal today is to talk about the fear we feel about asking when we don't know something or don't know how to move forward.&lt;/p&gt;

&lt;p&gt;😵🌳 When we were kids, we were planted the seed that it's not okay to ask. We learned that if we ask, we'll get a finger pointed at us like we have a big "I'm a fool" in the face. But that's not true.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;When I was younger, so much younger than today
I never needed anybody's help in any way
But now these days are gone, I'm not so self assured
Now I find I've changed my mind and opened up the doors
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Learning is an continuos process.
&lt;/h3&gt;

&lt;p&gt;It never ends. Even more so in the field of computer science. New tools, frameworks and languages emerge every day.  We learn every day, with small steps, small changes. 🧐 So we have no obligation to know everything. But we can take responsibility for our actions. 🤗&lt;/p&gt;

&lt;p&gt;💡 Someone once told me that there are no dumb questions, but there are fools who don't ask.💡 So true! &lt;/p&gt;

&lt;p&gt;So here I was, in the middle of my frustrated and stressed work week. So I decided to ask for help. &lt;/p&gt;

&lt;p&gt;Think of it this way: we're here at Dev.to to ask and learn. To be better. And that's great. So why not do it at work too?&lt;/p&gt;

&lt;p&gt;Not to be told how to do it. I looked for solutions, possible ways forward and asked if I was on the right path. I asked the questions I felt were necessary to understand the context in which I was working. &lt;/p&gt;

&lt;p&gt;I think the most important thing is that I told myself was I could. I could solve this. Whatever it cost me. 💪💪&lt;/p&gt;

&lt;h3&gt;
  
  
  When you find yourself saying: &lt;strong&gt;I don't know&lt;/strong&gt; , make sure follow it with &lt;strong&gt;but I will find it&lt;/strong&gt;.
&lt;/h3&gt;

&lt;p&gt;As I read in the pages of the book The Pragmatic Programmer: &lt;/p&gt;

&lt;h3&gt;
  
  
  It's a great way to admit what you don't know but then take responsibility like a pro.
&lt;/h3&gt;

&lt;p&gt;🧐 And taking responsibility means that many times you're going to have to ask for help. So to solve my big problem, I asked for help, and that's fine. And it's part of being a good professional, being a programmer. &lt;strong&gt;&lt;em&gt;It helps us grow&lt;/em&gt;&lt;/strong&gt;. Personally and professionally.🤗❗❗&lt;/p&gt;

&lt;p&gt;I always say that we always learn from others. So let's not be afraid to ask when we don't know something. Because we will learn it. A lot!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Help me if you can, I'm feeling down
And I do appreciate you being round
Help me, get my feet back on the ground
Won't you please, please help me?
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>beginners</category>
      <category>programming</category>
      <category>devjournal</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Creando un ID random en JAVASCRIPT</title>
      <dc:creator>Maria Antonella 🦋</dc:creator>
      <pubDate>Wed, 15 Sep 2021 19:10:19 +0000</pubDate>
      <link>https://dev.to/antoomartini/creando-un-id-random-y-unico-en-javascript-3bod</link>
      <guid>https://dev.to/antoomartini/creando-un-id-random-y-unico-en-javascript-3bod</guid>
      <description>&lt;p&gt;La semana pasada, necesitaba encontrar una manera de generar un id único para crear nombres para los archivos del teléfono en sistemas IOS (no estoy segura porque me venian en undefined). &lt;br&gt;
De todos modos, buscando en Google, en San Google y San StackOverflow, encontré esta pequeña y hermosa funcion. Super sencilla.&lt;/p&gt;

&lt;p&gt;Todo lo que tenes que hacer es invocarla, donde tenes que generar el id, y pasar la longitud deseada del id.&lt;br&gt;
Y ¡magia! Devuelve un id/nombre/dato hecho con letras y números (en este ejemplo es asi!)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const makeRandomId= (length) =&amp;gt; {
      let result = ''
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      for (let i = 0; i &amp;lt; length; i++ ) {
        result += characters.charAt(Math.floor(Math.random() * characters.length));
     }
     return result;
  }

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;👉 charAt: El método charAt() devuelve el carácter en un índice especificado en una cadena.&lt;br&gt;
👉 floor(): El método floor() redondea un número hacia abajo al entero más cercano, y devuelve el resultado.&lt;br&gt;
👉 random(): Math.random() devuelve un número aleatorio entre 0 (inclusive), y characters.length (excluyente):&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Math.random() usado con Math.floor() puede ser usado para devolver enteros aleatorios (como esta en el ejemplo!)&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Eso es todo por ahora :)&lt;/p&gt;

</description>
      <category>begginers</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>reactnative</category>
    </item>
    <item>
      <title>Making random ID with Javascript</title>
      <dc:creator>Maria Antonella 🦋</dc:creator>
      <pubDate>Wed, 15 Sep 2021 17:27:49 +0000</pubDate>
      <link>https://dev.to/antoomartini/making-random-and-unique-id-with-javascript-4c8c</link>
      <guid>https://dev.to/antoomartini/making-random-and-unique-id-with-javascript-4c8c</guid>
      <description>&lt;p&gt;Last week, I needed to find a way to generate a random and unique id to get names for phone files on ios systems. Anyway, googling around, I found this simple function.&lt;/p&gt;

&lt;p&gt;All you have to do is call it, where you need to generate the id, and pass the desired length of the id.&lt;br&gt;
And magic! It returns an id made with characters and numbers (in this example, of course!)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const makeRandomId= (length) =&amp;gt; {
      let result = ''
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      for (let i = 0; i &amp;lt; length; i++ ) {
        result += characters.charAt(Math.floor(Math.random() * characters.length));
     }
     return result;
  }

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;👉 charAt: The charAt() method returns the character at a specified index in a string.&lt;br&gt;
👉 floor(): The floor() method rounds a number DOWNWARDS to the nearest integer, and returns the result.&lt;br&gt;
👉 random(): Math.random() returns a random number between 0 (inclusive),  and characters.length (exclusive):&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Math.random() used with Math.floor() can be used to return random integers.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That's all! :)&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>reactnative</category>
    </item>
    <item>
      <title>Making a square photo like Instagram with React Native ✨</title>
      <dc:creator>Maria Antonella 🦋</dc:creator>
      <pubDate>Tue, 07 Sep 2021 22:26:41 +0000</pubDate>
      <link>https://dev.to/antoomartini/making-a-square-photo-like-instagram-with-react-native-3h0m</link>
      <guid>https://dev.to/antoomartini/making-a-square-photo-like-instagram-with-react-native-3h0m</guid>
      <description>&lt;p&gt;I'm going to share with you something I learned today! I needed to show some pictures in a project I'm working on, in a square form. Like Instagram.&lt;/p&gt;

&lt;p&gt;Researching, I found that with just one attribute I could achieve what I wanted! (bless you stackoverflow!) and discovered that there is a simple way to solve it.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The magic is on  &lt;strong&gt;&lt;em&gt;aspectRatio: 1&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;👾👉 First of all, React Native has support for creating styles on components with a fixed proportion. Using this is useful, for example, if you want to have a component that always has the same shape (as I needed!).  &lt;/p&gt;

&lt;p&gt;👾👉 Second: the ratio is defined by the &lt;em&gt;width : height&lt;/em&gt;   &lt;/p&gt;

&lt;p&gt;👾👉Finally here we go: setting the aspect ratio to 1 cause the view to be square: aspectRatio: 1  &lt;/p&gt;

&lt;p&gt;Here is an example of code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React from "react";
import { StyleSheet, View, Image } from "react-native";

const SquareComponent= () =&amp;gt; {
  return (
      &amp;lt;View style={styles.squareRatio}&amp;gt;
        &amp;lt;Image
            source={{
            uri: "https://wallpaperaccess.com/full/317501.jpg",
            }}
      &amp;lt;/View&amp;gt;
  );
};

const styles = StyleSheet.create({
 squareRatio: {
    width: '95%,
    aspectRatio: 1
  }
});

export default SquareComponent
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;✨👉 This is because the ratio is defined by the width : height. 1 : 1 means the width and height are the same.&lt;/p&gt;

&lt;p&gt;✨ For example, if you want a view which is 16:9 (the standard TV widescreen ratio) you can set this property: aspectRation: 16 / 9&lt;br&gt;
The same for other aspect ratios.✨&lt;/p&gt;

&lt;p&gt;✨ You could do the same with components and views, not only with images :)&lt;/p&gt;

&lt;p&gt;Here is my result! ✨🐞 and so simple! ☘&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5adl1u4o1x5hbb5cetfp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5adl1u4o1x5hbb5cetfp.png" alt="screen with square picture"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>reactnative</category>
      <category>beginners</category>
      <category>react</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Mom, I programmed my first HELLO WORLD🌟</title>
      <dc:creator>Maria Antonella 🦋</dc:creator>
      <pubDate>Mon, 06 Sep 2021 17:38:26 +0000</pubDate>
      <link>https://dev.to/antoomartini/mom-i-programmed-my-first-hello-world-8h</link>
      <guid>https://dev.to/antoomartini/mom-i-programmed-my-first-hello-world-8h</guid>
      <description>&lt;p&gt;Sometimes it's good to remember the happiness we felt at the beginning of our journey. &lt;/p&gt;

&lt;p&gt;Do you remember? Almost like a welcoming ritual, the first program we learn to code in any language is the famous "Hello world".&lt;/p&gt;

&lt;p&gt;When you're not expecting it, that day comes: you're sitting in front of a computer. 🖥️&lt;/p&gt;

&lt;p&gt;We hear the sound of the keys and for the first time we type a line of code. On the screen we see the dreamy Hello World! 🌏  &lt;/p&gt;

&lt;p&gt;It greets us and celebrates our first grain of sand in this world. Our first grain of bits. It's the beginning.  &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;It makes us feel powerful. As if we have the ability to do even the impossible. Welcome to the world of programming 🖥️  &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Sometimes developing becomes frustrating. It makes me angry, it makes me sick, it makes me ill. Sometimes it makes me feel like I can't do it.&lt;/p&gt;

&lt;p&gt;That's why it's good to go back to feeling like that little person who was discovering everything for the first time.&lt;/p&gt;

&lt;p&gt;My first Hello World was in &lt;strong&gt;&lt;em&gt;C++&lt;/em&gt;&lt;/strong&gt;  &lt;/p&gt;

&lt;p&gt;Pure magic. How happy I was!  &lt;/p&gt;

&lt;p&gt;Do you remember in which language was your first Hello World? Tell me :)&lt;/p&gt;

</description>
      <category>begginers</category>
      <category>productivity</category>
      <category>programming</category>
      <category>motivation</category>
    </item>
    <item>
      <title>🌟 Be the person you needed when you started in the IT world 🌟</title>
      <dc:creator>Maria Antonella 🦋</dc:creator>
      <pubDate>Mon, 30 Aug 2021 19:30:30 +0000</pubDate>
      <link>https://dev.to/antoomartini/be-the-person-you-needed-when-you-started-in-the-it-world-4450</link>
      <guid>https://dev.to/antoomartini/be-the-person-you-needed-when-you-started-in-the-it-world-4450</guid>
      <description>&lt;p&gt;Let's talk about mentors ✨ &lt;/p&gt;

&lt;p&gt;I think the figure of a mentor in our lives and when we start our careers in the IT world, is very important.⭐&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“A mentor is someone who sees more talent and ability within you, than you see in yourself, and helps bring it out of you.” - Bob Proctor ✨ &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In my first job, where I was a functional analyst, I didn't have any person by my side to be my mentor, guide or someone to teach me.&lt;/p&gt;

&lt;p&gt;Honestly, &lt;strong&gt;I felt lost&lt;/strong&gt;, &lt;strong&gt;scared&lt;/strong&gt; and with a lot of uncertainties that many times I didn't solve because I didn't have anyone to talk to. I learned a lot but &lt;strong&gt;I felt alone&lt;/strong&gt; and &lt;strong&gt;full of fears&lt;/strong&gt;. &lt;strong&gt;&lt;em&gt;I didn't feel confident in myself&lt;/em&gt;&lt;/strong&gt; 👾&lt;/p&gt;

&lt;p&gt;Until then, I didn't know what it was to have a mentor or what it could be. I didn't know of their existence. Until one day I changed my job, my place and also my tasks. I started my way as a developer. And the first day I was assigned someone to accompany me during my process as a trainee.&lt;/p&gt;

&lt;p&gt;I don't think a mentor is a teacher or a friend. It is that person who may even work with you in the future. A colleague. A team worker, maybe. &lt;/p&gt;

&lt;h3&gt;
  
  
  “A mentor is someone who allows you to see the hope inside yourself.” — Oprah Winfrey 🌟
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Finding a good mentor early on the learning process can help build confidence.&lt;/strong&gt; In ourselves but also in our professional future. &lt;/p&gt;

&lt;p&gt;🌟 A mentor is not only someone who accompanies us on our professional or learning path. In addition to helping us avoid getting stuck technically and helping us to go step by step following the procedures, it is also someone who is interested in helping beginners move forward. &lt;/p&gt;

&lt;p&gt;🌟 Some of us, worried about our future, ask our mentors how much we are going to earn. If we have possibilities to travel and even live abroad. With our insecurities, we also worry if we are going to be able to keep up with the rest of the people working on the same technologies.&lt;/p&gt;

&lt;p&gt;🌟 I was lucky to meet someone very good and genius, and I dedicate this post to him. Hopefully everyone can find someone to be a guidance in this long way.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;&lt;em&gt;Mentoring builds confidence, both individually and as a group. It is a light in the darkness of the road, especially in unbalanced and hostile environments such as the technology sector.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;🌟 I wish we were all mentors and help those who are starting out in this world. The word mentor always reminds me of this phrase that accompanies me every day: &lt;/p&gt;

&lt;blockquote&gt;
&lt;h3&gt;
  
  
  🌟 Be the person you needed when you started in the IT world
&lt;/h3&gt;
&lt;/blockquote&gt;

&lt;p&gt;Tell me, would you like to be a mentor?&lt;/p&gt;

</description>
      <category>motivation</category>
      <category>mentalhealth</category>
      <category>beginners</category>
      <category>career</category>
    </item>
  </channel>
</rss>
