• Global - English

Month: August 2021

The Best VS Code Extensions For Remote Working

Posted on by adminn

What do developers want? Money, flexible schedules, pizza? Sure. Effortless remote collaboration? Hell, yes! Programming is a team sport and without proper communication, you can’t really expect spectacular results. A remote set-up can make developer-to-developer communication challenging, but if equipped with the right tools, you have nothing to fear. Let’s take a look at the best VS Code extensions that can seriously improve a remote working routine.

1. Live Share

If you’ve been working remotely for a while now, chances are you’re already familiar with this one. This popular extension lets you and your teammates edit code together.

It can also be enhanced by other extensions such as Live Share Audio which allows you to make audio calls, or Live Share Whiteboard to draw on a whiteboard and see each other’s changes in real-time.

Benefits for remote teams: Boost your team’s productivity by pair-programming in real-time, straight from your VS Code editor!

2. GitLive

This powerful tool combines the functionality of Live Share with other super useful features for remote teams. You can see if your teammates are online, what issue and branch they are working on and even take a peek at their uncommitted changes, all updated in real-time.

But probably the most useful feature is merge conflict detection. Indicators show in the gutter where your teammates have made changes to the file you have open. These update in real-time as you and your teammates are editing and provide early warning of potential merge conflicts.

Finally, GitLive enhances code sharing via LiveShare with video calls and screen share and even allows you to codeshare with teammates using other IDEs such as IntelliJ, WebStorm or PyCharm.

Benefits for remote teams: Improve developer communication with real-time cross-IDE collaboration, merge conflict detection and video calls!

3. GistPad

Gists are a great way not only to create code snippets, notes, or tasks lists for your private use but also to easily share them with your colleagues. With GistPad you can seamlessly do it straight from your VS Code editor.

You can create new gists from scratch, from local files or snippets. You can also search through and comment on your teammate’s gists (all comments will be displayed at the bottom of an opened file or as a thread in multi-file gists).

The extension has broad documentation and a lot of cool features. What I really like is the sorting feature, which when enabled, will group your gists by type (for example note — gists composed of .txt, .md/.markdown or .adoc files, or diagram — gists that include a .drawio file) which makes it super-easy to quickly find what you’re looking for.

Benefits for remote teams: Gists are usually associated with less formal, casual collaboration. The extension makes it easier to brainstorm over the code snippet, work on and save a piece of code that will be often reused, or share a task list.

4. Todo Tree

If you create a lot of TODOs while coding and need help in keeping track of them, this extension is a lifesaver. It will quickly search your workspace for comment tags like TODO and FIXME and display them in a tree view in the explorer pane.

Clicking on a TODO within the tree will bring you to the exact line of code that needs fixing and additionally highlight each to-do within a file.

Benefits for remote teams: The extension gives you an overview of all your TODOs and a way to easily access them from the editor. Use it together with your teammates and make sure that no task is ever forgotten.

5. Codetour

If you’re looking for a way to smoothly on-board a new team member to your team, Codetour might be exactly what you need. This handy extension allows you to record and playback guided walkthroughs of the codebase, directly within the editor.

A “code tour” is a sequence of interactive steps associated with a specific directory, file or line, that includes a description of the respective code and is saved in a chosen workspace. The extension comes with built-in guides that help you get started on a specific task (eg. record, export, start or navigate a tour). At any time, you can edit the tour by rearranging or deleting certain steps or even change the git ref associated with the tour.

Benefits for remote teams: A great way to explain the codebase and create project guidelines available within VS Code at any time for each member of the team!

6. Git Link

Simple and effective, this extension does one job: allows you to send a link with selected code from your editor to your teammates, who can view it in GitHub. Besides the advantage of sharing code with your team (note that only committed changes will be reflected in the link), it is also useful if you want to check history, contributors, or branch versions.

Benefits for remote teams: Easily send links of code snippets to co-workers.

Conclusion

Good communication within a distributed team is key to productive remote working. Hopefully, some of the tools rounded up in this short article will make your team collaboration faster, more efficient and productive. Happy hacking!

Source: https://dev.to/morrone_carlo/the-best-vs-code-extensions-for-remote-working-e8e

Technologies for the Modern Full-Stack Developer

Posted on by adminn

The developer technology landscape changes all the time as new tools and technologies are introduced. Based on numerous interviews and reading through countless job descriptions on job boards, here is a compilation of a great modern tech stack for JavaScript developers in 2021.

Out of countless tools, this blog covers a selection which when combined can be used in either personal projects or in a company. Of course, many other project management tools exist out there for example like Jira, Confluence, Trello and Asana to name a few. This is based on user experience and preference so feel free to make slight adjustments and personal changes to suit your own tastes.

It is much simpler to concentrate on a refined set of tools instead of getting overwhelmed with the plethora of choices out there which makes it hard for aspiring developers to choose a starting point.

Project Management

  • Notion  – For overall project management, documentation, notes and wikis
  • Clubhouse / Monday  – Clubhouse or Monday to manage the development process itself. Both can be Incorporated into a CI/CD workflow so builds are done automatically and changes are reflected in the staging and production CI/CD branches
  • Slack / Discord  – For communication between teams

Design

  • Figma  – Figma is a modern cross-platform design tool with sharing and collaboration built-in
  • Photoshop / Canva  – Photoshop is the industry standard for doing graphic design work and Canva is a great image editing tool

Back-End

Front-End

  • NextJS / Create React App / Redux – NextJS for generating a static website or Create React App for building a standard React website with Redux for state management
  • Tailwind – Tailwind for writing the CSS, as its a modern popular framework basically allowing you to avoid writing your own custom CSS from scratch leading to faster development workflows
  • CSS/SASS / styled-components – This can be used as a different option to Tailwind, giving you more customization options for the components in React
  • Storybook  – This is the main build process for creating the components because it allows for modularity. With Storybook components are created in isolation inside of a dynamic library that can be updated and shared across the business
  • Jest and Enzyme, React Testing Library and Cypress – TDD using unit tests for the code and components before they are sent to production and Cypress for an end to end testing
  • Sanity / Strapi – Sanity and Strapi are headless CMS and are used to publish the content with the use of a GUI (optional tools)
  • Vercel / Netlify / AWS – The CI/CD provider combined with GitHub, makes it easy to review and promote changes as they’re developed

Mobile

  • React Native / Redux – React Native for creating cross-platform mobile apps and Redux for state management
  • Flutter/Dart  – Flutter and Dart for creating cross-platform mobile apps

Source – https://levelup.gitconnected.com/modern-full-stack-developer-tech-stack-2021-69feb9af13f3

Key Comparative Insights between React Native and Flutter

Posted on by adminn

The increasing demand for mobile apps gets every business to look for the best and robust solution. Understanding the pros and cons of each platform is necessary. In this blog, we share key comparative insights on the popular cross-platform technologies – React Native and Flutter.

React Native was built and open-sourced by Facebook in 2015 with easy access to the native UI components and the code is reusable. A hot reload feature is available with access to high-quality third-party libraries.

Flutter is an open-source technology launched by Google which has a robust ecosystem and offers maximum customization.

Programming Language

React Native mainly uses JavaScript as the programming language, which is a dynamically typed language. ReactJS is a JavaScript library mainly used for building user interfaces. ReactJS is used across various web applications, a specific pathway to build out its forms has to be used which is accomplished by using – ReactJS lifecycle.

On the other hand, Flutter uses Dart which was introduced by Google in 2011. It is similar to most other Object-Oriented Programming Languages and has been quickly adopted by developers as it is more expressive.

Architecture

React Native uses the JavaScript bridge, which is the JavaScript runtime environment that provides a pathway to communicate with the native modules. JSON messages are used to communicate between the two sides. This process requires a smooth User Interface. The Flux architecture of Facebook is used by React Native.

Flutter contains most of the required components within itself which rules out the need for a bridge. Frameworks like Cupertino and Material Design are used. Flutter uses the Skia engine for its purpose. The apps built on Flutter are thus more stable.

Installation

React Native can easily be installed by someone with little prior knowledge of JavaScript. It can be installed by using the React Native CLI- which needs to be installed globally. The prerequisites for installing React Native are NodeJS and JDK8. The yarn needs to be installed to manage the packages.

Installing Flutter is a bit different. The binary for a specific platform needs to be downloaded. A zip file is also required for macOS. It is then required to be added to the PATH variable. Flutter installation does not require any knowledge of JavaScript and involves a few additional steps in comparison with React Native.

Setup and Project Configuration

React Native has limitations while providing a setup roadmap and it begins with the creation of a new project. There is less guidance while using Xcode tools. For Windows, it requires JDK and Android Studio to be preinstalled.

Flutter provides a detailed guide to installing it. Flutter doctor is a CLI tool that helps developers to install Flutter without much trouble. Flutter provides better CLI support and a proper roadmap to setting up the framework. Project configuration can be done easily as well.

UI Components and Development API

React Native has the ability to create the Native environment for Android and iOS by using the JS bridge. But it relies heavily on third-party libraries. The React Native components may not behave similarly across all platforms thereby making the app inconsistent. User Interface rendering is available.

Flutter provides a huge range of API tools, and the User Interface components are in abundance. Third-party libraries are not required here. Flutter also provides widgets for rendering UI easily across Android and iOS.

Developer Productivity

The React Native codes are reusable across all the platforms. JavaScript is supported by all editors. React Native also provides the Hot Reload feature. This means that any changes in the backend will be directly visible on the front end, even without recompilation.

Flutter also offers the Hot Reload feature. The compilation time on Flutter is shorter as compared to React Native. This affects Flutter VS React Native development speed comparison. But all editors do not support Dart as it is not common.

Community Support

Communities also help in sharing knowledge about specific technology and solving problems related to it. Since being launched in 2015, React Native has gained popularity and has increasing communities forming across the world, especially on GitHub.

Flutter started gaining popularity in 2017 after the promotion by Google and the community is relatively smaller, but a fast-growing one. Currently, React Native has larger community support, however, Flutter is being acknowledged globally and is also fast-trending.

Testing Support

The React Native framework does not provide any support for testing the UI or the integration. JavaScript offers some unit-level testing features. Third-party tools need to be used for testing the React Native apps. No official support is provided for these tests.

Flutter provides a good set of testing features. The Flutter testing features are properly documented and officially supported. Widget testing is also available that can be run like unit tests to check the UI. Flutter is hence better for testing.

DevOps and CI/CD Support

Continuous Integration and Continuous Delivery are important for apps to get feedback continuously. React Native does not offer any CI/CD solution, officially. It can be introduced manually, but there is no proper guideline to it and third-party solutions need to be used.

Setting up a CI/CD with Flutter is easy. The steps are properly mentioned for both iOS and Android platforms. Command Line Interface can easily be used for deploying them. React Native DevOps is properly documented and explained. DevOps lifecycle can also be set up for Flutter. Flutter edges React Native in terms of DevOps and CI/CD support because of the official CI/CD solution.

Use Cases

React Native is used when the developer is accustomed to using JavaScript. The more complicated apps are created using the React Native development framework.

If the User Interface is the core feature of your app, you should choose Flutter. Flutter is used for building simple apps with a limited budget. Thus you should consider the main use case of your app before finalizing the technology stack. The target of Google is to improve Flutter’s performance for desktops mainly. This will allow developers to create apps for the desktop environment. React Native may use the same codebase to develop apps for both Android and iOS.

Conclusion

React Native and Flutter both have their pros and cons. React Native might be the base of a majority of currently existing apps, but Flutter is quickly gaining popularity within the community since its inception, a fact further boosted by the advancement of the Flutter Software Development Kit (SDK) which makes the framework more advanced and preferable. The bottom line is to use the right platform after a thorough need-analysis is done. Contact NeoSOFT Technologies for a free consultation to help you get ready for a ‘mobile-journey’.