Lukeberry Pi Blog

How (not) to get a job in Spain

Sun, 15 Sep 2024 00:00:00 GMT

I flew to Italy to visit my Dad earlier this year. In that period, I also went to Málaga to see an old friend and to the UK to see my family. A day before going back to Brazil, I got an unexpected invite: my friend called me to live with him in Málaga. I cancelled my flight back home and two weeks later I was back in Spain. As I settled in, I realized that I had around a month to: - Find a job that sponsored a visa; or - Marry a European woman; or - Exit Europe Here is a timeline for one of the hiring processes I took part in. ## Applying For the first time in my life, I successfully applied to a position via LinkedIn Easy Apply. I shared my CV with the recruiter, she sent a message and we scheduled a talk. This was a Frontend Developer hybrid position in Malaga, exactly what I was after. > Tip: I usually search for positions posted in the last 24h. ## Recruiter Conversation This was 30 minutes where we went over introductions, some questions such as "Talk a bit about yourself and your professional experience" She asked how much experience I had with the stack (React, React Native, TypeScript and GraphQL). I mentioned that I had personal projects in production with TypeScript and React. Namely, my websites [css2wind](https://css2wind.com) and [phived](https://phived.com). > Tip: Ask a question. I default to "What is the size of the developer team?" or "What is the happy path for this hiring process?" (as in, if everything works out perfectly, what will happen). ## Coding Assignment After the meeting ended, she sent me a coding assignment due in a week: - It was a JavaScript, React, and Redux Toolkit website - It had only one commit, with (frankly) pretty terrible code - I had to review the code as if it was a regular pull request. [Here is my review](https://gist.github.com/LukeberryPi/2833f7f21e2cb102c43bc6406db17749). - I had to refactor the code since the initial state wasn't functional I was also asked to implement three features: - Display movies in a grid and make it responsive - Implement infinite scroll for the Home and the Search page - Implement a modal to display the movie trailer This is [what I delivered](https://luke-berry-movieland.vercel.app). > Tip: Take home projects are about prioritizing correctly. Make the requirements work first. If you have time to spare, add enhancements. ## Technical Interview For this stage I talked to two Software Engineers. There was no live coding or review of the code I delivered in the previous stage. They mentioned that they were impressed with the attention to detail of my delivery. It consisted mostly of questions about the technologies I worked with in the past, such as "what are the differences between React Context API and Redux?", while outlining strengths and downfalls of both approaches. I felt very comfortable with this since I had been studying a lot of React and Redux. Here are two resources: - [Redux Pros and Cons](https://www.reddit.com/r/reactjs/comments/1aiol7c/comment/kow7lbq/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button) - [React Under the Hood](https://www.youtube.com/watch?v=i793Qm6kv3U&pp=ygUUcmVhY3QgdW5kZXIgdGhlIGhvb2Q%3D) > Tip: Search the people that will interview you. Look into their carrers, articles, and open source contributions. ## Technical Interview II This stage took place with an Engineering Manager and focused on my experience with developer teams. She asked what industry and size of teams I had worked with and if I aspired to move into Fullstack or continue focusing solely on Frontend Development. She also asked "What was the last big technical mistake you made?". This question caught me off-guard, even though it is very common. Luckily, I make a lot of mistakes and comfortably shared the last time I had broken prod and what I did wrong. > Tip: Be prepared to talk about soft skills. Questions such as "What is a difficult professional situation and how did you overcome it?" should be rehearsed and ready. ## Final Offer After a week, I got the positive feedback from the company and a final offer: €50000/year, with some perks: - Reduced work day during August (9-4 instead of 9-5) - Twenty days of "work from anywhere" per year - Cost assistance of €1500 per year I moved onto the onboarding: documentation, signing contracts, and more. > Tip: At this stage, always ask for a bigger salary than your expectation. You will never get disqualified for it. If you are participating in multiple hiring process, use that as leverage. ## Bad Ending As the onboarding progressed, the elephant on the room was addressed: the Visa. As a Brazilian-British citizen, I am not allowed to work in Europe without it (thanks, Brexit!). The visa they were applying for me was a Highly Skilled Professional Visa, which is needed for a foreigner earning above €40000/year in Europe. A week went by, I signed more contracts and had more meetings. In one of these meetings, they disclosed to me that they couldn't hire me. Amongst other things, this Visa demands a University Degree. Or 3 years of proven experience in the field. Unfortunately, I had neither. Even though I have the years of experience, a lot of that is freelancing, which isn't valid for this Visa. I was heartbroken. I gathered myself to thank everyone involved and then exited gracefully. So close, yet so far. After I recovered, I had a big decision to make again: - Go back to Brazil and call it a day, after all I had already overstayed my welcome - Fly to the UK and try to find a job, since I wouldn't need a Visa to work there (I'm a British Citizen) I bought a ticket to the UK, with a few plans in mind.

Frontend Debugging 101

Tue, 23 Jul 2024 00:00:00 GMT

I believe the cliché "there are no dumb questions". I even created a [website](https://possoperguntar.com.br) that is the Portuguese equivalent of [dontasktoask.com](https://dontasktoask.com). I heavily encourage asking in public and learning to formulate questions. However, solving your own problems in software is the unlock for progress. The more you do it, the more errors you instantly recognize and the faster you will move. In my first programming job, I would often call colleagues in despair with errors in my code, only for them to solve it in seconds. Even though my questions weren't "dumb" _per se_, the solution was often trivial. If you're a beginner, you will face these situations a lot. It is completely natural, and more experienced people won't mind. As long as you learn from your mistakes and don't repeat them. Here is a list of steps I take before asking other people for help. It will range from very simple to medium-effort steps for debugging. I also added my usual time spent with each step. > Disclaimer: this list is heavily Frontend-oriented. It is also aimed at beginners. ## If there's an error message ### Have you read it? (~30 seconds) You must read the error message. I know, I know: it's red and it's confusing. But even if it doesn't solve your problem right away, you can better understand what is wrong. You **must** exercise reading error messages. You will do it thousands of times as a Software Developer. ### Have you asked in public? (~2 minutes) I am a huge proponent of asking in public, especially this early into debugging. It is very common that someone replies an interesting alternative (or the outright solution) and saves me the time of debugging it myself. My favorite means to do this is X (formerly Twitter). Here is an example of [how I do it](https://x.com/LukeberryPi/status/1808877006957797781) and a [guide on how to do it (in Portuguese)](https://possoperguntar.com.br). ### Have you searched the codebase for a similar implementation? (~1 minute) It is said that the more code you copy, the more experienced you are. You might be attempting to write code that is very similar to other code in the same repository. Develop the habit of searching the codebase for the methods you are trying to implement. I do this with `⌘ + shift + f` on VS Code. And search for `useInfiniteQuery()`, for example. ### Have you accessed the documentation? (~15 minutes) Searching the documentation may be the quickest way to solve your problem. Docs usually have definitions for methods, its parameters, what it returns, and even a "Common Errors" section that might include yours. I usually do this by looking up the `method + library` on Google. For example, `useInfiniteQuery react query`. [Here is this specific example's documentation](https://tanstack.com/query/v4/docs/framework/react/reference/useInfiniteQuery). ### Have you looked up the error? (~15 minutes) Use whatever tool you prefer for this. It can be Google, ChatGPT, Claude AI or something else. Again, even if you don't solve it right away, it will help you understand the type of error and put you in the right path towards solving it. For Large Language Models (LLMs), I prefer to paste my code and ask "Why is this wrong?", instead of just pasting the error message directly. I have had better results with this approach. But what if you don't have an error message? ## Things stopped working for "no reason" ### Have you saved the file? (~5 seconds) VS Code has autosave disabled by default. This means you will have to save your file to see your changes reflected on the browser, usually via `⌘ + s`. I highly recommend [turning on autosave](https://code.visualstudio.com/docs/editor/codebasics#_save-auto-save). I use the `afterDelay` option set to 1000ms. ### Are you returning something? (~1 minute) If you are using `.map()`, `.filter()` or `.reduce()` make sure you are returning something. A common mistake is when refactoring from an implicit return to an explicit return: When using parenthesis, you don't need to write "return": ``` {list.map((item) => (

{item.content}

))} ``` If you refactor to brackets, you need to write "return": ``` {list.map((item) => { const upperCaseContent = item.content.toUpperCase() return

{upperCaseContent}

})} ``` ### Are you in the right URL? (~5 seconds) You might be in the wrong page or even the wrong environment. Your local changes won't show in the production environment, for example. While developing, you probably want to be checking your changes at `localhost:`. ### Are you connected to the VPN? (~10 seconds) Many enterprise companies use Virtual Private Networks (VPN) for accessing sensitive information. The staging environment, as well as project documentation or Kanban boards, may be unaccessible without logging into the VPN. ## Turn it off and on again ### Have you restarted the local server? (~30 seconds) This solves most hardware problems and a few software problems as well! You can do this by navigating to the terminal where the server is running and hitting `ctrl + c`. Then, you can restart the server (usually via `npm run dev`). ### Have you restarted the TypeScript Server? (~10 seconds) Language Server Protocols (LSP) can be hard sometimes. If you are seeing uncommon type errors in your IDE, there's a chance it's just the LSP malfunctioning. I have created the habit of running the `TypeScript: Restart TS Server` command in VS Code every 15 minutes. ### Have you reinstalled node_modules? (∞) It is common for your `node_modules` to become corrupted. If the error looks unrelated to your changes, try it. You can accomplish it by running `rm -rf ./node_modules` in your project root. Then, reinstall them by running the install command, most commonly `npm i`. ## Specific yet common errors ### Have you cleared the cache? (~10 seconds) Stale state is a big enemy of Frontend development. Often you can't see changes because you are accessing a cached (old) version of the whatever you're developing. You can use the `⌘ + shift + r` hotkey for clearing the cache in most browsers. ### Are you using the correct file extension? (~10 seconds) You might be using JavaScript XML (JSX) syntax on a `.js` or `.ts` file. You should use JSX and TSX syntax only in `.jsx` and `.tsx` files. It causes some apparently nonsensical errors, such as: ``` typescript: Cannot find name 'div'. ``` ### Are you in sync with the correct branch? (~1 minute) Development is commonly a team effort. It is possible that you're facing an issue that your teammate has already fixed. Keep up to date with the main branch by running `git pull origin main`. I do it daily. This is assuming you use Trunk-Based Development (TBD). If you use Gitflow, it may be the `develop` branch that you should be pulling from. ### Are your imports correct? (~30 seconds) Verify that you are importing code from the correct source, especially if there are similarly named files. It is also common to mix up imports from libraries. I recently lost a lot of time due to VS Code's auto import. Can you spot the difference? What it gave me: ``` import { Dialog, DialogTitle, DialogContent, DialogDescription, } from '@radix-ui/react-dialog'; ``` What I wanted: ``` import { Dialog, DialogTitle, DialogContent, DialogDescription, } from '@/shared/components/ui/dialog'; ``` ### Does it happen in an anonymous window? (~2 minutes) You should always check if an error also occurs in an anonymous window. You might have browser extensions that are affecting your development. You can do this with `⌘ + shift + n` on most browsers. This can also surface issues with authentication, since you will be logged off. ### Does your current user have the correct role permissions? (~5 minutes) If your application relies on permissions and roles for business logic, check if the action you're trying to perform is allowed for your current user. I had this recently: I was developing with an admin user, and the Quality Assurance (QA) was testing with a non-admin user. Since the roles are different, there were inconsistencies in the app's functionality. ## I didn't solve it yet, what now? ### Take a break (~10 minutes) I can't overstate the importance of this. Just take your eyes off screens. At this point, you've been debugging for a while. You can take the trash out, make a sandwich, pet your dog, floss your teeth, lie down. Anything goes. > Using your phone is complete self-sabotage and will make it harder to solve your problem. If you're serious about it, don't do it. ### Write it down (~20 minutes) Whenever you are back, ask yourself the following questions and **write the answer**: - What are you trying to do? - What is the problem you're running into? - What have you tried so far? Here is a real example I wrote: > I am trying to save a draft post whenever a user tries to close the `` component and they have filled something in any form field. The problem I am running into is that I can't save a draft because there are properties in the `saveDraftSchema` that are required, but still undefined at this point. I have tried updating the schema and using `.optional()` method but I'm still receiving a `ZodError: required_error`. This is called [rubber duck debugging](https://en.wikipedia.org/wiki/Rubber_duck_debugging). And something magical will happen if you do it. You will either: - Think of an alternative that you haven't tried yet - Find the solution immediately If it doesn't happen... ### Send it! (~2 minutes) At this point you know how to explain what you want to do and what you've already tried: the perfect recipe for someone to help you! Just send the message into a group chat from work. If you prefer sending it to an specific person, you can do that too, just be mindful that they: - Might not be available - Might not know how to solve your problem Sending it to a group chat increases the probability that someone helps you. And with all of the info you've gathered about your task, solving it will be a breeze. ## Conclusion This was my step-by-step guide for debugging common Frontend development issues. Worst case scenario this takes 90 minutes. But most of the times, you will make progress a lot earlier. I am still learning and I don't know everything. This list may be useless if you work with something other than Frontend web development. If you are a beginner in Frontend, give this a try! You won't regret it.

Raycast: Second Impressions

Wed, 15 May 2024 00:00:00 GMT

When I first bought a MacBook, I came across Alfred: an app launcher to replace Apple's Spotlight. What I liked the most was: - Opening apps with just a keystroke (e.g.: "s" opened Spotify) - Looking stuff up online and searching files on my computer - Searching all of my bookmarks and opening them When I first heard of Raycast. I was curious, but skeptical. I downloaded it and tried it out. The product felt a bit undercooked: - It opened up files when I wanted to open browser bookmarks - File search felt slower and less assertive than Alfred Even if my first experience with Raycast wasn't convincing, I definitely saw the potential. It felt slick and modern, it just didn't fit my use case. > Disclaimer: I didn't take the time to configure Raycast as I had done with Alfred. In that sense, it was a bit unfair to expect Raycast's default to behave exactly as I desired. Still, out-of-the-box (OOTB) behavior plays a huge role on migrating to/from a similar tool. Most users won't have the patience to configure the new tool and will give up migrating altogether. I recently decided to give Raycast a second try. **Spoiler: I no longer use Alfred.** In this article I will explain why I came back, what I love and what I wish would change. ## Why I Tried it Again What brought me back was [@peduarte](https://x.com/peduarte), a Software Engineer at Raycast, asking me in an [X thread](https://x.com/peduarte/status/1793990811014865072) what I thought Alfred did better. After reading through my feedback, he invited me to join Slack and become a beta tester. This showed me Raycast excels at community and convinced me to try it again. ## What I Love ### User Interface and Experience First off, something that Raycast is impeccable at: UI + UX. The user feedback, the subtle animations, how they embraced keyboard-first. It felt seamless to customize and the onboarding was amazing. ### Uninstalling other Apps Uninstalling apps always feels good. And opting for Raycast's implementation often resulted in a better experience. Some applications that I chopped off in favor of using Raycast's own Extensions: - [Maccy](https://maccy.app/) for clipboard history - [Rocket](https://matthewpalmer.net/rocket/) for typing emojis - [Rectangle](https://rectangleapp.com/) for window management ### Extensions and More Extensions! This is the soul of Raycast. Here is what I use the most: - [Spotify Controls](https://www.raycast.com/thomas/spotify-controls): I use "sp" to Play/Pause and "sa" and "sd" for the Next/Previous Track. These are better than the native keyboard controls because they don't conflict with other players (such as accidentally pausing a Youtube video instead of a Spotify track). - [Google Chrome](https://www.raycast.com/Codely/google-chrome): one feature makes this extension for me: Search Tabs. Even if Chrome is minimized, I can access specific tabs in seconds. A common use case is to go from VS Code straight into ChatGPT. Or open my WhatsApp tab from anywhere. - [Google Translate](https://www.raycast.com/gebeto/translate): I'm currently travelling around Europe and the possibility of translating a sentence [from/into any number of languages](https://x.com/LukeberryPi/status/1813352420623188453) is unbelievably handy. ## What I Wish Would Change ### Snippets and Text Replacements I have been using MacOS Text Replacement for a long time. Mostly for contact information, for example: "myemail" replaces into "lukeberrypi@gmail.com". Super handy. Unfortunately, Raycast Snippets break on X and WhatsApp, two of my most used websites. They also [don't work on VS Code](https://x.com/LukeberryPi/status/1806094087658807370). For now, I will stick to the native Text Replacements. ### Disable Fuzzy Search for Emojis When I used [Rocket](https://matthewpalmer.net/rocket/), there was an option to enable/disable fuzzy search. This would be a great addition to Raycast Emojis exntension, as it is currently [impossible to disable it](https://x.com/LukeberryPi/status/1801228787826229632). ### Browser Agnostic Bookmarks Question: if you bookmark "google.com" in Safari and Google Chrome is your default web browser, where do you expect the bookmark to open when accessing it via a launcher? Alfred opens it in Google Chrome and Raycast opens it in Safari. I much prefer the former. An "Always Open in Default Browser" toggle would also be amazing. ### Navigating with Escape In Raycast, `esc` goes back to the previous page. I wish I could configure this to the more universal `⌘ + [` and `⌘ + ]`, which I've grown used to. And an option for `esc` to close the entire Raycast app would be amazing. ### Using "fn" as a Modifier Key It is impossible to setup hotkeys for Raycast using the "globe/fn" key. This would be a nice addition since using `⌘` and `ctrl` often leads to conflicting hotkeys between different apps. ## Conclusion Raycast is phenomenal. Huge shout out to [@peduarte](https://x.com/peduarte) and the team for developing such an impressive, all-encompassing application. As with any software, there are improvement points, but I wouldn't write about it to this length if I didn't love it! [Try it out yourself](https://www.raycast.com/).