The Complete Guide to Lazy Loading Images

Images are critical. Whether it is marketing banners, product images or logos, it is impossible to imagine a website without images. Sadly though, images are often heavy files making them the single biggest contributor to the page bloat. According the HTTP Archive’s State of Images report, the median page size on desktops is 1511 KB and images account for nearly 45% (650 KB) of that total.

That said, it’s not like we can simply do away with images. They’re too important to the overall user experience. Instead, we need to make our web pages load really fast with them. In this guide, we will cover all of the ins and outs of lazy loading images, a technique that helps improve the time it takes for a web page to load by deferring image loads until they are needed.

Before we dive right in, here is a sample video that demonstrates the concept. In short, a gray placeholder box is rendered on the page until it scrolls into view—at which point the actual image loads in place of the box.

Chapter 1: What is Lazy Loading?

We often associate the word “lazy” with avoiding work as long as possible, or the sheer act of wanting to do nothing at all.

Similarly, lazy loading defers the loading of resources on the page as long as they are not needed. Instead of loading them right away, which is what normally happens, we allow them to load later.

Lazy Loading is a set of techniques in web and application development that defers the loading of resources on a page to a later point in time—when those resources are actually needed instead of loading them up front. These techniques help in improving performance, better utilization of the device’s resources and reducing associated costs.

The technique of lazy loading can be applied to just about any resources on a page. For example, even a JavaScript file can be held back if it is best not to load it initially. Same deal for an image—load it when we need it.

We will stick to lazy loading images in this guide, but it’s good to know it can be applied to other assets.

Chapter 2: Why Lazy Load at All?

If the user never scrolls to the point of the page that contains the image, then the user will never see that image. It also never loads in the first place because, hey, it was never needed.

You may already start to see how this benefits both you and the user. Here are two of the advantages we get with lazy loading.

Performance Gains

The obvious benefit is that we get smaller web pages that load faster. Lazy loading reduces the number of images that need to be loaded on a page up front. Fewer image requests mean fewer bytes to download. And fewer bytes to download means the page renders faster than if those bytes and requests were being made.

This ensures that any device on any network is able to download and process the remaining resources much faster. Hence, the time from request to render becomes smaller and the page becomes usable much earlier. Win-win!

Cost reduction

The second benefit is for you as a website administrator. Cloud hosting services, like Content Delivery Networks (CDNs) or web servers or storages, deliver images (or any asset for that matter) at a cost based on the number of bytes transferred. A lazy loaded image may never get loaded if the user never reaches it. Thus, you may reduce the total bytes delivered on the page and ultimately save yourself a few pennies in the process. This is especially true for users that instantly bounce off a page or interact only with the top portion of the content.

The reduction in bytes transferred from your delivery network or server reduces delivery costs. This will become more apparent as we explore lazy loading in the coming sections.

Just how much will you save? You can find out which images are a candidate for lazy loading and how many bytes you can save on the initial page load by using the Google Lighthouse audit tool. This has a section dedicated for offscreen images. You can also use ImageKit’s website analyzer to identify if your website uses lazy loading or not apart from other critical image related optimizations on your page.

Lazy loading is critical not only to good performance but also to deliver a good user experience. Since combining performance and user experience with lazy loading is important and challenging, we will continue to address this topic in more detail throughout this guide after we have looked at different ways to lazy load images.

Chapter 3: Lazy Loading Techniques for Images

There are two common ways that we load images to a page: the <img> tag and the CSS background-image property. We will first look at the more common of the two, the <img> tag and then move to CSS background images.

Lazy loading images in an image tag

Let’s start with the typical HTML markup for an image:

HTML:
<img src="/path/to/some/image.jpg" />

The markup for lazy loading images is pretty similar.

Step one is to prevent the image load up front. The browser uses the src attribute of the tag to trigger the image load. It doesn’t matter if it is the first or the 1,000th image in your HTML. If the browser gets the src attribute, it will trigger the image to be downloaded, regardless of whether it is in or out of current view.

To defer the load, put the image URL in an attribute other than src. Let’s say we specify the image URL in the data-src attribute of the image tag. Now that src is empty and the browser won’t trigger the image load:

HTML:
<img data-src="https://ik.imagekit.io/demo/default-image.jpg" />

Now that we’re preventing the image from loading, we need to tell the browser when to load it. Otherwise, it will never happen. For this, we check that as soon as the image (i.e. its placeholder) enters the viewport, we trigger the load.

There are two ways to check when an image enters the viewport. Let’s look at both of them with working code samples.

Method 1: Trigger the image load using Javascript events

This technique uses event listeners on the scroll, resize and orientationChange events in the browser. The scroll event is pretty clear cut because it watches where the user is on a page as scrolling occurs. The resize and orientationChange events are equally important. The resize event occurs when the browser window size changes, whereas orientationChange gets triggered when the device is rotated from landscape to portrait, or vice versa.

We can use these three events to recognize a change in the screen and determine the number of images that become visible on the screen and trigger them to load accordingly.

When any of these events occur, we find all the images on the page that are deferred and, from these images, we check which ones are currently in the viewport. This is done using an image’s top offset, the current document top position, and window height. If an image has entered the viewport, we pick the URL from the data-src attribute and move it to the src attribute and the image will load as a result.

Note that we will ask JavaScript to select images that contain a lazy class. Once the image has loaded, we’ll remove the class because it no longer needs to trigger an event. And, once all the images are loaded, we remove the event listeners as well.

When we scroll, the scroll event triggers multiple times rapidly. Thus, for performance, we are adding a small timeout to our script that throttles the lazy loading function execution so it doesn’t block other tasks running in the same thread in the browser.

Here is a working example of this approach.

See the Pen Lazy loading images using event handlers – example code by ImageKit.io (@imagekit_io) on CodePen.

Note that the first three images in this example are loaded up front. The URL is present directly in the src attribute instead of the data-src attribute. This is essential for a good user experience. Since these images are at the top of the page, they should be made visible as soon as possible. There’s no need to wait for JavaScript to load them.

Method 2: Trigger the image load using the Intersection Observer API

The Intersection Observer API is relatively new. It makes it simple to detect when an element enters the viewport and take an action when it does. In the previous method, we had to bind events, keep performance in mind and implement a way to calculate if the element was in the viewport or not. The Intersection Observer API removes all that overhead by avoiding the math and delivering great performance out of the box.

Below is an example using the API to lazy load images. We attach the observer on all the images to be lazy loaded. Once the API detects that the element has entered the viewport, using the isIntersecting property, we pick the URL from the data-src attribute and move it to the src attribute for the browser to trigger the image load. Once this is done, we remove the lazy class from the image and also remove the observer from that image.

See the Pen Lazy loading images using IntersectionObserver – example code by ImageKit.io (@imagekit_io) on CodePen.

If you compare the image loading times for the two methods (event listeners vs. Intersection Observer), you will find that images load much faster using the Intersection Observer API and that the action is triggered quicker as well— and yet the site doesn’t appear sluggish at all, even in the process of scrolling. In the method involving event listeners, we had to add a timeout to make it performant, which has a slightly negative impact on the user experience as the image load is triggered with a slight delay.

However, like any new feature, the support for Intersection Observer API is not available across all browsers.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
584555No1612.1

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
12.2-12.446No767868

So, we need to fall back to the event listener method in browsers where the Intersection Observer API is not supported. We have taken this into account in the example above.

#Chapter 4: Lazy Loading CSS Background Images

A common background image in CSS:

CSS:

.my-class {
  background-image: url('/path/to/some/image.jpg');
  /* more styles */
}

CSS background images are not as straightforward as the image tag. To load them, the browser needs to build the DOM tree as well as the CSSOM tree to decide if the CSS style applies to a DOM node in the current document. If the CSS rule specifying the background image does not apply to an element in the document, then the browser does not load the background image. If the CSS rule is applicable to an element in the current document, then the browser loads the image.

Huh? This may seem complex at first, but this same behavior forms the basis of the technique for lazy loading background images. Simply put, we trick the browser into not applying the background-image CSS property to an element, till that element comes into the viewport.

Here is a working example that lazy loads a CSS background image.

See the Pen Lazy Loading background images in CSS by ImageKit.io (@imagekit_io) on CodePen.

One thing to note here is that the JavaScript code for lazy loading is still the same. We are still using the Intersection Observer API method with a fallback to the event listeners. The “trick” lies in the CSS.

We have an element with ID bg-image that has a background-image. However, when we add the lazy class to the element, we can override the background-image property by setting the value of it to none in the CSS.

Since an element with an ID and a class has higher specificity in CSS than an ID alone, the browser applies the property background-image: none to the element initially. When we scroll down, the Intersection Observer API (or event listeners, depending on which method you choose) detects that the image is in the viewport, it removes the lazy class from the element. This changes the applicable CSS and applies the actual background-image property to the element, triggering the load of the background image.

Chapter 5: Creating a Better User Experience With Lazy Loading

Lazy loading presents a great performance benefit. For an e-commerce company that loads hundreds of product images on a page, lazy loading can provide a significant improvement in initial page loads while decreasing bandwidth consumption.

However, a lot of companies do not opt for lazy loading because they believe it goes against delivering a great user experience (i.e. the initial placeholder is ugly, the load times are slow etc.).

In this section, we will try to solve some concerns around user experience with lazy loading of images.

Tip 1. Use the Right Placeholder

A placeholder is what appears in the container until the actual image is loaded. Normally, we see developers using a solid color placeholder for images or a single image as a placeholder for all images.

The examples we’ve looked at so far have used a similar approach: a box with a solid light gray background. However, we can do better to provide a more pleasing user experience. Below are some two examples of using better placeholders for our images.

Dominant Color Placeholder

Instead of using a fixed color for the image placeholder, we find the dominant color from the original image and use that as a placeholder. This technique has been used for quite some time by Google in its image search results as well as by Pinterest in its grid design.

Pinterest uses the dominant color of the image as the background color for image placeholders. (Source)

This might look complex to achieve, but Manuel Wieser has an elegant solution to accomplishing this by scaling down the image to down to a 1×1 pixel and then scale it up to the size of the placeholder—a very rough approximation but a simple, no-fuss way to get a single dominant color. Using ImageKit, the dominant color placeholder can be obtained using a chained transform in ImageKit as shown below.

<!-- Original image at 400x300 -->
<img src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" alt="original image" /> 

<!-- Dominant color image with same dimensions -->
<img src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-1,h-1:w-400,h-300" alt="dominant color placeholder" />

The placeholder image is just 661 bytes in size compared to the original image that is 12700 bytes—19x smaller. And it provides a nicer transition experience from placeholder to the actual image.

Here is a video demonstrating how this effect works for the user.

See the Pen Dominant color placeholder – Lazy loading images using IntersectionObserver – example code by ImageKit.io (@imagekit_io) on CodePen.

Low Quality Image Placeholder (LQIP)

We can extend the above idea of using a dominant color placeholder further. Instead of using a single color, we use a very low-quality, blurred version of the original image as the placeholder. Not only does it look good, but it also gives the user some idea about what the actual image looks like and the perception that the image load is in progress. This is great for improving the perceived loading experience. This technique has been utilized by the likes of Facebook and Medium.

LQIP image URL example using ImageKit:

<!-- Original image at 400x300 --> 
<img src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" alt="original image" />

<!-- Low quality image placeholder with same dimensions --> 
<img src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300,bl-30,q-50" alt="dominant color placeholder" />

The LQIP is 1300 bytes in size, still almost 10x smaller than the original image and a significant improvement in terms of visual experience over any other placeholder technique.

Here is a video demonstrating how this effect works for the user.

See the Pen LQIP placeholder – Lazy loading images using IntersectionObserver – example code by ImageKit.io (@imagekit_io) on CodePen.

It is clear that using either dominant color or LQIP placeholders provides a smoother transition from the placeholder to the actual image, gives the user an idea of what is to come in place of that placeholder, and improves loading perception.

Tip 2: Add Buffer Time for Images to Load

When we discussed different methods to trigger image loads, we checked for the point of time where the image enters the viewport, i.e. the image load is triggered when the top edge of the image placeholder coincides with the bottom edge of the viewport.

The problem with this is that users might scroll really fast through the page and the image will need some time to load and appear on the screen. Combined with throttling possibly further delaying the load, the user may wind up waiting a few milliseconds longer for the image to show up. Not great for user experience!

While we can get a pretty good user experience using the Intersection Observer API for performance and LQIP for smoother transitions, there is another simple trick that you can use to ensure that the images are always loaded completely when they enter the viewport : introduce a margin to the trigger point for images.

Instead of loading the image exactly when it enters the viewport, load it when it’s, let’s say, 500px before it enters the viewport. This provides additional time, between the load trigger and the actual entry in the viewport, for the images to load.

With the Intersection Observer API, you can use the root parameter along with the rootMargin parameter (works as standard CSS margin rule), to increase the effective bounding box that is considered to find the intersection. With the event listener method, instead of checking for the difference between the image edge and the viewport edge to be 0, we can use a positive number to add some threshold.

See the Pen Lazy loading images with additional threshold – example code by ImageKit.io (@imagekit_io) on CodePen.

If you watch the following screencast closely, you’ll notice that the fifth image in the sequence is loaded when the third image is in view. Similarly, the sixth image is loaded when the fourth is in view, and so on. This way, we are giving sufficient time for the images to load completely and, in most cases, the user won’t see the placeholder at all.

If you didn’t notice earlier, in all our examples, the third image (image3.jpg) is always loaded up front, even though it is outside the viewport. This was also done following the same principal:  load slightly in advance instead of loading exactly at the threshold for better user experience.

Tip 3: Avoid Content Reflow

This is another trivial point, which if solved, can help maintain a good user experience.

When there is no image, the browser doesn’t know the size it will take up. And if we do not specify it using CSS, then the enclosing container would have no dimensions, i.e. it will be read as 0x0 pixels.

When the image loads, the browser will drop it into the screen and reflow the content to fit it. This sudden change in the layout causes other elements to move around and it is called content reflow, or shifting. Michael Scharnagl goes into great depth explaining how this creates an unpleasant user experience.

This can be avoided by specifying a height and/or width for the enclosing container so that the browser can paint the image container with a known height and width. Later, when the image loads, since the container size is already specified and the image fits into that perfectly, the rest of the content around that container does not move.

Tip 4: Avoid Lazy Loading Every Image

This is a mistake that developers often make because it’s super tempting to think that deferring image loads is good all the time. But, like life itself, it is possible to have too much of a good thing. Lazy loading might reduce the initial page load, but it also might result in a bad user experience if some images are deferred when they should not be.

We can follow some general principles to identify which images should be lazy loaded. For example, any image that is present in the viewport, or at the beginning of the webpage, should probably not be lazy loaded. This applies to any header image, marketing banner, logos, or really anything that the user would see when initially landing on a page. Also, remember that mobile and desktop devices will have different screen sizes and hence a different number of images that will be visible on the screen initially. You’ll want to take the device that’s being used into account and decide which resources to load up front and which to lazy load.

Another example is any image that is even slightly off the viewport in the initial load should not probably not be lazy loaded. This is going by the principle discussed above—load slightly in advance. So, let’s say any image that is 500px or a single scroll from the bottom of the viewport can be loaded up front as well.

One more example is if the page is short. It may be just a single scroll or a couple of scrolls, or perhaps there are less than five images outside the viewport. In these cases, you can probably leave lazy loading out altogether. It would not provide any significant benefit to the end user in terms of performance and the additional JavaScript that you load on the page to enable lazy loading will offset any potential gain you get from it.

Chapter 5: Lazy Loading’s Dependency on JavaScript

The entire idea of lazy loading is dependent on JavaScript being enabled and available in the user’s browser. While most of your users will likely have JavaScript enabled, it is essential to plan for cases where it is not.

You could either show a message telling users why the images won’t load and encourage them to either use a modern browser or enable JavaScript.

Another route is to use the noscript tag. However, this approach comes with some gotchas. This question thread on Stack Overflow does a great job addressing these concerns and is a recommended read for anyone looking to address this set of users.

Chapter 6: Popular JavaScript Libraries for Lazy Loading

Since environments and implementation details can vary across browsers and devices, you might want to consider a tried and tested library for lazy loading rather than spinning something up from scratch.

Here is a list of popular libraries and platform specific plugins that will allow you to implement lazy loading with minimal effort:

  • Yet Another Lazy Loader: This library uses the Intersection Observer API and falls back to event-based lazy loading for browsers that do not yet support it. This is great for just about any HTML element but unfortunately does not work on background images in CSS. The good news is that it supports IE back to version 11.
  • lazysizes: This is a very popular library with extensive functionality. It includes support for responsive image srcset and sizes attributes and provides superb performance even though it does not make use of the Intersection Observer API.
  • WordPress A3 Lazy Load: There are plenty of lazy loading WordPress plugins out there, but this one comes with a robust set of features, including a fallback when JavaScript is unavailable.
  • jQuery Lazy: A simple library that uses a jQuery implementation.
  • WeltPixel Lazy Loading Enhanced: A Magento 2 extension.
  • Magento Lazy Image Loader: Another Magento extension, for 1.x.
  • Shopify Lazy Image Plugin (paid): Enable lazy loading on a Shopify site.

Chapter 7: Testing Lazy Load

Once you have implemented lazy loading, you will likely want to check that it’s working as intended. The simplest way would be to open up the developer tools in your browser.

From there, go to Network > Images. When you refresh the page for the first time, you should only see loaded images in the list.

Then, as you start scrolling down the page, other image load requests would get triggered and loaded. You can also notice the timings for image load in the waterfall column in this view. It would help you identify image loading issues if any or issues in triggering the image load.

Another way would be to run the Google Chrome Lighthouse audit report on your page after you have implemented the changes and look for suggestions under the “Offscreen images” section.

Conclusion

We have covered a lot of ground about lazy loading images! Lazy loading—if implemented well—can have significant benefits on your site’s performance the loading performance while reducing the overall page size and delivery costs, thanks to deferring unnecessary resources up front.

So, what are you waiting for? Get started with lazy loading images now! And, if you need a little reminder of how this works, save a copy of the following infographic.

How to Monetize Your Open Source Project and Stay Alive

Chen Ravid is a free software enthusiast and serial entrepreneur. He is one of the founding members and VP product at xs:code, a monetization platform for open source projects.
 xs:code, a monetization platform for open source projects.

Why Monetize?

Open-source developers are not in it for the money. They create amazing software projects we all use every day, spending hundreds, if not thousands of hours of their spare time in the process. The reward? Recognition, a sense of accomplishment and bragging rights on their next job interview. This was enough for most developers for a long time, but in the past couple of years, and as commercial usage of open-source increased, we’ve seen growing frustration among developers, who are flooded by requests, bugs and questions – from people using their code for free. Some developers even got threats (!) from disgruntled users, demanding the developers fix a bug or implement a new feature they needed.

This frustration is increased, when developers see their open source projects are used to generate revenue for companies, while they are getting nothing for their talent, work and efforts. It seems unfair, and rightfully so. Developers need a way of getting the resources they need, to keep developing their projects. They need to be able to afford the time to work on their projects, get hosting servers, pay others to help out and more. Without any form of compensation from the people using their code – that is just not sustainable in the long run. So, the goal is not to get rich. The goal is getting the resources to build better software. Monetization is the way to achieve that goal.

The Challenges

Monetization is something that is usually out of the scope of what developers are interested in, and usually requires dealing with non-programming tasks such as setting up billing, handling payment processing and taxes, addressing legal issues and more. Because of the complexity involved, a lot of developers just give up before even trying. They don’t want to worry about financials and other corporate nightmares. They want to write code – not run a software company.

Besides the complexities of charging users for using their code, there are other aspects that make things even more complicated – how do you incentivize your users to pay while keeping your code open source? How do deal with other developers who contributed code to your project? Should they be compensated as well?

It’s a complicated task, and there are not a lot of easy solutions.

Why Not Use Donations?

To meet the monetization challenges, several donation platforms have emerged, offering developers to ask for donations from users using their code. That seems like the proper thing to do. If you are using a project for free and make money using it, you should be happy to donate to its creator, right? The reality is, unfortunately, that the overwhelming majority of companies using open source, do not donate at all. Because of the inherent nature of donations, being non-mandatory, no one has a strong incentive to donate, let alone on an ongoing basis. This makes donations a very limited way of monetizing, and many developers who tried it report that their revenue from donations is marginal, if not zero. Donations are an all-carrot-no-stick approach, and if developers need a steady stream of revenue to afford to make their projects better – they need something they can rely on. They need a stick to go with their carrot.

A New Way to Monetize

To overcome the barriers mentioned above, we at xs:code came up with a solution, that we believe can help make monetization so simple, that any open-source developer can start doing it today. xs:code is a platform that allows developers to offer subscription-based access to a private repository the keep on their Github account. Usually, open-source projects are kept in a public repository, freely accessible by anyone.

Our platform allows developers to keep another version of their project, that is connected to xs:code, and accessible only for users who pay for a subscription. The developer can decide how the two versions are different, and keep developing on Github as usual. The platform handles everything from billing, payment processing, invoicing and legal. The trick here is to make a smart decision on how the paid and free versions differ, so users have an incentive to pay. There are several options to do that, each with its own advantages.

Dual Licensing vs. Freemium

One option is often referred to as “dual licensing”. The developer keeps a version with a copyleft license (such as GPL) on his public Github repository, and the exact same code, with a permissive license (such as MIT), on his private repository. GPL licensed code, usually means the code cannot be used in commercial software, as it requires to change the entire code around it to GPL as well. That means companies using the open-source code will need to make their entire code base open source, and that is usually not viable most companies. MIT licensed code, can be used freely, no restrictions apply. If a company wants to use an open-source project with an MIT license, they would need to buy a subscription on xs:code.

Another option, usually called “freemium” or “Open core”, means that the developer keeps a “Lite” version on his Public repository, and another “Pro” or “Premium” version on his private repository. The “Pro” version can have more features, better support, paid hosting, or whatever the developer wants to offer.

There are many other options to separate the paid and free versions, and developers are only limited by their imagination and creativity to come up with ways to offer value to their brand new paying customers.

Paying Contributors

Code contributions are one of the key elements that made open source so incredible. When developers from all over the world contribute their time and talent to help make projects better – we all win. When the developer of a project starts to generate revenue from his code, it only makes sense the developers who contributed would also be entitled to their fair share. xs:code makes that simple, by allowing developers to grant contributors a percentage of their revenue. We see this as not only fair, but essential for keeping contributors motivated, and offering new contributors an opportunity to benefit from helping with making a project better.

Conclusion

Open source is an incredible thing. But without proper compensation for developers and contributors, it might not last – and that is bad for everyone involved in software development. In order to keep open source alive, a clear path of compensation for developers is crucial. I truly hope that our humble contribution to this cause would help make open source better – for all of us.

Interested in monetizing your project? Visit xscode.com

7 Best Notepad++ Alternatives

Notepad is among the most popular applications, and that is why Microsoft has included it in every version of Windows. It has a long history, and it has maintained a simple and clean interface. The simplicity of this text editor I use, and that is why most people have developed a preference over it. But wait? The developers keep on making improvements to suit your needs.

There is another text editor outside notepad, which is notepad ++. It has a bunch of features that allow you to complete more complex tasks. It has syntax folding, syntax highlighting when writing code and multi editing. Once you are in a good position to use notepad++ you will need WinRAR to help you compress storage required to store data by removing unnecessary data to pave the way for what you want to save. You can simply get it at rocketfiles.com​.

Therefore with such an amazing text editor, you will not miss having its alternatives, and that is why in this article I will focus on its alternatives.

7 Best Notepad++ Alternatives

1. Brackets

his is a typical Text editor that offers unique tools for front end web developers and designers. It offers the following features:-

Features

  1. It has support for an extension
  2. It offers a live preview, which implies you can edit the code using the editors and as well preview it in the browser within the editor.
  3. It offers inbuilt supports for SCSS
  4. It autocompletes texts
  5. It has syntax highlighting
  6. It can automatically identify a code

Pros

  1. Easy to install and use
  2. It is an open-source
  3. You can add your plugins
  4. You can use it without additional cost

Cons

It offers less support for back end developers.

2. Sublime Text

It is among the popular text editor across all the platforms since it is capable of supporting various programming languages. It is highly responsive such that it automatically resizes tab size when you open multiple tabs.

Features

  1. It offers complete keyboard support
  2. It is an open-source
  3. It is not mandatory to purchase the license
  4. No costs during installation

Pros

  1. It has auto-indentation feature
  2. It is easy to install and use
  3. It has intelligence sense features

Cons

It lacks git plugins.

3. Atom

It is a free open source editor with lots of features. It is compatible with Linux, Windows, and Mac OS.

Features

  1. It can autocomplete texts
  2. It automatically identifies codes
  3. It provides syntax highlighting

Pros

  1. It is easy to install
  2. Free, open-source editor
  3. It offers several plugins to enhance its reflectiveness
  4. It has an elegant interface

Cons

  1. It is a bit slower when you compare to the other editors
  2. It is large in size

4. Visual Studio Code

This is also another popular text editor that can support multiple programming languages. It is compatible with various operating systems, and it offers competent community support.

Features

  1. It has an inbuilt feature which is done signed for file comparison
  2. It is an open-source editor
  3. It offers an inbuilt Git support
  4. It can be installed across multiple operating systems
  5. It supports user commands

Pros

  1. It is easily customizable
  2. It is light in weight

5. Netbeans

This is yet another text editor that is majorly used for Java development. It is an Integrated Development Environment that is based on the concept of modularity.

Features

  1. It can autocomplete various texts
  2. It automatically detects the codes
  3. It has syntax highlighting features

Pros

  1. It offers easy debugging feature
  2. It is an open-source text editor
  3. It is based on the modular concept
  4. It is an ant-based project system
  5. It can support maven

Cons

  1. It is heavy
  2. It offers less skin customization

6. TextMate

This is a typical text editor, which is an alternative for notepad++, and it can be used for general purposes. Here are some of its dominant features:-

Features

  1. It is customizable
  2. It provides syntax highlighting
  3. It autocompletes texts
  4. It automatically identifies codes

Pros

  1. It has a live preview feature
  2. It can list function in the current document

Cons

It can only be installed in Mac OS.

7. TextPad

This text editor was initially developers to be used in Microsoft OS by Helios Software solution. To be able to use it, you will have to purchase it.

Features

  1. Supports multiple programming languages
  2. It is capable of maintaining block indent
  3. You can scroll multiple files synchronically
  4. It offers automatic code identification
  5. It automatically integrates JDK

Conclusion

Notepad++, which is available and free at rocketfiles.com,  is popular because of its unique features. There are also alternatives that I have listed in this article that can actively perform similar tasks. You can use any of these editors for programming or general purposes. The good thing about most of these text editors is that they are easy to install and use. Most of them are also free except text pad, which you have to purchase it before using it. Generally, most of these text editors can compliment notepad ++ perfectly.

C# Local Database – How to Connect and Use Local Database (Sql Server)

Leave a comment

A local database is very essential for developing small
scale C# applications, because it doesn’t requires a server to store the data.
So this article is on how to connect and use C# local database.Well I am pretty sure that most of you would thing, what is
a Local Database? A local database is database which can be used locally on a computer, it doesn’t require a server. The advantage of using a local database is you can easily migrate your project from one computer to another (you don’t need to setup/configure a database server). Microsoft provides local database within visual studio which is often called as SQLCE (CE stands for compact
edition).

So let’s get started!

1. First of all create a new project in C# (make sure you
select the Netframe version above 3.5, because local database is supported in Netframe version 4.0 or above).

2. Now right click your project under solution explorer
-> select add new item.

3. A new window will be popped up, search for local database and add it.

4. Again a new window will be popped up which ask up to choose
a Database Model select Dataset and hit Next & hit Finish.

5. Now we have added a local database in our C# application.

6. Now we need to establish our connection between our local database & C# application.

7. So simply add a button from toolbox and change the text to Start Connection.

8. Double click your form and import the following:

using System.Data.SqlServerCe;

Note: If you are facing an error then watch the video tutorial.

9. Double click the button and add the following code:

SqlCeConnection Conn=new SqlCeConnection(//specify the connection string here)

10. In order to find the connection string, go to solution
explorer and open app.config file.

11. In the above screenshot you can see the connection string
just copy it and paste it here inside the brackets.

SqlCeConnection Conn=new SqlCeConnection(//specify the connection string here)

12. We are almost done now we just need to open the
connection so just double click the button and add the following code:

Conn.Open();
MessageBox.Show(“Connection Started”);

That’s it!! Hope you enjoyed the article, please do share
it!

Using a Lambda Expression Over a List in C#

Leave a comment

This article exemplifies methods for performing several tasks and queries over a set of records in a List.

Sometimes if you have a set of records in a List, it becomes quite easy to query on a list using a Lambda Expression. This article exemplifies methods for performing several tasks and queries over a list. Create a new console project and go to Program.cs See sample code below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace LamdaExpressionsOnList
{
    class Program
    {
        static void Main(string[] args)
        {
          //Your Code
        }
    }
}

Suppose we have a “Person” class that has the following members: 

class Person  
{  
    public string SSN;  
    public string Name;  
    public string Address;  
    public int Age;  
    public Person(string ssn, string name, string addr, int age)  
    {  
        SSN = ssn;  
        Name = name;  
        Address = addr;  
        Age = age;  
    }  
}

Now we create a list of the Person objects in which we have to perform several operations like finding a person on certain conditions, removing a person’s record etc. These types of operations can be easily performed using a “Lambda Expression”. We create the list and populate them in the following way: 

List<Person> listPersonsInCity = new List<Person>();  

listPersonsInCity.Add(new Person("203456876", "John", "12 Main Street, Newyork, NY", 15));  

listPersonsInCity.Add(new Person("203456877", "SAM", "13 Main Ct, Newyork, NY", 25));  

listPersonsInCity.Add(new Person("203456878", "Elan", "14 Main Street, Newyork, NY", 35));  

listPersonsInCity.Add(new Person("203456879", "Smith", "12 Main Street, Newyork, NY", 45));  

listPersonsInCity.Add(new Person("203456880", "SAM", "345 Main Ave, Dayton, OH", 55));  

listPersonsInCity.Add(new Person("203456881", "Sue", "32 Cranbrook Rd, Newyork, NY", 65));  

listPersonsInCity.Add(new Person("203456882", "Winston", "1208 Alex St, Newyork, NY", 65));  

listPersonsInCity.Add(new Person("203456883", "Mac", "126 Province Ave, Baltimore, NY", 85));  

listPersonsInCity.Add(new Person("203456884", "SAM", "126 Province Ave, Baltimore, NY", 95));

Now we see how we can do various complex operations on the list using a one-line simple Lambda expression. 

1. The following code retrieves the first two persons from the list who are older than 60 years:

Console.WriteLine("\n-----------------------------------------------------------------------------");  
Console.WriteLine("Retrieving Top 2 aged persons from the list who are older than 60 years\n");  
foreach (Person person in listPersonsInCity.FindAll(e => (e.Age >= 60)).Take(2).ToList())  
{  
    Console.WriteLine("Name : " + person.Name + " \t\tAge: " + person.Age);  
}
Console Output

2. The following code checks any person’s age that is between 13 and 19 years:

Console.WriteLine("\nChecking whether any person is teen-ager or not...");  
if (listPersonsInCity.Any(e => (e.Age >= 13 && e.Age <= 19)))  
{  
    Console.WriteLine("Yes, we have some teen-agers in the list");  
}
Console Output

3. The following code checks whether all the people’s ages are greater than Ten years or not: 

Console.WriteLine("\nCheking whether all the persons are older than 10 years or not...");  
if ( listPersonsInCity.All(e => (e.Age > 10)))  
{  
    Console.WriteLine("Yes, all the persons older than 10 years");  
}
Console Output

4. The following code gets the average of all the people’s ages: 

Console.WriteLine("\nGetting Average of all the person's age...");  
double avgAge = listPersonsInCity.Average(e => e.Age);  
Console.WriteLine("The average of all the person's age is: "+ avgAge);

5. The following code checks whether a person having the name ‘SAM’ exists or not: 

Console.WriteLine("\nChecking whether a person having name 'SAM' exists or not...");  
if (listPersonsInCity.Exists(e => e.Name == "SAM"))  
{  
    Console.WriteLine("Yes, A person having name  'SAM' exists in our list");  
}
Console Output

6. The following code checks at what position a person having the name ‘Smith’ exists in the list: 

Console.WriteLine("\nChecking the index position of a person having name 'Smith' ...");  
int indexForSmith = listPersonsInCity.FindIndex(e => e.Name == "Smith");  
Console.WriteLine("In the list, The index position of a person having name 'Smith' is : " + indexForSmith);
Console Output

7. The following code retrieves the oldest person in the list: 

Console.WriteLine("\nGetting the name of the most aged person in the list ...");  
Person p = listPersonsInCity.First(m=> m.Age == (listPersonsInCity.Max(e => e.Age)));  
Console.WriteLine("The most aged person in our list is: "+ p.Name +" whose age is: "+ p.Age);
Console Output

8. The following code gets the total of all the people’s ages: 

Console.WriteLine("\nGetting Sum of all the person's age...");  
int sumOfAges = listPersonsInCity.Sum(e => e.Age);  
Console.WriteLine("The sum of all the persons's age = "+ sumOfAges);
Console Output

9. The following code skips each person whose age is less than 60: 

Console.WriteLine("\nSkipping every person whose age is less than 60 years...");  
foreach (Person pers in listPersonsInCity.SkipWhile(e => e.Age < 60))  
{  
Console.WriteLine("Name : "+ pers.Name + " \t\tAge: "+ pers.Age);  
}
Console Output

10. The following code retrieves all the people until we find a person with a name beginning with any letter other than “S” : 

Console.WriteLine("Displaying the persons until we find a person with name starts with other than 'S'");  
foreach (Person pers in listPersonsInCity.TakeWhile(e => e.Name.StartsWith("J")))  
{  
    Console.WriteLine("Name : " + pers.Name + " \t\tAge: " + pers.Age);  
}
Console Output

11. The following code checks whether all the people have their SSN or not: 

Console.WriteLine("\nChecking all the persons have SSN or not ...");  
if(listPersonsInCity.TrueForAll(e => e.SSN != null))  
{  
    Console.WriteLine("No person is found without SSN");  
}
Console Output

12. The following code removes all the people having the name “SAM”: 

Console.WriteLine("\nRemoving all the persons record from list that have "SAM" name");  
listPersonsInCity.RemoveAll(e => (e.Name == "SAM"));  
if (listPersonsInCity.TrueForAll(e => e.Name != "SAM"))  
{  
    Console.WriteLine("No person is found with 'SAM' name in current list");  
}
Console Output

13. The following code searches for the person having “203456876” as their SSN: 

Console.WriteLine("\nFinding the person whose SSN = 203456876 in the list");  
Person oPerson = listPersonsInCity.Find(e => (e.SSN == "203456876"));  
Console.WriteLine("The person having SSN '203456876' is : " + oPerson.Name + " \t\tAge: " + oPerson.Age);
Console Output

Lambda Expressions are a powerful addition to C# Programming. This article attempts to describe lambda expressions in simple terms to pave the way for some powerful uses of this construct.

Top 7 Photo Editors Like Photoshop in 2019

Leave a comment

Looking for free photo editors like Photoshop to make photos and designs more professional? Adobe Photoshop is the dream of any designer and retoucher since it offers a professional toolset for creative process.

However, the biggest difficulty everyone faces is its quite high monthly price, which often becomes a deal-breaker and leads to many people searching for Photoshop torrents to avoid paying such a huge sum for Adobe products.

Luckily, it’s possible to find a photo editor like Photoshop that is either completely free or cheaper and is capable of doing almost everything that Photoshop can, and sometimes even more.

7 Photo Editors Like Photoshop

Even though Adobe Photoshop is often viewed as the best option among graphics editors, its capabilities are frequently superfluous. Other than that, Adobe is transferring more and more users to the “Cloud” system, which isn’t to everyone’s taste.

Finally, during the last few years, people have been complaining more and more about performance drops when using Adobe software due to the heavy load it puts on the processor. It’s often enough to open a couple of projects in Photoshop even on a powerful PC and you won’t even be able to use your browser comfortably.

Currently, Photoshop remains the leading choice among professionals, but more and more users are searching for decent free photo editors like Photoshop.

Here we have compiled list of some best photoshop alternatives.

1. Affinity Photo

Affinity Photo started to create a stir in the creative community almost from the moment it was released. It’s probably the most credible photo editor similar to Photoshop that we’ve seen to this day.

The program supports Photoshop’s signature file standards and is aimed at photographers and designers while costing significantly less.

Being completely compatible with Photoshop and other file formats, it targets specifically professional photographers and designers. While Affinity Photo is much cheaper than Photoshop (without a subscription), its creators state that their software is actually better, promising superior performance and fewer errors.

Frankly speaking, the performance boost you receive will probably highly depend on what hardware you’re using (the program was developed for using the latest quadcore technology).

Pros:

  • Works with RAW and PSD files
  • RGB, CMYK, LAB and Greyscale support
  • Layer-focused image editing

Cons:

  • Doesn’t have premade lens-specific corrections
  • Users can’t customize the workspace
  • Not very beginner-friendly

2. GIMP

If you want to get a free photoshop alternative that is just as powerful and multifunctional, then GIMP is one of the best alternatives. It is free, open-source, which allows a huge number of volunteers to continuously improve it.

Thanks to that fact, GIMP has loads of plugins and scripts written for it and it can also work with plugins for Adobe Photoshop. Another benefit of GIMP is that it appeared all the way back in the mid-90s so you can find a huge number of free courses and guides on the web.

GIMP offers a wide selection of tools and it’s a fantastic option if you’re looking for a free photo editor similar to Photoshop. The UI is slightly different from Photoshop’s but you can modify it to your liking.

If you find a “monstrous” program with huge system requirements and a scary price tag unappealing – GIMP is the option for you.

Pros:

  • Constant maintenance and updates that solve relevant issues and add new functions
  • Smooth performance on all platforms
  • Extremely versatile and easily customizable with plugins and scripts

Cons:

  • I didn’t experience any problems but heard some people suffer from a couple of bugs
  • Doesn’t support 16bit color channels
  • Some functions are in development for way too long

3. Photo Pos Pro

Photo Pos Pro is another decent photo editor like Photoshop that strives to be as user-friendly as possible. It has separate modes for beginners and advanced users. In beginner-mode, you can apply filters in a single click and perform basic photo corrections.

The professional mode has a UI similar to Photoshop. Most find its interface to be more intuitive and comprehensible than GIMP.

Alas, this free photo editor like Photoshop has a very serious flaw. The maximum size of saved files is limited to 1024×2014 pixels.

If you need to work with larger files, the photo editor will offer you to purchase the paid version for $20. That’s a bit unpleasant, but still several times cheaper than Photoshop.

Pros:

  • Capability to work with layers
  • All kinds of brushes, templates, textures and gradients
  • Tools for batch, manual and automatic color correction

Cons:

  • No way to create your own brushes
  • Rather poor printing preparation functionality

4. Pixlr Editor

Pixlr Editor is a rather unusual photo editor similar to Photoshop. It’s available in several versions, including PC, mobile and as an online editor. The web version is the sole reasonable Photoshop replacement since it’s the only one with layer support.

Sadly, the web version of this program can’t be set to full-screen since there will still be unused space on the right. However, that’s the only serious drawback of Pixlr Editor.

All tools found in Ps are available and work great. Overall, this is the perfect photo editor app like Photoshop for situations when you need to edit an image but you don’t have the right to install a downloadable editor.

Pros:

  • Available for free
  • Has its own smartphone app
  • Plenty of tools to work with

Cons:

  • Can be slightly overwhelming for beginners
  • Requires Internet connection

5. Pixelmator

Pixelmator is a universal graphics editor build on the principles of simplicity and accessibility for everyone. The program is available only on iOS and MacOS, which explains such an approach.

Pixelmator positions itself as a photo editor like Photoshop that is simpler and more intuitive.

Instead of a single workspace, here we have the main window and movable panels that you can open in the View menu or by using shortcuts. The number of picture editing tools isn’t large but won’t leave you complaining either.

I also want to mention the smart selection function that was added with the latest update. My subjective experience suggests that this option works better than in Photoshop and is slightly better visible.

There’s no need to impose this editor on professionals, but it’s a perfect fit for regular users. One of the most “magical” capabilities of Pixelmator is object removal. You pick the diameter of the selection, add a couple of brush strokes, and the photo will be cleared of any excess objects.

Pros:

  • Clean user-friendly UI
  • Large choice of effects other than photo adjustments
  • Drawing tools are efficient and error-free

Cons:

  • Doesn’t offer non-destructive editing or a history panel
  • No CMYK and RAW support

6. PaintNet

Paintnet represents a Windows-based free photo editor like Photoshop supplied by Microsoft. However, don’t let that fact scare you: despite being a default program, it’s a surprisingly multifunctional and useful tool.

This option focuses on ease of use and is better suited for photo editing than artistic creations. Nonetheless, it includes a variety of special effects that allow you to easily create an artificial perspective, mix and move pixels on the canvas, select and copy areas, etc.

A solid selection toolset, layer support and such settings as curves and brightness/contrast mean that PaintNet is a wonderful free photo editor similar to Photoshop, especially if you don’t need the latest additions to Ps’ toolset.

Pros:

  • Allows working with image layers
  • Updates come out almost every month
  • Contains a satisfying number of effects

Cons:

  • Lack of functions for professional graphics design

7. Adobe Photoshop Express

Adobe Photoshop Express can be considered a lighter, more limited version of Photoshop. This editor can be found online or as an app for Windows, iOS and Android. This is the simplest solution described in the article.

It doesn’t have layer support, plugins or brushes and works only with JPEG, JPG and JPE images below 16MB. You can’t even crop photos.

The only things you can find in this photo editor app like Photoshop are some basic settings and a collection of beautiful filters that you can use to enhance a photo before posting it on social media.

As you can see, it isn’t suited for deep photo editing so you might as well go with a trustworthy professional photo editing service online instead for a couple of backs.

Pros:

  • Incredibly easy to use
  • Availability of basic tools
  • Stable performance

Cons:

  • Lack of most professional tools
  • No RAW support
  • Max file size of 16MB

Conclusion

If you ever start thinking about replacing Photoshop, I hope you’ll take note of some of the offered programs. If you need to perform complex image editing that requires using many different tools, then Affinity Photo, GIMP or Pixelmator are perfectly suited for such a task. If all you need is to make a couple of simple adjustments (size change, rotation, basic color correction), then you should take a closer look at PaintNet or Photo Pos Pro.

If you need a photo editor like Photoshop that you can use online, straight from your browser – Pixlr and Adobe Photoshop Express are there for you. Interested in other Adobe products, read more about a legal way to download Lightroom free.

I hope you will love these photoshop alternatives. If you know about any other good editor then please mention in comments, I will love to add it to the list.

C# Analog Clock Program

Leave a comment

In this tutorial we are going to use a bit of graphics class to design a C# analog clock. We have also used a timer to continuously move our clock’s pointer.

Concept

  • We will first initialize some angle values to second, minute, hour hand.
  • Then draw the clock using the graphics class, save it as a bitmap variable and load it in the picturebox.
  • Finally Use the timer to move the second hand.

Instructions

  • Create a new windows form applicaton project in visual c#.
  • Add a picture box on the form.
  • Double click the form to switch to code view. 
  • Delete all the existing code and paste the code given below.

C# Analog Clock Program

Code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
 
namespace AnalogClock
{
    public partial class Form1 : Form
    {
        Timer t = new Timer();
 
        int WIDTH = 300, HEIGHT = 300, secHAND = 140, minHAND = 110, hrHAND = 80;
 
        //center
        int cx, cy;
 
        Bitmap bmp;
        Graphics g;
 
        public Form1()
        {
            InitializeComponent();
        }
 
        private void Form1_Load(object sender, EventArgs e)
        {
            //create bitmap
            bmp = new Bitmap(WIDTH + 1, HEIGHT + 1);
 
            //center
            cx = WIDTH / 2;
            cy = HEIGHT / 2;
 
            //backcolor
            this.BackColor = Color.White;
 
            //timer
            t.Interval = 1000;      //in millisecond
            t.Tick += new EventHandler(this.t_Tick);
            t.Start();
        }
 
        private void t_Tick(object sender, EventArgs e)
        {
            //create graphics
            g = Graphics.FromImage(bmp);
 
            //get time
            int ss = DateTime.Now.Second;
            int mm = DateTime.Now.Minute;
            int hh = DateTime.Now.Hour;
 
            int[] handCoord = new int[2];
 
            //clear
            g.Clear(Color.White);
 
            //draw circle
            g.DrawEllipse(new Pen(Color.Black, 1f), 0, 0, WIDTH, HEIGHT);
 
            //draw figure
            g.DrawString("12", new Font("Arial", 12), Brushes.Black, new PointF(140, 2));
            g.DrawString("3", new Font("Arial", 12), Brushes.Black, new PointF(286, 140));
            g.DrawString("6", new Font("Arial", 12), Brushes.Black, new PointF(142, 282));
            g.DrawString("9", new Font("Arial", 12), Brushes.Black, new PointF(0, 140));
 
            //second hand
            handCoord = msCoord(ss, secHAND);
            g.DrawLine(new Pen(Color.Red, 1f), new Point(cx, cy), new Point(handCoord[0], handCoord[1]));
 
            //minute hand
            handCoord = msCoord(mm, minHAND);
            g.DrawLine(new Pen(Color.Black, 2f), new Point(cx, cy), new Point(handCoord[0], handCoord[1]));
 
            //hour hand
            handCoord = hrCoord(hh % 12, mm, hrHAND);
            g.DrawLine(new Pen(Color.Gray, 3f), new Point(cx, cy), new Point(handCoord[0], handCoord[1]));
 
            //load bmp in picturebox1
            pictureBox1.Image = bmp;
 
            //disp time
            this.Text = "Analog Clock -  " + hh + ":" + mm + ":" + ss;
 
            //dispose
            g.Dispose();
        }
 
        //coord for minute and second hand
        private int[] msCoord(int val, int hlen)
        {
            int[] coord = new int[2];
            val *= 6;   //each minute and second make 6 degree
 
            if (val >= 0 && val <= 180)
            {
                coord[0] = cx + (int)(hlen * Math.Sin(Math.PI * val / 180));
                coord[1] = cy - (int)(hlen * Math.Cos(Math.PI * val / 180));
            }
            else
            {
                coord[0] = cx - (int)(hlen * -Math.Sin(Math.PI * val / 180));
                coord[1] = cy - (int)(hlen * Math.Cos(Math.PI * val / 180));
            }
            return coord;
        }
 
        //coord for hour hand
        private int[] hrCoord(int hval, int mval, int hlen)
        {
            int[] coord = new int[2];
 
            //each hour makes 30 degree
            //each min makes 0.5 degree
            int val = (int)((hval * 30) + (mval * 0.5));
 
            if (val >= 0 && val <= 180)
            {
                coord[0] = cx + (int)(hlen * Math.Sin(Math.PI * val / 180));
                coord[1] = cy - (int)(hlen * Math.Cos(Math.PI * val / 180));
            }
            else
            {
                coord[0] = cx - (int)(hlen * -Math.Sin(Math.PI * val / 180));
                coord[1] = cy - (int)(hlen * Math.Cos(Math.PI * val / 180));
            }
            return coord;
        }
    }
}

Difference between GET and POST Method

Leave a comment

Http protocol supports the following methods to retrieve data such as get, post, put, delete etc. In this article, I will tell you about the difference between GET and POST methods.

These methods are basically used to get and send any data. Because of these methods, the request-response between server and client exist. To send data streams we use these two methods. GET and POST are the most common HTTP methods.

Difference between GET and POST Method

GETPOST
We add parameters in URL and get data in response.Send additional data from the client or browser to the server.
Sends data as part of URI (uniform resource identifier)Sends data as HTTP content.
get return same results every time.The post method implements in that way it changes with every request.
We can send limited data in the header. We can send a large amount of data because its part of the request body.
It is not much secure because data is exposed to URL and we can easily bookmark it and send it. It  is more secure because data is passed in the request body and user not able to bookmark it
You can cache the data.You cannot cache post request data.
GET is bounded by the max. URL length continued by the browser and web server.POST doesn’t have such conditions.
GET is used to request data from a particular resource.POST is used to send info to a server to create/update a resource.
parameters passed  in URLparameters passed in body
This is not happening in get method.Use POST for destructive things such as creation, editing, and deletion.
get is used for fetching documents.post used for updating data.
in get we pass things like customer id, uId to get a response.post request sends information to server like customer info, file upload etc.

Check out the example of both requests.

GET Request:

GET https://api.github.com/users/{name}

Here you can pass name according to that you will get data.

GET https://api.github.com/users/sniper57

POST Request:

In this you will have to send content-type such as multipart/form-data, application/json,  application/x-www-form-urlencoded and object or data that you have to pass in body.

Host: foobar.example

Content-Type: application/json

Object- [{name1:value1},{name2:value2}]

In this you are posting JSON data to API.

Comment down below if you have any queries related to get vs post methods.

Xiaomi launches Mi Watch, its $185 Apple Watch clone

Leave a comment

Xiaomi,  which competes with Apple for the top position in the wearable market, today made the competition a little more interesting. The Chinese electronics giant has launched its first smartwatch called the Mi Watch that looks strikingly similar to the Apple Watch in its home market.

The Mi Watch, like the Apple Watch, has a square body with a crown and a button. It sports a 1.78-inch AMOLED display (326 ppi) that offers the always-on capability and runs MIUI for Watch, the company’s homegrown wearable operating system based on Google’s Wear OS.

Inside the metal housing — aluminum alloy with a matte finish — are microphones on two sides for recording audio and taking calls, and a loudspeaker on the left to listen to music or incoming calls. The Mi Watch, which comes in one size — 44mm — has a ceramic back, which is where the charging pins and a heart rate sensor are also placed.

The Mi Watch is powered by Qualcomm’s Snapdragon Wear 3100 4G chipset with four Cortex A7 cores clocked at 1.2GHz, coupled with 1GB of RAM and 8GB storage. The company says its first smartwatch supports cellular connectivity (through an eSIM), Wi-Fi, GPS, Bluetooth, and NFC for payments. The Mi Watch should last for 36 hours on a single charge on cellular mode, the company claimed.

The Mi Watch will also help users track their sleep, performance while swimming, cycling and running, and also measure their heart rate.

Over 40 popular Chinese apps such as TikTok and QQ Messenger are available for the Mi Watch on day one. The company’s own XiaoAI assistant is the default virtual digital assistant on the watch.

The Mi Watch is priced at CNY 1,299 ($185) and will go on sale in the country next week. There’s no word on international availability just yet, but if the past is any indication, Xiaomi will likely bring the device to India, Singapore, Indonesia and other markets in coming quarters.

The company says a variant of the Mi Watch that sports a sapphire glass and stainless steel will go on sale next month in China. It is priced at CNY 1,999 ($285).

Xiaomi is no stranger to the wearable market. The company’s fitness trackers — that cost under $25 and sport colorful displays and last for weeks on a single charge — are incredibly popular in Asian markets.

This is also not the first time Xiaomi has been accused of taking too much inspiration from Apple. The early smartphones from Xiaomi looked very similar to the iPhones. But in recent years, its products have carried a little more independence and originality. Well, most smartphones — not all. Also this year, the company was accused of cloning Apple’s cartoony Memoji.

You can now try Microsoft’s web-based version of Visual Studio

Leave a comment

Earlier this year, at its Build developers conference, Microsoft announced that it was working on a web-based version of its Visual Studio IDE. At the time, Visual Studio Online went into a private preview, open to a select number of developers. Now, at its Ignite conference, the company has opened the service to all developers who want to give it a spin.

With Visual Studio Online, developers will be able to quickly spin up a fully configured development environment for their repositories. From there, they can use the web-based editor to work on their code.

“Visual Studio Online brings together Visual Studio, cloud-hosted developer environments and a web-based editor that’s accessible from anywhere to help developers be more productive than ever,” Microsoft notes in its press materials. “As development becomes more collaborative and open source workflows, like pull requests, become more pervasive, developers need to be able to switch between codebases and projects quickly without losing productivity.”

In its current form, the service is deeply integrated with Microsoft’s GitHub (no surprise there), but the company notes that developers can also attach their own physical and virtual machines to their Visual Studio-based environments. Developers also can create these online environments right from Visual Studio Code, the company’s increasingly popular free code editor for Windows, Mac and Linux.

The cloud-based environments, as well as extension support for Visual Studio Code, are now in preview.