Forem: Lexis Solutions

The Bubbles of No-Code Development: A Journey Through Bubble.io

Lexis Solutions — Thu, 05 Oct 2023 12:39:47 +0000

Introduction

In the early stages of my software development journey, I was tasked with a project that utilized “Power Apps,” Microsoft’s low/no-code platform. The experience with the low/no-code tech could have been more impressive and filled with shortcomings. As a result, I chose to stay away from low/no code development for the past few years. However, a recent opportunity within the company led me to the low/no-code ecosystem again, prompting me to explore a platform called Bubble.io.

What is Bubble.io?

Bubble.io is one of the more popular no-code development frameworks. The platform follows the “drag & drop” design approach using its visual editor, which allows anyone with or without a coding background to start immediately.

With the simple UI, it is easy to navigate, and with the search functionality, you can find what you are looking for without feeling overwhelmed.

Nevertheless, its primary appeal lies with individuals lacking technical expertise who wish to create & design web applications, all without needing familiarity with the conventional tools of the industry.

Visual Editor & UI Elements

By utilizing the visual editor, designing and building responsive apps can be done quickly and previewed immediately.

Inside the editor, you have access to various built-in UI elements. You can install new elements, or if you have knowledge of HTML & CSS, you can create your custom elements. Also, you can preview & deploy your app.

Workflow Editor & Actions

The workflow editor is where you handle the app state; it lets you create actions and add logic to every element built inside the UI Builder.

Inside the editor, you can assign dynamic or static variables during the different states of the page or when the input value is changed.

Built-in Database

Bubble.io, the no-code development platform, creates a customizable & scalable database to meet all your needs and comes with privacy settings where you can set rules for what content is available for which user and so on.

Styles and Re-usable components

In tradition, web development must have clean and reusable UI elements to maintain and scale applications. I am impressed that Bubble.io gives you the ability to have the same level of maintainability and scalability as traditional Javascript libraries such as React.js.

Inside the style editor, you can apply and define the application layout theme and colours and design the templates for buttons, inputs, and so on. When the time comes to update/change any UI element, Bubble.io allows you to change the templates, which, as a result, will change all instances of that element.

Plugins and Third-Party Integrations

Bubble.io has many pre-built and ready-to-be-used plugins, making third-party integrations such as Stripe and Google easy to set up and use. Of course, the no-code development platform provides the tools to create custom plugins, so any limitations on that front are covered.

What Bubble.io does well from a developer’s point of view
With little prior experience with low/no-code development platforms, it was easy to start building a web application. When you create an account, you’re led straight to the main dashboard; I read through the documentation to see how to work with plugins & workflows and was ready to go. The Bubble.io UI is intuitive and easy to navigate. I liked how the workflows work, and with the containers in the UI builder, it is easy to set element hierarchy and groups and have a responsive design. I could have a working MVP in a matter of hours, and I was impressed by how effortless it was.

What Bubble.io doesn’t do so well?

After a few days of working with Bubble.io, and as my project grew in pages/elements/events, I started to experience different issues, mundane tasks to solve in traditional web programming but annoying and sometimes hard to solve in Bubble.io. After having hundreds of visual elements, it was challenging to make changes. When workflows grew in size and complexity, maintaining them and making changes became much more complicated.

Conclusion

Overall, Bubble.io is one of the better low/no-code development platforms. It has reached a point worth considering as an alternative to traditional web development. Just like React.js and Angular.js, both libraries have their use cases. Strong and weak points, so for a simple application that may display information or is small in scale and with a simplistic UI, Bubble.io is an excellent option. For larger, more complex applications, I wouldn’t use Bubble.io. However, this may change in the future as the platform keeps on improving.

Ivan Todorov — Software Developer at Lexis Solutions

Optimizing Web Data Retrieval: Web Scraping and Crawling

Lexis Solutions — Thu, 07 Sep 2023 11:38:49 +0000

In the digital age, where information is at our fingertips, the efficiency of retrieving data from the web has become paramount. To address the challenges posed by data retrieval, web scraping, and crawling have emerged as essential techniques. Let’s delve into web scraping and crawling, exploring their benefits, intricacies, and potential pitfalls.

Navigating the Data Labyrinth

Web scraping involves extracting specific information from websites by parsing the HTML and other relevant data. It allows applications to access up-to-date information from the web without relying on manual input.

Benefits of Web Scraping

Real-time Data

Web scraping ensures that applications always have access to the latest data without the delay associated with manual updates.

Automation

By automating data collection, web scraping saves valuable time and resources that can be allocated to more critical tasks.

Customization

Scraping allows you to extract only the necessary data, eliminating the need to sift through irrelevant information.

Competitive Insights

Businesses can gain a competitive edge by monitoring competitors’ websites for pricing, product details, and other market insights.

Comprehensive Indexing

Crawlers explore the entire web, indexing a wide range of content for users to search.

Timely Updates

Crawlers revisit websites periodically, ensuring the current indexed content.

Structured Data

Crawlers organize information in a structured manner, making it easier for search engines to retrieve relevant results.

Challenges and Considerations

Server Load and Rate Limiting

Frequent crawling can strain website servers, potentially affecting their performance and leading to access restrictions. Websites protect themselves from being overwhelmed by requests by imposing rate limits or blocking IP addresses exhibiting suspicious behavior.

Legal and Ethical Concerns

Some websites prohibit scraping through their terms of use. It’s crucial to respect the website’s policies and not overload its servers with excessive requests.

Duplicate Content

Crawlers might inadvertently index the same content, leading to inaccurate search results.

Data Integrity

One challenge lies in ensuring the accuracy and integrity of the harvested data. Websites may update their structure or content, leading to data extraction errors. Additionally, ensuring that the scraped data is legally and ethically sourced is of utmost importance.

Website Structure

Websites often change their structure, which can break scraping scripts. Regular maintenance is necessary to adapt to such changes. Websites often use dynamic content-loading mechanisms like JavaScript, which can complicate the scraping process. Extracting data from such sources requires more advanced techniques to correctly interpret and capture the information.

Conclusion

Scraping and crawling web pages are essential methods for optimizing web searches. They allow us to access up-to-date information from the Internet without manual input. However, it is crucial to be aware of the problems and considerations associated with these methods, such as website structure, legal and ethical issues, and data quality. By following best practices, web scraping and crawling can be used to efficiently and effectively extract data from the Internet.

Oleksandr Suprun — Junior Software Developer at Lexis Solutions

The Emergence of DevOps-as-a-Service

Lexis Solutions — Mon, 28 Aug 2023 07:26:34 +0000

In this article, I will discuss the benefits of using DevOps-as-a-Service (DaaS) over traditional DevOps practices, as seen from our experience at Lexis Solutions. We have had positive and negative experiences when choosing the right cloud infrastructure for our clients, and I will elaborate on that aspect.

(source: AWS)

To quote AWS’s Model definition directly, it is the combination of practices and tools that increase an organization’s ability to deliver applications and services at high velocity: evolving and improving products faster than companies using traditional software development and infrastructure management. This speed enables organizations to serve customers better and compete more effectively in the market.

DevOps vs. DaaS

In that regard, the traditional DevOps Model applies to mostly in-house infrastructure management. This means hiring and managing a dedicated team, purchasing and setting up servers, and configuring everything from the ground up to meet one’s business needs.

On the other side, DaaS is mainly cloud-based, with many possible layers of functionality, abstraction, and “ease of use” focus.

It integrates selected elements of DevOps tools into one comprehensive system to enhance collaboration, monitoring, management, and reporting. This service model contrasts with the in-house toolchain approach, where the DevOps team employs a disjointed set of individual tools.

DaaS is an attractive solution for businesses lacking more in-house DevOps knowledge or the financial resources to train employees in these skills. It streamlines the intricate process of managing data and information flows throughout the chain. With this method, various members and teams participating in the process can use user-friendly interfaces to access necessary tools without the need for a complete understanding of the whole toolchain.

For instance, using the same DevOps as a Service system, a developer can utilize source code management tools, a tester can access application performance management tools, and the IT operations team can implement changes using more top-level configuration management settings. This setup enables team-wide monitoring and reporting on activities.

In resume, unlike traditional DevOps, DaaS focuses more on the end-result and the complete process, from code compilation to production deployment.

Popular DevOps service providers

Amazon Web Services (AWS)

Amazon Web Services (AWS) has carved out a substantial space in this domain, building a robust global network for virtually hosting some of the world’s most complex IT environments. Key to their suite are AWS CodeBuild, AWS CodePipeline, and AWS CodeDeploy — a trinity of services designed to manage continuous cloud delivery. These services offer accessible solutions that enable a secure, scalable continuous delivery model in the cloud, making migration to the cloud a worthwhile consideration for many organizations.

Even more, many platforms competing for a slice of this market choose to integrate some of AWS’ tools to offer their own packaged DevOps solutions.

Google Cloud Platform (GCP)

Google Cloud Platform (GCP) also boasts a global network and an ever-growing list of capabilities. The StackDriver suite of development tools, GCP Deployment Manager, and GCP Cloud Console constitute a robust set of offerings to manage the cloud-based continuous delivery cycle. These tools and the platform’s ability to support complete cloud development solutions for various platforms make GCP a strong contender in the DevOps sphere.

Microsoft Azure

Microsoft’s Azure enters the scene with various interoperable tools to manage the cloud environment. As a cloud management platform, Azure offers an complete set of tools such as Azure App Service, Azure DevTest Labs, and Azure Stack. With a long-standing presence in the IT industry, Azure may offer the most seamless transition to hybrid or full cloud environments for organizations already using Microsoft products and services.

Digital Ocean

Digital Ocean is another platform that we at Lexis Solutions use quite often. They offer a more “lean” approach with out-of-the-box tools that are both configurable, but also optimized for quick time to market needs. Their App Platform is convenient for deploying web services from a GitHub repository while offering good scalability and load-balancing solutions. Their ecosystem has grown continuously in the last few years while still offering competitive pricing, a combination ideal for start-up caliber projects.

Since July this year, we have also officially partnered with Digital Ocean, which grants our clients $200 credit of usage.

Different varieties of DaaS

One thing to note is that DaaS may refer to a broader range of possible services. On the one hand, there are platforms like the ones described in the previous section. On the other — IT teams that offer DevOps services and know-how, including in-house integrations. Teams may even partner with a platform for more complete and flexible solutions.

As mentioned earlier, at Lexis Solutions we have an established partnership with Digital Ocean and have successfully set up environments for multiple clients there. Although we are not letting ourselves be limited to a single provider.

For example, there have been client specifications that required us to integrate with specific third-party APIs. The App Platform that Digital Ocean offers makes it relatively easy to deploy production-ready software on a quick notice. The main drawback there, however, is a lack of a static IP address of the environment due to how the continuous delivery is implemented on their side. This limitation meant that the third party’s API couldn’t whitelist our setup for authorization, so we had to consider other options.

Examples such as these illustrate limitations that some packaged solutions may have, but also how turning to a team might save extra effort and costs by tailoring for the specific case.

DaaS considerations
The main benefit and potential cost-saving from not relying on an internal DevOps team is the general speed from software implementation to production deployment. This is, of course, of significant importance to emerging businesses and startups. However, one may also encounter challenges later down the road.

First, there might be security risks if the DaaS provider fails to adhere to security protocols. Next to consider is the limited control over one’s setup — platforms may encapsulate their services, allowing for partial control only.

In conclusion, a mixed approach between an automated cloud setup and hiring an IT team for consulting is the best of both worlds. Either part-time or for an extended period, an external team could guide you and help with unforeseen challenges later down the road of your business growth.

Milush Karadimov — Co-founder at Lexis Solutions

Data Enrichment Services for B2B: Maximizing the Value of Your Data

Lexis Solutions — Mon, 28 Aug 2023 07:23:29 +0000

Over the past year, here at Lexis Solutions, we have been growing our offerings in the custom data solutions space. Having worked on numerous initiatives, we've expanded into data integrations, data acquisition, data aggregation, and sentiment analysis to achieve our clients' diverse needs. In this article, we’ll look at one of the core data services we provide - data enrichment.

What is Data Enrichment?

Data enrichment refers to enhancing existing data by adding valuable and relevant information. The goal is to enrich the data, making it more comprehensive, accurate, and actionable.

Data enrichment involves various techniques and methodologies, such as appending missing information, standardizing data formats, validating data accuracy, and integrating multiple data sources. This process results in a more complete and valuable dataset that can deliver significant insights.

Data enrichment involves augmenting existing data with additional information from external sources. This includes demographic details, geographic information, firmographics, social media data, purchasing behavior patterns, etc. By adding these extra dimensions to the data, businesses gain a more comprehensive understanding of their customers, allowing them to tailor their strategies, improve customer experiences, and drive growth.

For example, a retail company may enrich customer data by integrating social media. By analyzing customers' social media activity, the company can gain insights into their interests, preferences, and influencers they follow. This information can then be used to create personalized marketing campaigns, recommend products that align with customers' interests, and build stronger relationships.

Data enrichment is not limited to customer data. A manufacturing company may enrich its product data by appending detailed specifications, images, and customer reviews. This enriched product data can be used to improve inventory management, optimize pricing strategies, and enhance the customer experience.

The Importance of Data Enrichment in Today's Business Landscape

In the digital age, businesses are generating vast amounts of data. However, more than raw data is needed to extract meaningful insights. With proper enrichment, companies can make decisions based on complete or updated information, hindering their growth potential.

Data enrichment plays a crucial role in ensuring data quality. By cleansing and enriching data, businesses can minimize inaccuracies and inconsistencies arising from human errors, data entry mistakes, or outdated information. Clean and reliable data is the foundation for practical analysis and decision-making.

Furthermore, data enrichment enables businesses to unlock the true power of business intelligence. Companies can gain deeper insights into market trends, customer preferences, and emerging opportunities by integrating external data sources and enriching internal datasets. This valuable intelligence can drive marketing strategies, optimize operations, and foster innovation.

Moreover, data enrichment facilitates better decision-making. Enriched data provides a holistic view of customers, allowing businesses to personalize their offerings, anticipate customer needs, and provide tailored experiences. This level of understanding empowers organizations to make data-driven decisions that boost customer satisfaction, enhance their competitive edge, and drive revenue growth.

Data enrichment is an ongoing process. As new data becomes available and business needs evolve, organizations must enrich their datasets to stay ahead of the competition continuously. By investing in data enrichment, businesses can unlock the full potential of their data and gain a competitive advantage in today's data-driven business landscape.

Data Enrichment Services Use Cases

Enhancing Data Quality

Data enrichment services are instrumental in enhancing data quality. Data cleaning processes rectify duplicate entries, inaccurate information, and inconsistencies. By standardizing data formats and validating data accuracy, businesses can ensure their data is reliable and consistent, enabling more accurate analysis and decision-making.

Retail companies collect customer data through various channels, including online purchases, in-store transactions, and loyalty programs. With data enrichment services, this company may end up with multiple entries for the customer, making it easier to analyze behavior. The company can identify duplicate entries by utilizing data enrichment services and creating a comprehensive profile for each customer. This improves data quality and provides a holistic view of customer interactions and preferences.

In addition to eliminating duplicate entries, data enrichment services can rectify inaccurate information. For instance, if a customer's address is misspelled or incomplete, data enrichment services can validate and correct the address based on reliable sources, such as postal databases. This ensures the company has accurate and up-to-date customer information, crucial for effective communication and personalized marketing efforts.

Boosting Business Intelligence

Data enrichment services play a crucial role in boosting business intelligence capabilities. Businesses can enrich their internal data by integrating external data sources, such as market research reports, social media insights, and public databases, creating a comprehensive view of their industry, target market, and customers.

Imagine a technology company that wants to launch a new product in a specific market segment. The company can better analyze market research reports, industry trends, and competitor data by leveraging data enrichment services to understand the target market's needs and preferences. This enriched intelligence allows the company to tailor its product features, pricing, and marketing strategies to align with the market's demands, increasing the chances of success.

In addition to external data sources, data enrichment services can leverage social media insights to provide valuable information about customer sentiment, preferences, and behavior. By analyzing social media conversations and trends, businesses can identify emerging opportunities, monitor brand reputation, and engage with customers in a more targeted and personalized manner.

Facilitating Better Decision Making

Data enrichment services facilitate better decision-making by giving businesses a deeper understanding of their customers and target market. With enriched data, companies can segment customers more effectively, identify their unique needs, and develop personalized marketing strategies.

Let's consider an e-commerce company that sells a wide range of products. The company can analyze customer purchase history, browsing behavior, and demographic information by utilizing data enrichment services to create customer segments based on preferences and interests. This segmentation allows the company to tailor its product recommendations, promotional offers, and marketing campaigns to each customer segment, resulting in higher customer satisfaction and conversion rates.

Furthermore, data enrichment services enable businesses to track and analyze customer interactions across multiple touchpoints, such as website visits, email communications, and social media engagements. This comprehensive view of customer interactions helps businesses identify patterns, preferences, and pain points, allowing them to make data-driven decisions that align with customer expectations and drive business growth.

Key Components of Data Enrichment Services

Data Cleaning

Data cleaning is a fundamental feature of data enrichment services. It involves identifying and rectifying errors, inconsistencies, and inaccuracies within datasets. Businesses can improve data quality and reliability by removing duplicate entries, standardizing data formats, and validating data accuracy.

Data Integration

Data integration is another essential aspect of data enrichment services. It involves consolidating data from multiple internal and external sources to create a comprehensive, unified dataset. By integrating data silos, businesses can gain a holistic view of their operations, customers, and market, facilitating more accurate analysis and decision-making.

Data Validation

Data validation is an integral part of data enrichment services. It involves verifying the accuracy, completeness, and consistency of data. By running validation checks, businesses can ensure that their data is reliable and error-free, enabling confident decision-making based on accurate information.

Choosing the Right Data Enrichment Service Provider
When selecting a data enrichment service provider, several factors should be considered.

Firstly, consider the provider's experience and expertise in data enrichment. Look for a provider that offers a wide range of enrichment techniques and has a proven track record of delivering high-quality results. Some good places to check for reputation are Clutch and LinkedIn.

Secondly, consider the provider's data sources and data coverage. Ensure that the service provider has access to diverse and reliable data sources covering various aspects relevant to your business. It’s best if the provider has partnerships with data acquisition platforms to give you guidance and discounts on your usage, such as our partnership with Apify.

Thirdly, consider the scalability and flexibility of the provider's solutions. As your business grows, your data needs may evolve. Choose a provider that can accommodate changing data requirements and scale their services accordingly. Usually, small companies can offer greater flexibility and better pricing.

In conclusion, data enrichment services hold immense potential for businesses looking to unlock the power of their data. By understanding the concept of data enrichment, exploring its importance in today's business landscape, and recognizing its key features and benefits, businesses can make informed decisions to leverage data enrichment services effectively. By choosing the right data enrichment service provider and learning from success stories through case studies, companies can harness the power of data enrichment to drive growth, enhance customer experiences, and stay ahead in today's competitive business environment.

Bilyal Mestanov — Co-founder at Lexis Solutions

Maximizing QA Testing Efficiency with The Developer Console

Lexis Solutions — Thu, 15 Jun 2023 12:55:15 +0000

As a QA, I've had multiple chances to understand that efficient testing is essential for ensuring the quality of a product. The developer console is one tool that can help us maximize our working rate success, but it is somewhat neglected. In this article, I want to explore and present my opinion on how QA testers can leverage the developer console to boost the efficiency of their testing processes and deliver higher-quality products.

What is the developer console?

The developer console is a built-in tool in web browsers that allows developers to test and debug their code. It also provides a lot of additional information about the respective website, including JavaScript errors, network requests, and general performance details. And while developers tend to use the console primarily for debugging and optimization, QA testers can also take advantage of it to improve their testing processes.

How can QA testers use the developer console?

There are various utilizations of the developer console, so let's focus on the most beneficial ones to a tester. For starters, open the dev console by pressing F12 or fn + F12 for Mac.

Identifying and reporting errors from the Console tab
Once the developer console is opened, to review the occurring errors (if there are any) - simply select the Console tab by pressing Console from the navigation bar at the top.

The console tab is where errors and warnings are logged in real-time, and it is convenient to keep it open and scan it occasionally for issues with the JavaScript running on the page. Doing so allows the QAs to identify problematic code and analyze the source of the problem or, at the very least - report it properly. It costs nothing to have a console opened; however, it helps testers greatly in identifying hidden issues that may be causing problems with the functionality of a web page or application.

The console tab acts as a JavaScript playground as well. It can accept JavaScript expressions, much like a terminal would, and will execute them against the context of the current page. Even though it's a slightly more advanced usage, you will surely learn to appreciate it as you go down the 'automation' road.

Inspecting the HTML DOM from the Elements tab

The HTML DOM is a text file that represents a webpage. Browsers read, parse, and follow the instructions inside it to 'paint' the webpage so we can view it. Whenever you see a bug in a website, you are most likely catching a bug inside the DOM document. That's why QAs must learn basic HTML and how to navigate it. Luckily for us all, the developer console has a built-in inspector that can be accessed from the Elements tab.

The primary use case for opening the Elements tab is inspecting an element. One can do that via a right-click on the element in question and selection of the Inspect option or by utilizing the shortcut ctrl/command + shift + C and then clicking on the element.

Selecting an element will update the context menu that, by default, displays the styles associated with the active element. Here you can modify the CSS and add, remove, or update its values and properties. This way, you could try out a few approaches and figure out how to fix an issue yourself. It's good to note, however, that once you refresh the page - all HTML and CSS changes you made will be lost. Thus, you still need to report the issue and have it fixed by a developer.

The QA work you can perform by utilizing the Elements tab and its Styles subtab includes:

Verifying CSS property values

By inspecting elements in the console, you can quickly verify that the correct CSS properties are being applied to different elements on the page. This can be useful for ensuring consistency (font size, font family, color, etc.) across the site and troubleshooting issues with specific styles.

Troubleshooting layout issues

Inspecting elements in the console can help identify the source of layout issues, such as misaligned or overlapping elements. By identifying the problematic element and inspecting its CSS properties, you can often find a quick solution to the issue.

Monitoring network requests in the Network tab

The network tab logs the request that the browser executes to load a webpage. This includes the fetch of the HTM and any styles, scripts, images, fonts, etc. The logs are also used for determining performance bottlenecks and network errors.

Some concrete examples include:

Optimizing page load times

By monitoring network requests, we can determine which resources are taking the longest to load and take respective measures. This can include reducing file sizes, caching resources, and prioritizing critical resources.

Testing APIs

APIs are an essential part of many modern web applications, and monitoring network requests can help ensure that the API is working as expected. By examining the request, we can verify that the API is returning the correct data in the desired format and identify any issues with the API endpoint or response.

Observing failed requests

The Network tab allows for reviewing failed requests as well. When a network request fails, it will get a red color error in the Status column, which indicates that the request was unsuccessful. Failed requests can be then clicked and inspected for more information about the error, including the error message and any associated error codes or details.

Inspecting standards of performance through the Performance tab

Performance is a critical factor for improving the user experience. By analyzing key metrics in the Performance tab, we can identify areas of the application that are slow or resource-intensive. Here are two use cases of how we put the dev console into practice here:

Testing performance under different network conditions

4G and 5G networks are amazing. They can and often do provide faster speeds than the cable internet we have at home. This allows developers to build bulkier and ever more demanding websites that look and feel great. Best-case scenario aside, the same sites fail miserably under slow connection speeds, which are still predominant in the world. The developer console allows you to match your internet speed with the slower 3G speed standards or cap it with a custom value of your own. Now, you can experience the product you are testing as it would be felt by the broader user base and, perhaps, report load-time issues.

The dev console will show you the total load time and the amount of data transferred:

You can use these stats in your reports and set a reasonable threshold for the developers to aim at.

Compare performance to industry standards

We can use the performance metrics in the dev console to set the standards of our application's performance against industry standards. For example, we can compare our application's load time against Google's or Microsoft's recommended standards for web performance or use competitors to set the bar around the industry level. This approach can help us identify areas where our application falls short and take steps to improve its performance.

Device simulation

The Console offers a range of pre-made mobile and tablet devices, enabling developers and us testers to examine a website's responsiveness across different devices and screen sizes.

And here are two everyday use cases we can observe:

Testing responsive design

With the device simulation feature, we can test how our web application looks and behaves on different screen sizes and resolutions, as well as on other mobile devices. This can help us ensure that our application's layout and user interface are responsive and optimized for various devices and screen sizes.

By clicking on the "Toggle device toolbar" (top left of the dev console, right of the Select and inspect element button), we go into Responsive mode, where we can simulate different resolutions of various devices. Because we can drag the borders of the responsive screen, we can also test the resolution breakpoints at which the design shift to phone/tablet/desktop mode.

We're to mention the reasonable dimensions for basic devices. In that case, they're as follows: for a phone, it can be 360 x 640 pixels, 768 x 1024 pixels for a tablet, and for a monitor, it can be 1920 x 1080 pixels, all of which are common measurements for the respective devices.
We can take as an example a 4K monitor edge case: It's usual for websites to appear too narrow and zoomed out on greater resolutions. This might be a good test that increases user satisfaction, depending on the product you are testing.

Simulation

Device simulation can also help us identify issues. There are several devices to choose from to simulate, including adding other devices that can be selected from a list. Touchpad and mouse cursor are both options to choose from as well.

Pixel ratio in the developer console is a way to understand how many pixels are used to display a single pixel on a screen. It helps developers create websites that look sharp and clear on devices with different pixel densities by adjusting the design accordingly. In the dev console's device simulation mode, you can simulate other devices and adjust their pixel ratios. To adapt your desired pixel ratio, click on the "Toggle device toolbar" icon in the top-left corner of the dev console, then choose a device to simulate from the dropdown menu. Once you've selected a device, you can adjust its pixel ratio by entering a new value in the value fields to auto-zoom the window. You can also use the Responsive mode to resize your window through mouse dragging.

By simulating different devices, we can test how our application looks and behaves across different platforms and identify any layout or functionality issues that may be specific to certain browsers or devices. This can help us ensure that our application is compatible with a wide range of devices and browsers and provide a consistent user experience for all users.

Application tab

The dev console's Application tab provides us with various tools to manage a website's application data, such as cookies, local storage, and cache. QA testers can use it to verify that the website functions as expected and that sensitive user data is protected. Here are two examples of how it is integrated into our testing process:

Debugging and managing cookies

The Application tab allows you to manage and debug cookies, which websites use to store data like authentication details, preferences, and shopping cart contents. You can view, edit, delete, and block cookies from specific websites, as well as simulate cookie behavior for testing purposes. This can be useful for ensuring that cookies are being set and read correctly and for troubleshooting issues related to user data and preferences.

Analyzing and managing cache

The Application tab also provides tools for managing and analyzing the cache of a website, including the ability to clear cache storage for specific websites or all websites. This can be useful for testing website performance under different cache scenarios, as well as troubleshooting issues related to outdated or cached content. Additionally, the Application tab allows you to manage and analyze other forms of storage used by websites, such as local storage.

The Local storage is a key-value storage that persists data even after we close the browser or shut down our device. Even though the data there will not be deleted automatically, it is limited in size (5MB). It's not considered best practice to use it; however, it has some practical usage, like setting the site's theme to dark, for example.

The Session storage is another key-value storage that keeps data only for the individual session, or in other words, for as long as we don't close or navigate away from the respective page. For example, after entering a webpage and choosing a specific language different from the default one, once we reload or navigate away from the page and go back again, the default language will be restored.

Conclusion

As a QA tester, I can confirm the overall usefulness of the developer console, especially in my transition from a manual QA into an automated QA, as the need for its utilization becomes more and more crucial for my work. It is a powerful tool that improves the testing processes and delivers more reliable and concrete results to the developers, which leads to higher-quality products as a result.

By using the console to debug errors, inspect elements, monitor network requests, analyze performance metrics, and manipulate data in general, you can count on a reliable partner for optimizing the application in terms of performance and usability. And, of course, with practice and experience, you can become proficient in using the developer console, improving your efficiency and effectiveness as a QA tester.

Radoslav Kosev — QA Engineer at Lexis Solutions

Degrees and Bytes: Weighing the Value of Traditional IT Education

Lexis Solutions — Thu, 01 Jun 2023 11:18:51 +0000

Intro

There is a point to be made for and against investing four years of your youth in a bachelor’s degree. On the one hand, the first team lead I had not completed my bachelor’s and was as solid as a developer could be. On the other hand, most of the developers I know and respect have graduated from university. There are success stories both ways, and none is universal. That said, let’s explore the pros and cons of each.

The well-trodden path

Pros

Networking

The most significant assets university has given me are friends and contacts. Four years of sharing, trusting, forming teams, and tackling projects together plant the seeds for lifetime friendships and dozens of acquaintances. It is a logical by product of an environment of peers with a common goal — graduation.

Entry exams & Environment

We all know the phrase, “Show me your friends, and I’ll show you your future.” It is a universal truth, and we inevitably become who we hang out with. And that is why entry exams matter. They serve as a filter for the vigorous of minds — those people you want as friends and healthy rivals.

The entry exams for the IT disciplines hold newcomers to high standards due to the great interest and limited capacity. This allows universities to select among the brightest individuals, and you are not guaranteed the same in paid offline courses.

Expectations management

University students may need to recognize this; however, we are gradually submerged in the industry and only experience minor shocks on our first job. We have time and opportunities to ask the questions on our minds as friends and teachers have the answers. On top of that, companies actively seek university interns and visit us annually on campus for career days. We get to talk with the industry early on and know what they value in junior candidates.

The CV

The odds are in your favor if you have gone through formal education. The diploma looks promising and proves that you have kept a consistent direction for the last few years and are now ready to contribute to the industry. It’s clear and expected that you would need assistance; however, there is some reassurance that you’ve laid the groundwork and got the basics.

Cons

Time vs. Knowledge

A bachelor’s in IT consists of eight semesters and a final exam. If everything goes smoothly, you can pass all that in four years — a significant time & energy investment that may only sometimes be worth it. My assessment is that:

A third of my bachelor’s was a wasted potential as the lessons served my future career poorly. Most such classes were a cure for insomnia, and a minority introduced their students to uni-dimensional professors that wanted to hear you recite back whatever they had told during class. Teacher selection is one of the university’s downfalls. Universities employ based on academic prowess and overlook the ability to teach and convey ideas, which should be the primary factor, as far as I am concerned.
A third was fine — you could get a comparable amount of knowledge and skills by self-learning or attending courses. Such disciplines are somewhat senseless as they can serve as a tempo mechanism for cooling your head down and allowing you to occupy yourself with other interests.
A third was spot-on — there’s nothing like hearing straight from the horse’s mouth. Occasionally, there are powerhouses of expertise in universities that want to give back and have cultivated the ability to pass on knowledge. Enquire about who those people are and what they teach. Make your time in university count by enrolling in their classes and reaping the benefits.

To summarize, about a third of the time I have spent in university was competitive. It’s not only the time wasted but also the opportunity cost, and it is up to you to determine whether you can put your time to use better. Exclude the summers, and this gets you a year’s worth of knowledge stretched over four years.

I was, and remain still, highly skeptical about the utility of university education regarding field mastery and comprehension. It’s my experience that you can do more outside the classroom.

Cost-benefit analysis

Higher education in Bulgaria is not expensive; however, relocating and living in the capital city is. That’s where the most prominent universities and IT companies reside, and it’s a natural gathering point for aspiring computer scientists.

It’s easy to justify the go-to-Sofia decision, but it’s costly, and you better make it worth it. There’s the risk of dropping out due to a lack of discipline or encountering a professor renowned for failing most students. I would say you have a 30+% chance of not graduating, which you must consider when weighing the cons of formal education.

With a bachelor’s, you get a diploma if you run the whole marathon. This lies in contrast to standalone courses you can complete cheaply and neatly attach to your resume. There are no participation trophies, so you will only get a CV boost if you cross the finish line.

Slow pace

No certification authority is tailored just for you. They all target a broad audience and aim to make their product easy sale. Universities are no exception, so you can expect the pacing of most subjects to be beginner-friendly, even leisurely, at times. This should be a red flag for you.

A slow pace is a bad company if you want to achieve excellence. The IT world is dynamic; you must learn adaptivity from the get-go. There is no excuse for falling into the comfort zone and performing at the bare minimum. You will become mediocre at best, far from a desirable start to your 20s.

Take a good look around whenever you find yourself in such a situation. Some of your colleagues will be occupying themselves with activities that propel them forward. Try joining in or picking up a genuinely exciting side project of yours.

Sense of security

It’s becoming more and more the case that the industry hires people without formal education. It may be that offline academies and online courses prepare competent-enough candidates or that the industry is expanding faster than the graduation rate. Either way, think only a little of yourself and a little of them, as it all comes down to practical knowledge and not university attendance.

Companies search for employees that will require minimal (acceptable) training. Your university degree serves as an assurance through the CV sieving process but, at the same time, can raise the interviewer’s expectations. Avoid the comforting thoughts that everything will be OK since you are a university student. The ball is in your court to prove that you are worthy.

The self-made programmer

Pros

Any time, any place

The university is generally viable for a brief period. It’s tough to attend university later in life, and it’s impossible to do it ahead of time. This means those seeking knowledge can only sometimes gain it the traditional way. You shouldn’t worry if you are such a person, as the Internet provides the tools and resources needed to start your IT journey. You can study at your own pace, at home, and after work. You are free to organize the learning process in a way that suits you and your circumstances. It’s going to take a lot of work; however, you try out different approaches and discover what’s best for you.

Steeper but cheaper

Learning nowadays does not require you to be wealthy. Of course, paid resources created by thoughtful people can catalyze the process, yet most of them can be bought at discounts and are affordable either way. If you need more than that, Youtube and StackOverflow will bring you up for free.

Master it faster

University students are expected to mature in four years as they are gradually immersed in more advanced and diverse subjects. They won’t make use of all this information on their first job… You could plunge into the depths, endure the pressure for a year, and emerge as an entry-level candidate that can rival those graduates. Even if you take two years for your studies, you are still a couple of years ahead of formal education. Imagine the number of courses you can carefully select, tackle, conquer, and then list on your CV during that time. They say time is priceless, so use the extra time you get and land a job that will let you plant your roots in the IT world before the competition graduates.

Transition to ambition

Nobody said you have to start as a developer. The IT industry is expanding at a rate that produces alternative occupations at an astonishing rate. Become a tech support expert so you can start work in a matter of months, not years. Or choose the QA path if you are into breaking things. There’s data science and cyber security for those good at maths and design and marketing for the more creative of us. Leverage your skillset and continue pursuing your goal while establishing yourself in the industry. Your eventual transition will be smoother and might not require an employer change.

Cons

Reality-check

Learning a skill is hard, and learning a high-paying skill is even more challenging. Only a minority of people graduate the IT academies to find the desired job afterward. The economy has its ups and downs, and vacant IT positions fluctuate with it. You better establish a robust mindset and be prepared to wait for a while before landing the job you want. It’s always a good idea to schedule a financial buffer so you can bootstrap yourself into the IT world.

Lack of direction

Ending up mentorless and clueless can be disheartening. Work diligently and earn the goodwill of at least one of your teachers. This way, you can be informed about the market in advance and even get recommended for an open position. References work wonders in IT, so you better keep in touch with fellow course attendants, too. The company, one of you, ends at may be actively recruiting new employees.

Procrastination

I’ve seen it again and again. People won’t do enough when the time is right and then start spreading stories about how challenging the venture is. Learning IT is the same. You remain your biggest enemy and should be wary of indulging yourself in unproductive activities. Too much fun invites procrastination which eventually leads to laziness and motivation loss. You’d better mitigate the risk and create a schedule. The rule with a plan is to make it balanced. Require yourself to work diligently and then make room for hobbies and interests outside of IT. Otherwise, you will either tyrannize yourself into quitting or never get any work done.

Doing everything from scratch

One of the pitfalls to avoid is reinventing the wheel at every step. Be it building your CV or preparing for the interview; there are valuable lessons and good practices that you better adopt than learn the hard way. Go through a few articles and videos on every new thing on your path. You will become more knowledgeable, and the tips & tricks do compound, giving you the edge over other candidates.

Conclusion

IT is constantly evolving, and you need to keep up with the news and try out novel technologies to stay in one place. You remain a student as long as you want to partake in the industry. Formal education might get you in slower and safer, while the self-made path is considered quicker and riskier. You can always go right with the choice as long as you give your best effort. Take into account your personality and circumstances, weigh in the pros and cons of each approach, and initiate your journey into IT today.

Emil Kirilov — Co-founder at Lexis Solutions

Say Goodbye to JavaScript with Livewire: A Full-Stack Framework for Laravel

Lexis Solutions — Thu, 18 May 2023 15:08:04 +0000

Laravel Livewire is a full-stack framework for building dynamic web applications without writing JavaScript. Livewire is built on top of Laravel, a popular PHP framework. It allows developers to create reactive user interfaces. It is also developer-friendly, which saves time and effort.

Prerequisites

To use Livewire effectively, it is crucial to have a good understanding of certain prerequisites, including PHP and Laravel basics such as routing, controllers, views, and models. In addition, basic knowledge of HTML, CSS, and JavaScript is also helpful. Once these fundamentals are in place, users can begin to explore the more advanced features of Livewire, such as real-time validation, form handling, and state management.

How does Livewire work?

Livewire can perform server-side actions in response to user events (such as clicks or inputs) without the need for a full page refresh. It is achieved by using Livewire components, a combination of backend PHP and frontend JavaScript code that work together to create dynamic user interfaces. When a user interacts with a Livewire component, Livewire sends an AJAX request to the server, which updates the component's state and re-renders the relevant HTML parts of the UI. It allows for a more seamless and responsive user experience and simplifies the development process by eliminating the need to write separate frontend and backend code for handling user interactions.

Livewire provides several methods for handling user interactions, including event listeners, form submissions, and custom methods. These methods can be defined within the Livewire component class and are triggered by user events within the component's template. With Livewire, developers can easily create interactive and dynamic web applications without sacrificing performance or scalability.

Benefits

Rapid Development

Livewire allows developers to build interactive and dynamic interfaces without writing any JavaScript code. It accelerates the development process and saves a lot of time. And it will enable junior programmers to tackle more complex tasks without necessarily having a deep knowledge needed to resolve problems the traditional way.

Event-Based Model

Livewire is built on an event-based model. It allows developers to respond to events in real-time and trigger actions without reloading the page. An example of how Livewire uses the event-based model is in form validation.
Let's say you have a form that requires validation before submission. Livewire provides real-time validation, meaning it occurs as the user types, providing instantaneous feedback on errors.

If the validation fails, the user will get an error message without the page reloading. This process is fast and efficient, as it only updates the specific part of the page that requires validation.

Easy to Learn

Livewire's syntax is simple and intuitive. Developers familiar with Laravel's Blade syntax can quickly learn and start using Livewire in less time. Even copying and pasting the old code into a Livewire component doesn't break anything, but it wraps the code in Livewire, which is extremely handy for beginners.

Increased Security

With Livewire, developers don't need to expose their endpoints as API endpoints. Livewire also uses a checksum to prevent users from tampering with the data sent from the client to the server. It generates a checksum for every request and validates it to ensure the data is not compromised. Livewire implements a second security measure known as "persistent middleware."

This feature allows Livewire to record any authentication/authorization middleware utilized during the "Initial Request." Subsequently, Livewire applies the recorded middleware to all future requests.

Use cases

Livewire is a robust framework that enables developers to build rich, interactive web applications quickly and efficiently. Some of the most common use cases for Livewire include:

Real-time updates

Livewire is often used to build real-time applications that require updates to be made quickly and without page reloads. Livewire communicates with the server via AJAX, which makes the updates faster and more efficient.
Example: Suppose we have a real-time chat application that requires instant messaging updates. Using Livewire, you can automate updating chat messages without frequent page refreshes.

Dynamic forms

Livewire can be used to build dynamic forms with fields that change based on user input. It also provides live validation and error message functionality.
Example: An online shopping website's checkout form can have a checkbox, "Shipping address same as billing address," which, when selected, dynamically populates the billing address fields.

Interactive dashboards

Livewire is ideal for creating interactive dashboards. They are web pages that display real-time data in charts, graphs, and tables. Interactive dashboards allow users to quickly see changes and make decisions based on the latest information. Livewire helps build interactive dashboards without the need for additional JavaScript coding. Developers can use Livewire's Polling directive to be added to an element, and it will refresh every 2 seconds or according to the set time.
Example: A dashboard that displays live user sign-up count and purchase data stats for an eCommerce site.

Chat applications

Livewire makes building chat applications more manageable by providing real-time data binding and the ability to interact with data without page refreshes. Developers can create chat rooms and direct messaging.
Example: A chat application similar to Slack where users can create teams, chat rooms, and direct messages and receive live notifications for each event.

eCommerce

Livewire allows developers to create eCommerce websites quickly and efficiently. With Livewire, developers can build product catalog pages, provide real-time search functionalities, notifications, and shopping cart functionality, and offer seamless checkout processes.
Example: In an e-store, Livewire can send real-time notifications about how many people view the product or how much stock is left.

Multi-step forms

Livewire can be used to create multi-step forms that guide users through a complex process, with each step being determined by the user's input from the previous one. Multi-step forms are forms with multiple pages that collect user data in chunks. Livewire provides a simple way to build these forms by dividing them into standalone functions inside a single component. It makes the sharing and passing of data between the steps extremely easy. Livewire provides an easy way to build these forms by breaking them up into standalone functions within a single component.
Example: A real estate loan application form that collects personal, employment, and financial information in three pages.
Social Network

Building social networking platforms can be challenging, but Livewire simplifies the process with real-time data and component-based development. Developers can easily create features like user profiles, news feeds, friendships, and messaging systems.
Example: A social media platform similar to Facebook where users can see posts, updates, and photos on their wall and interact with each other through comments and likes in real time.

Online Auctions

Online auction platforms enable buyers and sellers to exchange goods and services using an auction-based system. With Livewire, developers can create responsive auction platforms with real-time updates and notifications for bids.

Pros of Livewire

No need for JavaScript: Even if you don't know JavaScript, you can still create dynamic interfaces with Livewire. You can manage everything within Laravel.
SEO-Friendly: Dynamic content generated using Livewire is indexed by search engines because everything is rendered on the server side.
Code Reusability: Developers can seamlessly reuse code across different views, making the development process faster and more efficient.
Simplifies AJAX: Livewire simplifies AJAX calls to the server side. It makes it easier to manage and maintain client-server interactions.
Debugging: Livewire comes with integrated debugging features such as displaying the component's properties and event stack traces.
Testing: Livewire is test-friendly as it provides valuable testing utilities and tools that make writing test cases for your components easy.
Resources: There are plenty of resources available on the internet for Livewire, including official documentation, tutorials, blog posts, and forums.
Alpine.js: Livewire integrates well with Alpine.js. Livewire uses Alpine.js under the hood to handle its reactive components. With Livewire, you can build interactive user interfaces with minimal JavaScript and CSS, and Alpine.js enables you to enhance your components further.

Cons of Livewire

Syntax: Livewire's syntax is not intuitive for developers unfamiliar with Laravel's Blade syntax.
JavaScript collisions: Livewire doesn't work out-of-the-box with some JavaScript libraries.
Knowledge bottleneck: Advanced functions need more in-depth knowledge of JavaScript.
Performance risks: If not set up correctly, Livewire can initiate multiple AJAX requests in cases where one is sufficient.

Conclusion

Developers prefer Livewire as it provides fast development times, more manageable code maintenance, improved performance, and better user experience. And in Livewire's case, you don't have to sacrifice your SEO rating as the HTML is server-rendered.

Livewire is powerful as it helps developers build complex and dynamic interfaces faster while producing better user experiences. Additionally, it's open-source, making it easy to find help online and integrate with other Laravel libraries and platforms.

Antoniya Ivanova - PHP Developer at Lexis Solutions

The Solid Choice: Exploring SolidJS for Your Next Web Development Project

Lexis Solutions — Thu, 04 May 2023 13:13:53 +0000

What is SolidJS?

SolidJS is a declarative JavaScript library used for building UIs and web applications. However, instead of a Virtual DOM, SolidJS uses a technique called "fine-grained reactivity" to achieve efficient updates.

This means that components only re-render when their dependencies have changed, rather than re-rendering the entire tree as with a virtual DOM approach.

By avoiding the overhead of a virtual DOM, SolidJS can achieve excellent performance while still providing a simple and flexible API for building complex user interfaces.

Similar to React, Solid uses JSX to render HTML in the browser. It also uses familiar syntax for reactivity to update DOM in real-time.

Architecture & Components
Like most Javascript frameworks, SolidJS uses component architecture for modularity and reusability.

Here is a simple Solid component:

You can also check out the SolidJS playground.

If you are familiar with React, you will notice that Solid components utilize JSX for implementation. The code snippet indicates that SolidJS components consist primarily of a single extensive JavaScript function that generates a blend of HTML and JavaScript code via JSX.

What are Signals?

Signals are similar to the hooks in React. Signals are the foundation of Solid, the values they hold are updated automatically whenever any change is made to them, and this happens each time the value is changed.

In the above example, we use the 'create Signal'; it has two values, a getter and a setter. Both values are functions, the getter 'count' returns the current value and not the value itself. So to access the value, you have to use it as function 'count()'

List of Signals and their counterparts in React:

'createSignal'; Similar to 'useState,' used to manage reactive state in a component.
'createEffect'; Similar to 'useEffect,' used to manage side effects and asynchronous operations.
'createMemo'; Similar to 'useMemo,' used to memoize the result of a computation.

Lifecycle Methods

Solid provides two primary lifecycle methods.

The onMount lifecycle runs a piece of code when the component renders initially. It is equivalent to a createEffect which does not have any dependencies.

The onCleanup function registers a callback function that will be executed when a component is unmounted or destroyed. This can be useful for cleaning up resources such as event listeners or timers created in the component.

Control Flow Components

Solid's API has a bunch of built-q helpers to out various actions, such as looping through a list or conditional rendering.

For example, we have a component that renders a list:

Some other helpful control flows are:

used to conditional render part of the view
used when there are more than 2 mutually exclusive conditions
used to insert elements in the mount node. Helpful in inserting Components outside of the page layout.

You can check the official documentation for more information and an explanation of all control flow.

What are the downsides?

The main downside is the more miniature ecosystem and fewer documentation/blogs around the web. Hence, you have to be ready to do more yourself, аlso because of that, potentially, you will not see many jobs offers for it, and companies are reluctant to adopt it.

Conclusion

Solid looks like an up-and-coming framework. The API is complete, and the usage of JSX simplifies component composition. It has a bright future, the community is still growing, and the discord server is quite active. You can find a lot of help there.

Ivan Todorov — Software Developer at Lexis Solutions

Faster Apps, Happier Users: An Introduction to Caching

Lexis Solutions — Tue, 25 Apr 2023 11:18:35 +0000

What is caching, and why is it important?

So what is caching exactly?

It's a process where we store copies of frequently used data in storage with faster access times. Whenever the application needs this data, it will first check whether it's available in the cache. If the data is unavailable, it will try to retrieve it from the source. This way, we can save a lot of time on expensive calculations, network traffic, or load times. Caching is a very versatile approach used everywhere, from the lower levels, such as CPU caching and operating systems, to web apps.

In the rest of this article, we'll explore how you can leverage this to improve performance and user experience, but also what to look out for when setting up caching for your application and the potential risks.

HTTP caching

The first type of caching we'll look at is HTTP caching, including browser and proxy caches and CDNs (if you still need to become more familiar with what HTTP is, you should check out our previous article on HTTP requests).

Browser caching

All modern web browsers support this, allowing them to store some of the resources sent by the server (e.g., images, stylesheets, scripts, and so on) locally instead of fetching them from the server every time the user visits the website.

As this has multiple advantages:

Faster loading time. Larger resources (images, for example) might take some time to download, increasing the page's loading time. By caching them, we can avoid this issue.
Since we are not getting the resources directly from the server every time the user visits the page, this also reduces the server load.
Reduced network traffic. This is especially useful for users who are on a limited data plan.

To control what resources should be cached and when they should be updated, we have access to a few headers:

Cache-Control

The Cache-Control header holds instructions (called directives) that control how caching should be done. Some of those directives include max-age, which controls for how long the cache is valid, or no-store, which completely disables the caching for the specific request. You can check out this MDN web docs page for a complete list of these directives.

ETag

You can think of the ETag as an identifier of a specific version of a resource, so when the resource changes, so will the ETag. By comparing the ETags, we can check whether there are any updates without requesting the entire resource; if there aren't, we can reuse the data we already have. This allows us to be much more efficient.

Last-Modified

This header stores the time when the resource was last updated. It serves a similar purpose as the ETag.

Proxy caching

Another type of HTTP caching is proxy caching. Here, instead of storing the data on the user's device, it's stored on a proxy server between the client and the application server. When the server sends a response to a specific request, the proxy will intercept it and store it locally in its cache.

Next time a client requests the same resource, the proxy will be able to return the cached response without having to forward the request to the application server. Like with the browser cache, here we can use the same HTTP headers to control how the caching works.

Unlike the browser cache, the one in the proxy is used for all the clients' requests, so this type of caching is sometimes called public. On the other hand, the browser cache is available only for one specific client, so it's a private cache.

CDNs

CDNs (Content Delivery Networks) will cache content on geographically distributed servers to be closer to most users, which improves the web application's performance and makes it more reliable, as the content is stored on multiple servers.

Server-side caching

Server-side caching is used to improve the server's performance and reduce the load on the server by storing frequently used data. This can be API responses, results from database queries, or results from any other time-consuming operations.

There are many different ways to implement server-side caching. Some of them are:

In-memory caching. We can access data quickly by storing it in the server's memory. This is most suitable for smaller data sets that must be accessed frequently. We can implement in-memory caching either with libraries such as node-cache for Node.js for smaller projects or by using in-memory databases like Redis, which can provide a centralized cache if you ever need to scale to multiple servers.
Storing the data in the server's file system; is usually used for bigger data that don't need to be accessed that often.
Database caching, where the results of frequently used queries are stored either in memory or on the disc.

What to look out for when implementing caching?

There are a few potential problems you could run into when implementing caching, including:

If the cache gets too big, it can negatively affect the application's performance.
Storing incorrect or outdated data in the cache.
Security problems. As we saw in previous examples, sometimes cached data can be accessed by multiple clients. It's important not to include any user-specific or otherwise sensitive data in the cache.
To avoid these issues, we must carefully plan what data should be cached and how long it should be stored before the data is replaced or invalidated.

And in case you are working on more extensive multithreaded applications, here's a bonus one: cache stampede.

As we said earlier, in server-side caching, if the requested data is not present in the cache or has expired, the request will get it from the database instead. So, we have thousands of requests trying to access the missing data simultaneously. In that case, they will all be forwarded to the database, overloading it and bringing down the entire system in the worst-case scenario.

There are multiple ways to prevent this:

External computation: keeping an external process that will re-compute the cache values on specific intervals or when a cache miss happens
Probabilistic early expiration: the resource is re-calculated just before it's about to expire
Locking: While one of the threads is re-calculating the value, the others are locked out. Here, it's up to you to decide whether they will have to wait or get stale data.

Summary

Caching is a powerful tool that can help us improve our web applications' performance and user experience. Still, it's important to always carefully plan how we will implement it to achieve the best results and avoid any unwanted consequences.

Stefan Mitov — Full-Stack Developer at Lexis Solutions

ChatGPT: The Downfall of Programmers?

Lexis Solutions — Thu, 06 Apr 2023 14:13:09 +0000

Will I lose my job to A.I.?

As artificial intelligence (A.I.) technology continues to advance, many programmers, including myself, are beginning to have sleepless nights wondering if AI, particularly language models like ChatGPT, will eventually replace human programmers altogether.

In today’s topic, we will answer this complex question and discuss if we should at all worry or if we should instead embrace our A.I. dominators and improve ourselves with their help.

P.S. Remember to check the introductory article about ChatGPT on our blog!

Why are programmers intimidated by ChatGPT?

If you are a programmer or someone that works in the tech world, you know that ChatGPT is everywhere. It is the most talked about subject on the Internet right now and will continue to be as more people learn about it.

Most people with no tech background are fascinated by it and try to learn more about it and experiment with it. But some of us who are aware of the existence of A.I. and have seen simple models that work on predicting if an image has a dog or a cat on it are surprised by the rapid advancement of A.I. technology and feel intimidated by it. When you dig deeper and try it for yourself, you begin to understand how capable ChatGPT is.

Regarding programming skills, ChatGPT is capable of understanding and generating code. It can generate code based on natural language input, which means that it can create complex programs and scripts, including those that require machine learning, data analysis, and other advanced techniques. It has access to a large number of code examples.

Don’t believe me?

Tell a programmer to create a simple snake game, and let’s see how fast he can do it. Even the most advanced programmer can take up to 10–15 minutes to create it without external resources. ChatGPT would have generated it simultaneously in 10 different programming languages.

That was only a simple example, but from even that, we can see the potential in it. With enough time and large amounts of data to be “Fed” into it, tomorrow, it might not create only simple snake games for our amusement but rather create whole websites, servers, and businesses in a fraction of the time it would take an entire tech firm to do.

Аll sounds discouraging for all of us, right? There isn’t only bad news on the horizon. A.I. could dominate us in the future, and it might take our jobs as well, but today is not that day, and instead, let’s now discuss why humans are still needed and cannot be replaced so easily.

Everyone has their part to play

While ChatGPT can generate code and understand natural language input, it needs more creativity, ingenuity, and experience than human programmers possess. It cannot invent new solutions or think outside the box like human programmers. Additionally, it is limited by the quality and scope of the data it has been trained on, which may need to reflect real-world scenarios or considerations.

Furthermore, programming is not just about writing code but also about problem-solving, innovation, and strategy. Human programmers are still essential in the development process, as they possess the critical thinking skills necessary to identify and address complex issues and potential challenges that may arise.

Another important consideration is that ChatGPT needs help understanding the larger context in which code is being developed. It cannot anticipate how to code will be used or how it will interact with other systems, which can lead to unintended consequences or security vulnerabilities.

Currently, a client that wants to create a product must write more than just a few vague descriptions for the A.I. bot and expect it to make what it envisions. They still need that human factor to understand them, write and design every part he wants, and then create and publish it for everyone to use.

That’s why instead of fearing the rise of A.I. language models like ChatGPT, programmers should view them as valuable tools that can help streamline the development process and free up time for higher-level tasks. By embracing and integrating them into their work, programmers can stay up-to-date with the latest technological advancements and improve their productivity and efficiency. And to do that, let’s discover some that can help us improve. A.I. as a tool for improvement

As the field of artificial intelligence continues to advance, programmers can use a growing number of A.I. tools to increase their productivity and streamline their workflows.

Here are some of the most useful ones for programmers:

Code Completion and Auto-Suggestion

AI-powered code completion tools like TabNine or Kite can help programmers write code faster by suggesting code snippets and completing code as they type. They use machine learning algorithms to analyze code and offer suggestions relevant to the context.

Testing and Debugging

AI-powered testing and debugging software, such as DeepCode or Snyk, can help programmers identify and fix bugs in their code more quickly and efficiently. They use machine learning to analyze code and detect potential issues, including security vulnerabilities.

Natural Language Processing (NLP)

NLP, such as GPT-4 or spaCy, can help programmers process and analyze large amounts of natural language data. They can be used to build chatbots, analyze text data, and perform other natural language processing tasks.

Version Control

AI-powered version control tools like Gitcolony or DeepGit can help programmers manage code changes and resolve conflicts more effectively. They analyze code changes and suggest the best action to resolve disputes.

Intelligent Code Review

AI-powered code reviews software, such as CodeGuru or DeepSource, can help programmers improve the quality of their code by identifying potential issues and suggesting best practices. They analyze code and provide feedback specific to the programming language and coding style.

There are many more such as GitHub Copilot, Bard - Google's answer to ChatGPT and its rival for years to come, and even Grammarly, with which this blog is monitored for all typing mistakes. Overall, these A.I. tools can help programmers save time and improve the quality of their code by automating routine tasks and providing intelligent feedback.

Conclusion

Programmers should embrace A.I., like ChatGPT, rather than fearing it. By leveraging the power of A.I., programmers can increase their productivity, improve the quality of their code, and ultimately create better products that meet the needs of their users.

A.I. will take over, and there is no doubt about it. But we are still far from that future. Stay calm about the future and focus on living fully in the present.

Viktor Enchev — Full-stack developer at Lexis Solutions

Why Does Knowledge Transfer Matter?

Lexis Solutions — Thu, 23 Mar 2023 12:33:56 +0000

In the dynamic world of IT, where people come and go and clients demand more and more features, the need for knowledge transfer between the developers turns out to be critical. Even short-term projects with fewer functionalities need to be supported, and if there is no documented knowledge, that task turns out to be left in the dark.

So how does knowledge transfer work?

When discussing knowledge, we have two main goals — gathering it on one side and dispersing it horizontally and vertically throughout the organisation. If your company is a conditionally hierarchical structure, knowledge is being transferred between the employees in different teams on one side and between the layers of management on the other. As you can see in the figure below, even in a simple organisational structure, communicational channels could be dynamic.

Sharing information between employees is essential, especially if it concerns procedural or product knowledge. In my previous article, we discussed the importance of knowing how different aspects of data contribute to a company’s overall progress. So, suppose you have a stable onboarding process with many examples and documentation. In that case, your feeling of being integrated and accepted is increased, which leads not only to better integrated intellectual capital but also encourages you to establish knowledge sharing as a tradition in your work style.

Examples:

Client 1:

The onboarding process was two weeks, and all teams were included. That gave me a significant overview of the product, the main domains and subdomains, and the architectural style. We also discussed each service’s code structure, external services, and critical initiatives. When I was offboarding, I tried to include those practices when introducing the new employee. This gave me the opportunity to update existing documentation and fill knowledge gaps that had been previously underestimated. Ultimately, both sides were satisfied, and we continued communicating afterward.

Client 2:

I was included in this project in the final stage of development. Most of the functionalities were developed, and some use cases needed to be finalised. The onboarding process was focused on how to work with the platform and what are the prominent cases we will develop. One of the crucial aspects was the Quality Assurance on low level and documentation. Code complexity required some additional clarifications. A unit-testing strategy was critical to be defined in order to have some direction during the QA process. My final feeling was that seeking information and initialising conversations with your colleagues from the beginning of your presence in someone’s working environment makes you dedicated enough to have a productive time during the project and loyal enough to bring the project to its logical closure.

In terms of communication between different layers, we can separate knowledge types into organisational and technocratic — both contributing to the mission and vision of the company (know-why) and the technological profile it defines (know-how). Lacking that kind of knowledge would be a blocker when introducing new employees. The main idea of onboarding is to ensure you understand the values that drive the company towards its goals and find your place in the team, where you will be helpful and creative. This may not e critical during your first year, but the more you grow, the more you will want to understand how the magic is happening.

Conclusion

Knowledge transfer is not something strongly procedural. The best environment is where knowledge transfer is established naturally, where people have a tradition to communicate and grow together as a team, so even at the end of your journey, you will keep great memories and friendships.

Dilyan Georgiev — C# .Net Developer at Lexis Solutions, Knowledge Management PhD

Reviewed: Ways to Wrap a React Website in a Native App

Lexis Solutions — Mon, 13 Mar 2023 08:19:20 +0000

React and React Native are the most popular technologies for developing web and mobile applications right now. They are widely adopted by developers and companies alike due to their efficiency, speed, and ability to create high-performance user interfaces.

As a software company specializing in React & React Native, we often get asked how to wrap a React website in a native app or share code between web and mobile apps. It’s a relevant question that many developers and companies face when trying to expand their reach and offer their services on multiple platforms. This article will cover some options for solving this issue and wrapping a React website in a native app.

But why would you want to wrap a React website in a native app and publish it on the app stores? There are several reasons why this might be beneficial for your project.

First, having an app version of your website can improve user experience and engagement. Users can easily access your content or services through a dedicated app on their mobile devices without navigating through a browser. This can result in higher retention rates and increased user satisfaction.

Secondly, publishing your app on the app stores can give you access to a broader audience and increase your brand visibility. App store optimization (ASO) techniques can help you rank higher in search results, making it easier for potential users to discover your app.

Finally, wrapping your React website in a native app using React Native can also improve performance and speed. Native apps have access to device-specific features like push notifications, cameras, GPS, etc., which can enhance the functionality of your app and provide a better user experience.

Wrapping your React website in a native app and publishing it on the app stores can benefit your project. It’s worth considering if you want to expand your reach and engage with more users.

WebView

This is, by far, the easiest way to achieve the task is to wrap your React website into a WebView. This component allows you to display web content within your native app, giving users the same experience as if using a browser. Even though the name WebView is used by the Android platform only, often iOS’s implementation, WKWebView is also called the same.

While this is the easiest way, there is a catch. The Apple App Store and the Google Play Store have specific requirements for using WebView on native apps.

According to the Apple App Store Review Guidelines, WebViews are acceptable if they adhere to certain guidelines. For example, WebViews must be used to display user-generated content and should not offer a browsing experience within the app. Additionally, if your app is designed to be a hybrid of native and web-based content, it may be acceptable to use WebViews.

On the other hand, the Google Play Store also has specific guidelines for using WebView in native apps. According to their policy, apps that are just a WebView of a website or have only minor changes or enhancements to existing websites are not allowed on the store. However, there are some exceptions when using WebView is acceptable. For example, suppose your app provides additional functionality beyond what is available in a web application, such as offline support or access to device-specific features like camera and GPS. In that case, it may be allowed on the Google Play Store.

Additionally, suppose your app is designed to be an alternative to a web-based platform rather than just displaying the same content as the website. In that case, it may be eligible for distribution on the Google Play Store. In this case, you should ensure that your app meets all other policy requirements and guidelines before submitting it for review.

It’s important to note that both app stores reserve the right to reject any app that does not meet their policies and guidelines. Therefore, before wrapping your React website in a native app using WebView or any other method, thoroughly read and understand their rules and regulations to avoid rejection or removal from the stores.

React Native

React Native is a popular choice when it comes to developing hybrid apps. It’s an open-source framework created by Facebook that combines the benefits of both React and React Native. It enables developers to build high-performance applications compatible with multiple platforms while providing access to device-specific features like push notifications.

One of the benefits of using React Native to wrap your React website in a native app is that it allows you to create a truly native experience for your users. While WebView displays web content within a native app, React Native makes native components that render on the device’s UI. This means that the app looks and feels like a native application.

Compared to traditional native applications developed in Java or Swift, React Native offers several advantages. First, it enables code sharing between web and mobile apps, saving time and resources during development. Second, it provides access to a vast ecosystem of pre-built components and modules that can be easily integrated into your project.

To wrap your React website in a native app using React Native, you’ll need to create a new React Native project and add your website files to the project.

Using React Native to wrap your React website in a native app can save you from rejection or removal from the stores due to policy violations. While wrapping your React website in a WebView is the easiest way to create a native app, it may not meet the strict requirements of app stores. In contrast, using React Native requires more work but can provide you with a truly native experience and better performance. Moreover, apps developed using React Native are easily accepted by app stores because they use native components rather than WebViews.

Cordova

Cordova is another possible tool for wrapping react websites in native apps. It’s an open-source mobile application development framework that allows developers to create cross-platform apps using HTML, CSS, and JavaScript. It also provides access to device-specific features like camera, GPS, etc., which can be used to enhance the functionality of your app and provide a better user experience.

While Cordova used to be a popular tool for hybrid apps, it has been losing popularity recently. One clear signal for this is the latest StackOverflow Developer Survey 2022, showing that 75% of developers say they would not use it, given other options.

The main reason for this decline is that as more developers move towards using React Native or similar frameworks, Cordova has fewer resources and support. This makes it challenging for devs to troubleshoot issues or find solutions when working with Cordova.

Overall, while Cordova may still be a viable option for some projects, its declining popularity and limitations compared to other alternatives make it less appealing for many developers looking to wrap their websites in native apps.

React-Native-Web

Our favorite way of wrapping a react app in a native app here at Lexis Solutions is the react-native-web library by @necolas. This library brings the power of React Native Components and APIs to the web. It allows developers to create web applications that are accessible across different devices and input modes while rendering semantic HTML tags. This library allows developers to share code between web and mobile applications, enabling them to create a bridge between the two platforms. You can build iOS, Android, and Web apps with the same codebase.

It works by aliasing the react-native import to react-native-web using your web bundler's (Only Webpack supported) capabilities. This way, while your React Native apps import components and APIs from react-native, your web-app imports the React equivalent. You can find the supported features in their detailed documentation.

This is an A+ solution for wrapping a react app in a native app, and we have used it on many production apps in Healthcare, E-Commerce, and Finance.

Summary

In summary, several options are available for wrapping your React website in a native app, including using WebView, React Native, Cordova, and React-Native-Web. Each option has advantages and disadvantages; the choice ultimately depends on your project’s requirements and your development team’s skills.

If you’re unsure which option is best for your project or need help wrapping your React website in a native app, drop us a line. Our team of experienced developers at Lexis Solutions can provide guidance and support to ensure your idea’s success. Contact us today!

Bilyal Mestanov — Co-founder at Lexis Solutions