Top 8 Best Open Source Development Tools

Photo by Lewis Kang'ethe Ngugi on Unsplash

There are a number of popular open source development tools available for use within the software development process. Many of these tools have similar features and offer a variety of different approaches to software development. It can be difficult to know where to begin looking when it comes to choosing the right open source development tool for you.

What makes for a good development tool?

There are a few key features that top developer tools should have:

• Should have good documentation
• Integrates well with another tooling
• Saves you time
• Regular releases and updates
• Good community

8 best open source development tools

We’ll go over the top open-source development tools you should be using in 2022. Without these tools, the work we do, the deadlines we hit, the bugs we find and squash before release would be impossible.

1. VS Code

Visual Studio Code

Visual Studio Code is a lightweight, yet powerful source code editor that runs on your desktop and is available for Windows, macOS, and Linux. It has a large ecosystem of extensions for other languages (such as C++, C#, Java, Python, and PHP, to name a few). It has built-in support for JavaScript, TypeScript, and Node.js, as well as a rich ecosystem of extensions for other languages.

Why VS Code?

VS Code is the best from a feature-point-of-view, UX-wise, and extensions-wise. VS Code is also constantly improving. Every month, it releases new functionality and improvements.

• Time-saving: 8/10
• Documentation: 9/10
• Integrations: 10/10
• Community: 8/10
• Release/Updates: 10/10

2. Budibase

Budibase

A low-code platform, Budibase brings everything together to create internal tools and custom business apps, including dashboards, administration panels, approval apps, customer portals, and everything in between. You can quickly convert data and processes into powerful internal tools.

Why Budibase?

Budibase allows users to self-host their apps on their own infrastructure. Using automated tasks, users can automate email notifications, trigger webhooks, and send a report. Budibase exports real single-page applications that provide end-users with a better, more performant experience.

• Time-saving: 10/10
• Documentation: 6/10
• Integrations: 8/10
• Community: 7/10
• Release/Updates: 10/10

3. Snyk

Snyk

Snyk is a developer-first platform for building cloud-native applications securely. It also helps and encourages developers to mitigate open source vulnerabilities during development by providing assistance.

Why Snyk?

Software composition analysis is a terrible ordeal. I don’t know anyone who enjoys doing it. Snyk, on the other hand, makes it easy. It supports all the major IDEs, auto-remediation of security vulnerabilities, and visualization of dependencies.

• Time-saving: 7/10
• Documentation: 9/10
• Integrations: 9/10
• Community: 8/10
• Release/Updates: 7/10

4. PostHog

PostHog

PostHog is a product analytics platform developed for big businesses. It is open source, and it has a broader vision of the tools required to make a product succeed.

Why PostHog?

PostHog can be integrated into your infrastructure and provide a variety of monitoring tools to enhance your product, such as session recording, heatmaps, and feature flags. The Posthog community and team are fast and helpful.

• Time-saving: 6/10
• Documentation: 7/10
• Integrations: 6/10
• Community: 8/10
• Release/Updates: 7/10

5. Prisma

Prisma

Prisma is an open-source next-generation ORM. It consists of the following parts:

Prisma Studio: An interface to view and edit data in your database

Prisma Client: Auto-generated and safe query builder for Node.js & TypeScript

Prisma Migrate: Migration system

Why Prisma?

Prisma’s type-safe API is straightforward to use across the frontend and backend, as well as being easier to understand and maintain.

• Time-saving: 6/10
• Documentation: 8/10
• Integrations: 8/10
• Community: 9/10
• Release/Updates: 8/10

6. Gitlab

Gitlab

In addition to the DevOps lifecycle, GitLab spans the entire software development process. There are likely a multitude of applications in your DevOps process if you aren’t using GitLab. These layers take time to integrate, manage, configure and maintain, slowing down your team and deployments. A single application will speed up your workflow and help you create better software faster.

Why Gitlab?

Gitlab has additional features that GitHub does not, including code analytics, service desk, design management, and time tracking. Gitlab is excellent at package management because it enables teams to manage containers, package dependencies, and create artifacts with minimal effort. The private, container and package registry are built-in and preconfigured out-of-the-box to work seamlessly with GitLab source code management and CI/CD pipelines.

Time-saving: 9/10
Documentation: 10/10
Integrations: 9/10
Community: 9/10
Release/Updates: 8/10

7. Storybook

Storybook

A storybook is a tool for UI development. It makes development faster and easier by isolating components, allowing you to work on one component at a time, and eliminating the need to start up a complex dev environment or store specific data in your database. As a result, you can develop entire UIs without starting up a complicated dev stack, forcing certain data into your database, or navigating your app.

Why Storybook?

All popular frontend frameworks, including React, Vue, and Svelte, are supported by Storybook. It has a large community and an extensive add-on library. However, the most important thing is that it allows us to present our components in an isolated environment. Developers are also more aware of the components at their disposal, resulting in less duplication and overuse.

Time-saving: 4/10
Documentation: 8/10
Integrations: 9/10
Community: 9/10
Release/Updates: 7/10

8. Supabase

Supabase

Supabase is an open-source Firebase alternative. It is a suite of open-source tools stitched together to build a seamless developer experience.

Why Supabase?

Supabase comes with a host of functions, including authentication, storage, and more. Another advantage is that Supabase’s open source competitor Firebase charges for API calls, which makes paying at the end of the month a bit uncomfortable.

Time-saving: 5/10
Documentation: 6/10
Integrations: 6/10
Community: 10/10
Release/Updates: 9/10

Credit goes to Resource : Top 8 Best Open Source Development Tools | Medium

JavaScript - Inheritance of Methods and Properties

Selecting Elements

Selection of the elements using document

• document.documentElement
• document.head
• document.body

Query selection

• document.querySelector(‘.header’) // only select 1 element
• document.querySelectorAll(‘.section’) // all element with class section
• document.getElementById(‘section1’) // you can find element by ID
• document.getElementsByTagName(‘button’) // all element by tag – this is live collection
• document.getElementsByClassName(‘btn’) // all element have class btn

Creating and Inserting elements

• .insertAdjacentHTML // use to insert first in element
• document.createElement(‘div’) // create DOM in javascript, you can append or insert in your page.
• .prepend() // add element as first child
• .append() // add element as last child
• .before() // add before the element
• .after() // add after the element
• .remove() // delete the element

Important to know about Class

const logo = document.querySelector(‘.nav__logo’); // element

• logo.classList.add(‘a’, ’b’) // add class to element
• logo.classList.remove(‘a’, ‘b’) // remove class
• logo.classList.toggle(‘c’) // toggle
• logo.classList.contains(‘c’) // this will check if class is present in the element or not

2 Useful tricks in Windows for Screen Recording and Voice Typing

Recently found 2 useful tricks that help me a lot in my day-to-day work.

1) Instantly record your screen, just press (Win + Alt + R) 

2) Easy to voice type and detect your work, just press (Win + H), and a detecting bar will appear on top. now just talk to your system, and it will type for you.

Hope this will make your life easy.  😉

Retrieve more than 5000 items from SharePoint List

I actually have struggled with masses even as my list is getting large and want to retrieve the rows more than 5K. Here I located the answer is to apply the Recursive call to retrieve more than 5K items.

let url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('MyList')/items?$top=1000"; let response = response || []; // this variable is used for storing list items function GetListItems(){ return $.ajax({ url: url, method: "GET", headers: { "Accept": "application/json; odata=verbose" }, success: function(data){ response = response.concat(data.d.results); if (data.d.__next) { url = data.d.__next; GetListItems(); } }, error: function(error){ // error handler code goes here } }); }

Here we're doing the recursive call to the GetListItems() function. This will fetch information withinside the bunch of a thousand objects and concatenate it to the response variable.

Here data.d.__next includes the URL to get the next set of items. In case we don’t have more items left to fetch, it'll not call GetListItems() function.

Hope many of us will find this helpful.

Getting an Access Token for SharePoint Online

Prior to SharePoint 2019, SharePoint Administrators, SharePoint Developers, and Power Users could use SharePoint Designer for no-code workflow development. With the release of SharePoint 2019 and SharePoint Online, modern process automation is developed through Microsoft Flow. SharePoint Online leverages modern tools, like PowerApps and Flow for forms and workflow deployment.

As with the SharePoint 2013 workflow, developers can execute REST calls to accomplish workflow actions. To test REST calls that will be executed in a Flow, a tool like Postman can be leveraged.  To successfully send REST calls, an access token will need to be obtained from Microsoft Azure Access Services. The below steps detail the process of obtaining an access token.

To begin, copy the text in the below box into a notepad.  This text is generalized headers for the body of the HTTP Post request to retrieve the token. The text in bold will be replaced as the steps to obtain the token are followed.

grant_type=client_credentials
&resource=00000003-0000-0ff1-ce00-000000000000/TENANT-NAME.sharepoint.com@TENANT-ID
&client_id= GENERATED CLIENT-ID@TENANT-ID
&client_secret= GENERATED CLIENT-SECRET

Step 1 Register an App

Navigate to https://[TENANT -NAME].sharepoint.com/_layouts/15/appregnew.aspx

1. Open notepad
2. Click Generate next to Client ID
3. Copy the generated Client ID
4. In notepad, replace the bold GENERATED CLIENT ID text with the copied generated client id
5. Click Generate next to Client Secret
6. Copy the generated Client Secret
7. In notepad, replace the bold GENERATED CLIENT SECRET text with the copied generated client secret
8. Update App Domain with google.com
9. Update Redirect URL with https://localhost/
10. Click Create

Step 2 Grant APP-Only permission to the APP

1. Navigate to https://[TENANT-NAME].sharepoint.com/_layouts/15/appinv.aspx

Note: Client Id generated during APP registration appended with an @, followed by the Tenant ID

2. Paste the value of “Client Id:” from the notepad in the App Id field
3. Click Lookup
4. Update the Permission Request XML: field the below values:

<AppPermissionRequests AllowAppOnlyPolicy="true"><AppPermissionRequest
Scope="http://sharepoint/content/sitecollection/web"
Right="Read"/></AppPermissionRequests>

 5. Click Create

Step 3 Get access token

1. Navigate to Site Setting > App Permissions
   1. Locate the APP identifier that contains the Client Id generated during APP registration. The GUID on the right side of the @ is the Tenant ID. (You will need the Tenant ID in 3 places during the request build process)
      1. https://accounts.accesscontrol.windows.net/[Tenant ID]/OAuth/2
      2. Resource Header
      3. client_id Header

Update the Post Request Body in Notepad

In notepad, update the text as detailed below:

Key	Value	Notes
grant_type	client_credentials
resource	[SharePoint Online application principal ID]/[Tenant-Name].sharepoint.com@[Tenant-ID]	[SharePoint Online application principal ID] is always 00000003-0000-0ff1-ce00-000000000000   [Tenant-Name] with the tenant value as it appears in the sharepoint.com URL for the tenant [Tenant-ID] was obtained on Site Setting > App Permissions The GUID on the right side of the @ is the Tenant ID   The / and @ are literal values. Use them where specified
client_id	[Client-ID]@[Tenant-ID]	Obtain this value by doing the following Site Setting > App Permissions Locate the APP identifier that contains the Client Id generated during APP registration. Copy everything to the right of | (pipe) character.
client_secret	The client secret that was generated during APP registration

Build the Post Request URL

To obtain the access token, send a POST request to Microsoft Azure Access Control Service (ACS) account associated with Tenant. The URL is in the following format:

https://accounts.accesscontrol.windows.net/[Tenant-ID]/tokens/OAuth/2

[Tenant-ID] was obtained on Site Setting > App Permissions The GUID on the right side of the @ is the Tenant ID

1. Open Postman
2. Create a new Post Request
3. Enter the updated ACS URL in the address field

Build the Post Request Header

Key	Value
Content-Type	application/x-www-form-urlencoded

Paste the Body Text

Copy the updated Body text from the notepad into the Body of the postman request.

View the Post Response

On success, the response body will contain an access-token key.

References

https://anexinet.com/blog/getting-an-access-token-for-sharepoint-online/

https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/add-in-permissions-in-sharepoint

https://docs.microsoft.com/en-us/sharepoint/hybrid/configure-server-to-server-authentication

Download SharePoint Online List items Attachments using PnP PowerShell

 Let’s download all attachments from a list. Following script creates a folder for every list object and downloads all attachments to the local disk.

$SiteURL = "https://splearning99.sharepoint.com/sites/testDL" $ListName = "testlist" $DownloadPath = "C:\Temp\" #Connect to SharePoint Online site Connect-PnPOnline -Url $SiteURL -Interactive #Get all List Items $Listitems = Get-PnPListItem -List $ListName -PageSize 500 #Loop through List Items ForEach($Item in $Listitems) { #Get Attachments from Item $Attachments = Get-PnPProperty -ClientObject $Item -Property "AttachmentFiles" #Download All Attachments from List item Write-host "ID '$($Item.ID)', Attachments : $($Attachments.Count)" #Create directory for each list item $DownloadLocation = $DownloadPath+$Item.ID If (!(Test-Path -path $DownloadLocation)) { New-Item $DownloadLocation -type Directory | Out-Null } $Attachments | ForEach-Object { Get-PnPFile -Url $_.ServerRelativeUrl -FileName $_.FileName -Path $DownloadLocation -AsFile -Force } }

Export HTML table to Excel

Code that will export html table to excel

//<input type="button" onclick="tableToExcel('testTable', 'W3C Example Table')" value="Export to Excel"> var tableToExcel = (function() { var uri = 'data:application/vnd.ms-excel;base64,' , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>' , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) } , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) } return function(table, name) { if (!table.nodeType) table = document.getElementById(table) var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML} window.location.href = uri + base64(format(template, ctx)) } })()