.

.
Showing posts with label Programming. Show all posts
Showing posts with label Programming. Show all posts

Wednesday, December 18, 2019

Roshan Thpa

10 Amazing CSS & JavaScript Text Animation Snippets

1. Title Animation

This animated title effect by Robin Treur follows the style of many movies or video games. The letters take on a protruding 3D effect using CSS3 text shadows along with a slight diagonal slant.
The fade-in animation style reminds me of classic movies from the 1930s with the same slanted text. Everything is controlled through CSS but the “restart” button is built using JavaScript. This way you can play the animation many times over to get a better look.

2. Shattering

Creating broken shattering text is a simple task with tools like After Effects, but creating a text shatter animation with code is a whole lot tougher, making this pen by Arsen Zbidniakov quite impressive.
The text is actually built using SVG shapes which makes the animation process a little easier. This also means you can’t select, copy, or interact with the text like normal.
But you can add a similar effect to your site if you use it for a logo or another non-interactive page element.

3. Twisted Letters

Developer Mamun Khandaker put together this collection of twisted letter animations. Each animation style has a different name and you can browse through them all in this one pen.
I could see these text effects used on landing pages or homepages for a tool/webapp. These immediately grab attention and they leave a lasting impression on the visitor. Plus they’re all made with 100% pure CSS and super easy to tweak.

4. Pixel Alphabet

This unique animated pixel effect is definitely strange, yet oddly mesmerizing. It relies mostly on JavaScript and was created by developer Georgi Nikoloff as a way to play with the HTML5 canvas element.
It uses Noto Serif as a font base and converts letters into malleable elements inside the canvas element. JavaScript breaks up the letters into smaller dots and these form the basis of the animation.
I can’t say this would have much practical use but it’s a testament to how far web animation has come.

5. Typing Carousel

This effect is notoriously popular on small portfolios and agency websites. The typing text animation often appears in a site’s header and it mimics the look of someone typing in a word processor.
Everything is contained inside one element with a good mix of CSS and JavaScript animation. Sometimes you’ll see websites use this to list descriptions of their work, or their history, or clients they’ve worked with.
It’s definitely a fun effect when used in moderation. Since only one word is visible at a time it does limit the readability of the page, but when used sparingly this is a very cool effect that anyone can copy.

6. Tyger Tyger

Borrowing words from the William Blake poem “The Tyger”, this very unique animation by Joseph Martucci really grabs your attention.
The focus here is not so much on the content, but rather on the typographic styles and animations. Each “segment” of the text has its own style with text outlines and glowing effects. It’s a great example of how you can style a homepage to animate text sequentially using setTimeout().

7. Snap SVG

The open source Snap.svg library lets anyone create high-resolution SVG images with just a bit of code. This is far easier than learning a program like Illustrator and it lets you animate just like this fun example created by Alexis Blondin.
All the letters are created dynamically through JavaScript including the random characters used in the animation. Modern SVG support is huge and these image types can radically change how we build websites in the coming years. This Snap.svg animation is just one example and it’s definitely a cool one.

8. Bracket Animation

Here’s another fairly common text animation technique which I see all the time. It uses brackets with rotating text almost like a rolodex on the page.
This animation mimics the typing carousel effect I mentioned earlier, except this can be made with just CSS. It relies on a custom looping animation that moves from one CSS keyframe to another, each frame displaying a different word or phrase in the rotating text.
I find this effect much subtler and easier to read on a homepage. If you’re looking for some cool text effects for your homepage this would be an excellent choice.

9. Unbreakable Kimmie Schmidt

This sweet logo effect was borrowed from the Netflix series “Unbreakable Kimmie Schmidt”. Everything is created with CSS including the text styles and the custom animations.
The page body has a class which initiates the animation, and this class is appended to the page using JavaScript. From there it’s all pure CSS. It mostly uses a bunch of transforms to create the surprisingly realistic bouncing effect.
It’s yet another example of how much CSS3 can do if you know how to use it.

10. Filling SVG Text

Lastly we come to this very unique SVG filler animation using a mix of box shadows and the CSS stroke property.
This text is built entirely with SVGs but it’s also selectable so you can copy/paste letters like regular text. It’s fully compliant with all browsers and the animation is subtle enough that it could fit into any website.
All of these text animations bring something new to the table. You may not find them all practical or usable in your own work, but they prove almost anything is possible with the right approach.
Read More

Thursday, June 13, 2019

Roshan Thpa

10 technologies that a programmer should learn in 2019

Image result for programming
This article wraps up ten technologies that I want to better understand in 2019. Maybe you’ll find a few that you’ll want to learn, too.

1. Docker — containers of code for manufacturing in the cloud
Think of the ways human beings have created things in the past: recipes for baked goods, checklists for forging metal objects, and telephones to repeat orders. In every case there’s a chance to take a shortcut, misinterpret, forget, splash, stumble, round off, accidentally chop, improperly fold and otherwise change the way a thing is made compared to how it’s always done.
Some changes are perfectly reasonable improvements. Some changes create a defect leading to a break or drop in performance. It’s easy for humans to make things a little bit different every time they start a project. Often that’s undesirable.
Now think of computers and software applications. Our apps are encoded in the perfection of a digital representation. We should be able to quickly make a flawless copy. It can be delivered across the country in minutes, seconds, milliseconds. We’ve been working on that for years and it’s still not good enough.
There are too many humans in the mix of provisioning servers, loading software, configuring operating environments, and signing off on deployments. How can we make that process better for people?
Docker is a technology that’s emerged as a way of helping me deliver exact copies of my software application to environments across the world. We can deliver our software quickly, on demand and at scale. This is a major convenience of control.
Everything that our software needs to work on any hardware – cloud or on-premise – is bundled into a package called a container. Containers are used as a blueprint to spin up new servers on demand.
The software isn’t just written once and then it’s done. A program and its dependencies is a plan for stamping out more copies to address users’ needs. Compare this ideal to traditional manufacturing assembly lines. Containerization helps us define our software factory built to stamp out parts assembled into flawless final goods.
Removing much of the friction around deployment encourages us to deliver changes more often. As a result, our team gets better at delivering software. Confidence rises, and we do more updates in the name of a fantastic user experience. Surely getting developers closer to the operation of their software is a positive improvement.
Frequent small changes are less risky than dropping a few big ones. We can start experimenting with existing applications to fine tune and polish. We can casually launch new apps to see their real-life promise.
Recommended resources:
Image result for programming
2. JavaScript — the most important language improves
The most important programming language in the world changed significantly a few years ago and we’re still trying to understand all of it. The language is JavaScript. The committee guiding its evolution documented all of the improvements and published it as something you’ll see called “ES6” or “ES2015.”
We saw changes in JavaScript that added new operators, extended syntax, debuted data structures, and increased the portfolio of utility functions.
How can I claim JavaScript is the most important programming language in the world? It’s the only one that runs in web browsers.
The web is the primary delivery platform for the world’s computer users. That includes iOS, Android and other smartphones too. JavaScript provides a path for frontend developers to become full stack developers because of Node. Node is JavaScript running on a backend server. Learning JavaScript is well worth the time for any active programmer.
If you’ve used JavaScript in the past ten years, you’ve seen it work just fine. Why improve it? Because development teams are loading up JavaScript applications with more capabilities, features and interactions than ever before. Team sizes are increasing, and software life cycles are extending.
We now have increased expectations of web-based user experiences.
If you haven’t tried JavaScript’s new features you’ll quickly see how much better you can work with it. Much of the syntax was greatly improved. How? It’s been informed by studying the best aspects of every modern programming language as well as seeing experiments conducted on the language itself. Several exploratory languages compile down to JavaScript taking advantage of its reliable execution environment. Research like that inspires the JavaScript steering committee.
Some of the new syntaxes are so popular and useful that I’ve already begun using it in 2018. Every time I pull in a new feature I see there’s more to use. I’m re-learning JavaScript and expect it will keep me occupied well into 2019.
Recommended resources:
3. Go — a new language many are talking about
The Go programming language has popped up on my radar from a number of sources over the past year. So much so that it gave me this uncomfortable feeling that I was missing out on something amazing that only a few insiders understood. Programmers are always excited about new tech, but the reoccurring whispers of Go were persistent.
Should we use something like this just because everyone else is and it seems popular? No, but when enough bright people rally around using something it raises our curiosity. There’s nearly always valuable takeaways in every effort beginning with curiosity.
Once I briefly looked into Go I could tell it has an interesting pedigree given its designers and sponsor company. I’m going to naively claim Go is a backend web stack language. It’s probably good for scripting O/S utilities and other automation chores as well. From my point of view, I’d learn Go looking to replace Java, Node, PHP and the like.
Go is statically typed to reduce run-time bugs, compiles to improve performance, has relatable syntax to make writing it simple and has libraries addressing the needs of modern networking. All good qualities, and I can see why there’s enthusiasm for it.
Recommended resources:
4. Augmented reality — mixing reality with information
Generally speaking, augmented reality (AR) is a UX technique taking images of the user’s real-world environment and overlaying it with digital enhancements. The digital layer provides useful information, or joyful graphics, in 2D or 3D. The real-world background layer is generally produced by a camera quickly scanning the user’s surroundings.
I self-identify with being a computer programmer and a frontend programmer at that. Frontend programmers enjoy being up close to the end-user while working alongside product managers and UX designers. One possible outcome of AR is that it might become “the new frontend” in the next five to 10 years.
Many solutions for augmented reality exist. One particular combination is gaining traction:
  • Native apps running on Apple iOS.
  • Swift programming language for building my app.
  • ARKit for augmented-reality sensor measurement and tracking.
Notice that AR is considered separately from virtual reality (VR). VR tends to keep its viewer tethered to a base station – usually indoors. In other words, wearing face-mask style goggles tethered to a desktop computer generating a completely synthetic environment.
AR is preferred when it’s important to gets users out into the physical world where they can collaborate with other people. AR is more problematic in some ways but more fulfilling in others.
Recommended resources:
5. Machine learning — finding valuable patterns in data
Machine learning (ML) isn’t new to programmers at Sabre. For years we’ve been watching it emerge in the news, reading about techniques, applying them to products and benefiting from it as consumers. From my personal point-of-view, I’ve been waiting for ML to get easier to dive into.
So far ML is too technical and low-level for me. Researchers are still building up fundamental layers to make ML functional, and I’m waiting for the leading tech-stack to emerge. I want ML to become easy enough that application developers can use it as a daily tool.
That ideal ML tool doesn’t need to be consumer-grade, but it does need to offer more abstraction and coordination for typical developers to enjoy working with. Now ML feels full of industry jargon and technical friction for getting started.
Most developers ought to pick up enough practical ML tech in 2019 to feel like they can be competitive. It’s important to start getting an ear for the vocabulary, understanding reasons for why, and when to use it and how to write code applying library capabilities.
Recommended resources:
6. CSS grid — layouts with lively style
Cascading Style Sheets (CSS) is a major part of any website. It’s a markup language enabling developers to define graphic design for pages shown and apps running in web browsers. CSS works together with HTML and JavaScript to complete the fundamental tools for building web-based user experience.
Over the years, designers have sought out increasing levels of control laying out their web pages. They expect the same pixel-perfect direction that they have in traditional media such as print. Demands are rising. Laying out content in the browser has never quite worked out as well as we hoped and needed.
Some tricks of the trade included using the “<table>” tag for visually formatting text and pictures based on rows and columns. Then we discovered the idea of “floats” for sliding “<div>” element containers around the screen. We could break content out of the bounds of boxy tables.
Flexbox was our first true sense of control. Just a few years ago the Flexbox display capability showed us how to achieve layouts appearing similar to a typical app UI. Flexbox still works well today. It’s the tool that we commonly reach for here at Sabre when novel layouts are needed on web apps and web pages.
CSS Grid is the latest standard for layout control, and, by all measurement, it’s the best yet. Designers can ask for uniquely asymmetrical page layouts, and developers can reasonably recreate them. CSS governing bodies have put more time into writing this standard so that the most popular web browsers accept and implement the specification. That means your CSS Grid code is more portable than any solution before.
There’s no doubt that we’ll see plenty of Flexbox, some float and even a few tables in legacy website code. Expect to see CSS Grid code when you read through modern CSS frameworks and libraries. I’ll practice with CSS Grid in 2019 to see how I can pull it into my daily developer toolbox.
Recommended resources:
7. APIs — how to think about making an industry programmable
There’s a common industry notion that all companies will become technology companies. We can build on that line of thinking by asking if companies will start making digital products? Particularly digital products in the form of APIs.
Why? It seems to me that a company that has become well known for doing something good will inspire other companies to become good at doing that thing, too. Offering easily consumed APIs is a gateway to that goal.
Here’s a good example: We can find a company that has a database of all roads and popular attractions in the world. When that company produces a “Maps API,” we can use it in one of our apps and become good at showing roads and popular attractions, too.
We didn’t need to send our programmers to attend the Anaximander University of Cartography to study map-making for four years and then travel the world writing down all the interesting things in it.
Instead, we would only need a few days integrating a good Map API into our app. Then we’ve improved our unique-user experience for our customers. How is that better than what the API provider does? They’re great at their subject, but they don’t know our customers as well as we do. They couldn’t replicate our unique UX that serves our audience.
It’s no secret that Sabre has a rich legacy in APIs. We offer services that power the travel industry. Our goal is learning more about making fantastic APIs to make it easier for software developers to become great at helping travelers find dream offers.
It’s been routine for two companies to interface with one another through salesmen talking. Now it’s normal for two companies to interface with one another through software developers coding to an API. Does that feel like the new normal for your business? If not today, will it be next year? If offering APIs feels like your future, it’s worth you learning more about them soon.
Recommended resources:
  • API Management: gateways, monitoring, billing, orchestrating, OpenAPI 3.0.
  • Developer Experience (DX): request/response as UI, sample apps, documentation, self-service, community.
  • Performance: region-based scaling, vulnerability detection, hybrid cloud strategy.
8. IOT — code to some new thing
Internet of Things (IoT) is one of those industries that I understand is very important, but I don’t understand how to think about it. My history as a  frontend/UX/web programmer is probably putting me at a disadvantage. Nothing I see in the IoT world reminds me of what I know.
One of my goals in 2019 is buying a piece of IoT-enabled hardware and programming it. Something unique like a camera, light bulb, robot or measuring sensor. IoT devices ought to work out of the box, be conveniently powered, WIFI connected, programmable, not too expensive, and obviously useful. It would be nice if it had a RESTful API too.
Learning how to program an IoT device might challenge the beliefs of a frontend programmer. Our preconceived notion of UI only being an onscreen, 2D presentation might be old fashioned at this point. A programmer might be surprised to find lights, buttons and sensors are entirely different, but often appropriate, UI. That could lead to knowing solutions for our customers’ problems.
Recommended resources:
9. Security — keep the important things safest
Security became important the moment human beings got stuff that other humans found valuable. Is theft built into humanity? Maybe that’s just an interesting debate topic, but can we all agree that digital break-ins are a highly visible issue for companies?
Major breaches have brought down companies and destroyed careers. This is happening several times a year for as long as we care to remember. In fact, we can’t forget it because news coverage provides cautionary tales that none of us want to be a part of.
Any network-connected devices containing sufficiently valuable data will attract the attention of malicious actors. It’s our job to stop them. There’s no other way to say it, it’s a full-time job, and everything around security takes active hands-on work.
Security is all of our concern and software developers need to put more time into studying it. Put into practice whatever you learn about security.
Recommended resources:
  • Writing computer program logic in a more secure manner.
  • Monitoring my networking resources for security breaches.
  • Acting personally with more secure behaviors.
  • Automated testing for continuous vulnerability checks.
10. ReactJS — organize your web frontend code with purpose
If you’ve been delivering web-based software applications over the years it’s likely that you’ve been programming in JavaScript. It’s a good language that’s getting better. Especially with the improvements mentioned in topic 2 on this list.
What’s tricky is that JavaScript, and the web platform in general, doesn’t offer many opinions on how to build software at scale. Freedom of choice is awesome, but it can be disabling, too. Any popular web app built in this environment will be improved over time with more capabilities, features and interactions. When that happens, the development team size will increase, and its life cycle will be extended. Sounds like success, and that’s good news.
Now that we have increased expectations of web-based user experience, how do we architect software that operates at scale?
Frameworks have been helping address that challenge. There’s been a dozen of them over the years for frontend web programming with JavaScript. ReactJS has emerged as one of the top JavaScript framework candidates. A good framework will help teams clarify how to work together building reusable components that are easier to maintain over time.
ReactJS is popular enough to have a solid community of engaged users. They’re producing educational content in the form of blog articles, Q&A forums, conference videos and sample apps. These are big wins for a team looking to accelerate their learning and productivity.
Recommended resources:
More to come in 2019
There’s always much to learn in the tech world – too much in fact. Breaking down the options into a prioritized list makes it feel more manageable. Looking forward to finding new discoveries is one of the exciting reasons programmers are attracted to the tech industry. Opportunities for meeting the smart people inventing and teaching tech is a reason to stay.
Sabre software developers are always looking at ways to improve how we build applications and services. As we evaluate these new technologies we might decide they’re the perfect tools for building our next product.
Read More

Sunday, June 9, 2019

Roshan Thpa

15 JavaScript Face Detection And Recognition Libraries 2019 with Source Code

Face detection, recognition and tracking are revolutionary technologies that have been deployed on mobile phones, webcams, and digital cameras. With the help of this advancement in technology, we are now able to detect human faces and recognize any specific person in a crowd.
This is a really superb and game changer innovation that has taken the technology world by storm. Now it’s only a matter of time for face detection technology to be deployed across different web applications in different sectors.
In digital cameras, face detection technology is used for the purpose of autofocus; in webcams, it is used to take an instant passport-sized photograph of you; and in mobile phones, it is one measure used for the authentication of its user.
The future of face detection and recognition technology is very promising. This is because it is successfully used by the police and other law enforcement agencies to detect and fight crime in many countries of the world.
Different machine learning algorithms are in place to achieve the purpose of detecting and recognizing a face. This is not a simple or straightforward task but some highly professional programmers have created different JavaScript libraries and frameworks to help us use this new technology in our web applications. So, let’s have a look at these amazing JavaScript face detection and recognition libraries.
JavaScript Face Detection And Recognition Libraries

tracking.js

This JavaScript library is packed with a deluge of algorithms and capabilities for tackling different aspects of face detection and recognition within a web browser. It works very instinctively. Face detection, recognition and color tracking are done instantly. This is one of the best JavaScript face detection and recognition libraries.

face-api.js

This is another JavaScript library for the detection and recognition of human faces. It makes use of the tensorflow.js core API for its proper working inside the web browser. You can use this library to track and detect a face in real-time.

clmtrackr

clmtrackr is also an open source face detection library like the ones I’ve mentioned above. You can download it from GitHub for free.
It makes use of Constrained Local Models to precisely identify and track the facial features. It then returns an array, which contains all the coordinates of a face model.
The interesting thing about clmtrackr is that it is capable of face swapping and masking. It really forms an all-in-one package.

pico.js

One of the JavaScript face detection and recognition libraries is pico.js. It is made up of roughly 200 lines of clean JavaScript code.
In its GitHub repository, you will find 3 major folders e.g. “img”, “cam” and “wasm”. All of these folders contain basic demo of how this library works. Its “img” folder has an example which clearly demonstrates how you can detect a human face in images. The “cam” folder contains a demo which shows the tracking of face in real-time. Basically “wasm” folder is there to provide an example about how you can compile pico.js to WebAssembly.

jeelizWeboji

jeelizWeboji.js is a JavaScript/WebGL library that is used to detect and replicate different expressions on faces. It runs perfectly on typical webcams. The face detection is very effective because it can easily work in all kinds of lighting conditions.

jeelizFaceFilter

This is another unique JavaScript/WebGL library that solely does real-time face tracking and detection in videos recorded using a webcam. Its features include face detection and tracking, mouth opening detection, face rotation detection, detect multiple faces, support for 3D engines like BABYLON.JS, THREE.JS, A-FRAME and many more. It is highly mobile-friendly too.

js-objectdetect

This is an object detection JavaScript library that runs smoothly on any web browsers. It gives its output in real-time. It is well supported by all the latest web browsing applications. Basically the main purpose of using this library is to bring computer vision right inside your favorite web browser without any issues.

face-recognition.js

This is another face recognition program. It is both a JavaScript and a TypeScript API. It is available in the form of node.js package. Apart from face recognition and detection, it also identifies face landmarks.

jQuery Face Detection Plugin

jQuery Face Detection Plugin helps to detect different human faces inside an image, canvas or video. It makes use of an advanced algorithm to get an array of all the objects found in a face. These objects include coordinates, height and width, offset, position, scale and confidence of a face.

JS-face-tracking-demo

This is a face tracking JavaScript library demo. This program consists of JavaScript, HTML and CSS.

headtrackr

This JavaScript package is specifically developed for tracking the face and head of a person. It works perfectly through a webcam. It basically tracks someone’s head position in proportion to the screen of the computer. This JavaScript library gives an accurate output when deployed on the modern web browsers.

Kittydar

This is very interesting, to say the least. Face detection functionality has gone beyond detecting the faces of humans; it is now used on animals. Kittydar is a face detection JavaScript library used for detecting the face of cats in an image/canvas. Once the cat is standing upright and facing forward, Kittydar will surely recognize it with a high level of accuracy.

ccv-purejs

ccv-purejs is a great example of JavaScript face detection libraries that can be downloaded from GitHub. Actually this library makes use of node-canvas to work effectively with node and npm. Right now the package requires you to load an image inside a canvas object. But according to the developer, he has planned to add the support for directly using an image path in future.

videojs-faceDetection

This JavaScript library works in different environments. It makes use of the video.js player achieve face detection. Having a distinct support for videojs player makes it very unique. It is built on the back of a combination of JavaScript and HTML5 using an intuitive algorithm as usual. Its features include a custom data structure, simple image processing, grayscale, box blur and many more.

facedetector

This is yet another face detection and tracking JavaScript library that is supported by a node.js program. Its face detection functionality is similar to others and also it works in real-time. It has implemented a really simple yet effective algorithm for tracking faces. It is capable of detecting so many faces in one photograph. You can use and distribute it for free because it is open source and available under MIT license.

Conclusion

Face detection and tracking have come to stay. It can only get better as more advancement is made in the future. JavaScript face detection and recognition libraries have helped in no small ways in making facial detection and recognition a reality.
The fact that it helps in fighting crime and used for authentication of the real owner of a mobile phone makes it a lot more compelling.
In the nearest future, it will be used on web applications and its usefulness will become irresistible. It may be deployed in schools during examinations to detect and recognize the faces of students who are allowed to appear in exam. It can also be used during the recruitment process. The future is already here. Our lives can only get better and smarter with the passage of time.
Read More