DEV Community

Key Steps to Prepare for a Software Engineer Interview

Arslan Ahmad — Fri, 25 Aug 2023 23:23:17 +0000

1. Deciphering Software Engineering Interviews

Before diving deep into coding exercises or system design preparation, it's vital to understand the essence of a software engineering interview. It’s not just about testing your coding skills, but also about understanding if you fit the company's culture and can contribute to its objectives.

What Are Hiring Managers Looking For in a Software Engineer?

Problem-solving skills: The crux of any software engineering role is to solve problems. Hiring managers are on the lookout for individuals who can break down a complex problem, approach it logically, and find a suitable solution. A 2020 survey conducted by LinkedIn highlighted that problem-solving topped the list of soft skills desired by employers.

Technical prowess: Employers wish to see a good command over programming languages and tools. They want candidates who can adapt to new technologies, as the tech landscape is ever-evolving. In a Stack Overflow Developer Survey, more than 75% of developers believed that learning new technologies is an essential part of their job.

Team Collaboration: Software development is rarely a solo endeavor. Engineers frequently collaborate with different teams, from UI/UX designers to product managers. Hence, your ability to work in a team and communicate effectively can make you stand out.

Cultural fit: Every company has its own culture and values. Hiring managers often gauge whether a candidate would fit into their work environment and resonate with the company’s ethos.

Types of Software Engineer Interviews

Coding Interviews: These assess your technical coding skills. You may be asked to write a piece of code, debug, or solve algorithms. Websites like LeetCode and Design Gurus have popularized such problems, preparing aspirants for FAANG and other top tech company interviews.

System Design Interviews: Here, you're usually posed with designing a system or architecture. It tests your broader understanding of system components and how they interact. Check the following article for a detailed discussion on system design interview: Demystifying System Design Interviews: A Guide

Behavioral Interviews: This focuses on your past experiences, behavior in certain scenarios, and how you deal with challenges or conflicts. They gauge your soft skills and are a predictor of how you'd fit into the company's culture.

Technical Screening: Before an in-depth interview, many companies have a technical screening round, usually over the phone or through platforms like Codility. This is a preliminary check to see if you possess the basic technical skills required.

Take-home Assignments: Some companies provide assignments that you must complete at home. These give a more extended window (like a week) and are beneficial for employers to see how you approach real-world tasks.

To conclude, while strong technical skills are a necessity, soft skills and a keen understanding of what hiring managers are looking for can provide the edge you need to stand out.

2. Preparing for the Technical Aspects of the Interview

Understanding the technical intricacies is pivotal for any software engineer. The coding interview can be a battleground, and the right preparation is your armor. Let's simplify how to tackle this.

How Long It Takes to Prepare For a Technical Engineering Interview

Time is subjective: On average, dedicated aspirants spend 2-4 months preparing for technical interviews at top-tier companies. However, remember, it's not about the number of hours but the quality of your preparation.

Consistency is key: Like any skill, consistent practice hones your coding acumen. Spending even an hour daily on platforms like LeetCode can help you grasp patterns and improve speed. A survey from 2019 on CodeSignal revealed that candidates who practiced regularly, even for short durations, had a 20% higher success rate in interviews compared to intermittent learners.

Choosing a Programming Language

Stick to what you know: For coding interviews, it's advisable to pick a language you’re most comfortable with. Most companies are language-agnostic in interviews, prioritizing logic and problem-solving over syntax.

Popular choices: While it's about comfort, languages like Python, Java, and JavaScript often emerge as favorites. Python's readability and simplicity make it a go-to choice for many. In fact, according to the PYPL (PopularitY of Programming Language) Index, Python's popularity grew by 18.9% in 2020, showcasing its rising prominence.

Understanding Key Concepts: Arrays, Linked Lists, Hash Tables, etc.

Arrays: They are fundamental data structures that store elements of the same type. Understanding their operations, such as insertion, deletion, and traversal, is critical. Did you know? Almost 25% of problems on LeetCode are array-based!

Linked Lists: Unlike arrays, linked lists have nodes connected by pointers. Mastering their types (singly, doubly) and operations can set you on the right track.

Hash Tables: This data structure is vital for optimizing solutions. They store key-value pairs and provide quick access, making them indispensable for problems involving frequencies or grouping. A fun fact – Hash tables are so versatile that their use-cases span from database indexing to caching!

Regular Practice: These are just a few key concepts, and the realm of data structures and algorithms is vast. Regularly practicing and internalizing these structures can dramatically improve your problem-solving skills. According to GeeksforGeeks, understanding these basic data structures can help in solving around 70% of the coding problems in interviews.

3. System Design and Behavioral Interview Preparation

Beyond algorithms and code, a comprehensive interview prep must address system design and behavioral questions. Let's unpack these aspects to ensure you present a holistic version of yourself in the interview.

Preparing for Behavioral Questions: The STAR Format

Why Behavioral Questions Matter: Behavioral questions might feel less technical, but they're just as vital. Companies are keen on understanding your experiences, decision-making process, and how you handle challenges. After all, a great coder with poor interpersonal skills might not be an asset in team projects.

The STAR Technique: This is your secret weapon to nail behavioral questions.

Situation: Begin by describing the context or backdrop.
Task: What were you responsible for?
Action: Detail the specific steps you took to address the task.
Result: Conclude with the outcome of your actions.

For example, when asked about a time you faced a tight deadline, you could discuss a project, explain your responsibility, describe how you prioritized tasks, and finally, share the successful completion or lessons learned. solution

A CareerBuilder survey highlighted that 62% of employers are looking for candidates who can effectively communicate – and using the STAR format is an excellent method to demonstrate this ability.

On-Site Interview: Personality Questions and Skill Tests

The All-Encompassing On-Site: After initial rounds, many companies invite candidates for an on-site interview. This comprehensive round aims to assess both your technical prowess and personality fit.

Personality Questions: Here, interviewers want to gauge how well you'd mesh with the company culture. They might ask about your preferred work environment, teamwork experiences, or how you handle criticism.

Skill Tests: While earlier rounds test foundational skills, on-site rounds might involve deeper dives into specialized areas. For instance, if you're applying for a web developer role, you might be asked to critique a website's design or pinpoint performance bottlenecks.

A tip to remember: on-site interviews can be draining. A study by Glassdoor indicated that software engineer interviews, especially at top tech companies, can last more than two hours. So, ensure you’re well-rested and hydrated!

To sum up this section, while technical skills can get your foot in the door, your behavioral responses and on-site performance can seal the deal. Approach them with the same rigor as you would a coding challenge. The more holistic your preparation, the better equipped you are to impress potential employers!

4. Commonly Asked Interview Questions for Software Engineers

Cracking a software engineering interview often requires familiarity with frequently asked questions. While each interview can be unique, several core questions test foundational skills and thought processes. Let's unravel some of these typical questions.

Technical Questions

Algorithm Challenges:
- "Given an array of integers, find two numbers such that they add up to a specific target number." solution
- "Given a positive integer, check if it is a prime number or not." solution
- "Given a stair with 'n' steps, implement a method to count how many possible ways are there to reach the top of the staircase, given that, at every step you can either take 1 step, 2 steps, or 3 steps." solution

Why they're asked: These gauge your algorithmic thinking and problem-solving prowess. Such questions assess if you can develop efficient solutions to common coding challenges.

Check Grokking the Coding Interview for top coding patterns for interviews.

Data Structures:
- "Explain the difference between a stack and a queue."
- "How would you implement a hash table?"

Insight: Data structures are the backbone of software engineering. Employers want to ensure you have a firm grip on these concepts, as they play a pivotal role in real-world applications.

Databases:
- "Can you explain the difference between SQL and NoSQL?"
- "How would you optimize a slow-performing query?"

Takeaway: As data drives decisions in today's digital age, knowledge of databases is imperative. These questions assess your understanding of data storage, retrieval, and optimization.

Conceptual and Design Questions

Software Design Patterns:
- "Can you explain the Singleton pattern and its use cases?"
- "What’s the difference between MVC and MVVM patterns?"

Purpose: These questions aim to understand if you're aware of established patterns that streamline software development, ensuring consistency and efficiency.

System Design:
- "How would you design a scalable global chat system like WhatsApp or Facebook Messenger?" solution
- "Describe the architecture you'd suggest for an e-commerce platform." solution

Understanding: System design questions evaluate your broader perspective on software. They're not just about writing code but about how different components interact in a system.

Soft Skill and Behavioral Questions

Teamwork and Collaboration:

"Describe a time when you disagreed with a team member. How did you resolve it?"
"Tell me about a challenging team project and your role in it."

The Rationale: Companies are keen on team players. These questions gauge your ability to collaborate, communicate, and sometimes, compromise for the greater good.

Motivation and Passion:

"Why did you choose a career in software engineering?"
"What coding project are you most proud of, and why?"

The Reason: Passion often drives excellence. Interviewers want to see if you're genuinely enthusiastic about coding and if you'll bring that zest to the workplace.

To sum up, while technical prowess is vital, a holistic approach to these questions can set you apart. It's not always about the right answer but the journey you take to arrive there. Stay informed, practice regularly, and always approach questions with a problem-solving mindset. Remember, each question is an opportunity to showcase your expertise and passion!

Acing the Coding and Whiteboard Exercises

In the realm of software engineering interviews, coding challenges and whiteboard exercises are the ultimate proving ground. These hands-on tests assess your ability to translate abstract problems into tangible solutions. Let's delve into strategies to shine in these exercises.

Conquering the Whiteboard Exercise

1. Understand Before You Write: Before diving in, clarify any ambiguities. Asking questions not only showcases your thoroughness but ensures you're on the right track. As stated by TechCrunch, nearly 45% of interviewers are impressed when candidates ask insightful questions.

2. Start with a Brute Force Solution: It's okay to begin with a simple solution. Once outlined, you can then refine for better efficiency.

3. Explain Your Thought Process: Articulation is crucial. The whiteboard isn't just about the final solution, but the journey to get there. A LinkedIn survey emphasized that 92% of hiring professionals value soft skills, like communication, equally or more than technical abilities.

4. Test with Real-World Examples: After jotting down your approach, walk through a real-world example. This checks the feasibility of your solution and potentially uncovers any oversights.

5. Embrace Feedback: Sometimes, interviewers might play devil's advocate or suggest modifications. Rather than being defensive, adapt and iterate. This shows resilience and a willingness to learn.

Navigating Coding Challenges

1. Optimize Your Workspace: Whether it's an online IDE or a platform specified by the company, ensure you're familiar with the environment. A clutter-free, familiar workspace can significantly reduce unnecessary stress.

2. Time Management: Most coding challenges are timed. Break down your total time – a fraction for understanding, a chunk for coding, and the remainder for testing. According to a report by HackerRank, 70% of employers zero in on problem-solving skills during coding tests. Being systematic can help manifest this skill.

3. Edge Cases are Crucial: It's not enough to just solve the problem. Ensure your solution caters to edge cases. This demonstrates thoroughness and deep understanding.

4. Maintain Clean Code: Remember, it's not just about getting the solution but the quality of your code. Consistent naming conventions, comments, and modular code reflect professionalism and attention to detail.

5. Stay Calm and Debug: Bugs are inevitable. If something goes awry, stay composed. A structured approach to debugging showcases your problem-solving aptitude under pressure.

Conclusion: Your Next Steps for Software Engineer Interview Success

You've traversed the depths of interview preparation, from understanding the intricacies of the process to nailing whiteboard challenges. Yet, as we wrap up this guide, it's pivotal to remember that preparation is an evolving journey, not a destination. So, what should be your subsequent steps for ensuring success?

Continuous Learning

The Tech Landscape is Dynamic: Software engineering is perpetually evolving. Stay updated with emerging technologies, languages, and industry trends. A survey by Stack Overflow emphasizes that 75% of developers learn a new technology every year. Be part of that proactive majority.

Mock Interviews

Practice Makes Perfect: Beyond solitary preparation, engage in mock interviews. Platforms like Pramp or Design Gurus offer real-time practice with peers or industry professionals. This not only sharpens your skills but offers invaluable feedback from a third-person perspective.

Build and Reflect

Your Portfolio Speaks Volumes: Regularly update your GitHub or portfolio with projects that you're passionate about. But don't just build – reflect on what you've created. Understand the 'why' behind your choices. This introspection aids in articulating your decisions during interviews.

Network and Engage

You're Not Alone: Join local or online tech communities. Engage in discussions, attend webinars, or even participate in hackathons. A study by LinkedIn suggests that 85% of jobs are filled via networking. So, don't underestimate the power of genuine connections.

Self-care

A Healthy Mind in a Healthy Body: While technical prowess is vital, mental and physical well-being is paramount. Regular breaks, hobbies, and even meditation can significantly reduce stress. After all, a relaxed mind can think clearer and innovate better.

In essence, your journey towards software engineering interview success is a blend of technical mastery, continuous learning, and holistic well-being. It's not about memorizing solutions but understanding and enjoying the process. So, embrace the journey, celebrate small victories, and remember that every interview, whether successful or not, is a stepping stone to your ultimate goal. Keep coding, keep learning, and most importantly, keep believing in yourself!

Follow me on LinkedIn and medium to get more insights on tech interviews.

Building a distributed workflow engine from scratch

Arik — Fri, 25 Aug 2023 22:00:00 +0000

I've been somewhat obsessed with creating workflow engines for the better part of a decade. The idea of constructing a 'mega' machine from an army of smaller machines never seems to get old for me.

At their core, workflow engines are responsible for executing a series of tasks (typically referred to as a 'job', 'pipeline' or 'workflow') over a cluster of machines (typically referred to as 'workers' or nodes) as quickly and as efficiently as possible.

Building a workflow engine comes with a bunch of interesting challenges. Here's a short and highly non-exhaustive list:

What do you use to author workflows? Do you use a general-purpose programming language? a configuration-type language like JSON or YAML or do you roll your own DSL (Domain Specific Language)?
How do we decide which tasks go to which workers such that busy workers are not overloaded while others are idle?
How do we deal with the requirement to scale up or down the capacity in response to fluctuations in computational demand?
How do we deal with intermittent task failures?
How do we deal with worker crashes?
How do we deal with a situation where we have more tasks to execute than available capacity?

Let's put some rubber on the road

The first time I needed to actually build a workflow engine was while working for a video streaming startup. At the time, the company was outsourcing all its video processing needs to another company.

The existing process was slow, expensive and brittle. The company was regularly getting new content (movies, trailers, bonus video material, closed captions etc.) and we needed a way to quickly process this content in order to get it up on the service for customers to enjoy.

Moreover, the existing process was quite rigid and any changes to it (e.g. to introduce a new audio technology) took months or were simply not possible. I suggested to build a proof-of-concept that would allows us to bring the work in-house and luckily my managers were open to the idea.

At this point, you're probably asking yourself why would you want to be build one when there are a million open-source and commercial options out there?

True, there are many options out there. And we looked at a good number before we made the decision to build one ourselves. But at least at the time (circa 2014), many of the existing options were either not designed for a distributed environment, were designed more particularly for data-processing use cases, were seemingly abandoned, or simply felt over-engineered to our taste.

The initial iteration of the workflow engine allowed us to start processing 'low-risk' content such as trailers, and as we gained confidence in the new system we slowly phased out the old process completely.

Later on, when a co-worker left to another media company that needed a similar system, he asked me if I'd like to come over and do it all over again from scratch. Naturally, I agreed. Our 2.0 was similar in spirit but a lot of the lessons learned from the old design were fixed in the new design.

Meet Tork

After building two proprietary workflow engines for highly specialized use cases I had an itch to see if other companies - possibly with vastly different use cases - could also benefit from a similar system. So I decided to build an open-source version of it.

Tork is a Golang-based implementation which is very similar in spirit to its closed-source predecessors. It can run in a 'standalone' mode on a laptop or deployed to a huge cluster of machines depending on your need.

The main components of Tork are:

Coordinator: responsible for managing the lifecycle of jobs and tasks, routing tasks to the right workers and for dealing with task execution errors.
Worker: responsible for executing tasks according to the instructions of the Coordinator. Workers are stateless so it's easy to add and remove them as demand for capacity changes.
Broker: the means of communication between the Coordinator and worker nodes.
Datastore: holds the state for tasks and jobs.
Runtime: tasks are executed by means of a runtime which translates the task into actual executable. Currently only Docker is supported due to its ubiquity and large library of images, but there are plans to add support for Podman and WASM in the future.

If you're interested in checking it out, you can find the project on Github:

Backend: https://github.com/runabol/tork
Web UI: https://github.com/runabol/tork-web

41 Frontend Interview Questions - CSS

Yan Levin — Fri, 25 Aug 2023 21:35:36 +0000

Introduction

Expertise in CSS and the ability to implement the necessary UI components for a business is an important skill for a Frontend developer, which sets you apart as a candidate for your dream job. This article covers 41 questions in a 'question: answer' format that I encountered during Frontend Developer job interviews.
This article is the second part of a series on interview questions for frontend developers. If you haven't read the article on JavaScript interview questions yet, I recommend checking it out using the provided link - 52 Frontend Interview Questions - JavaScript

1. What are the values of the `display` property and how do they work?

The CSS property "display" determines how a specific HTML element should be displayed.

display: none - The simplest value. The element is not displayed at all.
display: block - Block elements are stacked vertically, one on top of the other. The block tries to expand to the full available width.
display: inline - Elements are placed on the same line, sequentially. The width and height of the element are determined by its content and cannot be manually changed.
display: inline-block - The element is inline, but its width and height can be changed.
display: flex - flexbox usage. Recommend to check out the links.
display: grid - grid usage. Recommend to check out the links as well.

There are other values, but they are rarely used.

Learn more
Learn more
And even more

2. What is flexbox?

Flexbox is a layout module that provides a flexible way to arrange and align elements within a container. It allows for easy manipulation of the size, position, and spacing of elements, making it ideal for creating responsive and dynamic layouts. With flexbox, you can easily create complex and multi-directional layouts without relying on floats or positioning hacks. It provides a powerful set of properties and values that enable you to control the flow and alignment of elements within a container.

Learn more

3. What is grid?

Grid is a layout system that allows you to create complex, grid-based designs for web pages. CSS Grid Layout provides a two-dimensional grid structure, where you can define rows and columns to position and align elements within the grid.

With Grid, you can divide your webpage into a grid of cells, specifying the size and alignment of each cell. This allows for precise control over the placement and arrangement of elements, making it easier to create responsive and flexible layouts.

Key features of CSS Grid include:

Grid Container: The parent element that holds the grid items and defines the overall grid.
Grid Items: The child elements placed within the grid container.
Grid Lines: The horizontal and vertical lines that divide the grid into rows and columns.
Grid Tracks: The spaces between grid lines where grid items are placed.
Grid Areas: Named areas within the grid used for placing multiple grid items.

CSS Grid provides powerful features like grid-template-columns, grid-template-rows, grid-gap, and grid-template-areas, allowing you to control the size, positioning, and order of grid items. It offers great flexibility and control over the layout, making it a popular choice for modern web design.

Learn more

4. What are keyframes?

Keyframes are used to define specific animation steps or states during an animation. They allow you to specify the intermediate styles or property values that an element should have at various points in time during the animation.

Keyframes are defined using the @keyframes rule in CSS. Inside the @keyframes rule, you define the animation steps by setting the CSS properties and values at specific percentages or using keywords such as from and to which represent 0% and 100%, respectively.

@keyframes slideIn {
    from {
        margin-bottom: 100%;
        width: 250%;
    } 
    to {
       margin-bottom: 0%
       width: 100%;
    }

Learn more

5. What is the `position` property? What values does it accept and how does each value behave?

The position property allows you to move an element from its normal static position. By default, elements are considered to have static positioning. Here are some more most popular positioning.

Relative positioning shifts the element relative to its normal position. To apply relative positioning, you need to specify the CSS property position: relative and the coordinates left/right/top/bottom.

.container {
    position: relative;
    top: 5px;
    right: 5px;
}

Absolute positioning causes the element to disappear from its original position and be repositioned. Other elements are positioned as if this element never existed. The coordinates top/bottom/left/right for the new position are calculated relative to the nearest positioned parent, which is a parent with a positioning other than static. If there is no such parent, the coordinates are calculated relative to the document.

.container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Fixed positioning freezes the block in place, so when the page is scrolled, the fixed element remains in its position and does not scroll with the page.

.container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Sticky positioning is similar to fixed positioning, but it is attached within a specific block rather than the entire document.

Learn more

6. How to create a custom checkbox?

Before the checkbox, a label is created and attached to the input. Then the input is hidden, and the label is styled as needed.

<input id="first" type="checkbox" name="first" checked hidden />
<label for="first">Checkbox checked</label>

Learn more

7. How to center a div?

There are several ways, but the simplest one is to make the parent element using display: flex.

.parent {
    display: flex;
    align-items: center;
    justify-content: center.
}

8. What is the `transition` property?

Transition allows you to define a transitional state between two states of an element. Different states can be defined using pseudo-classes such as :hover or :active, or dynamically set using JavaScript.

Learn more

9. What is `box-sizing`?

The CSS property box-sizing determines how the total width and height of an element are calculated. When set to border-box, the width and height properties include the content, padding, and borders, but do not include the margin.

Learn more

10. What are inline styles?

This is inline styles that are written directly in HTML and they have the highest priority (excluding !important).

<p style="color: yellow;">This is p tag</p>

11. What is the difference between `border` and `outline`?

Outline does not affect the position of the element and its dimensions.
Outline does not allow to set a border on a specific side of the element (only on all sides at once).
Outline does not apply corner rounding set by the border-radius property.

Learn more

12. What do you know about responsive web design?

Responsive web design refers to the approach of designing and developing websites in a way that allows them to adapt and respond to various screen sizes and devices. It involves creating flexible layouts, using fluid grids, and employing media queries to ensure optimal viewing experiences across different devices and resolutions. This approach aims to provide users with a seamless and user-friendly browsing experience, regardless of the device they are using.

Learn more

13. How does a browser process a web page?

When a browser processes a web page, it goes through several steps:

Parsing HTML. The received HTML document is used to form the DOM (Document Object Model)
Styles are loaded and recognized, forming the CSSOM (CSS Object Model).
Based on the DOM and CSSOM, a render tree is formed, which is a set of rendering objects (referred to as "renderer" or "render object" in Webkit and "frame" in Gecko). The render tree duplicates the structure of the DOM, but invisible elements (such as <head> or elements with display:none;) are not included. Each text line is also represented as a separate renderer in the render tree. Each rendering object contains its corresponding DOM object (or text block) and the calculated style for that object. In simple terms, the render tree describes the visual representation of the DOM.
The position on the page is calculated for each element in the render tree - this is called layout. Browsers use a flow method, where in most cases, only one pass is needed to position all elements (more passes are required for tables).
Finally, all of this is rendered in the browser - this is called painting.

Learn more

14. What is BEM (Block Element Modifier)?

BEM (Block, Element, Modifier) is a component-based approach to web development. It is based on the principle of dividing the interface into independent blocks. It allows for easy and fast development of interfaces of any complexity and reusing existing code, avoiding "Copy-Paste".

Learn more

15. What is the difference between inline and block elements?

Elements in HTML are also divided into block and inline elements. Block elements are elements that serve as building blocks for web pages. They are used to separate the content of a web page into logical blocks, such as menus, headers, content blocks, footer, etc. Block elements are written on a new line; a line break is automatically added before and after these elements in the browser.

Block elements include <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, and <video>. All block elements have opening and closing tags.

Inline elements mark parts of the content within elements. They only occupy a limited space defined by the tags, and the browser does not automatically add line breaks.

Inline elements include <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, and <var>.

Learn more

16. What is the difference between `margin` and `padding`?

Margin - external margins.
Padding - internal margins.

Learn more
Learn more

17. What is the purpose of the `overflow` property and when should it be used?

The CSS property overflow determines whether the content of an overflowing block element should be clipped, provide scroll bars, or simply be displayed.

Learn more

18. What are `vh` and `vw` units?

vh and vw are relative units and represent:
vh - 1% of the browser window's height.
vw - 1% of the browser window's width.

19. How to change the appearance of a cursor?

The CSS property cursor is used to change the appearance of the cursor.

.container {
    cursor: pointer;
}

Learn more

20. How to change the flexbox container's axis direction?

The CSS property flex-direction is used to change the direction of the flexbox container axis.

Learn more

21. What determines the size of an element?

The size of an element is constructed from the width and height of its content, inner padding, border, and outer margin.

22. How to position one element relative to another?

To control the positioning of a child element, set the position property to relative and use top/right/bottom/left to adjust its placement.

.element {
    position: relative;
    top: 20px;
    left: 20px;
}

Learn more

23. What are the main properties of flexbox?

The main properties of flexbox are:

display: Specifies the element as a flex container.
flex-direction: Specifies the direction of the flex items (row, row-reverse, column, column-reverse).
flex-wrap: Specifies whether the flex items should wrap or not (nowrap, wrap, wrap-reverse).
justify-content: Specifies how the flex items are aligned along the main axis (flex-start, flex-end, center, space-between, space-around).
align-items: Specifies how the flex items are aligned along the cross axis (flex-start, flex-end, center, baseline, stretch).
align-content: Specifies how multiple lines of flex items are aligned along the cross axis when there is extra space (flex-start, flex-end, center, space-between, space-around, stretch).
flex-grow: Specifies how much a flex item can grow relative to other items.
flex-shrink: Specifies how much a flex item can shrink relative to other items.
flex-basis: Specifies the initial size of a flex item before any remaining space is distributed.
order: Specifies the order in which the flex items appear within their container.

These properties allow for flexible and responsive layouts by dynamically adjusting the size and position of flex items within a container.

24. How to remove the bullet point from a list?

Set the list-style-type property to none for the corresponding list element. Here's an example:

ul {
  list-style-type: none;
}

25. What do you know about selector specificity?

Selector specificity determines the priority of selectors in a style sheet. The more specific a selector is, the higher its priority. Each selector has a weight:

Element selector - 1
Class selector - 10
ID selector - 100
Inline style - 1000
!important - has the highest weight.

Learn more

26. Which CSS styles are most performance-heavy for browsers?

A large number of connected fonts, shadows, animations, and transparency.

27. What are pseudo-classes and which ones do you know?

Pseudo-classes describe characteristics of elements, such as dynamic states (e.g., a clicked link), language encoding (e.g., a paragraph in French), and more. They are not displayed in the source document and do not belong to the DOM tree. The most commonly used ones are :hover, :focus, :checked, :disabled, and others.

Lean more

28. How to rotate a block by 90 degrees?

To rotate a block element by 90 degrees you can use the transform property along with the rotate function.

.block {
  transform: rotate(90deg);
}

This will rotate the block element clockwise by 90 degrees. You can adjust the angle by changing the value inside the rotate function.
Learn more

29. What pseudo-elements do you know?

A pseudo-element in CSS is a keyword added to a selector that allows styling a specific part of the selected element. For example, the pseudo-element ::first-line can be used to change the font of the first line of a paragraph.
The most commonly used pseudo-elements are: ::after, ::before, ::placeholder, ::first-letter.

p::first-line {
    color: blue;
    text-transform: uppercase;
}

Learn more

30. What is `!important` and how do you feel about it?

!important declaration is used to give a style rule the highest priority, overriding any other rules that conflict with it. When applied to a CSS property, !important ensures that the specified value will be used, regardless of specificity or order of other rules.

!important use is generally discouraged due to some potential drawbacks:

Specificity issues: Using !important can lead to specificity conflicts and make it difficult to maintain or override styles in the future.
Difficulty in debugging: When multiple stylesheets or rules use !important, it becomes harder to diagnose and troubleshoot styling issues.
Inflexibility: It limits the flexibility and modularity of stylesheets, making it challenging to make changes or apply different styles to specific elements without modifying existing !important rules.
Code readability and scalability: Overusing !important can make the codebase less organized and harder to read, especially in larger projects.

In general, it's best to avoid using !important unless absolutely necessary, and instead utilize proper specificity and cascading principles to achieve desired styling effects.

Learn more

31. What is the difference between `<script>`, `<script async>`, and `<script defer>`?

The browser loads and displays HTML gradually, especially noticeable with slow internet connections. The browser doesn't wait for the entire page to load before showing it; instead, it displays the portion that has been loaded.

If the browser encounters a <script> tag, it is typically required by the standard to execute it first before displaying the remaining page content. This means that the loading happens synchronously from top to bottom.

If the script is external, the browser won't display the content below it until the script has been executed.

When using the async and defer attributes, the browser starts loading scripts asynchronously, without delaying the display of HTML.

However, defer is used when the order of script execution is important. Scripts will be loaded synchronously but sequentially. Another difference is that defer will only execute after the entire HTML has been processed by the browser, whereas async starts loading immediately, even before the HTML finishes loading.

Learn more

32. How to increase the size of an element on hover without shifting neighboring elements?

To increase the size of an element on hover without shifting neighboring elements, you can use transform property along with the scale function.

.element {
  transition: transform 0.3s ease;
}

.element:hover {
  transform: scale(1.2);
}

In this example, the transition property adds a smooth transition effect to the transformation. When hovering over the element, the transform: scale(1.2) rule scales the element by 20%, making it larger without affecting the layout or shifting neighboring elements.

By using transform: scale(), the element's size increases while maintaining its original position in the layout.

Learn more

33. What are media queries?

Media queries are used in cases where different CSS styles need to be applied for different devices based on their display type (e.g., printer, monitor, or smartphone), as well as specific device characteristics (e.g., browser window width) or external environment conditions (e.g., ambient lighting). Given the vast number of internet-connected devices, media queries are a crucial tool for creating websites and applications that will function properly on all available devices used by your users.

@media screen and (max-width: 768px) {
  flex-direction: column;
}

Learn more

34. For what data attributes are recommended to use?

Data attributes are recommended to use when you want to store custom data within HTML elements. They should be used when there is a need to attach additional information to an element that is not specifically represented by an existing HTML attribute.

Data attributes are prefixed with data- and can have any name following it. It is recommended to follow a naming convention that is descriptive, meaningful, and avoids potential conflicts with existing or future standard HTML attributes. For example, if you want to store information about a specific product on an e-commerce website, you can use a data attribute like data-product-id to store the unique identifier of the product.

By using data attributes, you can easily access and manipulate this custom data. It provides a way to enhance the functionality and behavior of your website or application without modifying the standard HTML attributes or structure.

<article
  id="some-article"
  data-columns="4"
  data-index-number="213124"
  data-parent="wrapper">
  …
</article>

Learn more

35. How to create an infinite animation?

To create an infinite animation, you can use the animation property and set the value of animation-iteration-count to infinite.

.element {
  animation: myAnimation 2s infinite;
}

@keyframes myAnimation {
  /* Define the animation keyframes */
}

Learn more

36. What is an attribute selector?

Attribute selectors select elements based on the presence of an attribute or its value.

a[href="https://example.org"] {
    color: green;
}

span[lang='en-US'] {
    color: blue;
}

Learn more

37. How to change styles for a button with the `disabled` attribute?

To select an element with the attribute "disabled" set, you need to use attribute selectors.

button[disabled] {
  color: blue;
}

Learn more

38. How to change styles for a `<span>` element that comes after an `<input>` element?

The adjacent selector is designed for this purpose. Adjacent elements on a web page are called "adjacent" when they immediately follow each other in the document's code.

input + span {
    color: blue;
}

Learn more

39. Which selector can be used to apply a style to every element on a page?

Sometimes, it is necessary to apply the same style to all elements on a web page, such as setting the font or text formatting. In such cases, a universal selector can be used, which matches any element on the web page.

To denote the universal selector, the asterisk (*) symbol is used, and the syntax is as follows.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Lean more

40. What are CSS preprocessors, which ones do you know, and what are they used for?

A preprocessor is a program that takes input code written in a preprocessor language and outputs CSS that can be given to our browser. Preprocessors simplify the process of styling if you know how to use them.

There are several representatives of preprocessors, such as Sass / SCSS (.sass, .scss), Less (.less), and Stylus (.stylus). More often, preprocessors add new capabilities to CSS:

Nesting
Mixins
Additional functions
Modularity
Variables

Learn more

41. What are mixins in preprocessors?

A mixin is a function that takes arguments and applies rules dependent on these arguments to a given selector. Mixins allow you to create groups of CSS declarations that you will have to use multiple times on a website. You can even pass variables into mixins to make them more flexible.

Learn more

Conclusion

Preparing for these CSS questions, studying the topics covered, and reviewing relevant resources can improve your chances of successfully passing the interview. This post is the second part of a series of post on interview questions. The next one will be about React interview questions that I have faced.

I look forward to your reactions and comments.
Good luck in your interview!

🐦 Inventing Issues to Solve Real Problems: My Dive into Jira Connector Development

Adam Crockett — Fri, 25 Aug 2023 21:27:17 +0000

Starting from scratch can be a puzzle, can't it? Even more of a head scratch-er if you only have some of the pieces!
Here I am with a tool in the works ready to tackle Jira issues in an innovative way (more on that in earlier posts). But for this chat, let's sidestep those specifics. My aim? To guide you on tackling tasks from platforms like Jira, Assana, GitHub issues, and the like, even if you don’t have an actual company’s problems at hand.

Ready?

Ive done all the pondering already so you don't have to, go setup a Jira

Go ahead and setup a free Jira for your org, mine is Amalgam (that’s the name of the tool I’m writing).

Now then just select the basics when prompted.

Now what?

I have a board, its empty, I need to populate it with junk so that my tool can solve problems that my real customers would face, I have no time for this... Oh ChatGPT, come here a sec!

Prompts

User
I am writing a tool that needs to consume Jira issues, I need a fake project idea and a issue to raise, make sure its a bit silly and animal related.

It gave me something complex so I said

User
make it a todo list

Its very important to choose a ridiculous idea that is very narrow in scope such as a todo list, because these are our new test cases, we understand what a todo list is. we need to understand a tiny bit about what the fake company is so we can sense check. The plan is to use our new tool and test against this test case company and its issues.

I suggest creating one bug and one feature or whatever you might need, you will need to enable those issue types.

A bug

Ask ChatGPT to create your first bug. Be aware that it may mention attachments; such as customer complaint screenshots, if your tool is going to use images, you need to mock those, I suggest getting it to write that for you and then fake it to look real like mocking it into a Zendesk style UI.

A Feature

It might mention a flowchart attachments this time, ask it to provide a serialized flow chart and ask it to suggest a way to generate the image - many things can be serialized you would be surprised.

For every rich detail it gives you... it will present you with problems, you don`t have to solve them yourself.

The end

I now have my Jira test cases, now I can go and write my Amalgam SaaS tool :D

Part 4 (a): Project: How to Build a Mini App with Vue.Js

Makanju Emmanuel — Fri, 25 Aug 2023 21:01:24 +0000

In this article, you will learn how to build a Todo app with Vue.js. If you have any issues getting started with vue fundamentals, please start from the first chapter of this series. Most of what you will be learning is based on the knowledge you have acquired.

This is not a regular front-end-specific to-do app because all the features needed to help you get started on building projects will be available in this app. For example, it will feature: authentication, unit testing, pinia state management, api implementation, and the use of composables.

There's a bit of modification that countered my initial plan of using Vue 2 and adding an upgrade to Vue 3. I have come to realize that using the latest tools from the Vue ecosystem will not only help beginners trying to learn the latest version of Vue but also intermediates who are looking to stay up-to-date with the community.

So far, this project uses the latest versions of Pinia, Vue, and Tailwind CSS. Here is how you can get started:

Setting Up the Project Boiler Plate:

create project

To create a project, follow the step-by-step guide to setting up a Vue project in the documentation . Add Vitest for unit testing; this project does not support typescript, so there’s no need to add it. Add Pinia and Vue Router. Do ensure that you add all these options features.

Install Icon Libary and Axios

Icons are important for representing some information while developing an application. Font Awesome is an icon library that is designed for this purpose. For quick installation, kindly follow the instructions on how to add this library to a Vue 2 or 3 app here.

Axios is a well-known JavaScript library for making HTTP requests. It's frequently used in Vue.js projects to interact with APIs and retrieve data. Here's how to install and configure Axios in your Vue project:

Install Tailwind Css:

Tailwind CSS is a utility-first CSS framework that streamlines web development by providing a set of pre-designed, atomic-level utility classes. These classes can be directly applied to HTML elements to style and design them quickly without writing custom CSS. Tailwind CSS follows a "utility-first" philosophy, which means that instead of creating custom classes for each element, developers can compose styles by combining existing utility classes. Here is how you can also add it to the project

This is how your package.json would look like when you have completed all installation.

Package.json:


{
  "name": "dev-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/vue-fontawesome": "^3.0.3",
    "axios": "^1.4.0",
    "pinia": "^2.1.4",
    "vue": "^3.3.4",
    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.2",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/test-utils": "^2.4.1",
    "autoprefixer": "^10.4.15",
    "eslint": "^8.45.0",
    "eslint-plugin-vue": "^9.15.1",
    "jsdom": "^22.1.0",
    "postcss": "^8.4.28",
    "prettier": "^3.0.0",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.6",
    "vitest": "^0.33.0"
  }
}

Setting Up a tailwind.config.js File:

One of the key features of Tailwind CSS is its ability to be customized through a configuration file called tailwind.config.js. This file lets you modify various aspects of Tailwind's default behavior and extend its functionality.

If you have followed the installation process here, A config file for Tailwind will be added to your root folder.

Tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}"
  ],
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1024',
      xxl: '1440px',
    },
    colors: {
      'primary': '#414066',
      'solid-varaint': '#4C6640',
      'light-variant': '#525168',
    },
    fontFamily: {
      popins: ['Poppins', 'sans-serif'],
    },
    extend: {
      borderRadius: {
        '2xl': '1rem',
        '4xl': '2rem',
      }
    },
  },
  plugins: [
    require('autoprefixer'),
  ]
}

This configuration is how we have customized the Tailwind CSS based on our project needs. Here's what each part of the configuration does:

1.content : Specifies the files that Tailwind should scan to find used classes. In this case, it's looking for HTML, Vue, JavaScript, and TypeScript files.

2.theme : This section lets you customize the default styles provided by Tailwind.

screens : Defines breakpoints for responsive design. We've specified screen sizes for different breakpoints like small (sm), medium (md), large (lg), extra-large (xl), and xxl.
colors : Defines custom color names and their corresponding hexadecimal values.
fontFamily : Specifies a custom font family to be used in your project, in this case, 'Poppins' with a fallback of 'sans-serif'. However, for this font to work properly we must install or search and import it from google fonts into your main.css file.

src/assets/main.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,800;1,300&family=Poppins:wght@400;500&display=swap');
@import './base.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

extend : Allows you to add or modify existing theme values. Here, you've added two additional border radius values.

3.plugins: This is where you can include additional plugins for your Tailwind setup. The example includes the autoprefixer plugin, which adds vendor prefixes to CSS properties.

Remember to run your build process after modifying the configuration to see the changes take effect in your project's styles.

Designing Views for Vue Routes:

Each route corresponds to a specific view/component in your application. In Vue, views are typically created as Vue Single File Components (.vue files) that include the template, script, and style sections. Here's how you can create views:

1.Create a file named Login.vue in your src/views/ directory. This file will contain the template, script, and style for your Login view. repeat the same approach to create your Register and Dashbaord view

<template>
   <div>Login</div>
</template>

<script>

export default {
   name:'LoginView',
   components: {},
}
</script>

<template>
   <div>Register</div>
</template>

<script>

export default {
   name:'RegisterView',
   components: {},
}
</script>

Dashboard.vue

<template>
   <div>Dashboard</div>
</template>

<script>

export default {
   name:'DashboardView',
   components: {},
}
</script>

After creating view pages, we will be responsible for configuring and registering the pages for routing within our application using the Vue Router library. We accomplish this in the following steps:

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Register from '../views/Register.vue';
import Login from '../views/Login.vue';
import Dashbaord from '../views/Dashboard.vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Login
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/register',
      name: 'register',
      component: Register
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashbaord
    },
  ]
})

export default router

Here is an explanation of how the routing works:

1.Imports :

The createRouter and createWebHistory functions are imported from the 'vue-router' package. These functions are used to create and configure the router instance.

2.Component Imports :

Three Vue components (Register, Login, and Dashboard) are imported. These components will be used as views for different routes in the application.

3.Router Configuration :

A router instance is created using the createRouter function. It takes an object with two properties: history and routes.

The history property is set to use web history mode with the base URL obtained from import.meta.env.BASE_URL.

The routes property is an array containing route objects. Each object defines a route with properties like path (URL path), name (route name), and component (associated Vue component).

4.Route Definitions:

Four routes are defined:

'/': Represents the home page using the Login component.
'/login': Represents the login page using the Login component.
'/register': Represents the registration page using the Register component.
'/dashboard': Represents the dashboard page using the Dashboard component.

5.Export :

The configured router instance is exported as the default export. This allows the router to be used throughout the application for navigation and rendering based on routes.

In essence, this code establishes the routing structure for a Vue application. When a user accesses specific routes, the associated components will be displayed, creating a seamless and organized user experience.

React Custom Hook: useRenderCount

Sergey Leschev — Fri, 25 Aug 2023 21:00:00 +0000

In this article series, we embark on a journey through the realm of custom React hooks, discovering their immense potential for elevating your development projects. Our focus today is on the "useRenderCount" hook, one of the many carefully crafted hooks available in the collection of React custom hooks.

Github: https://github.com/sergeyleschev/react-custom-hooks

import { useEffect, useRef } from "react"

export default function useRenderCount() {
    const count = useRef(1)
    useEffect(() => count.current++)
    return count.current
}

The useRenderCount hook utilizes React's useEffect and useRef hooks to keep a count of renders. With each render, the count is incremented, providing you with real-time feedback on the component's render frequency.

One of the major advantages of using useRenderCount is its simplicity. By abstracting the logic into a reusable hook, you can easily integrate it into any component without cluttering your codebase. Additionally, it provides a clear and concise way to monitor render behavior, which can be crucial for performance optimization and debugging.

import useRenderCount from "./useRenderCount"
import useToggle from "../useToggle/useToggle"

export default function RenderCountComponent() {
    const [boolean, toggle] = useToggle(false)
    const renderCount = useRenderCount()
    return (
        <>
            <div>{boolean.toString()}</div>
            <div>{renderCount}</div>
            <button onClick={toggle}>Toggle</button>
        </>
    )
}

This versatile hook can be applied in various scenarios. For instance, when you're developing a complex component that exhibits unexpected rendering patterns, useRenderCount helps you pinpoint the problem by showing the exact number of renders. It is also handy for measuring the impact of certain optimizations or refactoring techniques, allowing you to assess their effectiveness.

To get started, simply import the useRenderCount hook and call it within your component. You can see its power in action by checking out the RenderCountComponent example above. By combining useRenderCount with other custom hooks like useToggle, you can build interactive components while keeping an eye on render counts.

Full Version | React Custom Hooks:
https://dev.to/sergeyleschev/supercharge-your-react-projects-with-custom-hooks-pl4

GPT Mental Health Chatbot💛 and Google Calendar API📆

Abhishek — Fri, 25 Aug 2023 20:09:38 +0000

Hi Everyone!
I have been working on a GPT Chatbot that...

Talks to you for a while and understands your feelings
Asks you 10 questions to plan your day
Uses Google Calendar API to Build a schedule for you.

Motivation to do this

When I was in high school and preparing for a college entrance I achieved high level consistency and my Google Calendar Reflected it. It was more like a diary.

It looked like this.

This honestly made me happy because I had some sort of a plan for my life and I could visually see how it turned out.

The color scheme was also predefined. Light blue and yellow was work, pink was sleep, orange was neutral events and dark blue was R&R.

I want to share this amazing system that made me happy, made me more productive, and in general a much smarter person.

Also, at the moment I'm taking BZDs. Medications that make you feel "tranquillity". I want people to have that feeling without them meds.

React app + Firebase Functions Express Endpoint

This is where all the chats are combined and we get a response from the openAI api.

It is trained to go like a therapy session.

Google Calendar API

Okay getting the whole OAuth thing working was difficult and even now, my app is still in testing! But the GPT API can call functions and I made some sort of a function to add events to someone's calendar

Sample Chat response to Calendar

Please ignore the light time zone mismatch.

So lets talk about testers💛

Looking for Testers! Try tranqility out now!

As of now if you go to https://tranqility-ai.web.app/ I don't think you'll be able to use it unless you are registered by me as a test user.

But with another account it did work without all this test user stuff, so just try it out, it'll barely take 20 seconds.

So, if anyone is interested in a light therapy session followed by day planning, comment your email address and I'll invite you!

Set up Hot Reload for Typescript ESM projects

Wagner Manganelli (aka manga) — Fri, 25 Aug 2023 19:38:24 +0000

TL;DR

Are you moving your projects to use ES Modules but you are facing some unexpected issues? You are not alone in this fight. In this tutorial, you will learn how to set up nodemon along with ts-node.

Wait, why are we not using ts-node-dev? Currently, there are some issues related to TS ESM projects that are making its use harder. Check this issue for more details.

Hot-Reload?

This technique is handy when you are developing locally. This will automatically watch changes over your source code and updates for you. So, you just have to make your code work and the hot-reloading will do the magic from behind the scenes. This will improve your code development process bringing more efficiency and velocity, as you will not have to restart every time your application.

Let's set it up 🔧

Prerequisites

Node.js >= v18.12.0

Initial steps

mkdir app-esm-hot-reload
cd app-esm-hot-reload
npm init -y

Install dev dependencies

npm install --save-dev typescript@5.1.6 ts-node@10.9.1 nodemon@3.0.1

Initialize TypeScript

  npx tsc --init

Configuration steps

package.json

{
  ...
  "type": "module",
  "scripts": {
    "build": "tsc",
    "dev": "nodemon src/index.ts",
    "start": "node dist/index.js"
  },
  ...
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "dist",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true
  },
  "ts-node": {
    "esm": true
  },
  "exclude": ["node_modules", "./*.ts", "__test__"]
}

Create index.ts

mkdir src
touch src/index.ts

Execute script

npm run dev

Make changes to the index.ts or any other file

Your app should be reloaded automatically

That's it! Now you can start coding without bothering with restarting your application at every change. 🍺

P.S. you can refer to this template.

Useful links

Tutorials that might interest you as well

Set up a Node.js project + TypeScript + Jest using ES Modules

I hope this tutorial improves your development process.

Thank you for reading! Happy coding! 🥳

Create your first Web-app using ChatGPT

Lionel Tchami ♾️☁️ — Fri, 25 Aug 2023 19:24:00 +0000

Introduction

Language translation is essential in our globalized world, bridging language gaps. Web apps are becoming more important for seamless communication due to the rising need for language translation services.

This article discusses creating a web-based language translation application utilizing ChatGPT and Streamlit. ChatGPT, an advanced OpenAI language model, can generate natural-sounding text responses from inputs provided. On the other hand, Streamlit is a powerful open-source framework for fast, easy data science web application development.

TL ; DR

Use Chatgpt to create a Translator Web-app

Here we go....

I. Starting ChatGPT and Streamlit

Before building our language translation web application, we must set up our development environment and install the necessary packages. This section explains how to configure and install OpenAI with Streamlit.

ChatGPT's language model was created by OpenAI, which powers our web-based translation tool. To use OpenAI's resources, we will need to get an API key from the website. With the API key, we can install OpenAI using pip in our command prompt or terminal:

pip install openai

Next, we need to setup Streamlit, which is the framework we will be using to build our web app. We can also use pip to install Streamlit:

pip install streamlit

Now that OpenAI and Streamlit have been installed, we can now start building our translation web-based app.

For more information on ChatGPT, Streamlit, and the OpenAI API key acquisition procedure, check out my in-depth tutorial, Building a ChatGPT Web Application using Streamlit and OpenAI: A Step-by-Step Tutorial.

II. Developing the Translation Web-App

After installing the necessary packages, let us now see how to create the user interface for our language translation web-based application. Please follow this full guide:

Name a new file app.py in your favourite Python editor. Please copy the code snippets into your file and save changes.
Import the necessary packages to start coding:

# Importing required packages  
import streamlit as st  
import openai

We will use ChatGPT model engine text-davinci-003. This model can mimic human responses and even translate across languages. This model requires registration and an OpenAI api_key, as explained in step (V.5) of this article. Now, add the following two lines to your script:

# Set the model engine and your OpenAI API key  
model_engine = "text-davinci-003"  
openai.api_key = "your_secret_key"

Next we will create the translate_tex function which will take care of the translation process. This function will take whatever the user selects as target language and text input and return the translated text.

# Define a function to handle the translation process  
def translate_text(text, target_language):  
# Define the prompt for the ChatGPT model  
prompt = f"Translate '{text}' to {target_language}"  

# Generate the translated text using ChatGPT  
response = openai.Completion.create(  
engine=model_engine,  
prompt=prompt,  
max_tokens=1024,  
n=1,  
stop=None,  
temperature=0.7,  
)  

# Extract the translated text from the response  
translated_text = response.choices[0].text.strip()  

return translated_text

Now to bring it all together, we will create the main() function that will call the needed functions to create our language web-based translation app. Let us setup this app, so the user will be able to translate text into Arabic, English, Spanish, French, German, Japanese, Russian, Korean, Chinese, Yoruba :

# Define the main function that sets up the Streamlit UI and handles the translation process  
def main():  
# Set up the Streamlit UI  
st.sidebar.header('Language Translation App')  
st.sidebar.write('Enter text to translate and select the target language:')  

# Create a text input for the user to enter the text to be translated  
text_input = st.text_input('Enter text to translate')  

# Create a selectbox for the user to select the target language  
target_language = st.selectbox('Select language', ['Arabic', 'English', 'Spanish', 'French', 'German', 'Japanese', 'Russian', 'Korean', 'Chinese', 'Yoruba'])  

# Create a button that the user can click to initiate the translation process  
translate_button = st.button('Translate')  

# Create a placeholder where the translated text will be displayed  
translated_text = st.empty()  

# Handle the translation process when the user clicks the translate button  
if translate_button:  
translated_text.text('Translating...')  
translated_text.text(translate_text(text_input, target_language))

Now for our last step, we need to call the main function that we created

# Call the main function  
if __name__ == '__main__':  
main()

All done, now go ahead and save the file. We can give any name to our python file. I will call it Translator_GPT.py.

We can now run our translator app in our terminal.

streamlit run Translator_GPT.py

Once you run this command, a webpage in your default web browser will open where we will see our web-app.

Please go ahead and test the app for yourself. This is what it will look like.

III. Making our Web-app to the World

To make our app public, there are 3 easy ways.

We will look at how to make our available to everyone, using streamlit

III.1 Before Deploying to the Cloud…

We are now ready to deploy our translation app to the rest of the world. Before doing that, we need to do some house cleaning.

III.2 Install git

We need to install Git, our Version Control Tool which will allow us to run git commands on the terminal to upload our app.

III.3 Add a ‘requirements.text’ file

The cloud platform will need to know the python packages to install before they can start your app. We will specify that in our requirements.txtfile.

streamlit  
pandas

III.4 Deploy your App to Streamlit Cloud

We will be using Streamlit to make our website public

III.4.1 Set up a GitHub Account

First, create a GitHub account here: Click here

III.4.2 Create a New GitHub Repository

In the upper-right corner of any page, use the drop-down + menu, and select New repository.

Give the repo name you want repository name, -> click on Create repository. For now, no need to change any parameters, we will go with the default parameters.

III.4.3 Upload Files to your GitHub Repository

Now click on ‘uploading an existing file’.

Select your app.py and requirements.txt files inside the following page.

III.4.4 Set up a Streamlit Cloud Account

First we need to create a streamlit account. To do create a Streamlit cloud account here: Click

III.4.5 Create a New App and Link your GitHub Account

You will see a prominently visible "New app" button after logging in, which is self-explanatory once you see it.
Also, you will get a prompt asking you to "Connect to GitHub". Click on it and log into your previously created GitHub account to continue.

III.4.6 Deploy your App

On the next screen, search for the GitHub repository that you just created. Type the repo name in the area -> Repository, which is specifically for this purpose.
In the field -> Main file path change to app.py
Click the 'Deploy!' button.

III.4.7 Your Public App is Now Live on Streamlit Cloud!

After waiting for some time, your app will appear. Congrats! Here’s mine: https://share.streamlit.io/apotitech/translatorGPT/main/TranslatorGPT.py

Congratulations!!!!!! You have created your very first app.

Conclusion

Great job creating your very first app. Please go ahead and share your new app to others and let them test your app.

With that said ----------------> Happy Building!!

Thank you for taking the time to read this! If you like the article, please clap (up to 50 times!) and connect with me on LinkedIn , dev.to and Medium to remain up to speed on my future articles. 😅

Killing the Create React App - CRA to Vite migration guide (Javascript)

Navdeep Mishra — Fri, 25 Aug 2023 19:13:57 +0000

Create React App (CRA) is a popular tool for creating React applications. It provides a quick and easy way to get started with React, but it can be limiting in terms of features and flexibility. Vite is a newer build tool that offers a number of advantages over CRA, including faster development times, smaller bundle sizes, and more customization options.

Here are some of the reasons why you might want to migrate from CRA to Vite:

Faster development times: Vite uses native ES modules and has a built-in dev server that can hot reload your changes in real time. This can save you a lot of time when you're developing your application.
Smaller bundle sizes: Vite uses modern build tools to optimize your code, which can result in smaller bundle sizes. This can improve the performance of your application and make it easier to deploy to production.
More customization options: Vite has a simpler configuration than CRA, which gives you more control over how your application is built. This can be helpful if you need to customize your build process for specific needs.

Of course, there are also some potential drawbacks to migrating to Vite:

Less community support: Vite is not as widely used as CRA, so there is less community support available. This can make it more difficult to find help with problems you might encounter when using Vite.

Overall, the benefits of migrating from CRA to Vite outweigh the drawbacks. If you're looking for a faster, more customizable, and more performant build tool for your React applications, then Vite is a great option.

Let's now quickly see how we can do that. 😎

If you already have an app running on Create React App or CRA with JS template then follow the below steps to migrate safely.

Note: I am using Yarn here for package management. If you are using npm or pnpm then use commands according to your package manager. 😎

Step 1:
We have to install first vite in our project. 🔥

yarn add -D vite @vitejs/plugin-react

Step 2:
Uninstall the react-script (CRA) from your project. 😆

yarn remove react-scripts

Step 3:
Let's modify our package.json scripts. 😮

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
},

Step 4:
Create the vite.config.json in your root directory of the project 😯

touch vite.config.js

Step 5:
Copy paste the content mentioned below in your vite.config.js 🤔

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [react()],
  };
});

Step 6:
Now one of the crucial step is to rename all the existing files from js to jsx. Vite not supports js file containing any jsx syntax like '< or >' aka angular brackets but if you think any file is by mistake renamed then revert back that file to .js extension. 😆😆😆😆😆

To do that we have a smart command. Thanks to this Github Conversation

if using git then run this command in your root directory in bash terminal.

find ./src -type f -name '*.js' -not -name '*.jsx' -not -name '*.ejs' -exec bash -c 'grep -l "</" $0' {} \; -exec bash -c 'git mv "$0" "${0%.js}.jsx"' {} \;

if not using git then run

# finds all *.js files that have either `</` or `/>` tags in them and renames them to *.jsx
find ./src -type f -name '*.js' -not -name '*.jsx' -not -name '*.ejs' -exec bash -c 'grep -l -E "</|/>" "$0"' {} \; -exec bash -c 'mv "$0" "${0%.js}.jsx"' {} \;

Step 6:
After renaming, move the index.html from public folder to your root directory. 🙃

mv public/index.html .

Step 7:
Afterward, remove all %PUBLIC_URL% occurrences in the index.html file like mention below. You can use global search ctrl+shift+s in vs code to find and replace it. 🫡

- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="icon" href="/favicon.ico" />

<!-- do this for all occurrences  -->

Step 8:
Last, link the src/index.js file in your moved index.html file like this

<body>
  <div id="root"></div>
  <script type="module" src="/src/index.jsx"></script>
</body>

That's all for normal project using CRA. We'll see few bonus tips ass well. 😉

Now run

yarn dev

Now open your browser and type localhost:5173 you'll see your project running. 😎

That's all for a project running on CRA.

Now Let's see some bonus tips.

If you are using **svg's as React Component you have to install svgr. Run**

yarn add vite-plugin-svgr

Now modify your vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [
      react(),
      // svgr options: https://react-svgr.com/docs/options/
      svgr({ svgrOptions: { icon: true } }),
    ],
  };
});

// which allows you to import SVGs as React components
// import { ReactComponent as MyIcon } from './my-icon.svg';

If you want to use the path alias, then modify your vite.config.js

import path from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';

export default defineConfig(() => {
  return {
    resolve: {
      alias: {
        '~': path.resolve(__dirname, './src'),
      },
    },
    build: {
      outDir: 'build',
    },
    plugins: [react()],
  };
});

// which allows you to import from folders under the /src folder
// import Button from '~/components/Button';

If you want to open browser on server start, add the following code in your vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(() => {
  return {
    server: {
      open: true,
    },
    build: {
      outDir: 'build',
    },
    plugins: [react()],
  };
});

If you face error for your env variables saying process is undefined or anything similar then remove the REACT_APP prefix from them and instead write VITE as prefix and instead of using process.env use import.meta.env.[VARIABLE_NAME] For more info on vite env variable and modes Check Here

i.e -

.env

REACT_APP_TEST=true
//to
VITE_TEST=true

Use in this way

//from 
process.env.REACT_APP_TEST=true
//to
import.meta.env.VITE_TEST=true

If you are using emotion, update your vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [
      react({
        jsxImportSource: '@emotion/react',
        babel: {
          plugins: ['@emotion/babel-plugin'],
        },
      }),
    ],
  };
});

That's all for this guide. 😉 If you face any issue or have any updates please comment below. For more content please Share, Like and Follow.

Thankyou 😎

🎯 Overcoming Impostor Syndrome in the World of Web Development 💻

Mohsindev369 — Fri, 25 Aug 2023 19:10:39 +0000

Hey There 👋

Today, I wanted to talk about something that many of us in the web development community have likely experienced at some point in our careers: Impostor Syndrome. 🤔

Impostor Syndrome is that nagging feeling of self-doubt and inadequacy, even in the face of accomplishments and evidence of competence. It's that voice in our heads that whispers, "Do I really belong here?" or "Am I just lucky, or do I actually know what I'm doing?" Trust me, you're not alone if you've ever had these thoughts. 🙋‍♂️🙋‍♀️

In the fast-paced and ever-evolving world of web development, it's easy to feel like you're falling behind or that you're not as skilled as your peers. But here's the truth: You've come a long way, and you deserve to be where you are! 🚀

Here are a few strategies I've found helpful in combating Impostor

Acknowledge Your Achievements:

Take a moment to reflect on your journey. Remember the projects you've successfully delivered, the complex code you've tackled, and the problems you've solved. These accomplishments are proof of your skills and dedication.

Embrace Continuous Learning:

Web development is all about growth. Instead of fixating on what you don't know, focus on what you're learning. Every challenge you overcome adds to your expertise.

Talk About It: Don't be afraid to open up to your colleagues or mentors about how you're feeling. You'll likely find that they've experienced similar thoughts and can provide valuable perspective.

Celebrate Progress:

Break down your larger goals into smaller milestones. Celebrate each achievement along the way. It's a great way to remind yourself of your capabilities.

Remember You're Not Alone:

Impostor Syndrome is more common than you think. Many successful developers have dealt with it too. It's a sign that you care about your work and want to do your best.

Practice Self-Compassion:

Treat yourself with kindness. Remember that making mistakes is a natural part of learning and growing. Don't be too hard on yourself.

Let's turn Impostor Syndrome into Impostor Strength! 🦸‍♂️🦸‍♀️ Remember, every challenge you face and overcome is a step forward in your journey. You belong in this field, and your unique skills contribute to the vibrant web development community.

Have you experienced Impostor Syndrome? How do you overcome it? Let's start a conversation and support each other in the comments below! 👇

WebDevelopment #ImpostorSyndrome #TechCommunity #PersonalGrowth

Using the event bus pattern in Android with Kotlin

Tristan Elliott — Fri, 25 Aug 2023 19:03:45 +0000

Event bus patter
SharedFlow
Extending the event bus pattern

The code

GitHub

Introduction

Recently I have had to deal with some relatively complex state logic for a login system and this was how I dealt with it.

Event bus pattern

So in nerd talk we can describe the Event bus pattern as this: Event-driven architecture pattern is a distributed asynchronous architecture pattern to create highly scalable reactive applications. The pattern suits for every level application stack from small to complex ones. The main idea is delivering and processing events asynchronously.
Which basically means we can have an event producer object and event subscriber objects that wait and listen for the event producer to produce events. The subscribers can then consume and respond to those events. The classic mental model is down below:

SharedFlow

Now if you are unfamiliar with what a SharedFlow is, just know that it is a hot flow. Which means, that when the terminal operator collect{} is called it will always be active.
However, we are going to use a specialized version of a SharedFlow called the StateFlow for our event bus:

class DataStoreViewModel(): ViewModel() {
private val _oAuthUserToken:MutableStateFlow<String?> = MutableStateFlow(null)

init{
  viewModelScope.launch{
     _oAuthUserToken.collect{ token ->
        token?.let{oAuthToken ->
     // make request now that the oAuthToken is not null
    }
}
  }
}

fun setOAuthToken(token:String){
   _oAuthUserToken.tryEmit(token)

}
}

In the code block above we are registering a subscriber when calling _oAuthUserToken.collect{}. Meaning that it will always be active as long as the scope it is calling is active. if viewModelScope is destroyed then so is the subscriber.

Extending the event bus pattern

Now there are going to be times when your authentication process has multiple steps and each step relies on the previous one. Also, at anytime, one of those steps can fail meaning that the steps that relied on that one also fail. So how do we model this problem? We extend the event bus pattern like so:

data class MainBusState(
    val oAuthToken:String? = null,
    val authUser:ValidatedUser? = null,
)

private val authenticatedUserFlow = combine(
        flow =MutableStateFlow<String?>(null),
        flow2 =MutableStateFlow<ValidatedUser?>(null)
    ){
        oAuthToken,validatedUser ->
        MainBusState(oAuthToken,validatedUser)

    }.stateIn(viewModelScope, SharingStarted.Lazily,
        MainBusState(oAuthToken = null, authUser = null)
    )
private val mutableAuthenticatedUserFlow = MutableStateFlow(authenticatedUserFlow.value)



private fun collectAuthenticatedUserFlow() =viewModelScope.launch {
        mutableAuthenticatedUserFlow.collect{mainState ->
            mainState.oAuthToken?.let{notNullToken ->
                validateOAuthToken(notNullToken)
            }
            mainState.authUser?.let {user ->
                _uiState.value = _uiState.value.copy(
                    clientId = user.clientId,
                    userId = user.userId
                )
            }
        }
    }

The above code can be broken down into 4 steps:

1) model your main state
2) combine your flows
3) register the subscribers
4) emit to the flow

1) Model your main state

data class MainBusState(
    val oAuthToken:String? = null,
    val authUser:ValidatedUser? = null,
)

each value in the MainBusState represents a step inside of the authentication process. With the code you can tell that my app needs an oAuth Authentication token and it needs to validate the user. The validated user step can not happen if there is no oAuth Authentication token

2) Combine your flows

private val authenticatedUserFlow = combine(
        flow =MutableStateFlow<String?>(null),
        flow2 =MutableStateFlow<ValidatedUser?>(null)
    ){
        oAuthToken,validatedUser ->
        MainBusState(oAuthToken,validatedUser)

    }.stateIn(viewModelScope, SharingStarted.Lazily,
        MainBusState(oAuthToken = null, authUser = null)
    )

This is done so we can take multiple flows and combined them into one object. This makes it much easier and more readable, we simply have to subscribe to a single flow. The stateIn() is just us turning the cold flow produced by combine() into a hot flow

3) register the subscribers

private fun collectAuthenticatedUserFlow() =viewModelScope.launch {
        mutableAuthenticatedUserFlow.collect{mainState ->
            mainState.oAuthToken?.let{notNullToken ->
                validateOAuthToken(notNullToken)
            }
            mainState.authUser?.let {user ->
                _uiState.value = _uiState.value.copy(
                    clientId = user.clientId,
                    userId = user.userId
                }
            }
        }
    }

When this function is run, it will last as long as the viewModelScope and it registers 2 subscribers. One subscriber is listening to the oAuthToken and the other to the authUser. Both of which have their respective functions to run when they are not null.

4) Emit to the flow

 mutableAuthenticatedUserFlow.tryEmit(
                    mutableAuthenticatedUserFlow.value.copy(
                        oAuthToken = newTokenStrin
                    )
                )

Then to update the value to our mutableAuthenticatedUserFlow we simple call tryEmit() with the updated values of our MainBusState. The new emitted value will be given to our mutableAuthenticatedUserFlow and the values that are updated will given to their respective listeners.

Conclusion

Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on Twitter.

DEV Community

Key Steps to Prepare for a Software Engineer Interview

1. Deciphering Software Engineering Interviews

What Are Hiring Managers Looking For in a Software Engineer?

Types of Software Engineer Interviews

2. Preparing for the Technical Aspects of the Interview

How Long It Takes to Prepare For a Technical Engineering Interview

Choosing a Programming Language

Understanding Key Concepts: Arrays, Linked Lists, Hash Tables, etc.

3. System Design and Behavioral Interview Preparation

Preparing for Behavioral Questions: The STAR Format

On-Site Interview: Personality Questions and Skill Tests

4. Commonly Asked Interview Questions for Software Engineers

Technical Questions

Conceptual and Design Questions

Soft Skill and Behavioral Questions

Acing the Coding and Whiteboard Exercises

Conquering the Whiteboard Exercise

Navigating Coding Challenges

Conclusion: Your Next Steps for Software Engineer Interview Success

Continuous Learning

Mock Interviews

Build and Reflect

Network and Engage

Self-care

Building a distributed workflow engine from scratch

Let's put some rubber on the road

Meet Tork

41 Frontend Interview Questions - CSS

Introduction

1. What are the values of the display property and how do they work?

2. What is flexbox?

3. What is grid?

4. What are keyframes?

5. What is the position property? What values does it accept and how does each value behave?

6. How to create a custom checkbox?

7. How to center a div?

8. What is the transition property?

9. What is box-sizing?

10. What are inline styles?

11. What is the difference between border and outline?

12. What do you know about responsive web design?

13. How does a browser process a web page?

14. What is BEM (Block Element Modifier)?

15. What is the difference between inline and block elements?

16. What is the difference between margin and padding?

17. What is the purpose of the overflow property and when should it be used?

18. What are vh and vw units?

19. How to change the appearance of a cursor?

20. How to change the flexbox container's axis direction?

21. What determines the size of an element?

22. How to position one element relative to another?

23. What are the main properties of flexbox?

24. How to remove the bullet point from a list?

25. What do you know about selector specificity?

26. Which CSS styles are most performance-heavy for browsers?

27. What are pseudo-classes and which ones do you know?

28. How to rotate a block by 90 degrees?

29. What pseudo-elements do you know?

30. What is !important and how do you feel about it?

31. What is the difference between <script>, <script async>, and <script defer>?

32. How to increase the size of an element on hover without shifting neighboring elements?

33. What are media queries?

34. For what data attributes are recommended to use?

35. How to create an infinite animation?

36. What is an attribute selector?

37. How to change styles for a button with the disabled attribute?

38. How to change styles for a <span> element that comes after an <input> element?

39. Which selector can be used to apply a style to every element on a page?

40. What are CSS preprocessors, which ones do you know, and what are they used for?

41. What are mixins in preprocessors?

Conclusion

🐦 Inventing Issues to Solve Real Problems: My Dive into Jira Connector Development

Ready?

Now what?

Prompts

A bug

A Feature

The end

Part 4 (a): Project: How to Build a Mini App with Vue.Js

1. What are the values of the `display` property and how do they work?

5. What is the `position` property? What values does it accept and how does each value behave?

8. What is the `transition` property?

9. What is `box-sizing`?

11. What is the difference between `border` and `outline`?

16. What is the difference between `margin` and `padding`?

17. What is the purpose of the `overflow` property and when should it be used?

18. What are `vh` and `vw` units?

30. What is `!important` and how do you feel about it?

31. What is the difference between `<script>`, `<script async>`, and `<script defer>`?

37. How to change styles for a button with the `disabled` attribute?

38. How to change styles for a `<span>` element that comes after an `<input>` element?