Bitovi Blog https://www.bitovi.com/blog Bitovi's team shares best practices, thoughts, and ideas for building enterprise web applications. UX & JavaScript blog. en-us Tue, 29 Nov 2022 00:31:01 GMT 2022-11-29T00:31:01Z en-us React Architecture Tips & Tricks https://www.bitovi.com/blog/react-architecture-tips-and-tricks <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/react-architecture-tips-and-tricks" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/React%20Architecture%20tips%20and%20tricks.png" alt="react architecture tips and tricks on background of architect working" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>We’ve all been there—a complicated project, under-resourced and under-documented, with little continuity or direction. Luckily, Bitovi does things differently.</p> <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/react-architecture-tips-and-tricks" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/React%20Architecture%20tips%20and%20tricks.png" alt="react architecture tips and tricks on background of architect working" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>We’ve all been there—a complicated project, under-resourced and under-documented, with little continuity or direction. Luckily, Bitovi does things differently.</p> <img src="https://track.hubspot.com/__ptq.gif?a=2171535&amp;k=14&amp;r=https%3A%2F%2Fwww.bitovi.com%2Fblog%2Freact-architecture-tips-and-tricks&amp;bu=https%253A%252F%252Fwww.bitovi.com%252Fblog&amp;bvt=rss" alt="" width="1" height="1" style="min-height:1px!important;width:1px!important;border-width:0!important;margin-top:0!important;margin-bottom:0!important;margin-right:0!important;margin-left:0!important;padding-top:0!important;padding-bottom:0!important;padding-right:0!important;padding-left:0!important; "> Consulting React Mon, 28 Nov 2022 23:04:27 GMT dtran@bitovi.com (Dan Tran) https://www.bitovi.com/blog/react-architecture-tips-and-tricks 2022-11-28T23:04:27Z Four Tips for Working with Remote Product Design Teams https://www.bitovi.com/blog/four-tips-for-working-with-remote-product-design-teams <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/four-tips-for-working-with-remote-product-design-teams" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/Four%20Tips%20for%20Working%20with%20Remote%20Product%20Design%20Teams.png" alt="four tips for working with remote product design teams" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>Teamwork makes the dream work! But in this new age of remote work, how can creative teams collaborate to make their dreams work when they’re spread out across continents and various time zones? At Bitovi, we’re experts when it comes to working remotely, and we can help your <a href="https://www.bitovi.com/ux-design-consulting">product design teams</a> level up in this arena.</p> <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/four-tips-for-working-with-remote-product-design-teams" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/Four%20Tips%20for%20Working%20with%20Remote%20Product%20Design%20Teams.png" alt="four tips for working with remote product design teams" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>Teamwork makes the dream work! But in this new age of remote work, how can creative teams collaborate to make their dreams work when they’re spread out across continents and various time zones? At Bitovi, we’re experts when it comes to working remotely, and we can help your <a href="https://www.bitovi.com/ux-design-consulting">product design teams</a> level up in this arena.</p> <img src="https://track.hubspot.com/__ptq.gif?a=2171535&amp;k=14&amp;r=https%3A%2F%2Fwww.bitovi.com%2Fblog%2Ffour-tips-for-working-with-remote-product-design-teams&amp;bu=https%253A%252F%252Fwww.bitovi.com%252Fblog&amp;bvt=rss" alt="" width="1" height="1" style="min-height:1px!important;width:1px!important;border-width:0!important;margin-top:0!important;margin-bottom:0!important;margin-right:0!important;margin-left:0!important;padding-top:0!important;padding-bottom:0!important;padding-right:0!important;padding-left:0!important; "> Consulting UX product design Mon, 21 Nov 2022 21:32:24 GMT eileen@bitovi.com (Eileen T. Ward) https://www.bitovi.com/blog/four-tips-for-working-with-remote-product-design-teams 2022-11-21T21:32:24Z Build a Data Pipeline Using Kafka and Kafka Connect https://www.bitovi.com/blog/build-a-data-pipeline-using-kafka-and-kafka-connect <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/build-a-data-pipeline-using-kafka-and-kafka-connect" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/Build%20a%20data%20pipeline%20using%20Kafka%20and%20KafkaConnect.png" alt="build a data pipeline using kafka and kafka connect" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>A data pipeline is a series of data processing steps. Data pipelines consist of three key elements:</p> <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/build-a-data-pipeline-using-kafka-and-kafka-connect" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/Build%20a%20data%20pipeline%20using%20Kafka%20and%20KafkaConnect.png" alt="build a data pipeline using kafka and kafka connect" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>A data pipeline is a series of data processing steps. Data pipelines consist of three key elements:</p> <img src="https://track.hubspot.com/__ptq.gif?a=2171535&amp;k=14&amp;r=https%3A%2F%2Fwww.bitovi.com%2Fblog%2Fbuild-a-data-pipeline-using-kafka-and-kafka-connect&amp;bu=https%253A%252F%252Fwww.bitovi.com%252Fblog&amp;bvt=rss" alt="" width="1" height="1" style="min-height:1px!important;width:1px!important;border-width:0!important;margin-top:0!important;margin-bottom:0!important;margin-right:0!important;margin-left:0!important;padding-top:0!important;padding-bottom:0!important;padding-right:0!important;padding-left:0!important; "> DevOps Fri, 18 Nov 2022 18:54:16 GMT srini@bitovi.com (Srini Margani) https://www.bitovi.com/blog/build-a-data-pipeline-using-kafka-and-kafka-connect 2022-11-18T18:54:16Z Angular v15 Directive Composition API https://www.bitovi.com/blog/angular-v15-directive-composition-api <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/angular-v15-directive-composition-api" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/Angular%20v15%20Directive%20Composition%20API.png" alt="Angular v15 Directive Composition API" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>One of the advantages of using the <a class="external-link" href="https://www.bitovi.com/frontend-javascript-consulting/angular-consulting">Angular</a> ecosystem is that it never forgets about you. If Angular can’t solve your request right away because the current technology doesn’t allow it, they often return to it. An example of this is <a class="external-link" href="https://github.com/angular/angular/issues/8785">issue #8785</a>, which was open for 6 years but was finally solved in 2022.</p> <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/angular-v15-directive-composition-api" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/Angular%20v15%20Directive%20Composition%20API.png" alt="Angular v15 Directive Composition API" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>One of the advantages of using the <a class="external-link" href="https://www.bitovi.com/frontend-javascript-consulting/angular-consulting">Angular</a> ecosystem is that it never forgets about you. If Angular can’t solve your request right away because the current technology doesn’t allow it, they often return to it. An example of this is <a class="external-link" href="https://github.com/angular/angular/issues/8785">issue #8785</a>, which was open for 6 years but was finally solved in 2022.</p> <img src="https://track.hubspot.com/__ptq.gif?a=2171535&amp;k=14&amp;r=https%3A%2F%2Fwww.bitovi.com%2Fblog%2Fangular-v15-directive-composition-api&amp;bu=https%253A%252F%252Fwww.bitovi.com%252Fblog&amp;bvt=rss" alt="" width="1" height="1" style="min-height:1px!important;width:1px!important;border-width:0!important;margin-top:0!important;margin-bottom:0!important;margin-right:0!important;margin-left:0!important;padding-top:0!important;padding-bottom:0!important;padding-right:0!important;padding-left:0!important; "> Angular Wed, 16 Nov 2022 21:56:18 GMT https://www.bitovi.com/blog/angular-v15-directive-composition-api 2022-11-16T21:56:18Z Eduard Krivanek TypeScript 4.9 Features and Improvements https://www.bitovi.com/blog/typescript-4.9-features-and-improvements <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/typescript-4.9-features-and-improvements" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/TypeScript%204.9%20Features%20and%20Improvements.png" alt="typescript 4.9 features and improvements" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>It’s always exciting for developers when languages release new versions—whether they fix issues, introduce new features, or both! The release of TypeScript 4.9 on November 15th, 2022 introduces a new operator, performance improvements, plus a variety of new features and capabilities. Allow us to introduce 3 of our favorites:</p> <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/typescript-4.9-features-and-improvements" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/TypeScript%204.9%20Features%20and%20Improvements.png" alt="typescript 4.9 features and improvements" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>It’s always exciting for developers when languages release new versions—whether they fix issues, introduce new features, or both! The release of TypeScript 4.9 on November 15th, 2022 introduces a new operator, performance improvements, plus a variety of new features and capabilities. Allow us to introduce 3 of our favorites:</p> <img src="https://track.hubspot.com/__ptq.gif?a=2171535&amp;k=14&amp;r=https%3A%2F%2Fwww.bitovi.com%2Fblog%2Ftypescript-4.9-features-and-improvements&amp;bu=https%253A%252F%252Fwww.bitovi.com%252Fblog&amp;bvt=rss" alt="" width="1" height="1" style="min-height:1px!important;width:1px!important;border-width:0!important;margin-top:0!important;margin-bottom:0!important;margin-right:0!important;margin-left:0!important;padding-top:0!important;padding-bottom:0!important;padding-right:0!important;padding-left:0!important; "> React TypeScript Tue, 15 Nov 2022 21:44:26 GMT joshgh@bitovi.com (Josh Glantz-Hucks) https://www.bitovi.com/blog/typescript-4.9-features-and-improvements 2022-11-15T21:44:26Z Use LocalStack to Build a Development Environment for a Serverless App https://www.bitovi.com/blog/use-localstack-to-build-development-environment-for-serverless-app <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/use-localstack-to-build-development-environment-for-serverless-app" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/Use%20LocalStack%20to%20Build%20a%20Development%20Environment%20for%20a%20Serverless%20App.png" alt="Use LocalStack to Build a Development Environment for a Serverless App" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>Local development environments allow you to speed up both development and the feedback cycle for your Serverless apps. The LocalStack plugin gives you the tools to build local development environments quickly, accessing mock AWS services without credentials.</p> <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/use-localstack-to-build-development-environment-for-serverless-app" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/Use%20LocalStack%20to%20Build%20a%20Development%20Environment%20for%20a%20Serverless%20App.png" alt="Use LocalStack to Build a Development Environment for a Serverless App" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>Local development environments allow you to speed up both development and the feedback cycle for your Serverless apps. The LocalStack plugin gives you the tools to build local development environments quickly, accessing mock AWS services without credentials.</p> <img src="https://track.hubspot.com/__ptq.gif?a=2171535&amp;k=14&amp;r=https%3A%2F%2Fwww.bitovi.com%2Fblog%2Fuse-localstack-to-build-development-environment-for-serverless-app&amp;bu=https%253A%252F%252Fwww.bitovi.com%252Fblog&amp;bvt=rss" alt="" width="1" height="1" style="min-height:1px!important;width:1px!important;border-width:0!important;margin-top:0!important;margin-bottom:0!important;margin-right:0!important;margin-left:0!important;padding-top:0!important;padding-bottom:0!important;padding-right:0!important;padding-left:0!important; "> Backend Fri, 11 Nov 2022 16:11:00 GMT austin@bitovi.com (Austin Kurpuis) https://www.bitovi.com/blog/use-localstack-to-build-development-environment-for-serverless-app 2022-11-11T16:11:00Z Angular & Apollo Client: Getting Started with GraphQL in Angular https://www.bitovi.com/blog/angular-and-apollo-client-get-started-with-graphql-in-angluar <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/angular-and-apollo-client-get-started-with-graphql-in-angluar" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/Angular%20Apollo%20Client%20Getting%20Started%20with%20GraphQL%20in%20Angular.png" alt="Angular &amp; Apollo Client: Getting Started with GraphQL in Angular" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>GraphQL servers are becoming more and more popular. Backend developers recognize the added value of switching from traditional REST architecture to GraphQL, despite the higher application complexity.</p> <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/angular-and-apollo-client-get-started-with-graphql-in-angluar" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/Angular%20Apollo%20Client%20Getting%20Started%20with%20GraphQL%20in%20Angular.png" alt="Angular &amp; Apollo Client: Getting Started with GraphQL in Angular" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>GraphQL servers are becoming more and more popular. Backend developers recognize the added value of switching from traditional REST architecture to GraphQL, despite the higher application complexity.</p> <img src="https://track.hubspot.com/__ptq.gif?a=2171535&amp;k=14&amp;r=https%3A%2F%2Fwww.bitovi.com%2Fblog%2Fangular-and-apollo-client-get-started-with-graphql-in-angluar&amp;bu=https%253A%252F%252Fwww.bitovi.com%252Fblog&amp;bvt=rss" alt="" width="1" height="1" style="min-height:1px!important;width:1px!important;border-width:0!important;margin-top:0!important;margin-bottom:0!important;margin-right:0!important;margin-left:0!important;padding-top:0!important;padding-bottom:0!important;padding-right:0!important;padding-left:0!important; "> Angular Apollo Wed, 09 Nov 2022 16:02:18 GMT https://www.bitovi.com/blog/angular-and-apollo-client-get-started-with-graphql-in-angluar 2022-11-09T16:02:18Z Eduard Krivanek Adding Animations to Your UI? Read This First https://www.bitovi.com/blog/read-this-before-using-animations-in-your-ui <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/read-this-before-using-animations-in-your-ui" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/adding%20animations%20to%20your%20ui%3F%20read%20this%20first.png" alt="Adding Animations to Your UI? Read This First" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>A static interface works fine most of the time. But wouldn’t it be better if you added animation? You’ve seen animation used so spectacularly elsewhere. It will improve your product too. Right? Not always.</p> <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/read-this-before-using-animations-in-your-ui" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/adding%20animations%20to%20your%20ui%3F%20read%20this%20first.png" alt="Adding Animations to Your UI? Read This First" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>A static interface works fine most of the time. But wouldn’t it be better if you added animation? You’ve seen animation used so spectacularly elsewhere. It will improve your product too. Right? Not always.</p> <img src="https://track.hubspot.com/__ptq.gif?a=2171535&amp;k=14&amp;r=https%3A%2F%2Fwww.bitovi.com%2Fblog%2Fread-this-before-using-animations-in-your-ui&amp;bu=https%253A%252F%252Fwww.bitovi.com%252Fblog&amp;bvt=rss" alt="" width="1" height="1" style="min-height:1px!important;width:1px!important;border-width:0!important;margin-top:0!important;margin-bottom:0!important;margin-right:0!important;margin-left:0!important;padding-top:0!important;padding-bottom:0!important;padding-right:0!important;padding-left:0!important; "> UI product design Mon, 07 Nov 2022 20:31:14 GMT kosborn@bitovi.com (Kevin Osborn) https://www.bitovi.com/blog/read-this-before-using-animations-in-your-ui 2022-11-07T20:31:14Z Deploy Your React Project to Github Pages with Github Actions https://www.bitovi.com/blog/deploy-your-react-project-to-github-pages-with-github-actions <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/deploy-your-react-project-to-github-pages-with-github-actions" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/Deploy%20Your%20React%20Project%20to%20Github%20Pages%20with%20Github%20Actions.png" alt="Deploy Your React Project to Github Pages with Github Actions" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>Bitovi has created a new <a class="external-link" href="https://github.com/marketplace/actions/deploy-react-to-github-pages">GitHub action</a> that makes publishing a React site to GitHub Pages a snap. It’s using a new feature in GitHub pages to help keep your repositories clean.</p> <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/deploy-your-react-project-to-github-pages-with-github-actions" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/Deploy%20Your%20React%20Project%20to%20Github%20Pages%20with%20Github%20Actions.png" alt="Deploy Your React Project to Github Pages with Github Actions" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>Bitovi has created a new <a class="external-link" href="https://github.com/marketplace/actions/deploy-react-to-github-pages">GitHub action</a> that makes publishing a React site to GitHub Pages a snap. It’s using a new feature in GitHub pages to help keep your repositories clean.</p> <img src="https://track.hubspot.com/__ptq.gif?a=2171535&amp;k=14&amp;r=https%3A%2F%2Fwww.bitovi.com%2Fblog%2Fdeploy-your-react-project-to-github-pages-with-github-actions&amp;bu=https%253A%252F%252Fwww.bitovi.com%252Fblog&amp;bvt=rss" alt="" width="1" height="1" style="min-height:1px!important;width:1px!important;border-width:0!important;margin-top:0!important;margin-bottom:0!important;margin-right:0!important;margin-left:0!important;padding-top:0!important;padding-bottom:0!important;padding-right:0!important;padding-left:0!important; "> React DevOps Fri, 04 Nov 2022 14:00:00 GMT ccapell@bitovi.com (Chris Capell) https://www.bitovi.com/blog/deploy-your-react-project-to-github-pages-with-github-actions 2022-11-04T14:00:00Z DevOps Consulting: Pipeline Runners https://www.bitovi.com/blog/devops-consulting-pipeline-runners <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/devops-consulting-pipeline-runners" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/DevOps%20Consulting%20Pipeline%20Runners.png" alt="DevOps Consulting: Pipeline Runners" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>Pipeline Runners, and the automation pipelines they run, simplify software delivery by providing a hosted mechanism to automate running tests, building packages and artifacts, and performing deployments. In other words, Pipeline Runners run Pipelines, which are the foundation of your Automated Delivery process and your overall <a class="external-link" href="https://www.bitovi.com/blog/the-complete-guide-to-devops"> DevOps</a> or Cloud Engineering approach.</p> <div class="hs-featured-image-wrapper"> <a href="https://www.bitovi.com/blog/devops-consulting-pipeline-runners" title="" class="hs-featured-image-link"> <img src="https://www.bitovi.com/hubfs/DevOps%20Consulting%20Pipeline%20Runners.png" alt="DevOps Consulting: Pipeline Runners" class="hs-featured-image" style="width:auto !important; max-width:50%; float:left; margin:0 15px 15px 0;"> </a> </div> <p>Pipeline Runners, and the automation pipelines they run, simplify software delivery by providing a hosted mechanism to automate running tests, building packages and artifacts, and performing deployments. In other words, Pipeline Runners run Pipelines, which are the foundation of your Automated Delivery process and your overall <a class="external-link" href="https://www.bitovi.com/blog/the-complete-guide-to-devops"> DevOps</a> or Cloud Engineering approach.</p> <img src="https://track.hubspot.com/__ptq.gif?a=2171535&amp;k=14&amp;r=https%3A%2F%2Fwww.bitovi.com%2Fblog%2Fdevops-consulting-pipeline-runners&amp;bu=https%253A%252F%252Fwww.bitovi.com%252Fblog&amp;bvt=rss" alt="" width="1" height="1" style="min-height:1px!important;width:1px!important;border-width:0!important;margin-top:0!important;margin-bottom:0!important;margin-right:0!important;margin-left:0!important;padding-top:0!important;padding-bottom:0!important;padding-right:0!important;padding-left:0!important; "> DevOps Wed, 02 Nov 2022 14:00:00 GMT mick@bitovi.com (Mick McGrath) https://www.bitovi.com/blog/devops-consulting-pipeline-runners 2022-11-02T14:00:00Z