Category Archives: Technology

How To Integrate WYSIWYG Editor in Elixir/Phoenix application

How To Integrate WYSIWYG Editor in Elixir/Phoenix application

 

What is a WYSIWYG Editor?

 

Gmail’s composing email editor shown below has various tools such as Bold, Italic, Bullets, Paragraphs, underline, Image attaches, link, etc. for users to format text. This enables the sender to format text in the email exactly the same as he wants the receiver to see it without getting into the markup.

Gmail

 

Formatting text in traditional text fields is not possible and hence the text is rendered in a single line which does not look good.

As the name suggests, What You See Is What You Get (WYSIWYG) editor returns the exactly formatted text as the user had added. These editors conceal the markup and allow the Web page developer to think entirely in terms of how the content should appear.


In this tutorial, we will learn how to integrate Classic CK Editor 5 in an elixir form.

CKEditor is an HTML WYSIWYG editor and is open source.

 

How to integrate it?

 

CKEditor’s build is available in a CDN (Content Delivery Network). It is hosted on servers spread across the globe. Therefore, its scripts are loaded faster because they are served from the nearest locations to the end user.

If the same version of CK Editor is downloaded on a browser (even from a different website), it is loaded from cache. So, it speeds up the next requests.

Downloading the editor can be done by using <script > tag.

<script src=https://cdn.ckeditor.com/4.11.1/standard/ckeditor.js></script>

 

Create Classic Editor

 

Suppose, we need to add CKEditor to the description field of a form to edit product details. The id of textarea tag is product_description .

The classic editor is added to the form after the page loads and below script runs.

 

div class=form-group row >
<%= textarea_input f, :description, nil, is_horizontal: true, description: desc., rows: 10 %>
</div>
<script>
ClassicEditor
.create( document.querySelector( #product_description ) )
.catch( error => {
console.error( error );
} );
</script>

 

To remove any tools from the editor, we can add tool names to removePluginsin the .create method. Below code removes ‘ImageUpload’ and ‘MediaEmbed’ tools from the CKEditor.

 

<script>
ClassicEditor
.create( document.querySelector( #product_description ), {
removePlugins: [ ImageUpload, MediaEmbed ]
} )
.catch( error => {
console.error( error );
} );
</script>
view rawremove_tools.eex hosted with ❤ by GitHub

 

We also have to stop HTML textarea editor to show up before CKEditor is loaded in its place. To do that, we will have to make the textarea hidden as shown below by adding class: ‘invisible’ to the textarea tag.

 

<div class=form-group row >
<%= textarea_input f, :description, nil, is_horizontal: true, class: invisible, description: desc., rows: 10 %>
</div>
view rawhide_textarea.eex hosted with ❤ by GitHub

 

Once we edit in the CKEditor and submit the form. The editor sends the edited text along with HTML markup to the backend in string format. The edited text in the backend is saved with HTML markup.

For example: In Aviacommerce, we saved the description of jewelry in bold as shown below.

 

Description of Product in Aviacommerce

 

The description for this product in backend got saved with HTML markup as shown below.

WYSIWYG Editor Integration in Elixir Phoenix – Aviabird – Medium

 

With this setup, we are ready to serve the front-end with HTML markup we have stored in the backend record thisdescription case.

 

Front-end Rendering

 

Let’s discuss how the rendering of HTML happens here. Description containing HTML markup is retrieved from the backend. This is fed to the editor with innerHTML element which renders all the HTML in the description.

With these kinds of editors integrated, applications are subjected to XSS attacks. For example, Aviastore which is a demo application of Aviacommerceexperienced this kind of XSS attack when a user tried to input <script> into an editor. Therefore, making the innerHTML run contents of the script tag. Luckily we had anticipated this and handled it on our side.

XSS attack attempt on Aviastore

 

In AngularSpree also, we created this kind of editor where we wanted to allow innerHTML to be executed along with preventing the XSS attacks. Therefore, we handled this by adding sanitizeHTML pipe . (Click to go to the code) The sanitizeHTML pipe of Angular lets you desanitize HTML only while keeping other sanitization as it is, thereby preventing XSS attacks.

But, to our relief, we do not have to worry about these things with CKEditor. CKEditor handles it on its own. For example, I tried to add some text in bold along with a script in <script> tag. Below is the output.

 

CKEditor handling sanitization

 

Above Image shows that CKEditor is handling the rendering of HTML markup while preventing XSS attack by sanitizing malicious script.

You can refer to this cool blog where DomSanitizer in Angular is explained.


 

 

About RemotePanda

RemotePanda is a personalized platform for companies to hire remote talent and get the quality work delivered from the city Pune. The resources in our talent pool are our close network connections. While connecting them with you, we make sure to manage the quality, growth, legalities, and the delivery of their work. The idea is to make remote work successful for you. Get in touch with us to learn why RemotePanda is the best fit solution for your business requirements.

 

Outsourcing Software Development – Confession Of A CEO

Outsourcing Software Development – Confession Of A CEO

outsourcing-software-development

I am Andrew, co-founder of JayuRewards, I am a purpose driven executive with over a decade of experience. I have built 3 companies till date, all bootstrapped and all profitable. One thing that I learned and always followed is that – money matters. Whenever I buy something, I look for deals. I visit Target often and when I do buy something, it doesn’t matter whether something is being manufactured in China, India or Mexico. I’m just concerned about the quality, and I make sure it fulfills my needs.

Like any other small business, I aspire to grow quickly while minimizing the risks and costs. Therefore “I don’t put all my eggs in one basket”. I work on new ideas, create prototypes, release for beta tests, and then make adjustments based on feedback. For me, putting everything I have financially on developing an idea in a “one shot, one kill” fashion is not feasible. I need to remain financially flexible to handle changes and many other aspects of running a business.

 

Outsourcing Software Development

 

Today, “people with ideas have to be agile to succeed”Rovio made more than 50 games before they created Angry Birds. Hundreds of successful start-ups like AirBnBSnapchatDropbox, and Instagram started with one idea and then pivoted when an opportunity presented itself. “Building a successful product is a lot like winning a marathon. You need to win through small phases first”. You shouldn’t expect to sprint and win the race within the first mile.

Time and money are limited for people starting a business for the first time. One of the top reasons startups fail is because they run out of money. It’s not that we don’t manage money correctly, it’s because it’s very difficult to foresee upcoming financial costs. It’s dangerous to spend a large amount of money on developing an idea in the first phase of your business, when your idea may drastically change during the second stage, to include unforeseen financial challenges.

 

My outsourcing story

 

Having Remote workers that are spread worldwide gave me the opportunity to create my ideas while allowing me to remain financially flexible. As a matter of fact, one should try the alternative, and try to hire local developers for a project without receiving a mind-boggling invoice (excluding those individuals who have developers on their team). The advantage of being able to hire outsourced developers at a third of the cost means that I’ll have room to pay for three iterations of developing my idea instead of one shot at it.

Of course one has to be cautious when choosing any developer, especially if they are remote. However, this is the case for anybody you choose to work on your project. Just like anybody else you have to view their portfolio, do preliminary meetings, check their references, etc.

Is it harder to work with an outsourced team? Well, I wake up early or stay up late to connect with the team. I do have to draw sketches and type more emails sometimes to describe certain aspects of my ideas. And depending on who I’m speaking to, I do take time when we talk to make sure they understood me or vice versa.

I actually don’t see this as a burden but consider an opportunity because it allows me to make my capital stretch more for my business. A penny saved is a penny earned. For a bootstrapped startup, saved pennies can add more time later to overcome obstacles down the road.

I continue my journey to build more. Check out my latest work JayuRewards. Jayu helps your next door mom and pop shops create and run discounts for frequent visitors.

 

What is Blockchain?

What is Blockchain?

what-is-blockchain

Blockchain, bitcoin, cryptocurrency, ethereum all are trending topics these days. Everyone is talking about this even who are not involved with the crypto world. But I think there are thousands of people out there who want to know what the hack is Blockchain. That’s the purpose of this post — trying to describe in the easiest way possible.

 

Blockchain allows participating to create digital ledger (collection of records) and share it among the individuals without the need for a central authority or third party to enforce the rules. The removal of central authority from data structure is one of the powerful aspects of the blockchain.

When you do a transaction, blockchain creates a permanent record and history of the transaction. It’s extremely difficult to change or remove the recorded data. This capability has never existed before. It can create trust in the digital-data world. They create an honest and safe system without the need of the third party or central authority to enforce the rule.

 

What is Blockchain?

 

A blockchain is a data structure that handles distributed database operates by a group of individuals.

The blockchain is a peer-to-peer technology with no central authority or third party.

Still not getting ? or do you think why do we need this?

Let’s consider an example of two friends Taral and Kishan to clear all questions:

Blockchain URL

What is happening here? Kishan and Taral both trusted the bank to manage their money. The bank is there to handle all the transactions. Ultimately we need the third party to manages and handle our stuff.

 

What if we can remove them? The blockchain is here for that, to establish one-on-one trust in the digital world.

 

blockchain digital world

 

The common misconception on bitcoin and blockchain:

The-common-misconception-on-bitcoin-and-blockchain

 

Bitcoin and Blockchain are often used interchangeably, but they’re not the same. The blockchain is a protocol. Bitcoin, Ethereum, Ripple all are using this protocol to enable secure transfer inside a network. Bitcoin is the name of cryptocurrency which runs the bitcoin network.

The blockchain is a technology as we see above. So I am concluding here with the basic introduction on the blockchain. It is giving us the trust factor in the digital world by features which are not presented before. The world is considering blockchain as the new evolution in Digital-world. The possibilities are endless with this technology. Let’s see where it’ll go.

Conclusion:

 

To know more about Blockchain you can contact our author through RemotePanda.RemotePanda is a personalized platform for companies to hire remote talent and get the quality work delivered from the city Pune. The resources in our talent pool are our close network connections. While connecting them with you, we make sure to manage the quality, growth, legalities, and the delivery of their work. The idea is to make remote work successful for you.

Rest and Soap web service with it’s best practice

Rest and Soap web service with it’s best practice

rest best practice

Why this blog?

This blog highlights REST Best Practices intended for the developers who are interested in creating RESTful web services which provide high reliability and consistency across multiple service suites. We all know there are various resources on best practices for building RESTful web services. However, it should also be understood that many of the available resources are conflicting. Also, it’s likely not doable to refer, read and comprehend several books on this subject with a motto of implementing services “tomorrow.” This blog will enable you to quickly understand and grasp RESTful concepts with a major concern on best practices and conventions.

 

What is REST?

REST is an abbreviation of Representational State Transfer. REST represents the architectural style of the World Wide Web (WWW). REST is an approach to communication which makes simple HTTP calls for inter-machine communication. REST is often preferred over SOAP because REST does not use as much bandwidth as heavyweight SOAP does which makes it a better option for use over the Internet.

In REST, the calls will be message based and dependent on HTTP standards to describe these messages. REST can be understood as a simple request/response mechanism, where each request returns a response. The following fig. will give you a better idea:

Rest and Soap web services

RESTful API’s, more popularly termed as REST API’s are the web services written using REST architecture.

REST is resource based. When we talk about REST, it indicates things or resources as opposed to actions in SOAP. In RESTful services noun represents the resources, for example, a person resource, a user resource. We use an HTTP verb (POST, PUT, GET, DELETE, etc.) to indicate what operation the REST API has to perform. Resources are identified by the URIs. Having multiple URIs pointing to the same resource is possible. RESTful API’s generally accept/return data in JSON or XML format.

Let’s quickly form an example with this basic knowledge before moving further. Suppose Sagar is a resource, there is a service to fetch contact information using the HTTP verb GET which will return the data like name, address, phone number, email address in JSON or XML form

 

REST architectural style defines the following six constraints:

 

1.Uniform Interface
2.Stateless
3.Cacheable
4.Client-Server
5.Layered System
6.Code on Demand
Let’s have a small review of each:

 

1) Uniform Interface:

It defines the interface between clients and servers. Uniform Interface simplifies and decouples the architecture. It enables each part to develop or evolve independently. Uniform interface describes the following four guidelines or principles:

  • Resource-based
  • Self-descriptive messages
  • Resource modification using Representations
  • Hypermedia as the Engine of Application State (HATEOAS)

2) Stateless:

It is not required for the web server to remember the client’s state. The necessary state needed to handle the request is included in the request itself, whether as part of URI, query-string parameters, body or headers.

3) Cacheable:

Clients can cache responses. Therefore Responses must explicitly or implicitly define themselves as cacheable or not which prevent the clients from reusing stale, old or inappropriate data in response to further requests.

4) Client-Server:

The uniform interface is responsible for separating the clients from the servers. Servers and clients can be developed independently. It conveys that the clients are not concerned with data storage which is internal to each server, which increases the portability of the client code. Servers are not concerned with the UI or user state, which makes the servers more scalable and simpler.

5) Layered System:

A client is unable to tell if it is connected directly to the end server or to an intermediary server. Intermediary servers may improve system scalability by providing shared caches and enabling load-balancing. Security policies can also be enforced through layers.

6) Code on Demand:

It is possible for the servers to extend or customize the functionality of a client on a temporary basis by transferring logic to it that it can execute, for example, Java applets and client-side scripts like JavaScript.

HTTP Verbs/ Request Methods:

Clients specify their desired interaction method in the Request-Line part of an HTTP request message. Each HTTP method is bound to some specific, well-defined rules and meaning within the context of a REST API’s resource model.

The primary or most commonly used HTTP verbs or more properly called as methods are GET, PUT, POST and DELETE. These correspond to create, read, update, and delete operations respectively. OPTIONS and HEAD are the other verbs but are less frequently used.

i. GET:

The GET method is used to read or retrieve a representation of a resource. As GET method (along with HEAD) is used for READ-only purposes, hence they are considered safe as they do not change the data. GET (and HEAD) are regarded as idempotent, i.e., making multiple identical requests end up having the same result as a single request.

Examples:

GET http://www.myexample.com/users/orders

GET http://www.myexample.com/users/12345

GET http://www.myexample.com/users

ii. PUT:

We use the PUT method mostly for update functionalities. Use this method for PUT-ing or updating data to a known resource URI along with the request body which contains the newly-updated representation of the original resource that we intend to change.

PUT method can also be used to create a resource in cases where resource ID is provided by the client instead of the server. But we must generally use POST to create new resources where the client defined ID is included in the body representation.

PUT is not a safe method, although it is idempotent.

Examples:

PUT http://www.myexample.com/users/123

PUT http://www.myexample.com/users/orders/123

iii. POST:

The POST method is utilized to create new resources. This method is not safe nor idempotent.

Examples:

POST http://www.myexample/com/users

POST http://www.myexample.com/users/orders/123

iv. DELETE:

As the verb suggests, it is used to delete a resource identified by the URI.

Examples:

DELETE http://www.myexample.com/users/123

DELETE http://www.myexample.com/users/123/orders

Response Status Codes:

Forty standard codes have been defined by HTTP to convey the results of a client’s request. These codes can be divided into the following five categories:

CATEGORY DESCRIPTION
1xx  Informational Indicates transfer of protocol-level information.
2xx Success Indicates that the client’s request was accepted/processed successfully.
3xx Redirection Informs that the client needs to take some additional action to complete their request.
4xx Client Error This category of error status codes defines the client’s error.
5xx Server Error These error status codes indicate the server side errors.
All Items Description

Let’s have a short and precise look over the success and error status codes.


HTTP response success codes:

CODE NAME MEANING
200 OK Indicates a nonspecific success
201 Created Indicates that a new resource has been created
202 Accepted Indicates the start of an asynchronous action
204 No Content Indicates that the body was left blank
301 Moved Permanently Indicates that a new permanent URI has been assigned to the client’s requested resource.
303 See Other Sent by controllers to return results that it considers optional.
304 Not Modified Sent to preserve bandwidth (with conditional GET)
307 Temporary Redirect Indicates that a temporary URI has been assigned to the client’s requested resource.

 

HTTP response error codes:

CODE NAME MEANING
400 Bad Request Indicates a non-specific client error.
401 Unauthorized Indicates either client provided wrong/invalid credentials or missed to send them.
402 Forbidden Indicates denied access to a protected resource.
404 Not Found Sent when the client tried interacting with a URI which the REST API could not map to a resource.
405 Method Not Allowed Sent when the client tried to communicate via an unsupported HTTP method.
406 Not Acceptable Sent when the client tried to request data in an unsupportive type format.
409 Conflict Indicates that the client attempted to violate resource state.
412 Precondition Failed Informs the client that one of its pre-condition was not met.
415 Unsupported Media Type Sent when the client submitted data which is of unsupported media type format.
500 Internal Server Error Tells the client that API is having problems of its own.

Best Practices/Tips:

1) Use Noun instead of verbs:

Nouns are good and verbs are bad when it comes to rest standards. You can use the following easily understandable structure for every resource:

RESOURCE GET

(READ)

POST

(CREATE)

PUT

(UPDATE)

DELETE
/customers Returns a list of customers Create a new customer Bulk update customers Delete all customers
/customers/1234 Return a specific customer (405 – Method not allowed) Updates a specific customer Delete a specific customer

Bad practice is to use verbs like:

  • getAllCustomers

  • createNewCustomer

  • deleteCustomers

Nouns are good and verbs are bad when it comes to rest standards. You can use the following easily understandable structure for every resource:

 

2) GET method and query parameters should never be used to update or alter the state:

Never use GET to alter or state changes. Use GET, POST or DELETEto alter the state.

 

3) Use plural forms of the noun:

Keep the resource naming simple by following plural forms of nouns. Even though you might think that it is grammatically incorrect, but the best standard for REST practices is to use plurals.

  • customers instead of /customer

  • customers/12345 instead of /customer/12345

 

4) Use sub-resources for relations:

If you have some resource which is related to another resource then it is implied to use sub-resources:

  • GET /customers/1/products: Returns a list of products purchased by customer 1


5) Use HTTP headers for serialization formats:

The client side and server side both should know and use the format that is being used for communication. This format has to be specified in the HTTP-header.

  • Accept: It defines a list of acceptable response formats.

  • Content-Type: It defines the request format.


6) Error handling and using status codes:

It is complicated to work under situations where proper error handling is ignored. Just returning of HTTP 500 with a stack trace log is not enough. We need to make proper usage of the HTTP status codes that have been covered in the earlier part.


7) Include scope for paging, sorting, filtering and field selection:


i. Pagination:

Use limit and offset for pagination. It is not only flexible for the user but also standard in the leading databases.

GET /customers?offset=5&limit=20


ii. Sorting:

Ascending and descending sorting should be provided. Also, allow sorting over multiple fields.

GET /customers?sort=-age,+lastName


iii. Filtering:

We can make use of unique query parameter for all fields or maybe use a query language for filtering purpose.

GET /customers?age>=24 Returns a list of customers whose age is equal to greater than 24.


iv. Field Selection:

It is a widespread practice that mobile clients wish to display only a few attributes. They don’t want to display or use all the attributes of a resource. Thus an API should have the ability that allows the mobile clients to choose the returned fields. This helps to save the cellular battery, reduce network traffic and speeds up the API usage.

GET /customers?fields=name,age,contact number


8) Documentation:

One last suggestion is to maintain an update API document. This document should be shared and accessible to all concerned people. Most client-side developers should check the API document before starting the integration of web services. The doc should cover all necessary information like request URL, response body format, headers, etc. For every API try to cover with an example of request body and response bodies with all the alternative responses including error and success.

 

Conclusion:

I hope the above content is easily understandable and lets you get started with developing REST API with some excellent level standards and consistency in your coding style. Just follow these REST best practices, and you’re all set.

 

 

About RemotePanda

RemotePanda is a personalized platform for companies to hire remote talent and get the quality work delivered from the city Pune. The resources in our talent pool are our close network connections. While connecting them with you, we make sure to manage the quality, growth, legalities, and the delivery of their work. The idea is to make remote work successful for you. Get in touch with us to learn why RemotePanda is the best fit solution for your business requirements.