DEV Community: Jerricke

Python: A Powerful Language for Acing Technical Interviews

Jerricke — Thu, 21 Sep 2023 19:53:02 +0000

Technical interviews are a rite of passage for aspiring software engineers and developers. They can be nerve-wracking experiences that test your problem-solving skills, coding ability, and algorithmic thinking under pressure. While many programming languages can be used in technical interviews, Python has emerged as a formidable choice. In this blog post, we'll explore why Python is an excellent coding language for technical interviews, discussing its simplicity, versatility, and extensive library support.

The Simplicity of Python:

Python is renowned for its simplicity and readability, making it an ideal choice for coding interviews. The language's clear and concise syntax allows developers to express complex ideas in a straightforward and understandable manner. Here's a quick example of Python's simplicity compared to other languages:

Python (Pythonic way):

def is_prime(n):
    if n <= 1:
        return False
    for i in range(2, int(n**0.5) + 1):
        if n % i == 0:
            return False
    return True

C++:

bool is_prime(int n) {
    if (n <= 1) {
        return false;
    }
    for (int i = 2; i * i <= n; i++) {
        if (n % i == 0) {
            return false;
        }
    }
    return true;
}

In Python, the code is more concise and easier to read. During a technical interview, code clarity is crucial as it helps interviewers quickly understand your thought process and approach to solving a problem.

Versatility in Problem Solving:

Python's versatility shines when it comes to solving a wide range of technical interview problems. Whether you're dealing with algorithms, data structures, string manipulation, or dynamic programming, Python's extensive standard library and third-party packages provide the tools you need. For instance, you can use libraries like NumPy for numerical computations or Pandas for data manipulation, which can be beneficial in interviews that involve data analysis or manipulation tasks.

Additionally, Python's dynamic typing and high-level abstractions allow you to focus more on solving the problem itself rather than dealing with low-level details. This can be a significant advantage when tackling complex coding challenges within a limited time frame.

Rapid Prototyping and Iteration:

During a technical interview, you'll often need to write code quickly and make iterations as you refine your solution. Python's interpreted nature and interactive shell make it an excellent choice for rapid prototyping and testing. You can write code and see the results immediately, which can help you identify and fix issues more efficiently. This real-time feedback can be a game-changer in a time-constrained interview environment.

Large and Supportive Community:

Python has a vast and active community of developers and resources available online. This means that you can find a wealth of tutorials, documentation, and sample code to help you prepare for technical interviews. Online coding platforms like LeetCode, HackerRank, and CodeSignal offer extensive Python problem sets and discussions, allowing you to practice and learn from others.

Helpful Libraries for Technical Interviews:

Python's standard library contains many built-in modules that are helpful for technical interviews, such as collections, itertools, and heapq. These modules can simplify your code and make it more efficient when dealing with common data structure and algorithm tasks.

Additionally, you can leverage popular third-party libraries like NumPy, SciPy, and Matplotlib for tasks involving mathematics, data analysis, and visualization. These libraries can be especially useful if your interview problem involves numerical or data-related challenges.

Handling Edge Cases Gracefully:

In technical interviews, it's essential to handle edge cases and corner scenarios gracefully. Python's try-except blocks make it easy to handle exceptions and errors, ensuring your code doesn't break unexpectedly. This ability to gracefully handle errors can demonstrate your coding maturity to interviewers.

Example Time and Space Complexities:

Scenario: You are given a list of integers and you need to find the maximum value in the list.

Code:


def find_max_value(nums):
    max_value = float('-inf')  # Initialize max_value to negative infinity

    for num in nums:
        if num > max_value:
            max_value = num

    return max_value

Explanation: In this scenario, the code iterates through each number in the given list and compares it with the current maximum value. If a number is greater than the current maximum value, it becomes the new maximum value. Finally, the maximum value is returned.

Time Complexity: The time complexity of this code is O(n), where n is the length of the input list. This is because the code iterates through each element in the list once, performing a constant-time comparison operation for each element.

Space Complexity: The space complexity of this code is O(1), which means it uses a constant amount of additional space. Regardless of the size of the input list, the code only requires a fixed amount of memory to store the maximum value.

By understanding the time and space complexity of your code, you can analyze its efficiency and optimize it if necessary. This knowledge is valuable in technical interviews as it demonstrates your ability to write efficient algorithms and data structures.

Tips for Python in Technical Interviews:

Practice, Practice, Practice: Spend time solving coding challenges on platforms like LeetCode and HackerRank using Python. Familiarize yourself with different problem categories and data structures.
Master Pythonic Idioms: Learn Python-specific idioms and coding patterns that can help you write cleaner and more efficient code.
Time and Space Complexity: Understand the time and space complexity of your code. Interviewers often assess your ability to optimize code for efficiency.
Whiteboard Coding: If your interview involves whiteboard coding, practice translating your Python code onto a whiteboard while explaining your thought process clearly.
Ask Questions: Clarify the problem statement and requirements with your interviewer if something is unclear. Effective communication is a vital skill in technical interviews.
Test Your Code: Before declaring your solution final, run test cases to ensure it works correctly. Don't forget to check edge cases.
Discuss Trade-offs: If you have multiple approaches to solving a problem, discuss the trade-offs with the interviewer. This shows your analytical thinking.

In conclusion, Python's simplicity, versatility, and extensive library support make it a powerful coding language for technical interviews. By mastering Python and following best practices, you can confidently tackle a wide range of coding challenges and increase your chances of success in technical interviews. So, grab your Python interpreter, start practicing, and ace those technical interviews!

Getting started with React-Native and Expo 2023

Jerricke — Mon, 04 Sep 2023 19:46:50 +0000

Embarking on Your Mobile Development Journey with React Native

Mobile app development is an exciting and valuable skill in today's tech-centric world. Whether you're just starting or a seasoned developer, choosing the right framework can significantly influence your development path. Enter React Native, a powerful and versatile mobile app development framework developed by Meta. It offers numerous advantages compared to alternatives like Flutter, Kotlin, or Swift, making it an appealing choice for developers.

Why Choose React Native:

Cross-Platform Harmony: React Native allows you to build mobile apps that seamlessly run on both iOS and Android platforms using a single codebase. This means less hassle compared to building separate apps for Swift and Kotlin.
Speedy Development: React Native comes with a fantastic feature called hot-reloading, which lets you instantly see the effects of your code changes. This significantly speeds up the debugging and development process.
JavaScript Love: If you're already familiar with JavaScript, you're in luck! React Native uses JavaScript as its primary language, making it accessible to a wide developer audience.
Thriving Ecosystem: The React Native ecosystem is thriving, with a plethora of open-source libraries, tools, and a supportive community. This means you'll have access to a wealth of resources to enhance your app development.

Getting Started with React Native:

Node.js Installation: Before diving into React Native, ensure you have Node.js installed on your system. You can easily get it from the official Node.js website (https://nodejs.org/). Choose the LTS version that matches your operating system, download it, and follow the installation instructions.
React Native CLI Setup: With the recent updates in Expo SDK 46, we no longer need to install the global expo CLI packages (npm install -g expo-cli) as we now have a new local CLI that is "installed in every project and stays versioned with the runtime code — meaning projects are easier to set up, stay working longer, and the tooling updates less often." (source and for more information: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421)
Creating Your First Project: With the React Native CLI in place, let's create your very first React Native project. In your terminal, run this command:

   npx create-expo-app@latest --template tabs@49

Upon running that line of code, your terminal prompt you to input the name of your project. Feel free to name it whatever you desire and hit enter. Let your computer do it's thing and as your terminal initializes a new React Native project within a directory bearing the same name. The template will create a minimal project with the expo router installed as well! For more information, checkout the following link: https://docs.expo.dev/routing/installation/

Launch Your App: Change your working directory to the newly created project folder:

   cd Name-of-your-app

Then to get your expo application running, run the following command:

   npx expo

This command will boot-up your expo-cli project and a QR code following a list of options will appear. To view your application on your own personal devices, go to your respective application stores (app store or google play store, search up and download the Expo Go application). Once your application is downloaded, scan the QR code with your device and it will direct you to your Expo Go app and launch your application.

Bravo! You've successfully set up your React Native project and have your app running on either an Android or iOS simulator.

Additional to using your devices, there are ways to install and setup virtual simulations of your apple and android devices. A quick and simple way to setup an iOS virtual simulator is to download the XCode application from the app store (for Mac users only). Then head on over to your finder/application directory, right click the XCode application, select show package contents, navigate to Contents/Developer/Applications and then select Simulator. And another quick and simple way to setup an android virtual simulator is to download the Android studio software application. There are extensive guides and tutorials on the official web page as well, making sure the process is easy to follow! (https://developer.android.com/studio?gclid=Cj0KCQjwgNanBhDUARIsAAeIcAtNxlfTvQt-8PH4y1OYuM3UN8TC3y4mYCnDQ78rBh0aEy1r4lRf9tMaAmUQEALw_wcB&gclsrc=aw.ds)

In conclusion, React Native offers a convenient and efficient way to embark on your mobile app development journey. Its cross-platform compatibility, swift development cycle, and robust developer community make it an appealing choice. With Node.js and React Native CLI now at your disposal, you're well on your way to creating your very first mobile app with React Native. Enjoy the coding adventure!

A software engineering bootcamp experience and how I increased my productivity

Jerricke — Mon, 14 Aug 2023 05:26:42 +0000

Switching careers isn't an easy feat and there are many different ways to get things started. For software engineering, there are a few options, including attending a university to attain a computer science degree, signing up for a software engineering bootcamp, or self-teaching and learning (which is arguably the toughest option of the three). After realizing my passion and excitement for programming and building applications, I decided to commit and make a big leap into attending a bootcamp program. Although bootcamps come with a steep price to start, I was fortunate enough to have the money and also believed that it was a good investment for my own future.

First off, how does a coding bootcamp work?

Coding bootcamps come in many forms, some are part-time, some are full-time, some are remote, while the others are in-person. The plethora of options allows anybody to choose what works best for their current lifestyle, and personally, I opted for an in-person full-time coding bootcamp at Flatiron School.

At Flatiron School, we follow a 9-5 daily schedule, treating it like a full time programming job, which comes with the benefit of conditioning us to be field-ready. The intensity and pacing of the program is relatively high, pushing us to learn and utilize new sets of programming skills in a 3-week cycle. The 3 week cycles includes 1.5 week of learning new content, 0.5 week of prepping for an assessment, and 1 week of project building to really put our skills into practice.

Does this schedule work? Is it challenging to keep up?

To answer these questions, in short, yes and yes. The schedule ultimately teaches you how to learn quickly and pick up new tech skills quickly, which is of importance in the software engineering field with how rapid the industry is changing. Although it is challenging to keep up, everybody learns slightly differently and figuring out what works best for myself is key for my own success. Being more than half way through the program, I am able to confidently give some tips for anybody who may find themselves struggling to keep up with fast pace environments.

Breakdown:

Physical environment
Social environment
Psychological factors

Physical environment

Our physical environment often has a big impact on our productivity. Factors such as noise levels, temperature, and lighting all have an effect on our ability to stay focused and concentrate on our tasks. By making sure that we clean and organize our workplace, we will reduce potential distractions and create a more comfortable workspace, which will enable us to stay on task for longer periods of time!

Social environment

In addition to making sure that our workplace is clean and neat, having the right people around us can also boost our productivity. This was a very important factor that ultimately pushed me to sign up for an in-person full-time bootcamp program. Having like-minded people who are driven to learn around us can make us feel more motivated and more inclined to learn. Having an environment where colleagues are constantly pushing and supporting each other to grow has a huge impact on an individual's productivity. Fostering positive relationships with other programmers will build a supporting and collaborative environment, which will be mutually beneficial for everyone involved!

Psychological factors

Psychological factors such as stress, anxiety, and burnout can also have a significant impact on productivity. We need to make sure we are managing our work-life balance properly, taking breaks when necessary and also keeping up a healthy lifestyle (doing exercise and getting enough rest). A method that helped me maintain a healthy work-life balance was the use of routines and designating spaces.

In reference to routines, I would follow a daily routine of taking a cold shower after waking up, and having a similar morning routine leading up to work allows my brain to be conditioned and ready for work by the time I sit down and turn on my computer. Developing a personalized routine/ pre-work ritual can help boost productivity by allowing our mind to switch into work-mode. Having consistency is essential! Not to say that we should sacrifice our social life, but preserving a consistent routine will be beneficial in the long run.

Similar to the thought process of a routine, having designated workspaces and relaxation spaces can also help our brain focus when it needs to focus, and vice versa. Have you ever tried working from home, and realized that it is way more difficult to focus and get work done? Don't worry, you are not alone. That is because we naturally favor the easier and more comfortable choices, and having to pick between sitting in front of your computer to work versus laying in bed and watching videos? The answer is simple. To solve this issue, our bedroom should be a space for relaxation and resting, and our work-setup should be at a location that is separate from our bedroom. Like a routine, this will condition our mind to be ready for work and be less distracted when we are at our work-setup. In addition, we will be able to wind-down and relax easier when we get to our designated relaxation space!

Summary

Going through a software engineering bootcamp isn't easy and takes hard work and consistent effort! There will be times where we are super productive while times where we are unable to get work done. A few key take aways here are:

Make sure you've got an organized and physical environment that is comfortable.
Surround yourself with like-minded peers and colleagues who support one another and collaborate together
Adopt a routine that works for you! Allow yourself to "switch gears" into work-mode
Have designated workspaces to created better work-life balances

Using Custom CSS Variables and Its Benefits

Jerricke — Mon, 14 Aug 2023 00:03:11 +0000

A big part of building an application is making it aesthetically pleasing and easy on the eyes. This ensures that users will have an easy time navigating the application as well as just overall having a good time looking at the contents.

Issue to address

A common issue in using CSS to style applications is that there are plenty of ways to specify things.

Size

For example, we can use px, em, rem and % to address sizes. If we aren't careful, we will end up with px for some text and em for others. And when we have nested div's we may also have uncontrollable em sizes too!

colors

When creating an application, the colors we choose to use will have a great impact in the overall theme and feeling a user experiences when looking at the contents. Picking the right sets of colors is very important, and keeping the colors consistent is even more important.

This brings us to the topic of theming in CSS. Theming essentially means using a set of reusable values throughout our stylesheets, offering flexibility, maintainability and consistency. Not only does it make our applications look clean and intentionally designed, it also makes it easier to manage new changes and be more dynamic.

Creating CSS Variables

To create CSS variables, we simply have to use the following code

:root {
/* Colors */
--background-color: #5C6F68,
--primary-color: #A4F9C8,
--secondary-color: #A7FFF6,
--tertiary-color: #95D9C3,

/* Sizes */
--s1: 12px,
--s2: 16px,
--s3: 20px,
--s4: 32px,
--s5: 48px
}

With these CSS variables setup, we are now able to stick to a set of standardized colors and fonts. To access the variables, all we have to do is call these variables from elsewhere when we need it. For example,

<!-- html  -->
<body>
    <h1> Hello </h1>
    <p> Hello World </p>
</body>

/* css */
h1 {
    color: var(--primary-color);
    font-size: var(--s4);
}

p {
    color: var(--secondary-color);
    font-size: var(--s2);
}

By using CSS variables, our css code will look very neat and easy to read. With an much larger CSS file, using CSS variables will allow us to change the entire theme of the application if we had decided to change the color schemes. An example of such use case is the dark mode feature for certain applications, where a toggle will change the whole color scheme of all the components.

Additional CSS variables tips

When styling with CSS, we often run into problems with viewport sizes, which can ruin or distort the contents of or components. A strategy that I have learned to help mitigate these issues is the clamp() method in CSS. The clamp method takes in three arguments clamp(a minimum value, a preferred value, a maximum value). This allows the sizes of our contents to dynamically change depending on the size of the viewport, which can help us write less media-query code, and ultimately make our application look more consistent.

A quick and easy tool that we can use to create these custom CSS font size variables is the type calculator by Utopia. (https://utopia.fyi/type/calculator)

Clicking into the link, we will be able to designate the minimum and maximum viewport size, as well as how many steps of font-sizes we desire. Utopia would generate a block of CSS code that we can simply copy and paste into our CSS :root.

Make sure to check the "use CLAMP" box!

With this, we now have a curated set of font-size CSS variables we can use in any of our projects!

Benefits!

If the simple process hasn't sold you on using custom CSS variables yet, here's a list that reiterates the uses that comes with them:

Theming and branding
Responsive designs
Consistent design language
Dynamic styles
Media queries
Accessibility
Dark/Light mode
Scoped styles
Ease of maintenance
Grid and flex-box layouts
Reusable components
Debugging and customizations

Hopefully, this tutorial has been helpful for you in creating more dynamic and cleaner CSS code. Thank you for reading my blog post!

Creating SVG animations with CSS

Jerricke — Fri, 14 Jul 2023 17:17:26 +0000

As a new software developer myself, I always wonder how I can make my websites and application more exciting. Of all the cool websites I have gotten the chance to look at, all of them undoubtedly have some sort of animations to really capture the attention of the visitors. Upon looking on the web, I stumbled across the power of SVG animations! Not only was it easy to learn and to get started with, the possibilities are also endless and purely up to your imagination!

What is SVG?

SVG, short for scalable vector graphics, is a

text-based, open Web standard for describing images that can be rendered cleanly at any size

As quoted from https://developer.mozilla.org/en-US/docs/Web/SVG
Meaning, we would always have a high quality, crispy-clean image to display regardless of how big or small we want the image to be! This is super useful in cases where we want to scale an image up way larger than it's original size while preserving its quality.

How to get started:

First, we have to get our SVG file for us to animate. There are many ways to get SVG files, such as undraw.co and freesvg.org, or you can even create a custom SVG file on Figma yourself.
Once you’ve gotten an SVG file, you can hop on over to Figma and create a new design file. Import your SVG file by simply dragging and dropping your SVG file directly into your workspace.
Within Figma, you can select individual vectors/elements just by simply click on them, and if you want to select multiple items, you can hold Shift while clicking on them. In addition, you can select the items on the side bar as well! To select multiple items on the side bar, hold Cmd key and left click the items. Once you’ve picked a few items, you can group them together using Cmd + G or Ctrl + G. Grouping ultimately allows us to later animate a group of items altogether, so that everything will be organized when we work with our SVG file in our code editor.
Once grouped, you can give the grouped items a new name so it’s easier to identify the groups. Simply click on the "group" name on the side bar and edit the text. When you’re done with grouping the items that you wish to animate, simply export the file in SVG format, and make sure to check off both options for the exports.

Moving onto your HTML and CSS files:

Go ahead and copy and paste the contents of the exported SVG file into your HTML body tags! The SVG code will look very long and messy, and that is totally normal! The code would look something like this:

<svg width height viewBox fill xlmns>
<g id="name of the svg file">
<path />
<path />
<path />
....
<path />
<g/>
</svg>

Within the whole mess of code, the groups that you’ve created in the previous step should have a g tag with an id.

<g id="group-name">

Now that we have the SVG file in the HTML file, we can begin using CSS to modify how it looks on our browser!

For this example, we’re only going to add animations to the check symbol in the center of the phone. We can directly style the check symbol using the ID tags we created. Here’s a very simple animation:

* {
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}

svg {
   margin-top: 10%;
}

#Check {
  animation: checkAnimation 5s ease infinite;
}

@keyframes checkAnimation {
  0% {
    opacity: 0;
    translate: 0 -20%;
  }

  30% {
    opacity: 1;
    translate: 0 0;
  }
}

By using the ID of the check symbol, we can add an animation styling specifically to the group. The keyframes of the "checkAnimation" basically describes the animation process over the duration of our check symbol.
In this case, the symbol will fade in in the first 1.5 seconds and as it is appearing, it will drop in from top to bottom.

And voila! we have our SVG animation!

Granted this is a very very simple animation, but now that you've learned the basics on how to create an SVG animation, you can start exploring and trying out all the other animations and effects!

Here are some additional resources to help with your SVG animation journey!

SVG Repo - Free SVG Vectors and Icons
Undraw - Free SVG graphics
Haikei - Free custom SVG patterns, can be used as creative page dividers
Shape Divider App - Free custom SVG divider generator