Dropdown list with multi-select checkbox

 

JavaScript

let checkList = document.getElementById('ddList1'); checkList.getElementsByClassName('anchor')[0].onclick = function(evt) { if (checkList.classList.contains('visible')) checkList.classList.remove('visible'); else checkList.classList.add('visible'); }

CSS Style

.dropdown-check-list { display: inline-block; } .dropdown-check-list .anchor { position: relative; cursor: pointer; display: inline-block; padding: 5px 50px 5px 10px; border: 1px solid #ccc; } .dropdown-check-list .anchor:after { position: absolute; content: ""; border-left: 2px solid black; border-top: 2px solid black; padding: 5px; right: 10px; top: 20%; -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .dropdown-check-list .anchor:active:after { right: 8px; top: 21%; } .dropdown-check-list ul.items { padding: 2px; display: none; margin: 0; border: 1px solid #ccc; border-top: none; } .dropdown-check-list ul.items li { list-style: none; } .dropdown-check-list.visible .anchor { color: #0094ff; } .dropdown-check-list.visible .items { display: block; }

HTML

<div id="ddList1" class="dropdown-check-list" tabindex="100"> <span class="anchor">Select Items</span> <ul class="items"> <li><input type="checkbox" />Item 1</li> <li><input type="checkbox" />Item 2</li> <li><input type="checkbox" />Item 3</li> <li><input type="checkbox" />Item 4</li> <li><input type="checkbox" />Item 5</li> <li><input type="checkbox" />Item 6</li> <li><input type="checkbox" />Item 7</li> </ul> </div>

Style hr tag with CSS

The HTML <hr> tag represents a Horizontal-rule and its miles used for web page smash thru line. It creates a horizontal line, which makes a person recognize that there's a quit of the web page or a sentence smash.
We also can layout the hr (horizontal-rule) tag to create an appealing user interface.

Following are the 2 CSS style for reference

Style 1:

---

hr.style-1 { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gradient(left, #ccc, #333, #ccc); background-image: -o-linear-gradient(left, #ccc, #333, #ccc); }

Style 2:

---

hr.style-2 { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

Style 3:

---

hr.style-3 { height: 30px; border-style: solid; border-color: black; border-width: 1px 0 0 0; border-radius: 20px; } hr.style-3:before { display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: black; border-width: 0 0 1px 0; border-radius: 20px; }

SharePoint REST API with fetch().then() and Ajax()

Using ajax

$.ajax({ url: "https://mysite.sharepoint.com/_api/web/lists/getbytitle('list')/items(" + id + ")", method: "GET", headers: { "Accept": "application/json; odata=verbose" }, success: function (data) { console.log(data.d.results); } });

Using fetch() and then()

payload = { method: 'GET', headers: { "Accept": "application/json; odata=verbose" }, credentials: 'same-origin' // or credentials: 'include' } fetch("https://mysite.sharepoint.com/_api/Web/Lists/GetByTitle('list')/items?$select=ID,Title", payload) .then(response => response.json()) .then((data)=>{ console.log(data.d.results) })

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.