Digital Asset Management System – A must-have for all businesses

What are digital assets?

Wikipedia definition: “​​A digital asset is anything that exists in a digital format and comes with the right to use”. For example – video, music, documents, images, presentations, digital tokens (including crypto), data, or anything an organization or individual owns or has the right to use.

As we move ahead with digital transformation more and more businesses are increasingly dependent on digital assets. Today, even existing physical assets such as documents and prints are actively digitized. Digital assets are convenient as they occupy less physical space, are easy to retrieve, and can be transported/transferred easily.

Businesses who have already made the shift to digital assets include, 

  • Legal / Law firms
  • Advertising Agencies, Media houses
  • Broadcasting
  • HR and Recruitment firms
  • Movie Production houses
  • OTTs

Major industries such as retail, manufacturing, import-export houses, insurance, finance, and logistics companies are all in various stages of digital transformation.

With increasing convenience comes its own set of problems, and in this case, it is the management of the digital assets that we create and convert from the existing ones. This is especially true for Business Service companies that create, use and distribute different types of documents and related content. 

How it starts

Every individual and organization starts by organizing their files and their assets in a traditional hierarchical system on their local computers,  USB storage devices,  and of late on the cloud ( Google Drive, email, Dropbox, etc.). Once there is a need to share these assets and use them in collaboration, they resort to shared drives and transfer these assets via email, etc. 

While this kind of organization works on a small scale, the system gets easily overwhelmed with an increase in the number of users and assets.  

Eventually, the challenges present themselves:

  • Single paradigm of classifying our assets – different users / functional-units classify assets differently. E.g. Sales dept will want contracts classified by customers or geography while the accounts teams may want them classified by chronology, billing, risk etc. In short, one size does not fit all.
  • Sharing assets with others – Providing access to “other teams” or third parties is initially simple and can be monitored. However over time, as the content and the teams involved increases, it can spiral into a complete chaos. The most ideal use case would be to provide access to specific assets and probably for a finite amount of time. This brings us to the next point.
  • Security of assets – In 2015, all the first four episodes of the Game of Thrones season surfaced online before it even got aired because the Media outlets provided the episodes for viewing as a part of the review process. This was catastrophic. Sensitive content especially of monetary value needs to be secured and there should be an audit trail to trace any leaks.
  • Version control – While presentation.ppt,  presentation1.ppt, presentation-ver2.ppt would work for an individual or at a small team level, it would require additional tracking effort or worse cause confusion under unwanted circumstances.
  • Automation – Digital assets typically go through a standard workflow including (not limited to) publishing onto websites, pushing to 3rd parties, Watermarking, QA  QC, Approvals etc which could be potentially automated to provide better efficiency.

Enforcement is a key challenge in a discipline-based system and things get cumbersome. There are several Sophisticated DAMs available in the market and when the time comes it is best to get one in place. 

When is the right time to consider a DAM?

Adopting the right technology at the right time is significant for the growth of any business. Here are some points that will help you identify if it is the right time to adopt a DAM in your business 

  1. Are digital assets a significant part of your business?
  2. Does your workforce spend a lot of time looking for files?
  3. Have you had to do a work from scratch when it could have been repurposed from an existing asset?
  4. Are you making duplicate purchases of assets because existing assets cannot be found?
  5. Are unapproved files being used fairly regularly?
  6. Are you losing time validating the “Final version” against the other versions?
  7. Are you spending a significant amount of  time on tasks that can be automated such as watermarking, resizing, transcoding etc?
  8. Does sharing large files require a process which is not as easy as sending email?
  9. Are you finding difficulty in identifying a secure store for your assets?
If you have 3 or fewer “yes”You still have some time. Keep a sharp lookout for the most common cases mentioned. 
If you have 4 – 6 “yes”It is time to start looking for a DAM. It is also a good time to get familiar with a Digital Asset management system. 
If you have more than 6 “yes”Now might be a good time to get your DAM in place.

The losses and risks associated with the loss of Digital Asset Management systems are becoming a standard around the world. The cost of loss and efficiency is real and it has a direct impact on your business.

Hence ensure to be proactive rather than reactive. Also keep in mind that once you have identified the DAM and Vendor, there is still time left (you are the best judge of this) for Deployment, Migration, and User-acceptance. Ensure you plan it well to make this initiative successful. 

Find the right DAM

Once the decision is made to go in for a Digital Asset Management system, there are several choices that need to be made. Broadly they are based on capability/features and cost model.

Features and capability

Consider the following features:

  • Types of assets you will store on the DAM. E.g. Audio, documents, images etc.
  • Attributes of indexing for search and retrieval. E.g. content keywords, Approval status, date, value, vendor etc
  • AI based DAMs can automatically tag features for indexing such as contents of scanned documents, image contents, video and audio content keywords which makes content ingestion a much simpler step 
  • Any automated processes you would like to run on the assets – watermarking, transcoding, resizing
  • Federated Authentication – Consider a DAM that will be able to integrate with your existing authentication system so that the existing system Admin processes will take care of your access management and the users will not have to remember another set of credentials
  • Sharing and permissions – the access various users have to the assets or groups of assets
  • Compatibility with your existing platform and software
  • Any APIs that need to be integrated with the DAM

Buy vs Hire

There are many solutions that can be bought off the shelf, configured, and deployed onto the cloud of local infrastructure based on your requirement. If you already have IT infrastructure and personnel then this is probably a good approach. 

OR

Several DAM solution companies offer a SaaS model where you can just pay a monthly fee and everything is handled. This is typically a good option if you don’t want the upfront expenses or don’t have a dedicated infrastructure team.

Migrate to a Digital Asset Management System

By now you should have zeroed in on the Digital Asset Management system if not already purchased one or subscribed to one.

  • Make sure all the use-cases of all the teams involved are handled. All integrations are in place and all the automated processes are working with their respective types of assets.
  • Ensure you have a buy-in from all the stakeholders involved about the move and set a date.
  • Create the required structure and the attribute lists.
  • Ensure all potential users get their credentials on the new system 
  • Provide training to all the personnelle who will access the DAM
  • Move / Import all existing Assets to the DAM and ensure all new assets are added to the new system.
  • Decommission the old system. This is a very important step as “old habits die hard” and familiarity makes users go back to the older system.

Some popular DAMs

Here are some popular DAMs as per industry leadership sites. Most of these are SAAS-based models. These are pay-as-you-go models and can be a good starting point.

For the more adventurous ones who already have IT infrastructure and a team that can manage the system, here are some open source options:

A good approach here is to involve your technical team to check on technical skills compatibility and also evaluate the features and their maturity. Even better is to deploy a working copy and test out all the use cases required by all the teams. Most of the open-source projects come with APIs and defined frameworks to extend their functionality.

Confused? 

Get in touch with us for a quick free assessment of your requirement and suggestion for a suitable solution. 

Leverage APIs to Transform Healthcare

There was a time when the healthcare industry largely relied on phone calls and fax machines to establish interoperability within the system. Health records would exist in different versions in different places and often critical health data would be too scattered to give a clear picture of a patient’s health. Then came a time when the concept of value-based care began taking root and the importance of having data in one place in an easy-to-access format made tremendous sense rather than collecting it from a multitude of data silos. 

The healthcare industry was now waking up to healthcare analytics, interoperability, and the importance of APIs. Across a forever-expanding healthcare landscape, application programming interfaces (APIs) gave organizations the opportunity to streamline and share data for meaningful exchanges between systems.  

APIs allow systems to communicate and depending on how they are configured they can do a lot more. They can send data, retrieve data, or even update individual health records as and when required. The ability of a healthcare facility to determine the coverage a patient is entitled to for a particular procedure after feeding information about the patient into their system that is linked to insurance companies is a classic example of how empowering APIs can be. 

Interoperability lies at the core of APIs and demonstrates how critical coordinated care is for the healthcare industry. Understanding a patient’s journey is important to ensure they are on the road to recovery quickly and effectively. The fractured details of a patient’s clinical story however often pose a big challenge. For instance, it is important to know if a patient after leaving a facility following a surgery signed up for a remote monitoring program or was taken care of at home with the health of a home health agency. These are the finer things that add up to create the bigger picture. 

APIs are a booming market and the healthcare API market is expected to grow at a CAGR of 8.72% in the forecast period 2021 – 2028 accounting for USD 440.76 million by 20281. APIs are creating dynamic digital ecosystems to help the healthcare industry attain operational excellence and improve customer experiences. APIs are clearly setting the stage for successful treatments and recovery ensuring interoperability every step of the way.

The role of APIs in the evolving healthcare landscape

The proliferation of smart wearable devices and wellbeing apps is further iterating the role of APIs in the digitally advanced health and wellness industry of today. The global wearables market grew 27.2% year over year in the fourth quarter of 2020 and the shipments of wearable devices globally have now touched 153.5 million2

The pandemic has further accelerated the need for a better lifestyle and wider access to healthcare. The US Centres for Medicare and Medicaid Services are largely relying on APIs to bridge the gap between patients and healthcare. In fact, both healthcare organizations and payers need to use APIs – particularly the Fast Healthcare Interoperability Resources (FIHR) standards to attain optimum interoperability. 

Explains Jay Bercher, deputy program manager at Solutions By Design II, “It goes without saying that APIs have closed the gap in many ways on how information is sent, retrieved, and processed. However, some technological gaps have appeared. As there is a lack of data standards in the industry and multiple technologies, APIs must be created custom to the needs of the service it is providing for each system.”

Technologies such as Artificial Intelligence (AI) are also key drivers. AI is facilitating the conversion of patient information into crucial diagnostic information to help detect conditions early on. Today, data sharing with correlations is helping in a big way. Just to iterate this, if 500 people are buying medicines for cough and cold using their credit cards in a particular area around the same time, it indicates the possibility of an outbreak in that particular area. 

Different instances and scenarios highlight the importance of data and data sharing. APIs are increasingly being used to conduct wellness programs using cloud-based solutions to promote healthy lifestyles, offer behavioral change capabilities, and set fitness goals to stay on the wellness track. 

As wearables and the Internet of Things (IoT) become mainstream, APIs enable the swift transfer of data for users to review and act upon. Data from third-party accounts is also gathered to enable a more integrated approach towards healthcare. 

Ensuring interoperability in the healthcare ecosystem

The implementation of FHIR (Fast Healthcare Interoperability Resources) in healthcare systems for electronic data exchange will make sharing and accessing healthcare data faster. They prepare both the healthcare payer and the provider systems to afford greater access for patients to their own healthcare information by defining a standard minimum of data that must be made available.

As Health IT system developers implement the interoperability standards, they must shift the focus to meet their immediate interface requirements to conform to interoperability standards. The FHIR specification provides a roadmap to interoperable data exchange. This ensures that the adherence to this specification means all of the supported system interactions will work with other systems claiming conformance to the same standard.

The challenges and barriers to API adoption

Despite all the attention that APIs get and with nearly 90% of healthcare stakeholders considering APIs to be mission-critical for business strategies as per a study3

  • Only 24% are actually using them at scale
  • 67% of providers, 61% of payers, and 51% of healthcare tech vendors expect to use APIs at scale in 3 years

Providers participating in the study were more concerned about security (52%) and cost (47%) while payers had other concerns such as technical infrastructure (45%), privacy (43%), and lack of industry standards (43%). The learning curve is steep and calls for specialized skill sets to create or use APIs and address the challenges in adopting them. Patients need to understand the role of APIs too and standardization methods need to be employed to ensure efficient use of APIs. 

Ben Moscovitch, project director of health information technology at Pew Charitable Trusts points out, “Increased use of APIs—particularly those based on common adopted and consistently deployed standards—has the potential to make healthcare more efficient, lead to better care coordination, and give providers and patients additional tools to access information and ensure high-quality, efficient, safe, and value-based care. Yet obstacles remain, such as some hospital hesitation to grant patient access to data, lack of bidirectional data exchange, confusion around the process of implementing APIs, and potentially prohibitive fee structures.”

Some of the most common challenges include:

  • Data security – Providers are responsible for the security of patient data, and the absence of security measures or compliance checks can lead to vulnerabilities. 
  • Data complexity – The healthcare system is huge and complex with patient data spread across several databases. A longitudinal health record of patients is necessary to ensure proper care delivery.
  • Data authority – Sometimes, a single patient may have two different medical records citing opposite or different medical conditions. This can be frustrating as physicians will be unable to determine which one is more accurate or updated. 

Looking ahead

Seamless bi-directional data interoperability is what everyone is working on. Once we figure out a way to navigate APIs in healthcare, hospitals, clinics, and facilities will discover more use cases to leverage the value of APIs. Those who have realized its potential are already leveraging tools for designing, testing, and monitoring APIs for seamless integration and interoperability across the ecosystem.

API is the backbone that is necessary to create efficient ecosystems that can support seamless data capture and exchange for an integrated value chain. If the data is clear and accurate, stakeholders will be able to connect the dots more efficiently. 

Trust Trigent for a successful API implementation

Trigent with its domain knowledge and technology expertise helps stakeholders across the healthcare continuum drive innovation and scale to meet enterprise requirements. We offer tools and solutions for the effective implementation of APIs and help you monitor them throughout the API cycle. 

Our integration solutions have been helping healthcare providers and healthcare-related professionals leverage patient data successfully for better health management. We can help you too. 

Call us today to book a consultation. Our technology experts would be happy to help. 

Reference

  1. https://www.pharmiweb.com/press-release/2021-04-27/healthcare-application-programming-interfaces-api-_finalized-market-set-to-register-healthy-cagr-du
  2. https://www.idc.com/getdoc.jsp?containerId=prUS47534521
  3. https://www.changehealthcare.com/insights/state-of-healthcare-APIs

SDKs and APIs – All you need to know to make an informed decision

Building software in the current world requires high-speed development to meet ever-changing business needs. Products and services are delivered incrementally in Agile mode. 

To meet speed and quality requirements a development team will need to identify the following:

  1. Development tools and frameworks that ensure standardization.
  2. Ready made solutions that can be integrated directly or customized to serve their needs.

Thankfully modern development approaches have ready-to-use SDKs and APIs to meet these challenges. Instead of wasting time and resources on researching, developing, and testing, teams can use a plethora of APIs and SDKs with extensive community support.

An SDK is a full-fledged installable library, while APIs are services exposed by a third party or another service, to be communicated with. Both take away the development effort of a module or feature that you might not be ready with.  Depending on the scenario a developer or team will either need an SDK or just an API. Making an informed decision on when to use one over the other is crucial to successful software development. 

To understand this, let us take an example in which we want to build a native health tracking app. The app will have the following features:

  1. Social authentication through Google or Facebook accounts.
  2. Location tracking to figure out distance covered from point A to B as per the user’s activity. It could be cycling or walking.
  3. BMI calculator.
  4. Diet options.

The list can continue, but we do not want to digress from our main intent of understanding SDKs and APIs.

The first thing to consider while building a native mobile app is that there needs to be an Android and an iOS version to serve the majority of users. Whether one should go in for a native or a hybrid app or build the 2 variants using a Cross-Platform approach requires a separate discussion in itself. The starting point for it could be the skills available in-house.

Android app and social authentication implementation

For our scope, let’s just consider the Android app. The official language for building Android apps is Java. Kotlin also has become an official language for Android development and is heavily promoted by Google. C, C++ runs natively on the phone. Then there is LUA which is not supported natively and requires an Android SDK. You can even use C#  depending on your team’s core competency. This will require either Xamarin with Visual studio or Unity. 

We are going to choose Java here.

The best way to get started for a Java developer is to install Android Studio which is an IDE that automatically downloads the Android SDK and emulator.  The Android SDK is a complete set of development, debugging, testing, and build tools, APIs, and documentation. Using the SDK you can generate APKs that can be deployed to different Android-supported devices. The developer just focuses on the language of his choice based on what is supported by the SDK and uses standard code and framework to get the app up and running. 

The next feature to be built is single-sign-on into the app, using a social account. Both Google and Facebook provide client or server-side SDKs to hide the complexity of the actual implementation and enable the integration through popular languages. The developer just rides on the authentication provided by Facebook and Google. Additionally, the user also grants the app the permission to access information or perform operations on either platform based on our need. In our case, we will have to use the Android SDK provided by Facebook and Google.

To sum up, the Android SDK enables the following:

  1. Enables development of the Android app using a language of our choice, Java.
  2. Provides APIs to access location, UI, camera and other native features. 
  3. Enables localization of the app for different languages through the SDK’s framework if required.
  4. The Java code is compiled to an  Android application package along with the required libraries of the SDK

Hence for our health tracking app, we can use the Android SDK for social authentication

Unsure of which SDK Framework to use? Send in your requirement and we will be happy to assist you!

Location Tracking Functionality

One of the key features of the app we are trying to build here is to figure out the distance walked or cycled by the user. We can take the route of custom implementation by spending a couple of days or weeks to come up with an algorithm, implementing and finally testing it. A better approach would be to use an out-of-the-box solution such as Google Maps and save on SDLC time and effort.  Google provides both SDK and APIs related to Maps and distance. In our case, we do not really need the entire Google MAP SDK. We can use just the relevant APIs such as the Distance Matrix API.  It gives you the distance and time between one or more endpoints. 

Let’s consider the Javascript implementation of the distance matrix API. The end-point provided looks like this:

https://maps.googleapis.com/maps/api/distancematrix/outputFormat?parameters

Based on the above URL we can glean that an API comprises of the following –

  1. Protocol – SOAP, REST or GraphQL. In our case it is REST. SOAP is the oldest mode of interaction with heavy schemas and data. REST is an architectural style relying on HTTPs GET, POST,PUT and DELETE operations. GraphQL is a query language promoted by Facebook which solves the problem of under-fetching or over-fetching by REST.
  2. URL – as provided by the service provider.
  3. Request Parameters – Either all parameters are mandatory or some are optional. Any service exposing APIs will share the parameters and their structure. In our case for instance – destinations and  origins are required parameters. Mode (bicycling or walking) is an optional parameter. 
  4. API Key – We will need to pass a unique API key that points to our application using the service for authentication and authorization.
  5. Response – The output is either JSON or XML.

An API (Application Programming Interface) enables easy and seamless data transfer between a client application and the server providing the service. There is no installation required, unlike an SDK. The API logic is completely abstracted by the service provider from the client. APIs contribute to a loosely coupled, flexible architecture. Since the API code lies on the server, it’s maintained by the provider. Because of this dependency, we need to ensure that we choose a reliable provider and also keep an eye out for newer versions.

Hence for our health tracking app, we can use the Google Map API for location tracking.

BMI calculator and diet options implementation

This would be either a custom implementation, an API, or SDK. If it’s not available readily as an API or SDK and is required in a number of different health services or products the organization wants to provide, it would be best to expose it as an API for current and future use. 

Diet options clearly are a custom implementation in our scenario.

Differences between SDKs and APIs

APISDK
An API is used to provide a feature by running on a third-party system in a request-response mode.An SDK provides all the tools, libraries, APIs, and documentation necessary to build the application or feature.
APIs run on separate servers (internal or 3rd party) and hence have a continued dependency on the service for reliable operation.SDKs typically run on the same environment and hence have no interdependencies. However, they use the processing power of the existing environment of the application being built.
This just requires a SOAP/REST/GraphQL call to the server end-point with request parameters defined as per the API documentation. This is available in languages supported by the provider which is mostly based on what can run in the environment expected and the popularity of the language. 
For instance, Java, NodeJS, Python, GO, PHP are the usual languages popular with the developer community.
No installation is required. It requires installation and is therefore bulky. Any upgrades will need to be handled at our end. Some SDKs also allow customizations as per our needs.

In a scenario where just a few APIs are required from the entire stack provided by the SDK and these APIs can be independently run, it’s better to opt for the APIs alone.
Error handling is left to the application based on what is thrown back by the server.SDKs lean on the language’s error handling mechanism besides what the server platform returns. Therefore error handling is handled in a more effective way.
Examples – Map Apis, Payment Apis, AdMob API provided by Google.Examples – JAVA SDK, Android SDK, Facebook’s Single Sign-on SDK.

While SDKs are a superset of APIs, used appropriately, they both have many advantages over custom development. 

Advantages of using SDKs and APIs

  1. Fast and easy adoption – A few lines of code and your feature is ready.  The developer can focus on the core business functionalities of the application instead of re-inventing the wheel or working on something that is not our core area of expertise.
  2. Saves time and effort – Ready to use and can be directly plugged into, thereby shortening development cycle.
  3. Language – In the case of SDKs, they usually support all the popular languages that the implementation needs. For APIs you just have to ensure the communication protocol and parameters are as per the requirements.
  4. Support -APIs and SDKs ensure best practices, provide robustness and have community support.
  5. Documentation – APIs and SDKs have good documentation for developers to understand and use. No expertise required other than knowing the language to be implemented in. 
  6. Updated – Newer features keep getting added to the stack by way of versions which the developer if required needs to just update. Mostly backward compatibility is already handled by the service provider.

Disadvantages of using APIs and SDKs

To summarize, whether it’s an API or SDK, it’s better to follow the reviews of the community before making a selection. Things to look out for are known bugs, limitations, and cost.

Trigent provides a number of ready-to-use SDKs and APIs for many domains such as mobile app development, SCM workflows, Logistics, AR/VR development services, enabling you to focus on your core expertise and saving you a lot of time and effort in your development cycles. To know more, please contact us

Clutch Recognizes Trigent Software as Top Software Developer in India

As companies scale up their digital transformation initiatives, achieving the desired outcome is dependent on finding the right talent with skills and experience relevant to their domain. Rapid changes in technology, the emergence of new platforms and tools need high investment in training.

At Trigent Software, we have a customer-first approach. We deliver scalable, secure, agile, flexible, high-quality software that our clients require. Our goal lies in delivering next-gen software applications that streamline business processes and promises superior customer experience. Our team delivers innovative solutions using our decades of experience, deep domain knowledge, and technology expertise.

Headquartered in Southborough, Massachusetts, we work with businesses big and small all over the world. We are proud to have developed more than 400 products so far. No matter the size of the project, we work with care and diligence to make sure it becomes successful.

We are thrilled to announce that Clutch has named Trigent Software as a top software developer in India. We are proud to have been considered a top company by an industry leader like them.

Clutch is a B2B rating and reviews firm based in Washington, DC. Their team of independent analysts conducts interviews with current and former clients of companies listed on their site. These verified reviews form the basis of their rankings and awards. Clutch carefully curates lists of the absolute best agencies and organizations by industry and location, simultaneously enabling companies to establish credibility and buyers to find the right services.

We currently hold a 4.8 out of five ratings as the top software developer on their platform based on 47 client reviews.

We appreciate the reviews given by our clients. Their feedback lets us know that we are doing the right thing in terms of providing our service. It only motivates our team to work harder and help more businesses overcome their limits. Check our profile on Clutch to see what our clients have to say about our services.

Want to learn more about our services? Contact us today, and let’s discuss the ways we could help your business grow.

What do Brown M&Ms Have to do with Outsourcing?

It is a folklore that has been proven true. In the 80s, Van Halen had strict conditions to remove brown M&Ms from their dressing room at the tour venues, or the show promoter will forfeit their money. The 53 pages typewritten rider contained the condition that along with a wide selection of beverages and food, M&Ms must be provided, but absolutely no brown ones. Years later, David Lee Roth charmingly explains the truth behind this clause in his video – that it was not a silly rockstar misdemeanor excess, but an intelligent safety check measure. Simply put, if the band found brown M&Ms in the dressing room, they will assume the promoters have not taken care of all the electrical and mechanical safety conditions in the rider. Then the band would spend time checking everything with a fine-tooth comb to ensure a safe and flawless show.

In other words, it is a simple assumption that if someone has taken care of the small stuff, they certainly can be trusted to take care of the big things. Just like Van Halen, check if your outsourcing partner has done the small things right. If they did, you could rest assured that they will take care of the big things.

Access to everyone on the team

Did the outsourcing company set up a meeting early to introduce everyone on the team? Such meetings are impactful when done with video. You should have all the details to reach everyone on the team – their emails, phone, skype, etc. Easy access increases communication among the teams. Highly collaborative companies set up Slack channels to communicate instantly with team members. Do you have easy access to the provider’s senior management? The provider’s leadership must check in with you periodically. When needed, you also should be able to get their senior management’s attention.

Transparency in daily activities

You should know what your outsourced team does every day. Though they maybe thousands of miles away and separated by timezones, you should get brief but crisp updates each day – on Slack or via email. Your daily stand up may include them to provide the updates. The remote teams should be check-in code into your repository every day. Weekly timesheets with a judicious amount of details will provide better insight into the time spent on various activities throughout the week.

Empowered Client Partner/Project Manager

Your project manager must your trust to make decisions on their end – as well as demand changes on your side – to ensure mutual success. While you have access to all of your team – who are hyper-focused on coding, testing, etc., you need a client partner who has your perspective to make everyday tactical decisions. They do not lose sight of the forest for the trees. The project manager should make specific, concise, and realistic communication about what they need and expect from each other. Do they take the liberty to suggest process changes? To put is crude, while you may have many backs to pat, you need one throat to choke.

The flexibility of the engagement

Good partners make the engagement flexible for both. Does your outsourcer lock you down with long term commitments and penalties? An outsourcing provider should be agile in terms of process, contracts, and other demands. How easy is it for you to scale your team up or down with relatively short notice, say weeks and not months.

How well do they treat their employees

“Customers will never love a company until the employees love it first.” — Simon Sinek

Companies that treat their employees well, certainly will treat their clients well and value them. When employees are valued with trust, respect, and dignity, they perform at their best. High performing teams will produce results that matter to you. See if your outsourcing vendor provides their employees a good work/life balance, continued carrier training, rewards, and recognition.

In summary, little things make big things happen. See if your outsourcer takes care of some of these small things. If they do, then you can trust that they take care of more complex and critical things too.

Trigent Software Proud to be Named on Clutch 1000

Here at Trigent Software, we know it can be tough trying to juggle business success and staying up to date with all of the latest and greatest software innovations. That’s why we’re dedicated to IT outsourcing and offshore development! We enable organizations to adopt innovative digital processes and customer engagement models and outstanding results.

In light of our success, we’ve earned recognition for our custom software development prowess, and have earned ourselves a spot on the Clutch 1000! This is a list of the top B2B service providers, reviewed and vetted by Clutch’s verified research. We’re number 179 on the list, out of over 1000 custom software developers, but the only service provider featured from Fayville, Massachusetts!

We’d like to set this time aside to thank our wonderful customers for helping us achieve this award. They participated in client interviews with Clutch analysts to gauge our impact on their day to day business. They ranked us on the basis of cost-effectiveness, attention to project deadlines, and our overall quality of service. In reflection of those scores, we’ve been given an amazing 4.8 out of 5-stars! We’re so happy we’ve been able to meet our clients’ expectations! Please take a look at a recent review below:

For those who might not know, Clutch is a B2B market research firm that employs a unique ratings methodology to compare companies across sectors. We’ve also been recognized by Clutch’s sister platforms, The Manifest and Visual Objects. The Manifest, a site where companies can be identified as leaders through business metrics, list us on their directory of top software development companies. Visual Objects, a platform that features top firms and their visual portfolios, names us among their top custom software developers.

Thank you one and all for making this award possible! Please drop us a line if you’d like to start a project today.

Trigent Recognized as a Top Software Developer 2019

We’re excited to announce that Clutch has ranked us among the best software development companies in the financial services industry!

Clutch is an independent platform that objectively collects feedback from clients about each vendor on their site. By publishing in-depth interviews conducted by unbiased Clutch analysts, they cut through disorganized market research and help businesses find partners for upcoming projects.

Based on the data they collect, their team selects a handful of their best-performing service providers for their monthly awards.

We’re particularly proud to have been selected, because our overall client rating was a major part of the awards criteria. At Trigent Software, we have decades of experience, deep domain knowledge, and the technical expertise necessary for us to help our partners grow, and we’re dedicated to that mission. Since joining the platform, we’ve collected 25 positive reviews, giving us an average of 4.8 out of 5 stars!

Since Clutch has become a go-to resource for B2B companies, we’ve also been featured on their sister sites — The Manifest and Visual Objects. Of the thousands of companies featured on their site, The Manifest named us at the best cloud computing consultant company in India!

You can compare the quality of our work to other developers in India, by checking out Visual Objects, a new platform that equips buyers with additional information by showcasing the digital portfolio of the vendors on Clutch’s site.

To learn more about our services, contact us online. We’re here to help!

Understanding MongoDB: A New-age Database

MongoDB, is the latest database architecture for developers and data scientists. Its usage is spread across various user groups, industry conferences and events.

MongoDB is popularly known as a NoSQL document store model. The data objects are stored as specific documents within a collection instead of storing the data in a traditional relational database like rows and columns. MongoDB uses JSON and BSON documents to store data. It is an open source software and its document data model maps objects in application code. This makes it extremely simple for developers to learn and use. MongoDB helps to mark the requirements of new applications and streamline existing work.

MongoDB stores related information by MongoDB query language. Its fields differ from one document to another. The system documents are self-described hence there is no need to declare the documents. New fields can be added without affecting the existing documents in the collection. Documents of collections gives one the ability to represent ranked relationships to store complex structures and arrays.

We use state-of-the-art technologies coupled with best coding standards to increase productivity and quality of applications

MongoDB has the concepts of ACID transactions, collections, documents, fields, secondary index, embedded documents, $lookup, $graphLookup and aggregation pipeline.

The latest version of Mongodb is 4.0 which has enterprise graded security and mature management tools. Also, it provides idiomatic native language drivers, horizontal scale-out with data locality controls, and flexible / rich data models.

MongoDB’s Unique Features:

  • Most organizations choose MongoDB for its ability to build applications faster, manage important data, differentiate various data types, and also handle applications more effectively.
  • Application construction will be simplified as MongoDB documents map naturally to modern, object-oriented programming languages.
  • MongoDB has a unique feature to remove the complex relational mapping(ORM) layer which converts the objects in code to relational tables.

Benefits for Users of JSON/MongoDB:

  • Documents are natural
  • Documents are flexible
  • Documents make applications faster
  • Proprietary extensions
  • Legacy relational overhead
  • Complex data handling
  • No data governance
  • Schema rigidity

The common use cases for MongoDB are content management, cataloging, personalization, real time analytic and single view.

To learn MongoDB, one will need to migrate step-by-step from a relational database to MongoDB. Gradually one will need to become aware of the differences between relational and document data models and the implications for schema design. When this happens, indexing, queries, application integration and data migration become simpler to learn.

Benefits of EDI Usage in Transportation Management Systems

The need for real-time visibility has reached an all-time high for transportation companies. As Bart De Muynck, Research Vice President, Gartner, says, “Organizations have increasing demands for real-time, or at least near-real-time visibility into their orders, multi-modal shipments, and inventory across a network of business partners, both stationary and in transit.”

Providing T&L companies access to real-time information is Electronic Data Interchange, which is the inter-organizational exchange of business documents in a pre-defined structured format. EDI permits trading partners to generate, receive, and process data with little or no human intervention. With EDI, standard business documents can be transmitted instantaneously using telecommunication capabilities.

Benefits of EDI

  1. With EDI, routine high volume communications can be automated. This ensures that dispatchers and accounts receivables staff have time to focus on value added services. For example, expenses associated with usual operational tasks can be considerably reduced or even eliminated, lowering transactions costs by at least 30 percent. When this number is multiplied annually, the savings can be substantial.
    A study by La Londe and Cooper found that firms with electronic ordering have experienced sales increases of up to 50 percent. EDI enables firms to be more responsive to customer needs by decreasing order transmittal time and lead times.
  2. EDI eliminates dispatchers from having to manually key information into dispatch operational and billing systems. This results in savings while eliminating any costly data entry mistakes. Thus, errors due to illegible faxes, lost communication or incorrect phone messages are eliminated and documents processed much faster.
  3. For the transportation industry, business cycles are revved up sharply. Normal waiting time for documents which range from a day to a couple of weeks, can happen in the space of a few minutes.
  4. Companies can use EDI to integrate with various transportation management systems or direct carrier systems. This will help to tender and re-tender loads, transmit and receive appointment time and status.
  5. Eliminating paper transactions and substituting them with electronic alternatives, is a display of corporate social responsibility.
  6. However, one of the key benefits of EDI stem from the real-time visibility into transactions. This makes for faster decision-making and improved responsiveness to rapidly changing economic and market scenarios. The business model is altered completely from a demand-driven model to a supply-driven one.

Successfully Delivered 30+ Digital Transformation Projects in the Last 10 Years

To summarize, In the quest to achieve a paperless society, Electronic Data Interchange has long been a leading technology. It predates the emergence of Internet and now a chief electronic network connecting just about every business to every other. To know more about the benefits, read whitepaper ‘EDI in Transportation: The Standard that Continues to Automate and Integrate Operations

Importance of User Experience Design (UXD)

Introduction

User experience design (UXD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product. User experience design encompasses traditional human–computer interaction design, and extends it by addressing all aspects of a product or service as perceived by users.

The term User Experience was coined by Donald Norman.

The general idea of user experience is Make things easy for people.

Best Practices for Web UX Design

Understand your user

Understand what they want, what they know, and what they don’t know they want. To design a successful experience, you must research your users:

  • Interview users
  • Create user stories and scenarios
  • Map out the customer journey

See beyond the page

Nowadays, web design requires an even broader skill-set as UX techniques mature.

Related: Reimagine the user experience, create what users love, and transform your business!

Here are a few checkpoints:

  • Does the information architecture make sense?
    For example, consistency is required in labeling for top-level and secondary navigation items.
  • Does the website create an emotional response?
    The colors, visuals, and interaction design must all add up to hook the user into exploring the site deeper.
  • Is accessibility addressed correctly?
    Accessible sites have real business value: they rank better in Google, and access larger audiences.
  • Does the text and visual content go well?
    A site’s design includes all content. If the tone of the copy doesn’t match the visual style, the entire experience starts to dissolve.

Interactions remain the root of all UX

Interactions are not just about when a user clicks something on the site. The moment a user views the design, their brain processes visual interactions at the speed of thought.

Prototype early

Prototyping is the only sure way to gauge success. Usability tests at every iteration – will let you know whether you are on the right track, and what you need to change.

Device-Consistent Experiences

The only future-proof strategy is designing fluid experiences that adapt to any device.

Visual Consistency: Visual consistency ensures that site renders properly regardless of device. The same colors and graphics helps create a familiar experience wherever users log in.

Flexible Layout: When working on web designs, ensure that the layout scales appropriately. Obviously, the same site doesn’t look the same on every device. But the relative placement of menus, search functions, and key calls-to-action (like login) should match across devices. Users become accustomed to location quickly, and don’t want to relearn or switch their mental mapping.

Focus on context: Content suitable on the desktop is not always suitable for mobile. For instance, navigation can be stripped down in a mobile view to simple labels (or even shelved away in a navigation drawer), but they should certainly be fleshed out as you scale up to a tablet or desktop (e.g. horizontal or vertical menus). When you keep context in mind, you ensure that the design isn’t just consistent but also appropriate.

Responsive and Adaptive Design

Responsive Design (RWD) – Everything must be flexible: layouts, image sizes, text blocks . This flexibility, combined with smart use of CSS media queries, gives site the fluidity it needs to work on all devices.

Adaptive Design (AWD) – Design different sites for different categories of devices. Typically AWD sites have up to six variations, based on screen width: 320, 480, 760, 960, 1200, 1600

The mobile-first approach is the best strategies to create a responsive or adaptive design. Designing for the smallest screen and working your way up.

UX design checklist

Note that not all of these points apply to all products, but generally these are the ones that are most relevant.

  • Avoid more than three primary colors
  • Items on top of the visual hierarchy are the most important
  • Primary action is visually distinct from secondary actions
  • Interactive elements are not abstracted
  • Form submission is confirmed in a visually distinct manner
  • Alert messages are consistent and visually distinct
  • Navigation is consistent
  • Room for growth
  • No more than two distinct font families are used
  • Fonts used for text content are at least 12px in size
  • Reserve uppercase words for labels, headers, or acronyms
  • Different font styles or families are used to separate content from controls
  • Font size/weight differentiates between content types
  • Progress indicator for multi–step workflows
  • Foreground elements (like content and controls) are easily distinguished from the background

Introduction to SQL Server Integration Services (SSIS) – Part 1

Introduction

In this blog, I will discuss SQL Server Integration Services (SSIS) and its components.

SQL Server Integration Services (SSIS)  is an ETL tool (Extract, Transform and Load) which is used for building enterprise-level data integration and data transformation solutions. Integration services help in developing solutions for complex business problems, as listed below:

  • Copying or downloading files
  • Sending e-mail messages in response to events
  • Updating DataWarehouses
  • Cleaning and mining data
  • Managing SQL server objects and data

Integration services can extract and transform data from a wide variety of sources such as XML data files, flat files, and relational data sources and then load data into one or more destinations. Integration services has rich set of built-in tasks and transformations, tools for constructing packages and the integration services service for running and managing packages.

Packages

A package is an organized collection of connections, control flow elements, data flow elements, event handlers, variables, parameters, and configurations which are assembled using either the graphical design tools that SQL Server Integration Services provides, or build programmatically. The package is the unit of work that is retrieved, executed and saved.

When we create a package it is an empty object that does nothing. The functionality is added to the package by adding control flow and one or more data flow to the package.

The following diagram shows a simple package that contains a control flow with a data flow task, which in turn contains a data flow.

After creating the package, the package functionality can be extended by adding advanced features like event handlers, logging, variables and configurations which will be explained in a while.

 Contents of a Package

In this section we will discuss the various contents of the package.

Tasks and Containers (Control Flow)

A control flow consists of one or more tasks and containers that execute when the package runs. The execution of the tasks can be controlled by precedence constraints that connects the tasks and containers in a package. A subset of tasks can be grouped together as a unit and can be executed repeatedly within the package control flow.

Data Sources and Destination (Data Flow)

A data flow consists of the sources and destinations that extract and load data, transformations that modify and extend data and the paths that link sources, transformations and destinations.

To add a data flow to a package, the package control flow must include a data flow task. The data flow task is the executable within the SSIS package that creates, orders and runs the data flow.

Connection Managers  (connections)

A package typically includes at least one connection manager. A connection manager is a link between package and data source that defines the connection strings for accessing the data that the tasks, transformations and event handlers in the package use. Integration Services includes connection types for data sources such as text and XML files, relational databases, and Analysis Services databases and projects.

Package Functionality Extension Objects

Event Handlers

An event handler is a work flow that runs in response to the events raised by a package, task or container. For example, if the package fails during execution, we can add a email task to send an email On Error event as seen in the below image.

Configurations

A configuration is a set of property-value pairs that defines the properties of the package and its tasks, containers, variables, connections and event handlers when the package runs. Using configuration the properties can be updated without modifying the package. When the package is run, the configuration information is loaded, updating the values of properties.

Logging and Log Providers

A log is a collection of information that is collected when the package runs. A log can provide start and finish time of the package run. Integration services has several built-in log providers for logging.

Variables

Integration services supports system variables and user-defined variables. The package-level variables include the pre-defined system variables available to a package and the user-defined variables with package scope.

In my next blog, I will explain in detail, the process to create a package, control flow, and its components.

UI Design: Wireframe, Mockup and Prototype

There is a huge misconception about the actual meaning behind words such as wireframe, mockup, and prototype. They are considered by most as a method to show a design.

The UI design process

The UI design process goes from wireframing to mockups to prototyping, with variation in fidelity for each stage. The prototype is interactive while the wireframe and mockup are both static. Between wireframe and mockup, the wireframe is low-fidelity while mockup is high-fidelity.

UI design different stage

Wireframe

The wireframe is the visual representation of the skeletal framework of a website. Wireframes can be a freehand drawing on a piece of paper or sketches on a whiteboard. It is the fastest way to get your idea ready for brainstorming. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe lacks typographic style, color, or graphics since the main focus lies in functionality, behavior, and priority of content.

Wireframe rendered using Balsamiq

Tools:
Balsamiq
– List of free wireframing applications

Additional Resources:
– Wireframe Showcase
Dribbble

Mockup

Mockup provides high-fidelity, static, design representation. They are visually more appealing, has colors, fonts, text, images, logos etc., giving it final product look-and-feel. Mockups are useful to get early buy-in from a stakeholder. They are a good feedback-gatherer.

Mockup created based on wireframe

Tools:
– Adobe Photoshop/Illustrator
Sketch

Additional Resources:
250 best Photoshop resources
Freebiesbug
Dribbble
Photoshop Etiquette

Prototype

A prototype is a simulation of the final interaction between the user and the interface. It helps users to understand how the functionalities in an application will work. Prototypes help provide proof of concept, more importantly, expose any usability flaws that are not found during the wireframes and mockups stage.

Interactive Prototype

Tools:
UXPin
InVision

Additional Resources:
– ZURB Solidify
Pencil Project

Wireframe, mockup, and prototype have their own characteristics and usage scenarios in a specific stage. How they are used depends on specific requirements.

Drive engagement and enhanced customer experience with Trigent’s UX/UI capabilities. 

CSS Browser-Specific Hacks

What is this?

Browser hacks is an extensive list of browser specific CSS hacks from all over the inter-webs. CSS hacks are needed in order to solve problems caused by different browsers rendering.

How to?

Pick the hack you want. Copy it into your stylesheet. Add the style you want between the braces. Enjoy the new styles for the browser you targeted!

 Reminder!

Please keep in mind using a hack is not always the perfect solution. It can be useful to fix some weird browser specific bug, but in most cases you should fix your CSS.

 

Firefox – Any Firefox browser hack

@-moz-document url-prefix() {
 .selector { Property: Value; }
 }

Media Query Hacks

@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 1280px) {
 .selector { Property: Value; }
 }

Google Chrome and Safari CSS hack

@media screen and (-webkit-min-device-pixel-ratio:0) {
 .selector { Property: Value; }
 }

Note :- Safari and Google Chrome are mainly the same, but sometimes behave differently, especially in forms, and fonts rendering.

Media Query Hacks

@media all and(-webkit-min-device-pixel-ratio:0)and(min-resolution: 1280px){
 .selector { Property: Value; }
 }
 

Opera – Opera 10 and above

@media not all and (-webkit-min-device-pixel-ratio:0) {
 .selector { Property: Value; }
 }

Media Query Hacks

@media all and(-webkit-min-device-pixel-ratio:0)and(min-resolution: 1280px){
 .selector { Property: Value; }
 }
 

Internet Explorer / Edge IE 9 Hack

:root .selector {
 Property: Value9; color: red9;
 }

Note :-  color: red9; Hack Works on IE9

Conditional comments

<!--[if IE 9]> Internet Explorer 9 <![endif]-->
 <!--[if lte IE 9]> Internet Explorer 9 or less <![endif]-->
 <!--[if gte IE 9]> Internet Explorer 9 or greater <![endif]-->

IE 10 only

_:-ms-lang(x), .ie10 { property: value9; }

Internet Explorer 10+, Microsoft Edge Browser

_:-ms-lang(x), .selector { property: value; }

IE 10 and above

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up {property: value;}
 }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up {property: value;}
}

IE 11 (and above..) 

_:-ms-fullscreen, :root .ie11up { property:value; }

Internet Explorer 11+, Microsoft Edge Browser

/* Put this code in external stylesheet: ie11up.css */ @charset "&lt;Any Modern Browser but MSIE 10- or FF 18- &gt;"; _:-ms-lang(x), .selector { property:value; }

Microsoft Edge Browser 12+ (All) – @supports method

@supports (-ms-ime-align:auto) { .selector { property:value; } }

For more information on CSS browser-specific hacks please visit the following site:  http://browserhacks.com/

Quirks:

Browser hacks, boom boom! — Sean Bullock

Browser hacks – must have for all front-end developers — Mark Szymic

Front-end developers stop the IE drama and use this fine tool — iSands

CSS3 Selectors Module Part-3

This is the last blog in my tri-series on CSS3 Selectors Module. Please click on the link to read CSS3 Module Part – 1 and CSS3 Module Part 2.

Positional Selectors

:first-child – Selects every <p> element that is the first child of its parent

first-child Selector Example:

HTML

<p>This content is the first child of its parent (body).</p>
 <h4>Welcome to CSS3 Selectors Module</h4>
 <p>This content is not the first child of its parent.</p>
 <div class="targetAttr">
 <p>This content is the first child of its parent (div).</p>
 <p>This content is not the first child of its parent.</p>
 </div>

 CSS

.targetAttr {
 border-radius: 7px;
 border: 2px solid #f2f2f2;
 padding: 0px 10px;
 width:300px;
 margin:0px 0px;
 background:none;
 }
 p:first-child {background-color:yellow;}

 OUTPUT

:first-of-type – Selects every <p> element that is the first <p> element of its parent

first-of-type Selector Example:

HTML

<p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 <div class="targetAttr">
 <p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 </div>

 CSS

p:first-of-type {background:yellow;}

 OUTPUT

:last-child – Selects every <p> element that is the last child of its parent

 last-child Selector Example:

HTML

<p>This content is the first child of its parent.</p>
 <h1>Welcome to CSS3 Selectors Module</h1>
 <p>This content is not the last child of its parent.</p>
 <div class="targetAttr">
 <p>This content is not the last child of its parent.</p>
 <p>This content is the last child of its parent (div).</p>
 </div>
 <p>This content is the last child of its parent (body).</p>

 CSS

p:last-child {background:yellow;}

 OUTPUT

:last-of-type – Selects every <p> element that is the last <p> element of its parent

last-of-type Selector Example:

HTML

<p>The first content.</p>
 <p>The second content.</p>
 <div class="targetAttr">
 <p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 </div>
 <p>The third content.</p>
 <p>The fourth content.</p>

 CSS

p:last-of-type {background:yellow;}

 OUTPUT

:nth-child(n) – Selects every <p> element that is the second child of its parent

 a number: n is a counter and starts at 1

nth-child(n) Selector Example:

HTML

<p>The first content.</p>
 <p>The second content.</p>
 <div class="targetAttr">
 <p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 </div>
 <p>The third content.</p>
 <p>The fourth content.</p>

 CSS

p:last-of-type {background:yellow;}

 OUTPUT

:nth-child(n) – Selects every <p> element that is the second child of its parent

a number: n is a counter and starts at 1

nth-child(n) Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 <div class="targetAttr">
 <p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 </div>
 <h4>N is a counter and starts at 1</h4>
 <p>Selects every &lt;p&gt; element that is the second child of its parent</p>

 CSS

p:nth-child(2) {background:yellow;}

 OUTPUT

a keyword: Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).

Odd and Even Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 <p>The fifth paragraph.</p>
 <p>The sixth paragraph.</p>
 <h3>Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).</h3>

 CSS

p:nth-child(odd){background:yellow;}
 p:nth-child(even){background:cyan; color:white;}

 OUTPUT

a formula: Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

nth-child(an+b) Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 <p>The fifth paragraph.</p>
 <p>The sixth paragraph.</p>
 <p>The seventh paragraph.</p>
 <p>The eight paragraph.</p>
 <p>The ninth paragraph.</p>

 CSS

p:nth-child(3n+3){background:Yellow;}

 OUTPUT

:nth-of-type(n) – Selects every <p> element that is the second <p> element of its parent

nth-of-type(2) Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>

 CSS

p:nth-of-type(2){background:Yellow;}

 OUTPUT

:only-child – Selects every <p> element that is the only child of its parent

only-child Selector Example:

HTML

<div><p>This is a first content.</p></div>
 <div><p>This is a paragraph.</p></div>
 <div><span>This is a span.</span><p>This is a paragraph.</p></div>

 CSS

p:only-child{background:Yellow;}

 OUTPUT

:only-of-type – Selects every <p> element that is the only <p> element of its parent

only-of-type Selector Example:

HTML

<div><p>This is a paragraph 1.</p></div>
 <div><p>This is a paragraph 2.</p><p>This is a paragraph 3.</p></div>
 <div>The :only-of-type selector matches every element that is the only child of its type, of its parent.</div>

 CSS

p:only-of-type{background:Yellow;}

 OUTPUT

:empty – Selects every <p> element that has no children (including text nodes) & :root – Selects the document’s root element

Empty and Root Selector Example:

HTML

<h4>The :empty selector matches every element that has no children (including text nodes).</h4>
 <p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p></p>
 <p>The fourth paragraph.</p>

 CSS

p:empty{width:100px; height:20px; background:red;}
 :root{background:light-dark;}

 OUTPUT

CSS3 Selectors Module Part-2

In continuation of my earlier blog on ‘CSS3 Selectors Module’ in this second part, I will explain the concepts of Combinators and Attribute Selectors.

Combinators

There are four different combinators in CSS3 selectors:

  • Descendant Selector(space)
  • Direct Child Selector(>)
  • Adjacent Sibling Selector(+)
  • General Sibling Selector(~)

Descendant Selector Example:

HTML
<p>The descendant selector matches all elements that are descendants of a specified element.</p>
 <p>The following example selects all <p> elements inside <div> elements.</p>
 <div>
 <p>Paragraph 1 in the Block Element.</p>
 <p>Paragraph 2 in the Block Element.</p>
 <section><p>Paragraph 3 in the Block Element.</p></section>
 <div><p>Paragraph 4 in the Block Element.</p></div>
 </div>
 <p>Paragraph 5 Not in an inside the DIV Element.</p>
 <p>Paragraph 6 Not in an inside the DIV Element.</p>
CSS
div p {background-color: Yellow;}
Output

Direct Child Selector Example:

HTML
<p>The child selector selects all elements that are the immediate children of a specified element.</p>
 <p>The following example selects all <p> elements that are immediate children of a <div> element.</p>
 <div class="classname">
 <p>Paragraph 1 in the Block Element.</p>
 <p>Paragraph 2 in the Block Element.</p>
 <section><p>Paragraph 3 in the Block Element.</p></section>
 <div><p>Paragraph 4 in the Block Element.</p></div>
 </div>
 <p>Paragraph 5. Not in an inside the div Element.</p>
 <p>Paragraph 6. Not in an inside the div Element.</p>
CSS
div.classname {border-radius:7px; background-color:#f2f2f2; padding:20px;
 width:500px;}
 div > p {background-color:Yellow;}
 Output

Adjacent Sibling Selector Example:

HTML
<p>The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.</p>
 <p>Sibling elements must have the same parent element, and "adjacent" means "immediately following".</p>
 <p>The following example selects all &lt;p&gt; elements that are placed immediately after &lt;div&gt; elements.</p>
 <div>
 <p>Content 1 in the Block Element.</p>
 <p>Content 2 in the Block Element.</p>
 </div>
 <p>Content 3. Not in a Block Element.</p>
 <p>Content 4. Not in a Block Element.</p>
 CSS
div + p {background-color:Yellow;}
 Output

General Sibling Selector Example:

HTML
<p>The general sibling selector selects all elements that are siblings of a specified element.</p>
 <p>The following example selects all <p> elements that are siblings of <div> elements</p>
 <div>
 <p>Content 1 in the Block Element.</p>
 <p>Content 2 in the Block Element.</p>
 </div>
 <p>Content 3. Not in a Block Element.</p>
 <p>Content 4. Not in a Block Element.</p>
 CSS
div ~ p {background-color:Yellow;}
 Output

Attribute Selectors

Select elements based on attributes

From elements attribute Example:

HTML
<div>
 <form action="index.html">
 <label for="fname">First Name</label>
 <input type="text" id="fname" name="firstname">
 <label for="lname">Description</label>
 <textarea name="message" rows="10" cols="50">Swachh Bharat Challenge is an initiative to share your experiences of Swachh Bharat Abhiyan and invite other people to accept the challenge and join hands in the Abhiyan. You can open up the challenge to a maximum of nine persons and similarly, each of these nine persons can also challenge nine more…this way the chain of activities would keep growing.</textarea>
 <label for="country">State</label>
 <select id="country" name="country">
 <option value="bangalore">Bangalore</option>
 <option value="delhi">Delhi</option>
 </select>
 <input type="button" value="Button">
 <input type="reset" value="Reset">
 <input type="submit" value="Submit">
 </form>
 </div>
CSS
div{border-radius:7px; background-color:#f2f2f2; padding: 20px; width:500px;}
 input[type=text], select, textarea {width:100%; padding:10px 10px; margin:8px 0;
 display:inline-block; border:1px solid #ccc; border-radius:5px;}
 input[type=button], input[type=submit], input[type=reset] {
 background-color:#4CAF50; border:none; color:white; border:none;
 padding:12px 32px; text-decoration:none; margin:4px 7px;
 cursor:pointer; border-radius:5px; width:30%;}
Output

[attribute=value] – Selects all elements with target=”_blank”

Attribute=value Example

HTML
<div class="targetAttr">
 <p>The link with target="_blank" gets a yellow background:</p>
 <a href="https://www.google.co.in/" target="_blank">Google.co.in</a>
 <a href="https://in.yahoo.com/">Yahoo.com</a>
 <a href="http://www.wikipedia.org" target="_top">Wikipedia.org</a>
 </div>
CSS
.targetAttr{border-radius:7px; border:2px solid #f2f2f2; padding:20px;
 width:600px; margin:50px 0px; background-color: #f2f2f2; font-size:20px;}
 a[target=_blank] {background-color: yellow;}
Output

[attribute~=value] – Selects all elements with a title attribute containing the word “flower”

attribute~=value Example :

HTML
<div class="targetAttr">
 <p>The [attribute~=value] selector is used to select elements with an attribute value containing a specified word.</p>
 <p>The image with the title attribute containing the word "flower" gets a yellow border.</p>
 <img src="1.jpg" title="klematis flower" width="160" height="160" alt="" />
 <img src="2.jpg" title="flowers" width="160" height="160" alt="" />
 <img src="3.jpg" title="landscape" width="160" height="160" alt="" />
 </div>
CSS
[title~=flower] {border: 5px solid yellow;}
Output

[attribute^=value] – Selects every <a> element whose href attribute value begins with “top”

attribute^=value Example:

HTML
<div class="targetAttr">
 <p>The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value.</p>
 <p>The following example selects all elements with a class attribute value that begins with "top":</p>
 <h1 class="top-header">Welcome to CSS3 Selectors</h1>
 <p class="top-text">Hi Guys</p>
 <p class="contenttop">Good afternoon</p>
 </div>
 CSS
[class^="top"] {background: yellow;}
 Output

[attribute$=value] – Selects every <a> element whose href attribute value ends with “test”

attribute$=value Example:

HTML
<div class="targetAttr">
 <p>The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.</p>
 <p>The following example selects all elements with a class attribute value that ends with "test":</p>
 <p class="first_test">The first div element.</p>
 <p class="second">The second div element.</p>
 <p class="my-test">The third div element.</p>
 <p class="mytest">This is some text in a paragraph.</p>
 </div>
 CSS
[class$="test"]{background: yellow;}
 Output

:enabled – Selects every enabled <input> element

:disabled – Selects every disabled <input> element

Enabled and Disabled Example:

HTML
<div>
 First name: <input type="text" value="Enabled" enabled="enabled"><br>
 Last name: <input type="text" value="Disabled" disabled="disabled">
 </div>
 CSS
input[type=text]:enabled {background:Yellow;}
 input[type=text]:disabled {background: grey;}
 Output

Don’t miss the next blog in the series, `CSS3 Selectors – Module – Part 3′.