Get the most recent info and news about QCObjects on HackerNoon, where 10k+ technologists publish stories for 4M+ monthly readers.

QCObjects

qcobjects

Hey Hackers! I’m Jean Machuca and I’m the Author & Founder @ QCObjects. First of all, I’d like to say a huge thank you to the community for recognizing QCObjects as the winner of: HackerNoon Startups of the Year 2021: : SEE THE AWARD PAGE CLICK HERE TO CHECK OUT THE AWARD If you have made a video acceptance speech on YouTube  (whether a comedic one or a serious one), please post the link here: tasteful Click here to check out our new demo video Reporter: What does it mean for you to win this title? HackerNoon This is a recognition to the effort of the people who have worked on the team of QCObjects, the people who have contributed to the open-source, but it is also a recognition to the thousands of enterprise application developers around the world that are whiling to change their mindset and looking to find new ways to code for large scale projects. It is also important to recognize the talent in the Latam region for high-tech projects. How do you or your company intend to embrace the responsibility of this title in 2022? This is a huge responsibility as there is a rising number of amazing new startups coming on from Chile and Latam. What I want to do is pave the path for these startups to show up somehow. What are some of the goals you’re looking forward to accomplishing in 2022 (whether it be through company initiatives or your personal journey)? I want QCObjects to become the engine of a new world-class ecosystem of enterprise applications. This is a long way to go. In 2022 I’ll continue to contribute to the open-source with new tools and libraries that open more possibilities for creative people. As you look at the variety of concerning trends in the world around you, what solutions can you think of? Name three trends and three solutions. Be as brief or as detailed as you like. I think Autonomous APIs are becoming a huge trend. This magical idea of that an artificial intelligence could someday and somehow code an API of APIs that are working together for a common goal, you know… is becoming a bit real. I guess robotics programming interfaces (RAPID) and biometrics applications programming interfaces (BioAPI) are the next steps (they have always been). If you can code an API that could control a robot, you could also code an API for a microchip, then you could install that microchip inside vital tissue, probably making some signals to skin nerves. You could make sequences to these signals. You know… to code brains… some guy who is dreaming on Mars is already thinking in that. I think that particular idea of the future is not very far from now. In fact, I think in the next couple of years we will be talking a lot about bioethics. After participating in this journey, is there anything that you would like the team to know? HackerNoon I’m human. I’m not perfect. What is something special about you or your company that you’ve rarely had the chance to properly share but really wanted to? (Give this one a proper think, I’ll know if you didn’t!) I’ve coded my first algorithm without a computer. I did it with a pen on a piece of paper in a math class when I was 13th y/o. I made an asymmetric maze and I drew a set of triangles and circles positioned on it. When you passed through the maze, some of the triangles and circles were represented by a number or a letter. Together, they represented a hidden code. Some people could solve the maze, and some others could solve the math involved. The teacher found me drawing during his class and called my parents to punish me by not paying attention in class. What song or music album are you currently enjoying? I secretly love a Norwegian singer called Astrid S. She has an acoustic voice that is amazing at the time it is relaxing and rhythmic. I also enjoy a lot the epic music of Audiomachine. What are some concepts you wish people knew more about? I wish people to spend more time understanding algorithms and patterns. These concepts could change your perception of life and reality in a way that gives you some extra brainpower. Is there anything else you’d like me to know? It can be anything. If you code JavaScript, learn QCObjects framework. It is free and open-source! Thank you for everything that you do! – Team. HackerNoon P.S. If you enjoy getting interviewed (AKA, the ol’ intellectual stimulation, check out some more interviews !) here For more information: Read about the Noonies . To see all of the winners you may visit , pick any award, and view the name that appears at the top. Or follow for posts with the list of names released over the course of the week of February 14, 2022. here this site this account Read the FAQs about or . To see all of the winners you may visit , pick any city and view the name that appears at the top. Or follow for posts with the list of names released over the course of the week of February 14, 2022. Startups here here this site this account Thank you to all of our sponsors! We truly appreciate your contribution to the tech world and thus the future! : Startups , , , , , , , , , , Blockster Brex FreeCodeCamp LaunchDarkly Coil Udacity Udemy Vercel Asia Pacific Transgender Network Bybit Everscale Network : Noonies The Noonies Awards are sponsored by: , , and hosted by: Bybit Avast TECH Domains HackerNoon

Autonomous APIs are the Future - Interview with Jean Machuca, Founder, QCObjects

Here are some recommended settings for a good result doing your first steps creating a PWA using : QCObjects Front-End settings: Using QCObjects in the front-end will let you tweak a set of options that are useful depending on your needs. The following settings can be set in any JS file at any time of execution. But some of them are gonna work only if you set them up before the building process of the components stack. To do that, just place a script tag at the end of the body of your main HTML file, either placing the code straight away into the script content or putting it in a separate file called init.js (we strongly recommend you to do the second option, as you can have a better approach if you use a service worker). Below are the front end recommended settings for your progressive web app (PWAs): The relative Import Path: Here is a very important setting for your progressive web app. So many times I have heard developers ask... where do I put my related custom coded packages? QCObjects by default will try to find my front-end packages under the same folder I have placed my index.html, but... What happens if I have to code a high scalable app and have to place the common custom packages into a separate folder, because of I gonna use this folder as a symlink into a separate volume that is outside my app container? Well, here is the answer: CONFIG.set( , ); 'relativeImportPath' 'js/packages/' Setting the value, you can tell QCObjects to find your front-end packages in the folder you have specified. And then, you can symlink this folder to another external volume or whatever you mind to do, I don't know, probably just to organise better your stuff. relativeImportPath The components Base Path Same thing applies to the templates of components. A lot of developers are asking what to do if I have to code the corporate component templates once! Just once! And NOT copying from one app to another app every time I deploy a new app? Well, just set this: CONFIG.set( , ); 'componentsBasePath' 'templates/components/' And then you can make a symlink to templates/components or whatever you have set up in this value, pointing to an external volume of your container. That external volume will be put into every single new container app you done, and voila! You have common component templates for every app! And they are absolutely behavioural independent. As additional information I can recommend you to study configMaps with Kubernetes, that is a good solution to apply in conjunction of separating folders for common uses in external volumes. Read some suff and let me know if after you finish your head is still rounded 🤪. here The delay for ready: Another good practice is to set the delay that will happen before the Ready process is started. As QCObjects has a very advanced way to handle the Ready events, I mean, when you use the Ready() function you're not just using a wrapper of the original window.ready event (as it was used to be in an older framework that I will not tell you the name but it starts with "J" and "Q" 😛). By example, if you use QCObjects over a PhoneGap app, the function of QCObjets will also handle the event simultaneously, and it will be executed ONLY after the time of delay for ready has past. But, what on earth is this useful for? Good question... I don't really know 😝 but I can imagine that some day you'll gonna have some particular issue with some third party script blocking your entire script flow and you gonna have the need of apply some delay to the start processes. Ready() "deviceready" Default value is cero (0), but in the QCObjects New App template (used with the CLI tool to create your new PWAs), is set to One (1). What is better? You tell me 🤷‍♂️🤷‍♀️ CONFIG.set( , ); 'delayForReady' 1 // delay to wait before executing the first ready event, it includes imports Preserving the Component Body Tag during the components creation: Cool, I can set to "preserveComponentBodyTag off! Ok, what is this for? Ok this seems to be not doing something very significant for the behaviour of our app. No, my friend, you're completely misunderstanding the purpose of life 🧑‍🎓. I'll tell you something about behaviour... If a component doesn't have a body, how the hell it will work? Well, in QCObjects it will work 🧑‍🏫, but different. In tech hands words, setting this: CONFIG.set( , ); 'preserveComponentBodyTag' false Will cause your tag have a default body with "nothing", and when I say nothing, I mean . So the component stack builder process will fill up the body with the template content without the need of an . Understood? So, forget about this kind of stuff: <component> nothing enclosing tag - Parse : Adjacent JSX elements must be wrapped an enclosing tag Error in This will not happen here! Because this is not JSX nor whatever other kind of weird thing you might want to have to put some sugar in your coffee. This is PURE JavaScript (thanks ! ) Brendan Because of QCObjects is doing a real component building process, that is running runtime! And it doesn't have the need to enclose a body inside of a fake DOM element, it uses the real DOM. But if you need to enclose your component because you feel confortable with that, you can still use an autogenerated tag is placed for you by the component stack building process when you set this value with 🧑‍🍳. <componentBody> true Using a config.json file as a config service Oh! Ok, this is gonna blow your mind a little bit. You can use all of these settings loaded from an external file, that you can put either in an external volume (as I explained before ) or if you are deploying your progressive web app using the QCObjects HTTP2 Built-In Server (I know the name is quite large) you can also set a config.json in the backend side and use the config encryption built-in micro-service to encrypt all front-end settings, so you can protect all the sensitive data you have to use in the front-end side. Take it easy, be quiet! I'll do a special tutorial just to do that step. CONFIG.set( , ); 'useConfigService' false // If this is true, settings will be loaded from config.json Setting the routing way for the dynamic component routings handler. Cool, what is this? Ok, I'll explain you in a moment, I'll just do some stuff first... just kidding ! In the front-end side, you have three ways to handle routings (mmm... not really, you have thousands since you can use regular expressions). By the way, the browser has three ways to understand how to point your routings (better?): 1) Pointing by using hashes or hashtags. I'm talking about #this #thing, yes, the #hashtag or old fashioned #anchor that you have used thousands of years ago in the links ! In QCObjects, if you make a routing component that is having some set like this: < = > component name "loading-routing" < = = > routing path "#page1" name "mypage1" </ > routing < = = > routing path "#page2" name "mypage2" </ > routing < = = > routing path "#page3" name "mypage3" </ > routing </ > component And in your CONFIG values you have: CONFIG.set( , ); 'routingWay' 'hash' 2) If you point your page index.html to an anchor link #page1 (like index.html#page1 or index.html#page1?foo=bar or index.html?foo=bar#page1, I mean, you use an anchor right? you know what I'm talking about), the component stack builder will try to find a templates that matches the name attribute in the routing (by example: "mypage1" that could be a mypage1.tpl.html file in your templates/components folder ) Ok, but I'm not using anchor dude! I'd like to use only the raw path, because I've learned that I can handle my single page app even if I use raw paths with QCObjects HTTP2 Built-In Server, so... what if I set all my routings like this: < = > component name "loading-routing" < = = > routing path "^/page1$" name "mypage1" </ > routing < = = > routing path "^/page2$" name "mypage2" </ > routing < = = > routing path "^/page3$" name "mypage3" </ > routing </ > component OK, OK, OK! Your code isn't broken bro! You have to calm down! Because QCObjects is trying to find an #anchor with this path, that obviously will not work. To handle in the right way this kind of thing, you can set the ! Wow! I've just explained it in a bunch of lines! (you got it, advanced programming is not easy as they've sold you bro! ). But coming back, you can set up the value to routingWay routingWay "path" CONFIG.set( , ); 'routingWay' 'path' The above will let to QCObjects to match paths like this: https://example.com/page1 https://example.com/page2 https://example.com/page3 Take in consideration that QCObjects will do it whenever is possible, because some servers are not capable to do that. If you're going to use this set of links, I highly recommend you to deploy your PWA over QCObjects HTTP2 Built-In Server that is supporting that behaviour as native. 3) You can also do links like this: https://example.com/index.html?page1 https://example.com/index.html?page2 https://example.com/index.html?page3 I personally don't recommend you to do that, because it is agains almost any standard, but If you are not in a chance to choice because you're working in on a legacy app or something... well, you can set the value to routingWay "search" CONFIG.set( , ); 'routingWay' 'path' Use the SDK Yes, please, use it! It's very useful! And it's gonna be more day by day ! CONFIG.set( , ); 'useSDK' true // it is recommended to use the SDK that is dynamically loaded, but you can chose not to load it Use the local SDK By default, the SDK is loaded from the QCObjects Official CDN url. If your app is private and have not access to the internet (I can't imagine why because it's a web app), you can set up to use the SDK from the relative path in your project. CONFIG.set( , ); 'useLocalSDK' false // on the frontend side you can chose whether to load the SDK from sdk.qcobjects.dev or from your local website. Default is false Setting the templates file extension: To set the file extension to locate the template files, you can do it by using CONFIG or on the Class definition of the custom component. I recommend you to standardise your code bro, use the CONFIG and the same file extension for every single component. Then, if template name will be always and your code will not become an "spaghetti". component.name = 'main' main.tpl.html CONFIG.set( , ); 'tplextension' 'tpl.html' So: < = > component name "main" </ > component Will try to find a inside your folder. main.tpl.html templates/components What is the asynchronousImportsLoad setting? When I was coding QCObjects, I was asking to myself the same question, what is asynchronous load of imports? Well, In QCObjects that means that all the internal "script" elements that QCObjects will create to load the imports will have the attribute set with a value of . And each browser will interpret that as they want! async true By convention, it is recommended to load all the script elements in your page in async mode, but some times you wont do that. And the most of browsers don't really care. My conclusion, by default is cero (0) but I recommend you to always set this true bro, seriously. You're not passing the Audit tests of Chrome if you don't do that. CONFIG.set( , ); 'asynchronousImportsLoad' true Setting the service worker URI Good, we are almost done, now we need a service worker that applies a cache or something innovative for our new app. Cool, but I have to register the service worker just in time, not before, not after, everything is loaded. How on earth is it supposed to be done? Don't worry bro, QCObjects is making this monkey job for you. You just need to specify where is the service worker located. CONFIG.set( , ); 'serviceWorkerURI' '/sw.js' //QCObjects will register an launch this service worker automatically to work offline I hope the explanation of this tutorial wasn't very large (that's a lie, of course I know it's large) but I hope you've enjoyed it as much as I enjoy the huge amount of time I saved every time I build a new progressive web app using QCObjects. Cheers! Previously published at https://devblog.qcobjects.org/recommended-front-end-settings-for-your-pwa-using-qcobjects-ck8zbjdc301kjmys10xxpz7td

Best Front-End Settings To Create a PWA [QCObjects Edition]

What is a Shadow DOM (shadow tree) According to Mozilla Developer Network (MDN), a shadow tree is a tree of DOM nodes whose topmost node is a shadow root; that is, the topmost node within a shadow DOM. A shadow tree is a hidden set of standard DOM nodes which is attached to a standard DOM node that serves as a host. The hidden nodes are not directly visible using regular DOM functionality, but require the use of a special Shadow DOM API to access. Since the latest version of you can make special components called shadowed components. QCObjects What is a Shadowed Component A shadowed component is a QCObjects Component definition that you can extend to allow the content of your component to be shadowed in the browser. By the moment, QCObjects is only supporting the mode "open" for shadowed components. If you're not familiar yet with the concept of shadow root, shadow DOM or shadow tree, I highly recommend you to read this article of MDN about . Using the Shadow DOM Differences between a Shadowed Component and a Lightning Component A Lightning Component is no other thing that the same component that you're actually familiar with. On the image above, the component has a normal content, called a light DOM. This content is following the same CSS rules and scope that the rest of the document, and as a consequence, the rest of the web app. When you inject a style css rule into the content of this component, this rule will be added in runtime to the document, but it will also override any other rule that maches a conflict. This is useful most of the times, but a mess in particular others. For that particular times when you need to enclose the CSS and markup scope you got to use shadow DOM for content injection in a component. Shadow DOM is local to the component and defines its internal structure, scoped CSS, and encapsulates your implementation details. It can also define how to render markup that's authored by the consumer of your component. The above image is showing a card component that is filled up with shadowed content. To make it easy to handle when and where to put the shadow content, QCObjects has . Shadowed Components Creating Shadowed Component You have two ways to make a shadowed component in QCObjects. The first one, is to declare a component Class definition and use it in the component tag declaration. Class( ,Component,{ : , shadowed: , : , :{}
  }) // in your components package 'ShadowedCardComponent' name 'card' /* If shadowed is true, the DOM will be shadowed, default is false */ true cached false data In the above definition, you can use the hidden static property to let QCObjects to know it has to shadow the DOM of the component body. shadowed Then, you are able to use this definition into your html component tag, like this:  < = > component componentClass "ShadowedCardComponent" </ > component If you don't want to spend a special Class definition for your component, the second option is to set an attribute straight in the component tag declaration. < = = > component name "card" shadowed "true" </ > component Both ways get the same result, the component is built with shadowed DOM, and the styles into it will not follow the global css rules, and the markup inside will have an independent structure. Make sure your shadowed components are only used when needed, and you are not needing to depend on any other lighting component content to make your shadowed components visible and available, as they are completely independent. Also, it is not recommended to use lighting subcomponents into shadowed components, as the purpose of lighting components is to be absolutely available to be injected everywhere and to be interfered by external behaviours, and it is not the same purpose for shadowed components, whose are meant to be restricting the global behaviour in some ways. Both, lighting components and shadowed components are accesible from the global components stack, the main difference is that in the instance of every shadowed component will be a new hidden property (readonly) called , that is replacing the behaviour of the body, now, if you have any elements to add to the component content, you need to use instead of shadowedRoot componentInstance.shadowRoot.appendChild(element) componentInstance.body.append(element) Composition and slots In simple and easy words, is when you dynamically place elements of an object instance into blocks defined on its inherited instance. The resulting composed object instance will be mutating its behaviour as a result of the dynamic blocks mixing. Composition The shadow DOM is a hidden tree, that is allocated in a private scope, and it is populating its content to the light DOM, that is visible and accesible from the global scope. You can place light DOM elements over the shadow DOM elements, mutating the behaviour of the final flattened tree. This is called shadow DOM composition. Light DOM vs Shadow DOM The flattened DOM tree is the content that you can view opening dev tools in your browser. The flattened DOM tree of a Light DOM inside a QCObjects component will be like this: Card Title Card Description < = > component name "card"  < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < > b </ > b </ > h4 < > p </ > p </ > div </ > div </ > component On the other hand, a flattened DOM tree of a shadowed component with the exact same template content will be like this: #shadow-root Card Title Card Description < = = > component name "card" shadowed "true"  < = > div class "shadowHost" < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < > b </ > b </ > h4 < > p </ > p </ > div </ > div </ > div </ > component In this case, a light component was added dynamically to enclose the shadow DOM, this is always done by QCObjects in order to asure there will be no restrictions by the HTML spec over the different browsers that support shadow DOM. <div> The <slot> element Following the rules of the shadow DOM composition, we can go further defining some slots (a good additional example of the use of slots is in the MDN ). here  < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < = > slot name "card_title" </ > slot </ > h4 < = > slot name "card_description" </ > slot </ > div </ > div And Omg! this is becoming a bit more interesting... Card Title Card Description  < = = > component name "card" shadowed "true" < = > b slot "card_title" </ > b < = > p slot "card_description" </ > p </ > component In a shadowed component, you can override the content of the elements using custom blocks. slot And the resulting flattened DOM tree will be like this: #shadow-root Card Title Card Description  < = = > component name "card" shadowed "true"  < = > div class "shadowHost" < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < = > b slot "card_title" </ > b </ > h4 < = > p slot "card_description" </ > p </ > div </ > div </ > div </ > component And yes, you should be able to use data injectors too: {{title}} {{description}}  < = = > component name "card" shadowed "true" < = > b slot "card_title" </ > b < = > p slot "card_description" </ > p </ > component Styling In-line context based styles for shadowed components For shadowed components, it is recommended to place your style rules into the dynamic template file, commonly named with the extension , so the styles will be enabled only for the scope of the shadowed component. You can reference the main element of the shadowed DOM by using element in your style declaration, like this: tpl.html :host  < > style { : block; 
} @ url( ); :host display /* Also you can import styles from another css file */ import "./css/components/card.css" </ > style < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < = > slot name "card_title" </ > slot </ > h4 < = > slot name "card_description" </ > slot </ > div </ > div Enjoy coding! Previously published at https://devblog.qcobjects.org/shadowed-components-ck94xiira00e7s3s1os7bq7is

Shadowed Components & QCObjects

This article and the repo referenced here is intended to help Data Scientists and data processing professionals to handle and manage data related to the COVID-19 disease outbreak. I hope this information helps researchers to find new ways of analysis to defeat the COVID-10 disease outbreak, as well as empower them to solve more complex math calc using less time. We all know how necessary is to have a trusted analysis of the situation. Today the most accurate data in terms of global information is coming from WHO.int. Unfortunately the use of the API explained here is not licensed on any form so you must use it at your own risk. The repo exposed here, the author and the tools used here are not related to WHO.int. DISCLAIMER: QCObjects Collab is licensed under LGPL v3 and the terms explained in this LICENSE :::notes Keep in mind these are not only numbers, they are lives, they are people that we wished to save but we couldn't! They are people that we want to save using the resulting data of the fault. As a researcher you must keep focus always in data but as a person you also have feelings and a soul. Please remember that when you show your analysis to the public. ::: Connecting to the API of WHO.int The API of WHO.int used on this repo has public access and it is not licensed in any form. You have to use it at your own risk, with no warranty of uptime. Try not to abuse of the requests made to this API, it is recommended to only do a request once a day and save the response to a temporary file to not overuse and/or cause overload. There is not any individual data or private data of people present here. Please use this information only for research purpose. Connecting to the API and extract data To connect to the API using cURL, create a shell file named and put inside the following code: ./get-covid-19-data.sh curl 'https://dashboards-dev.sprinklr.com/data/9043/global-covid19-who-gis.json' \
  -H 'authority: dashboards-dev.sprinklr.com' \
  -H 'accept: application/json, text/plain, */*' \
  -H 'user-agent: QCObjects Collab for Data Science' \
  -H 'origin: https://covid19.who.int' \
  -H 'sec-fetch-site: cross-site' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-dest: empty' \
  -H 'accept-language: es-ES,es;q=0.9,en;q=0.8' \
  -H 'if-none-match: "23ffd2d307702788a8553819a1431d24"' \
  -H 'if-modified-since: Mon, 18 May 2020 01:15:19 GMT' \
  --compressed # file: ./get-covid-19-data.sh download the file ./get-covid-19-data.sh from here https://github.com/jeanmachuca/qcobjects-covid-19/blob/master/get-covid-19-data.sh Installing QCObjects Collab for Data Science To work with the data, you can use that is a Open Source Engine that helps Data Scientists to automate data processing and collaborative analysis tasks. QCObjects Collab for Data Science QCObjects Collab uses a collaborative shell to do advanced math calc using ssh or unix-socket. Installing QCObjects Collab from Docker To use QCObjects Collab from a Docker, you can pull the image from (this is the most stable running solution) quickcorp/qcobjects-collab docker pull -a quickcorp/qcobjects-collab && docker run  -it --name qcobjects-collab --rm -it -p 10300:10300 quickcorp/qcobjects-collab Connecting to QCObjects Collab from external systems You can use a TCP socket to connect yourself to the engine: ssh nc user@ 0.0 .0 .0 0.0 .0 .0 10300 You can also use a Unix Socket to connect yourself to the engine: ssh user@0.0.0.0 nc -U /tmp/qcobjects-unix-socket (change "user" for whatever your username is!) If you are trying to access the server from the same machine you can use the IP 0.0.0.0 or if you're trying to access it from an external network terminal you must use the corresponding IP and default port is 10300. Start QCObjects Collab in your local machine using NPM/NPX To start using QCObjects Collab from your local machine without the need of starting a remote/cloud server, you need to have Node.js installed. Download and install Node.js from . here Once you have installed Node.js, you can use to call QCObjects Collab straight away in your shell console. npx > npx qcobjects-collab Start QCObjects Collab in your local machine using QCObjects If you either own a copy or have installed or you can run QCObjects Collab directly from a command line. QCObjects Community Edition QCObjects Enterprise Edition To install QCObjects just follow the steps here To start QCObjects Collab from a command line, after installing QCObjects, just do this: > qcobjects-collab Processing COVID-19 Data using QCObjects Collab Once you have done the above steps, everything turns easy and handy. Inside the QCObjects Collab session, you can follow these instructions. Run .help to view the available commands and shortcuts > qcobjects-collab QCObjects Collab> .help Run .loadcmd_json command to extract the collected data into a variable You can run the following command to extract the collected data from the response of executing the shell command into a variable stored in memory inside the QCObjects Collab session. ./get-covid-19-data.sh Enter to a QCObjects Collab session and do the following command: QCObjects Collab> .loadcmd_json covid = ./get-covid-19-data.sh The above command will save the response of the API into a global object called . Then you can use this object to process the data and make calc to reduce the result. covid Using examples of data processing The file inside this repo, called contains some quick start examples of processing the data. Here are some explanations of this examples: data-covid-processor.js Helper functions As QCObjects Collab is been written on JavaScript, you can enrich your runtime code using it, by example: creating runtime helper functions attached to the common Array prototype. Two useful functions to process data are (to collect only once for every single value element using ) and (to show a table representing the current list using ) unique objectList.unique() table objectList.table() .prototype.unique = { .filter( self.indexOf(value) === index)} .prototype.table = { .table( ) } //helper functions Array ( ) function return this ( ) => value,index,self Array ( ) function console this Formatting the columns The most efficient way of process a list in JavaScript is using the map function. You can use it into QCObjects Collab to process , and objects (ArrayList and ArrayCollection objects are a part of QCObjects core framework and QCObjects SDK, that are automatically loaded into the QCObjects Collab session). Array ArrayList ArrayCollection The API returns a tree object that contains three separate collections ( , and ) dimensions metrics rows |-- covid
     |-- dimensions
     |-- metrics
     |-- rows To view the content of the variable just enter its name into QCObjects Collab and press . covid Enter QCObjects Collab> covid QCObjects Collab> covid.dimensions QCObjects Collab> covid.metrics QCObjects Collab> covid.rows.slice( , ) 0 10 // only get 10 rows If you concat the elements of and in the same order as they are collected, you can have a column name dictionary. dimensions metrics To create a variable that stores the name of the columns of the COVID-19 WHO API data, do the following: columns columns = [ ].concat(covid.dimensions.map( dimension.name).concat(
  covid.metrics.map( metric.name))) // format columns "" => dimension => metric Changing the structure of the data using the columns collection. You can map and store it into another variable called which will contain the new structure based on . covid.rows data columns data = covid.rows.map( [{}].concat(row).reduce( { .assign(accumulator, {
      [columns[index]]: colData
    })
})) // format data using columns => row ( ) => accumulator, colData, index return Object Get a dictionary of country names from the API collected data To build a dictionary of country names you have to do the following: countries = data.map( d[ ]).sort().unique() // Obtain only unique country names => d "Country" The above code will create a collection with data object mapped with a lambda function (d => d["Country"]) that only returns the property of every element. Then, it will sort and filter the list to return only the unique elements. countries Country Calc the total amount of deaths in the world caused by COVID-19 disease The following code maps the data to only return the Deaths property of every element, then reduces the data to to a signle value containing the total amount of deaths accumulated in the world caused by COVID-19 disease. cumulativeDeaths = data.map( d[ ]).reduce( cumulative + deaths) // reduce the data to get total sum of deaths worldwide => d "Deaths" ( ) => cumulative, deaths Re-usable function to calc deaths by country The following code defines a function called that accepts one parameter with the country value to filter the list, then map the filtered result to only get the property on every element and reduce the list to a single value with the sum. getCumulativeDeathsByCountry Deaths getCumulativeDeathsByCountry = data.filter( d[ ]===country).map( d[ ]).reduce( cumulative + deaths) // a helper function to calculate deaths by country ( ) => country => d "Country" => d "Deaths" ( ) => cumulative, deaths To use this function you can do the following: cumulativeDeathsOfUSA = getCumulativeDeathsByCountry( ) "US" Get the summary of deaths by country The following code will create a single object with the summary of deaths by every country on the data cumulativeDeathsByCountryObject = countries.map( { {[country]:getCumulativeDeathsByCountry(country)}}).reduce ( .assign(prev,current)) // calculate cumulative deaths by every country => country return ( ) => prev,current Object To summarise the data into a list of objects with the pair country -> amount , do the following: cumulativeDeathsByCountry = countries.map( { { :country, :getCumulativeDeathsByCountry(country)}}) // calculate cumulative deaths by every country => country return "Country" "Deaths" orderedDeathsByCountry = cumulativeDeathsByCountry.sort( current.Deaths > prev.Deaths ? : ) // order the list of deaths by country by descendent (most deaths first) ( ) => prev,current 1 -1 You can find a complete example of the data processing in this file: https://github.com/jeanmachuca/qcobjects-covid-19/blob/master/data-covid-processor.js The complete example repo for this tutorial is here: https://github.com/jeanmachuca/qcobjects-covid-19 Wash your hands, keep social distancing... Be safe! Previously published at https://github.com/jeanmachuca/qcobjects-covid-19/blob/master/README.md

How to Process Pandemics Data from WHO.int

It's been a year since the exhibition of QCObjects in the Web Summit and now a lot of people and companies are interested in placing QCObjects at the very core of its enterprise software solution. But why is it? Think for a moment about what is what a CIO of a big company should be looking for... She/he is looking basically for tree main things: To lower costs of enterprise software acquisition To enhance speed in the adoption processes of new technologies To find new sources of income for the company If a CIO isn't looking for any of the things above, she/he is not doing a good job and the company is condemned to fall soon. Because technology is actually the core of any business today. Right? Whether your company sells shoes or it does sell computers or even industrial machine parts, today it's not just about using technology for the better, it's all about technology. And most of the time, your company will have to build its own technologies in order to survive the rude competition out there. Lowering the costs of enterprise software acquisition So, in this search of ways to make your own technology, you (as the CIO of the big company) have to choose a stack of solutions built on software and hardware to enable your platform to achieve innovation that differences your company from others. You hire tech experts and put them in a role of project management, they hire software developers, and in between you need to bring them some tech definitions like the software architecture of your platform, so they can build the modules following the main definitions. And this process isn't just when the company starts as a startup level. It is always needed to be doing by someone like the CIO, and when the company is starting to grow as your big company does, you should relay in software architects to expand your tasks to detail. In this whole process of your role as CIO, if you don't chose the right technologies for your stack, the result isn't only that your doing a bad job, the final result is that the costs of your tech stack will grow to the sky and finally your company will fall in bankrupt as they can't afford to pay the bills to keep running the whole operation, and of course, you'll get fired. Improving the adoption processes of new technology But, to learn a new technology, most of the time is an expensive process. So you have to find a way to spread the word inside your company to get users to adopt the technology better. Because if not, you'll not be allowed to change a comma of the initial tech proposal you made for the company, and if you can't change it, you can't innovate, if you can't innovate, again, the costs of your old fashioned operation processes will rise as you can't build new technologies and applications to improve them, your company will be again in risk of not having the control of the main operation, and as a consequence, you know what happens. Finding new sources of income But, what about when you are running out of ideas to reduce costs in the tech stack? You've fired enough people out of your team, you got only a few full stack developers working on covering the main code support needs of your company. You've lowered the costs to the baseline, so you need something else keep the operation of the company up and running. You need to find a new purpose for the change. You're gonna go to your board and sell them the idea that the business is going well but it needs to be expanded, and using the same core of the technology that your company already owns, they can build new sources of income and your main task will become to find the new pathway, to build a new roadmap to innovate in a completely new product but using the exact same tech stack you're currently running. Right? You can build a new team to help you to develop the new features, you can also find new sources of funding interested to support your company to grow and expand its business. Choosing the right full-stack framework and beating the technical debt But, every task you and your team do, every new idea you and your team have, and every part of any new strategic step you go forward relays in the choice of the right full-stack framework. If you don't do it well, instead of finding ways to lower costs, improving the tech adoption and rise more money to expand the new sources of income you've found for your company; instead of all of this, you'll surely meet a new enemy called "technical debt", and this enemy isn't resting or waiting for your decisions. Technical debt is basically what you or your tech development team have been abandoned -bellow the carpet- of the software application you're doing to ensure speedy releases. And it is dangerous, and it's growing exponentially while the time passes. In the past years, the technical debt has killed more companies than any worldwide economic crisis. I don't need to tech you about the technical debt because probably you've already experienced it inside your current big company, right? The most effective way to reduce the risk of technical debt is to focus in improving the development of the most critical features based on its long-term impact. Based in tree goals/principals: Don't repeat yourselfWrite clean source patterns specifications and documentationSplit your operation in layers That being said, your full-stack framework needs to help you to address these goals Don't repeat yourself This is the very basic principal for the learning of design and source patterns. It means that you should not need to rewrite the exact same line of code every time you make a new application or program. You can and you must reutilise code! But you should not need to rewrite that code to being able to reutilise that. Write clean source patterns specifications and documentation In your big company you need to do a lot of coding for very specific purposes. Not just another landing page or e-commerce store. Sometimes you need to wrap some data from sources that are not databases, and process that data in a new format to display it in different terminals and devices. Your company has a knowledge base platform for documenting everything. It's not enough, you need to document the source, and it's not even enough. Split your operation in layers Your entire operation is a main block, and any department inside of the company has its own needs of functionality, so it should be easy to represent the business as a set of blocks or a block chain. Cool, right? NO. The fact is that a big company as yours or as a bank or a global assurance service is more complex than a single blockchain. It is actually a multi-layer architecture. In a multi-layer architecture there's a large layer that runs across the organisation and does the common functions. For instance, you can run a login micro-service in that layer, or an internal support ticket submit form. You are also leaning some parts of your transversal operation on third party SaaS platforms that have an API documented for your specific needs. So you got a SaaS layer that you can even split it into other sublayers like the API SaaS layer and the SaaS monitoring dashboard layers (as you probably will have more than a dashboard application running to measure the exact same source of data but with different stakeholders). And then, the core of your business. It has a business layer that communicates the third-party APIs and a transport service to standardise the format of your data. Also it has a core legacy layer with the baseline micro-services (by example: process the raw order payload) You don't have the exact same layers as well as you don't have the exact same functionalities on every department in your company, so it's not a blockchain. Choosing the right full-stack framework, what are the alternatives to QCObjects In the process you're understanding the way your big company really works, what is the real function of your role as a CIO, and what is the real architecture model your company has and the way to reduce the risks related to the technical debt, you have to make a choice and get a new tech stack today. Whether to replace the current stack or to integrate the new technology with it. And some current alternatives to build the full stack are: MEAN Stack (MongoDB + Express + Angular + Node) MERN Stack (MongoDB + Express + React + Node) Spring Boot + Bootstrap (Java + JavaScript + JQuery) Laravel + VueJs (PHP + JavaScript) Django + Bootstrap (Python + JavaScript) QCObjects (Pure JavaScript for Front-End and Back-End) The variables of choosing a good full-stack framework I've asked so many developers and CIOs about what are the variables they are measuring to have benefits of a framework. The most of people think that are commonly based on the popularity of the framework and the companies that are currently using that, as if it would be a warranty of something. If you really want to get some benefit from the framework your company is using, the right variables that warrantee the success of building your full-stack are the ones based on performance and the fulfilment of the principals that every CIO must to have in mind (to reduce costs of enterprise software development and acquisition, to ease the adoption of new technologies in the company and to find new sources of income). So let's measure the current alternatives with this variables in mind: Reducing costs of development The average cost of a development of a new application MVP is between 80,000 to 150,000 USD in an AVG time of 10 months for a team of 5 (Team leader + Product Owner + 2 Full Stack Devs + 1 DevOps) To develop a second MVP using the same stack the team as learned before, it will cut the cost in a percent as the team has already developed the main features that are needed in almost every MVP they gonna need. So let's do reduce costs with Angular: To reutilise an Angular component you have to copy the code of the component definition to almost every other place you use it. So you need a full-stack dev with at least 3 years now experience in Angular just to copy and paste something and then rename it. Because it is needed to know the exact place inside of the spaghetti code in the app to pick the code and then paste it in another part that normally will not work well for the first time. Ok, I don't think it is gonna reduce enough cost of the project. Let's do reduce costs using React: I gonna leave this line for the comments Let's do reduce costs using Spring Boot: Spring Boot has a lot of development, a huge community, a bunch of tools to help the source code edition. But if you have to make a small app with a hello world text you need to define the complete MVC pattern that is supposed to be compliant with the principal of inversion of control. And because of it is based in Java, you got almost no control of exceptions. 99% of the code maintenance work in Java corresponds to exceptions that are not from the system hierarchy. So that could be understood as well as only the 1% of the exceptions are enabling code for reutilisation, what is in fact traduced to more hours of development rewriting the exact same thing. I don't think this is gonna reduce enough cost of the project as well. Let's do reduce costs using Laravel + VueJS: Laravel has also a huge development community and VueJS is a raising framework made by Evan You and scaled in a very smart way. You need 2 kind of experts in two worlds that are completely different from each other. One from JavaScript and VueJS and the other one from PHP and Laravel. Split the app into micro-services and for every single team you'll have to have a minimum of two (2) full-stack devs that understand both languages. Let's do reduce costs using Django + Bootstrap: Django is based in Python that is a powerful language. Also it is fast, but day by day the Django architecture is getting complex and it is needed to copy all the models from one project repository to every other to keep consistency with the data handling layer. To be understood, if I change a field name or a field attribute value in the database, the code of almost every application in the company will be broken and the services will shut down. This is increasing costs of maintaining big scale operations in companies using that framework. Also in your team you need a python expert that is not cheap, and you can't escape from javascript as Django is meant only for back-end even with its supper extendable admin panel. Let's do reduce costs using QCObjects: QCObjects is a full stack framework made in pure JavaScript, it is lightweight and flexible, and it is mean for having the back-end and front-end together into the same project. One powerful feature of QCObjects is that you can publish your own app-templates and then you can reutilise them using one single line of code in the CLI. > qcobjects create --custom=myownapptemplate app Just this thing is cutting your initial costs in half and exponentially on every round of innovation where you have to build a new MVP. And in QCObjects Enterprise Edition, you can save your app-templates with private code safe in the QCObjects Enterprise Cloud Platform, that is increasing your security and increasing your infrastructure performance. Easing the adoption of new technologies QCObjects is meant to have the back-end micro-services and the front-end together but not mixed. You have the same syntax for both (back-end and front-end) but you also have compatibility with other old frameworks and technologies. For instance, if you got some mobile app made in Flutter and you need an API, you can use the QCObjects Built-In HTTP2 Server to develop that API. If you have a web app based in Django, you can use QCObjects in the front-end to allow Django to manage dynamic rendering of components. With QCObjects HTTP2 Built-In Server, QCObjects is a huge alternative to Nginx but it also works on Nginx or Apache Web Server. QCObjects HTTP2 Built-In Server is meant to allow developers to include advanced features in their web apps and to have a two way communication within the the front-end with the back-end. Find out more about QCObjects Interceptors and Micro-Services in qcobjects.dev Finding new sources of income With QCObjects you can make app-templates for your company or yourself and you can sell them to others. You can remain the LGPLv3 license of the initial app template or you can change it to another that is compatible with. The LGPLv3 license allows you to privatise some parts of code that are sensitive and you're not enforced to publish everything into the open source scope. Also, you can patent your code and become the owner of it. These benefits that seem to be obvious are not like that using other licenses. I hope you can read this article carefully and take the references of other frameworks as a technical and educational purpose only. The comparisons made here are meant to expand your mind to a new horizon and way of thinking and are objective as much as they can be. Previously published at https://devblog.qcobjects.org/why-you-should-use-qcobjects-as-the-full-stack-framework-for-your-company-ckgy9pere00ve20s1hszh72lo

How A Full Stack Framework Can Make An Impact In Your Business

213 Stories To Learn About Writing Prompts

209 Stories To Learn About Website Development

277 Stories To Learn About Microservices

129 Stories To Learn About Javascript Frameworks

338 Stories To Learn About Frontend

Let's learn about via these 65 free stories. They are ordered by most time reading created on HackerNoon. Visit the to find the most read stories about any technology. Framework /Learn Repo 1. Composer Packages that Every Laravel Developer Must Have I believe developers of middle and senior levels should always use these must-haves processes with at least one external data store. 2. Command and Control Frameworks in a Nutshell A glimpse over Command and Control attacks and frameworks, how they happen, and how they can affect our daily lives. 3. A Glance Into Amplication: Easy NodeJS App Development According to the Amplication website's introduction, it's a tool for creating the structure you want in NodeJS apps. 4. The Top Five Frameworks For Developing Android Apps Understanding Android development frameworks will help you pick the right one for your mobile app, letting you make better decisions on how to develop. 5. What Are the Challenges of Learning New JavaScript Frameworks? | GrapeCity JavaScript Learn about the top challenges developer face when they are learning new JavaScript frameworks. See more from GrapeCity today. 6.   How to be a React Native Developer How to be a React Native Developer 7. What Is The Best Widgets Library In 2022? An easy-to-use and comprehensive JavaScript framework are of utmost importance if you are a web developer. 8. Implementing a Web Service With Go and Fiber Let’s learn the basics of web development with the help of Go programming language and Fiber framework and write the most uncomplicated web service. 9. Introducing a New, Lightweight WYSIWYG HTML Editor That Fits Any Technology Framework 10. Some Decisions are Mindless, Other Decisions Require Deep Thinking If you've been working for some time, you might have wondered occasionally if it was time to change jobs. If you are early in your career, you can bet that this is a decision you will need to make in your life. 11. Top 10 Python Frameworks Ranked on Github Here is a list of the ten highest-ranked Python frameworks on GitHub. 12. 6 Reasons Why No-Code Platforms are the Future Of Software Development The next generation of no-code platforms will be a key force in transforming everything about software development. 13. Why Not Use Good Old CSS3??? And Forget Bootstrap! When we start learning how to create a web page and are presented to CSS, it can be quite daunting (or exhilarating) to see the list of properties we can use. So many of them, so much we can do! So, when we're fumbling through the pages and are presented with "easy" ways to become web-developers, we grab them without a second thought. 14. Handling Job Failures in Quartz with Retries In this article, we will look at how to handle job failures in Quartz. We'll use an exponential random backoff policy for calculating the time of the next retry 15. Your Guide to Cybersecurity Frameworks There are three main categories of security frameworks: Control Frameworks, Program Frameworks, and Risk Frameworks. Here we explore their differences. 16. 6 Reasons for Using Bootstrap Framework Usually, when we are making a web page, we need to use the code that we created before in other projects. That means that we are going to redo the same features over and over again. 17. What I Learned About Automation From Complying With AWS Security Requirements Let’s get into the action and dig into some of the key requirements of how to operate workloads securely in AWS. 18. Adding the Bootstrap CSS framework to an Angular application Application example built with Angular 14 and adding the Bootstrap CSS framework using the bootstrap and @ng-bootstrap libraries. 19. How to Schedule Jobs With Quartz in Spring Boot In this article, we will look at how to schedule tasks using the Quartz framework in Spring Boot. We will consider JobStore, and thread pools. 20. An Intro to the Astro Framework: Benefits and Drawbacks Astro is a new framework, should it be one you should experiment with? Find out the features, benefits, and drawbacks that this new framework has. 21. Vulnerability Management: Identify, Classify, Remediate, and Mitigate 1.Vulnerability Management: 22. The Svelte Effect: Everything You Need To Know What is it about Svelte that makes it the most eligible bachelor in the front-end dev scene along with the likes of React & Vue? I mean, Svelte could be the next big thing, but does it have what it takes? 23. Choosing the Right Microservices Framework Microservices architecture is a methodology that allows you to split a monolithic single application into small applications and services. 24. Solving Web Application Issues in C - The Greenest Programming Language Web applications in C language means performance and it's easier than you think 25. How To Learn Ruby on Rails How to get around in your first Rails projects 26. Cocoapod as XCFramework With Dependencies In this article, we will solve the problem of making XCFramework with dependencies and ship it as a Cocoapod. 27. Ionic vs React Native: What to go For When Building a Mobile App In this article, we compare Frameworks: Ionic vs React Native, and learn about what the better option is for your usecase. 28. Building Your First Startup with Python and Node.js This article is for business owners willing to launch their first product. In this material, we will discuss and try to compare two popular backend solutions. 29. Autonomous APIs are the Future - Interview with Jean Machuca, Founder, QCObjects QCObjects recognized as Startup of the Year 2021 30. The Battle Between Jest and Mocha for Testing JavaScript Applications Jest vs Mocha, which one should you chose? What are the pros & cons? All about our experience about making the call between Jest & Mocha. 31. The Importance Of Selecting The Right Frontend Framework Creating a new product comes with lots of ideas and requires numerous technologies. The idea of choosing the right framework matters a lot. Learn how to choose 32. 4 Tips for Building the Ultimate Finance App There are a lot of good personal finance and investment apps on the marketplace, but trying to find an app that does it all is hard. 33. Effective Ways To Get More Out Of Vessel Framework Vessel is a fast, open source, high-level, web crawling and scraping framework for Ruby, built on top of Ferrum — a minimal-dependency pure-Ruby driver for running headless Google Chrome instances. 34. How to Fetch Data From an API in React.js Without any doubt, the use of React is increasing day by day. And also API(Application Programming Interface) is gaining more popularity in the modern era of technology. This article will guide a beginner to play with React to API. 35. The Product Manager's Guide To Identifying and Managing Project Stakeholders We discuss a framework for categorizing stakeholders. We also recommend different communication methods for each type of stakeholder to save you time and effort 36. How to Optimize Your Time When Coding Frontend I recently took some serious time to improve my skills in front-end HTML and CSS. 37. What is Remix Framework and Why Use it for Ecommerce Websites? E-commerce websites require a lot of complex functionality, such as dynamic routing, server-side rendering which can easily be done with Remix Framework. 38. ATT&CK vs. D3FEND - Get Everyone On the Same Page Recently MITRE Engenuity announced significant innovations helping cybersecurity professionals to work under the same language. 39. "The most successful products are those with a simple and consistent framework" - Marco Mottana Not everyone has the technical-knowhow to navigate the highly volatile crypto terrain. There are a lot of moving pieces. It will surprise you to know that trading, staking, mining, and hodling are not the only sure way to earn crypto income. In 2020, we got introduced to yield farming and the variety of ways to utilize DeFi’s money markets. Notably, there is no means to know for sure which crypto trend would drive crypto in 2021. The key takeaway from this is that we are yet to scratch the surface of the possibilities embedded in crypto and blockchain technology, even 11 years after the famous introduction of Bitcoin. 40. Mapping Risk to Cyber Threats, and Adopt Zero Trust by NIST's CSF NIST's CSF can be a valuable tool for organizations to improve their security maturity. I will  take further steps to align CSF to be more understandable. 41. Debugging Angular Applications: The Tool You Need to Know Angular DevTools is a great tool to make app development faster and more efficient. 42. Top 5 Big Data Frameworks in 2021 These are the best Big Data Frameworks developers can learn in 2021. It includes Apache Hadoop, Apache Spark, Apache Flink, Apache Storm, and Apache Hive 43. The 37 Dimensions of the API-as-Product Assessment Framework We’ve developed an API-as-Product Assessment Framework that we’re using to assess public APIs. We’re sharing this framework because you will likely find it to be a useful tool for understanding your own API as a product or set of products. 44. Jina, a Deep Learning-Powered Search Framework, Can Help You Build Your Neural Search Use Jina to search text or images with the power of deep learning. 45. Writing Your Own Flask(like) Framework How does defining something as simple as app.route handle HTTP Requests? How does app.run create a server and maintain it? 46. Evaluating Swoft — A PHP Microservices Framework Swoft is a PHP high performance microservice co-routine framework. 47. Beginners Guide to Node.JS Introduction to Node.JS 48. Why Do You Need A JavaScript Test Framework? The JavaScript testing framework enables you to boost your development workflow significantly. In addition, it increases your team’s speed and efficiency. 49. Top 10 Development Frameworks in 2020 Web applications are more important now than ever, and this will only be more true in the future. They’re also becoming much more advanced. As these applications continue to evolve, so does the level of development used to create and deploy them. 50. Parsing JSON in C with Vely framework Parse JSON in C language with Vely framework 51. A Look at the MVVM Design Patterns for iOS Building iOS framework for multiple iOS applications using generic MVVM+C. 52. Understanding AWS Well-Architected Framework The AWS Well-Architected Framework (WAF) is a set of best practices used to create highly efficient and cost-effective applications on AWS. Lean more. 53. Application Security Posture Management: An Overview Application Security Posture Management (ASPM) is a holistic approach to managing the security posture of applications throughout their lifecycle. 54. How A Full Stack Framework Can Make An Impact In Your Business It's been a year since the exhibition of QCObjects in the Web Summit and now a lot of people and companies are interested in placing QCObjects at the very core of its enterprise software solution. But why is it? 55. Salesforce: Walled Garden No More In just five years the Salesforce ecosystem has transformed from a "walled garden" to an open-sourced driven solution set. 56. Delphi GUI Programming with FireMonkey Framework: Cross-Platform Development Made Easy These days, developers face a difficult problem: how to build effective cross-platform applications. From a project management point of view, often a major goal is to achieve this using a single source code base, rather than by having a different code base for each supported platform. 57. How to Use JUnit Annotations In Selenium JUnit is a Java-based, open-source framework to help you execute unit testing. JUnit is used primarily to test each and every unit or component of your application like classes and methods. It helps to write and run repeatable automated tests, to ensure your code runs as intended. The framework offers support to Selenium test automation for web-apps or websites. 58. How to Set up a Framework: A Developer’s Guide New developers often don’t know how to set up a framework for smart contract development to make the process as efficient and secure as possible. 59. Selenium Testing: Running First Pytest Script Selenium as we know, is an open-source test suite used for cross-platform browser automation. Due to its popularity and ease of use, many compatible test frameworks with respect to different programming languages have been developed to extends support of Selenium for cross browser testing over multiple programming languages. Today we’re going to look into Selenium Python tutorial to run our first automation script using PyUnit framework with Selenium. 60. What is a Token Economy and How to Design a Thriving Cryptocurrency Do you want to design a token economy? Start by having a goal that makes sense. 61. Tests Automation with Examples: 'Click' Button Method in Selenium One of the most fundamental and crucial interactions while Selenium automation testing is done by automating click operations over elements on a web page. We facilitate the click interaction using a method called Selenium.click(). 62. Automation Testing With Selenium, Cucumber Tool And TestNG Cucumber is a test automation framework which leverages Behavior Driven Development for collaboration in between Business and IT teams. It empowers a user to define an application’s behavior in plain English language which makes it easier for non-programmers to understand the acceptance criteria. 63. Shadowed Components & QCObjects What is a Shadow DOM (shadow tree) 64. How To Code on PHP7 Without using a Framework Since the introduction of Composer package manager and the PHP standards, writing PHP became easier and more manageable, whereas in the past you were almost forced to use a framework to maintain your project in a professional matter, nowadays this is not necessary, and today I will show you how to glue together a small API project with basic routing, third party packages, and testing without a framework. 65. How To Use Nightwatch.js Framework For Test Automation Selenium is a widely used tool for automated browser testing. Being an open-source framework allowed Selenium to be compatible with multiple test automation frameworks for different programming languages and if we talk about automation testing with Selenium and JavaScript, there is a particular framework that never fails to take the spotlight and that is the Nightwatch.js. This is why I decided to come up with Nightwatch.js tutorial for beginners. Thank you for checking out the 65 most read stories about Framework on HackerNoon. to find the most read stories about any technology. Visit the /Learn Repo

65 Stories To Learn About Framework

In 2021, hosted the first-ever awards!! HackerNoon Startup of the Year The goal of this campaign was to give recognition to the hardworking startups who pulled through the pandemic -- growing and thriving (despite all of the challenges). More than 44,000 startups were nominated all across the globe! They were selected from over 4,553 cities, with a total number of * cough * “4 billion” votes. Insane, right? To see who is a winner in each respective city, visit and pick a city. The name at the top of the list is the winner. (Awards, with compromised reviews, are under review.) startups.hackernoon.com The will announce the winners per region in their respective cities. Startups Winners Announcement Series Apparently, South America startups did incredibly well in that regard. With so many, until now, uncrowned jewels, it’s time we present to you... * drumroll* 🥳 The South America Startups of the Year Winners! Santiago, Chile Chile is known for being the most stable country to do business in Latin America, ranking 13th in The Economist’s Business Environment Index. Moreover, according to the Global Innovation Index, Chile ranks first in Latin America for innovation and is recognised as Chilean Silicon Valley with Santiago being the central city. The winner is…. QCObjects It is the 1st world class open-source framework made in Latin-America. São Paulo, Brazil And the winner of Brazil’s vibrant financial center is... Innvo Digital Their mission is to create the best ecosystem for a technology professional to work and undertake while sharing it with our customers and society. São Carlos The absolute leader of Sao Carlos seems to be: Predify Predify is an online software for optimizing pricing proccess and improving profits with AI and Big Data Analytics. Belo Horizonte, Brazil With a more than noble goal, Belo Horizone’s winner is: CM Tecnologia CM Tecnologia is an online scheduling system for healthcare providers in Brazil. Porto Alegre, Brazil With the focus on data protection, Porto Alegre, Brazil’s winner is…. Privacy Tools Privacy compliance platform, based on AI/Blockchain, which helps global companies to keep compliant with the data protection requirements. Brasil, Brazil With the focus on EdTech, Brasil is bringing us: Awari Awari is a YC-W21 company focusing on education for the Tech Industry. The company is growing at a fast pace and has gathered experts from all leading tech companies into a full education experience to prepare the next cohort of tech talent. Quito The capital of Ecuador, and also the closest capital to the actual equator, as the winner brings us: Agrodemanda The most comprehensive agricultural directory in Ecuador. Rio De Janeiro, Brazil Rio de Janeiro has more than 300 startups and is ranked 3rd in Brazil in terms of startup ecosystem development. The city is famous for the startups in the spheres of education, energy & environment and foodtech. Their winner is…. Bybrand Bybrand is the simplest way to save time and avoid frustration when managing your employee's email signatures. Buenos Aires, Argentina Buenos Aires, Argentina is not only the cosmopolitan capital with a vibrant history. It’s also Latin America’s most important port. Which makes their winner actually a very logical choice. Please meet: Liftit Liftit is the leading technology platform to automate and execute last-mile truck deliveries across Latin America. Curitiba, Brazil With a more noble mission and sustainability in mind, Curitiba, Brazil, as the winner brings us... Discrepante is the marketplace for a more human and sustainable economy Discrepante.com Florianópolis, Brazil Would you really be surprised one of the Brazil’s winners is related to football training? We neither. Please meet... Fútbol Fit Club Football FitClub® is a fitness training firm that gives fitness training to improve like a professional football player. Medellín, Colombia And the first Colombian Startup Winner is is a data intelligence solution powered by a high quality team. Meet... LogComex Market intelligence for international trade in Latin America Montevideo, Uruguay The host of inaugural FIFA world cup of 1930 comes through when it comes to innovation even in 2021. I’d like to introduce you to: Drop Technologies First electronic hand antiperspirant device Lima, Peru Lima, Peru, has in 2021 delivered some amazing results when it comes to blockchain technology. Their winner is very well deserved: RSK Labs RSK is the first open-source smart contract platform São Carlos Do Pinhal Well this is a unique case. The absolute unanimous winner of São Carlos Do Pinhal is: brain4care brain4care solution enables monitoring intracranial compliance noninvasively anywhere Blumenau, Brazil We’re sensing a theme here. Another stellar EdTech winner is coming from Blumenau, Brazil. Please meet... Uniasselvi Uniasselvi is a Brazilian distance-learning company that offers more than 60 undergraduate and postgraduate courses, in person and distance. Bogotá, Colombia Startups of Bogotá, Colombia definitely showed they’re not to be underestimated. With a very noble mission, let me introduce you to: Risü Risü is an online platform that links online consumption to donation to social institutions. Campina, Brazil If there’s one typo of business we’d single out as taking the biggest hit out of the pandemic, it would have to be small businesses. Thankfully, the winner of Campina, Brazil, operates with small businesses in mind Superlógica Tecnologias Ltda. Superlogica is a management system company created for small service businesses. Cerqueira César, Brazil Swooping half the points from the entire City, this year’s winners of Cerqueira César are InfoPrice INFOPRICE is a business intelligence company focused on physical retail pricing. Governador Valadares, Brazil The same can be said for the winners here. Let’s hear it for: Grupo KPG Saas, Payment, Manufacture, Pharmaceutical, E-commerce, Marketplace, Logistics Caxias Do Sul Known for wine making and Italian cultural influence, Caxias Do Sul brings as an interesting winner. Studio 360 Studio 360 is a proptech focused on easing the purchase experience for real state companies, brokers, and costumers. Sorocaba From Sorocaba, we have an interesting concept coming. Looking forward to seeing it further develop. Let’s meet: Quinto Quinto is a social network that represents the collective opinion of society—to help democracy evolve through technology Viña Del Mar To be a venue-oriented business and survive through the pandemic definitely deserves some recognition. In the name of that, let’s meet: SonicPollen SonicPollen, based in Chile, is a web-based booking platform that connects bands with venues and organizers. Lages Learn more about high-growth startups in Lages, South America. and the winner is…. Qualiall Qualiall develops technologies for training in operational processes such as work security, equipment maintenance, and more. Córdoba, Argentina Another gem from Argentina brings us unique agricultural solutions. Please meet: Kilimo Kilimo is a Big Data solution for water management in agriculture. São José Dos Campos, Brazil Another great agricultural solution comes this time from Brasil. Meet São José Dos Campos Startup winner: TerraMagna TerraMagna is a fintech company that focuses on risk mitigation for agribusinesses. São Leopoldo, Brazil Event-oriented businesses that have survived in the previous years should definitely bottle their perseverance and start selling it. One of those is definitely this winner: Wedy Wedy offers a one-stop-social marketplace for weddings. Pelotas, Brazil Medical scheduling platforms are definitely something we need to see more of. So glad Pelotos winner comes from this particular niche. Fácil Consulta Fácil Consulta is a booking platform that allows people to schedule an appointment with a Specialist Physician in their area. Santa Maria Could you believe how versatile the startups of South America are when we are only now coming across a game development studio? Let’s meet them Imgnation Studios Imgnation Studios is a game development studio that focuses on virtual reality. Asunción, Paraguay A FinTech solution coming from Paraguay. Meet Asunción Startup of the Year winner Vision Banco Vision Banco is a solid and growing financial institution serving the financial needs of the micro, small and medium enterprises. Caracas Venezualan food delivery app that seemed to have your heart. Meet Caracas Startup of the Year winner Yummy Inc. First Food Delivery App in Venezuela Recife A suitable combo between gaming and education, Recife Startup of the Year winner brings revolutionary solutions. Let’s meet them. Joy Street Joy Street offers develops video games focused on educational needs. Rosario, Argentina The winner of Rosario Startup of the Year award for 2021 is... Gbot Gbot is an autonomous robot that controls weeds without using agrochemicals. We also collect data in fields and generate precision maps. Vila Olímpia, Brazil The winner of Vila Olímpia Startup of the Year award for 2021 is... Seekr Seekr operates in the Information Technology sector, providing tools for managing and monitoring of brands. Barueri The winner of Barueri Startup of the Year award for 2021 is.... Glic Brazilian mhealth (web/app) platform for diabetes management Brasília The winner of Brasília Startup of the Year award for 2021 is... Ticies Ticies is a social network that helps people plan where to go with their friends, relatives and acquaintances, in all cities of the world. Juiz De Fora The winner of Juiz De Fora Startup of the Year award for 2021 is... Qranio Qranio is a gamified mobile learning platform for enterprises that rewards learning and stimulates users to engage with educational content. La Paz The winner of La Paz Startup of the Year award for 2021 is... Jukumari Advice 360 photo based market place for responsible tour operators Temuco The winner of Temuco Startup of the Year award for 2021 is... GoFeels GoFeels is the first independent hospitality network in the world. We promote collaborative work among hotels around the world. Vitacura The winner of Vitacura Startup of the Year award for 2021 is... MeatMe MeatMe delivers meats and accessories to have a culinary experience. Barranquilla The winner of Barranquilla Startup of the Year award for 2021 is... Mandaos Mandaos is a digital platform that connects companies and people with a network of independent messengers Ceará The winner of Ceará Startup of the Year award for 2021 is... Caroá Caroá is a cooperative that sells 34 varieties of vegetables, organic fruits, and vegetables. Chapecó The winner of Chapecó Startup of the Year award for 2021 is... HortiAgro HortiAgro is a seed and fertilizer market. Chile Chico The winner of Chile Chico Startup of the Year award for 2021 is... Gleengo Gleengo connects children with their favorite toys, through a tiny device and an application based on text-to-voice. Goiânia The winner of Goiânia Startup of the Year award for 2021 is... Auvo Auvo is an external teams management software. Itá The winner of Itá Startup of the Year award for 2021 is... TISSUELAB Tissuelab is a research and development center focused on biotechnology, and systems for reconstructive musculoskeletal surgery. Jardim Paulista The winner of Jardim Paulista Startup of the Year award for 2021 is... DiviCom DiviCom is a digital video networking company that designs, integrates, and markets complete systems. João Pessoa The winner of João Pessoa Startup of the Year award for 2021 is... YupiPlay YupiPlay develops and offers an educational gaming platform. La Reina The winner of La Reina Startup of the Year award for 2021 is... INTI-TECH INTI-TECH is the fastest growing renewable energy in Chile and the world's leading unconventional source. Leme The winner of Leme Startup of the Year award for 2021 is... EcoStart EcoStart focuses on manufacturing sustainable electric bicycles, fans, and accessories. Loja The winner of Loja Startup of the Year award for 2021 is... Enerwi Corporation Keeping people connected and secured through wireless charging novel solutions Manizales The winner of Manizales Startup of the Year award for 2021 is... Porter Metrics Porter Metrics has developed an automated solution for generating social media reports in minutes. Nova Lima The winner of Nova Lima Startup of the Year award for 2021 is... Biomimetic Solutions Biomimetic Solutions is an innovative tissue engineering company. Paraná The winner of Paraná Startup of the Year award for 2021 is... Laura Laura is a provider of artificial intelligence and predictive analytics platform for hospitala and clinics to prevent damage & reduce costs. Salvador The winner of Salvador Startup of the Year award for 2021 is... Sanar Sanar is a platform that focuses on being the doctor's guide and support, offering specialized content that helps in their development. Santa Catarina The winner of Santa Catarina Startup of the Year award for 2021 is... DrPOCKET Sunchales The winner of Sunchales Startup of the Year award for 2021 is... Eolo Pharma Eolo Pharma focuses on developing drugs targeting the molecular and cellular basis of inflammation-related diseases Valparaiso The winner of Valparaiso Startup of the Year award for 2021 is... Invitta Invitta transforms plastic waste into a high-performance construction material for manufacturing sustainable urban furniture. Vila Velha The winner of Vila Velha Startup of the Year award for 2021 is... OneGrid OneGrid is a developer of hardware and software solutions focused on energy management. Indaiatuba The winner of Indaiatuba Startup of the Year award for 2021 is... DWUL Energy Renewable Energy Campinas, Brazil The winner of Campinas Startup of the Year award for 2021 is... Ativy Ativy is an IT company specialized in cloud computing, data centers, IT outsourcing, service desk, and IT management. Las Condes, Chile The winner of Las Condes Startup of the Year award for 2021 is... # MuvPass Subscription services that allows it's users unlimited access to fitness classes in the best gyms and studios in Latin America. Pinheiros, Brazil The winner of Pinheiros Startup of the Year award for 2021 is... GuiaBolso GuiaBolso is a personal finance platform that empowers people to take control of financial well-being. Rio, Brazil The winner of Rio Startup of the Year award for 2021 is... EmCasa EmCasa is a vertically-integrated platform that helps customers buy and sell a home in Latin America, starting in Brazil. Guayaquil The winner of Guayaquil Startup of the Year award for 2021 is... Sabroso Online platform for LatAm's enterprises to order low-cost meals Jundiaí The winner of Jundiaí Startup of the Year award for 2021 is... Sintecsys Sintecsys offers a fast and effective detection, reducing losses and costs with fire brigades. Minas Gerais The winner of Minas Gerais Startup of the Year award for 2021 is... Rizoflora Biotechnology Rizoflora Biotechnology is a producer of biological product designed for nematodes control. São Caetano Do Sul The winner of São Caetano Do Sul Startup of the Year award for 2021 is... Wevo 1 iPaaS in Latam - Enabling companies to be truly digital companies with APIs, systems and data integrated into a single platform Canoas The winner of Canoas Startup of the Year award for 2021 is... ContaÁgil ContaÁgil facilitates and reduces bureaucracy in accounting routines of companies. Chile The winner of Chile Startup of the Year award for 2021 is... Unight Unight is the future of nightlife social media. Israelândia The winner of Israelândia Startup of the Year award for 2021 is... Matchpool Matchpool is a platform that creates human connections. La Plata The winner of La Plata Startup of the Year award for 2021 is... Pixivus Pixivus offers a community-based application that enables its users to collect, store, and share pictures of events. Novo Hamburgo The winner of Novo Hamburgo Startup of the Year award for 2021 is... Devorando Devorando offers an online food ordering system and menus available in restaurants based in Brazil. Pernambuco The winner of Pernambuco Startup of the Year award for 2021 is... Redu Redu is a distant learning platform which is built on a social networking structure. Providencia The winner of Providencia Startup of the Year award for 2021 is... # TrainFES TrainFES is a medical Devices for the rehabilitation of people with paralysis. Ribeirão Prêto The winner of Ribeirão Prêto Startup of the Year award for 2021 is... AllyHub Ally is a sales distribution channel technology that connects Schools and Service Providers with Education Agencies. Santa Cruz De La Sierra The winner of Santa Cruz De La Sierra Startup of the Year award for 2021 is... Mobi Latam Mobi Latam is a clean energy startup that focuses on transportation systems based on electric mobility. Santana De Parnaíba The winner of Santana De Parnaíba Startup of the Year award for 2021 is... MercadoLivre.com is an e-commerce technology company providing solutions to individuals and companies buying, selling, and more online. MercandoLivre.com More Information If you’re a winner, please answer ! If you’re a reader, participant, just a curious individual, consider answering one of our interviews . this interview here Read the FAQs about or . Startups here here To see all of the winners you may visit , pick any city and view the name that appears at the top. this site If you’re interested in partnering with us, we invite you to look through some of these or reach out to our business department. unique sponsorship options Perhaps creating your very own tickles your fancy or maybe you have a whole new idea for how we can partner! writing contest Thank you to all of our sponsors! We truly appreciate your contribution to the tech world and thus the future! The Startups Awards are sponsored by: , , , , , , , , , , Blockster Brex FreeCodeCamp LaunchDarkly Coil Udacity Udemy Vercel Asia Pacific Transgender Network Bybit Everscale Network This post was written/compiled by Shreya Kundu and Katarina Andrejević! If you have any questions or concerns or would like to report a discrepancy please email ellen@hackernoon.com.

Meet the Winners of Startups in South America

At Hacker Noon, the first version of . we released on demand video calls with tech experts A big thank you to this first wave of tech experts! Anyone can learn something new today by ! booking a call with one of these smart people below Also, if you'd like to join the marketplace, invites are rolling, . here is the form Here is the first group of : Hacker Noon Experts Aazar Ali Shad Growth Marketing. I help startups with their growth marketing with all channels. Adrian Goins I connect dots. I comprehend data quickly and can explain complex subjects in common language. Adrian Raudaschl Product Manager, Physician, Academia, Healthcare, and Medicine. Alex Berke MIT Media Lab PhD student. Work experience: Google Search software engineer on news credibility projects, maker of election tech;  and publisher of "Beautiful Symmetry: A Coloring Book About Math." Afroz Chakure Final year B.Tech - Computer Science and Engineering @ MIT-WPU, Pune Akash Joshi Building, Writing, Programming. React, JS and Python expertise along with early-stage startup experience. Al Chen Taught Excel to 30,000+ people. I blog and podcast about spreadsheets and data analysis. Have been teaching Excel for 8+ years. Amanda McGlothlin User Experience Expert. 15 years+ experience working with startups and brands including Nike, Belkin, Audi, Google, Pearson, Allstate, and Cisco. Anthony Watson Dinosaurs Can Code! I have been a brain for hire for over three decades mostly without any degree, so I must be able to code to get paid! Ax Sharma Security Researcher. Open source software, vulnerability assessment and disclosure, reverse engineering, threat hunting. Branislav Đalić Philosopher of code. CTO of ML startup, open-source contributor, threat analyst, educator. Bernard Moon Global VC Investor. Experienced startup entrepreneur and tech trend writer. Carlo Occhiena Product Manager, Founder. Former Digital Ops Manager in a corporation, Founder of Martech startup. Christopher Luc . Software Engineer. Full-time at WhatsApp; internships at Uber, Snap and Yelp Cynthia Huang Female hackathon ninja. I can advise on personal branding, public speaking, content marketing, strategy, operations, startups, product, crypto, cannabis, short term rentals and insurance. Daniel Chae Business Analyst. I run Course to Hire, a place to help people learn how to code and land jobs in tech, and write for StackOverflow as well! Daniel Wu Housing Innovation & Data Strategy. I'm a Harvard JD/PhD and product manager, and advocate for inclusive smart cities and data ethics. Also published in Bloomberg, TechCrunch, etc. Dave Mangot Successful DevOps Transformation. We coach web operations and adjacent teams at mid-sized companies to service delivery maturity through the broad application of DevOps principles and decades of experience leading change. David Smooke Yours truly. Founder and CEO of Hacker Noon. Doc Norton Agile/Leadership Coach. 35+ years continually learning in the software field as a consultant, Director, VP, and CTO. Emil Koutanov Winner of 2020 Microservices Thinker of the Year. Software architecture and engineering. Eugenia Kuzmenko Internet? What is Internet? Google certificated marketer, Facebook certificated adman, Hubspot certificated SEO-specialist. Fabio Manganiello Software engineer. Automation, IoT, machine learning and programming geek. Geshan Manandhar Lead Software EngineerIn addition to my full time tech work, I have been blogging for 14 years and mentoring people in the past years Jackson Kelley Software Engineer at Amazon. I also worked as a consultant for block.one during the launch of EOSIO. Jai Paul Blockchain DeveloperAn experienced programmer with a computer science background, I have been involved in cryptocurrency since the very beginning, in the early 2010s, and would call myself an expert. Jonathan Harel Funny techie! Data Science, Building websites, getting your idea out there - quick! Kahlil Crawford Content Strategist | Theorist. Content professional in the hi-tech sector using design, creativity, and collaboration to innovate. Kevin Davey Champion Algo Trader. Proven futures trader and 4 time best selling trading book author. Matt Klein Cyberpsychology Strategy Director. Cultural Strategy Consultant for Fortune 50 Brands, Acclaimed Writer & Startup Advisor. Monica Hernandez Moni Mission Control. I have the uncanny ability to be a human router and rally the troops for increased impact. My areas of expertise include the space industry and high tech sectors. Limarc Ambalina Hacker Noon Editor. I am well-versed in SEO, backlink strategy, and writing content that ranks on Google. Linh Dao Smooke Hacker Noon COO. Helped raise millions, and 2x sales for Hacker Noon 3 years in a row. Founded a nonprofit. Mother of Norah. Liyas Thomas Author of Hoppscotch. Helped build Buy Me a Coffee (YC W19), currently building one-stop solution for open source monetization. Madalin Valceleanu Mobile Software Developer. Enthusiast on clean, modular and components architecture, focused on make software design more understandable, maintainable, scalable, robust, and last and not least testable. Applying design patterns, SOLID principles and good practices, making the code not only to compile. Mahbod Moghadam Founder of Genius. I started two major companies and I am currently writing a book about how startups work, in addition to being a top angel investor with an excellent portfolio. Mark Meyerson Director of Agency. Marketing strategy and execution. Maxim Salnikov PWA Expert. Developer Relations. Michiel Mulders Allround Growth Consultant. I help (tech) startups with all aspects of growth: UX, marketing, content, startup processes, and tech. Miroslav Nikolov Remain human. Process management and app architecture. Nebojsa Todorovic Freelancing Uncensored & Uncut. 10+ years pro remote work on all major freelance platforms. Nicholas Resendez Let's Grow Together. I focus on relationships and communication to understand the needs of those looking to build for the future. Oloo Moses Full Stack Developer. Bsc Information Technology. Paul Bailey Systems Architect. 20 years of experience in full stack development and engineering. Pavel Pekanov I Imagine Things. Full-stack dev, product research, creative direction and all things design. Peter Thomas Creator: Karate Framework. Open Source and Java veteran, has been invited to speak at the Ministry of Testing Dallas, DevConf.IN, GIDS, Test Talks, Test Automation Guild, GraphQL Asia and Selenium Conf Tokyo. Also appears in the TechBeacon list of Test Automation Leaders to follow in 2019. Jean Machuca Creator of QCObjects. Software Developer with more than 20 years now experience working for large-scale projects in private and public sector. Ricardo Lopes Front End Engineer. Amusing article writer who also makes VR stuff. Rekt Capital Cryptocurrency Analyst. Four years full-time in the crypto markets. Sergey Golubev Project management, marketing & business consulting. ICO/STO/IEO projects (white papers, applications for grants, business plans, compliance documents drafts, tokenomica). Sergi Garcia Tech Product Marketer. I help tech startups find product-market fit. I have helped 100+ entrepreneurs with their Go-to-market strategy, Website UX and copy, Pricing & Packaging, and Customer acquisition. Sandesh Suvarna $1.4M App in 4 Minutes. Masters in Engineering Management. Sergey Baloyan Make crypto-projects popular. I can support projects with building overall concept, tokenomics, marketing and PR strategy and implementation Stanley Nguyen Software Principles Commentary. Computer Science Degree. Tanay Pant Author, Speaker, Evangelist. I have experience in leading Developer Advocacy teams in scaling startups, and creating developer marketing strategy for sustained growth of developer communities. Tian-Yuan Zhao Digital product designer focused on Web3.0 work through my boutique design firm called Round Sky Studios. I've been doing this type of work ever since 2015 when I first met Vitalik Buterin, the founder of the Ethereum blockchain and have worked with companies such as ConsenSys, Kleros, Raise, Filecoin, Celo, and much more. 2nd Place Noonie Awardee in the Product Design Category for having written only 1 article on the intersection of digital product strategy/design + distributed computing + systems-level change. Usama Ashraf Software engineer, writer. Designing application architecture, Postgres, Node. Utsav Jaiswal Retired Dentist. Blockchain underworld expert who leads BD at Hacker Noon. Vaibhav Saini Physicist turned Entrepreneur. Springer Nature Book Author, IIT Delhi Undergrad. Yoram Kornatzky 20 years industry experience. Ph.D. Computer Science Find the up to date list of . Hacker Noon Experts at Experts.HackerNoon.com

Book a Call: The First 60 Hacker Noon Experts 

If you don’t like to read large amounts of text on a screen and prefer (printing on) paper, this article will show you how to use Java to automate some useful PDF manipulations. To save paper and ink/toner, my usual workflow is to remove extra pages from PDFs, then crop the text area to make it bigger, and to remove white margins. Then I merge 2 pages per sheet and I split the doc. into multiple, smaller files, to make it easier to print on both sides if the printer doesn’t support full-duplex. I chose Java and PDFBox because they are extremely fast on large files and they have a ton of options and possibilities to integrate with other projects. Create a new Java project with Maven Let's start by creating a new Java project, named , with Maven: pdf_utils mvn archetype:generate \
    -DgroupId=com.pdf.pdf_utils \
    -DartifactId=pdf_utils \
    -DarchetypeArtifactId=maven-archetype-quickstart \
    -DarchetypeVersion=1.4 \
    -DinteractiveMode=false Then, open the file and add a dependency to , in the section: pdf_utils/pom.xml PDFBox dependencies <dependencies>
   ...
    <dependency>
      <groupId>org.apache.pdfbox</groupId>
      <artifactId>pdfbox</artifactId>
      <version>2.0.27</version>
    </dependency>
    ...
</dependencies> Also change the target & source compiler versions: <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <configuration>
          <source>17</source>
          <target>17</target>
        </configuration>
      </plugin>
</plugins> Then rename the generated class to src/main/java/com/pdf/pdf_utils/App.java PDFUtils How to crop a PDF We will now develop a Java function that crops each page within a PDF document and saves the cropped content in a new PDF file. The cropping coordinates, specified in millimeters, will serve as inputs to the function. Add helper functions to convert between mm <-> units Convert mm to units Extract the doc's file name Crop each page Save the result & append "-cropped" to the ouyput file's name public String cropPDFMM(float x, float y, float width, float height, String srcFilePath) throws IOException {
    // helper functions to convert between mm <-> units
    Function<Float, Float> mmToUnits = (Float a) -> a / 0.352778f;
    Function<Float, Float> unitsToMm = (Float a) -> a * 0.352778f;

    // convert mm to units
    float xUnits = mmToUnits.apply(x);
    float yUnits = mmToUnits.apply(y);
    float widthUnits = mmToUnits.apply(width);
    float heightUnits = mmToUnits.apply(height);

    // extract the doc's file name
    File srcFile = new File(srcFilePath);
    String fileName = srcFile.getName();
    int dotIndex = fileName.lastIndexOf('.');
    String fileNameWithoutExtension =  (dotIndex == -1) ? fileName : fileName.substring(0, dotIndex);

    // crop each page
    PDDocument doc = PDDocument.load(srcFile);
    int nrOfPages = doc.getNumberOfPages();
    PDRectangle newBox = new PDRectangle(
            xUnits,
            yUnits,
            widthUnits,
            heightUnits);
    for (int i = 0; i < nrOfPages; i++) {
        doc.getPage(i).setCropBox(newBox);
    }

    // save the result & append -cropped to the file name
    File outFile = new File(fileNameWithoutExtension + "-cropped.pdf");
    doc.save(outFile);
    doc.close();
    return outFile.getCanonicalPath();
} Let's test by calling it from the function: cropPDFMM main public static void main( String[] args )
    {
    String srcFilePath = "/Users/user/.../file.pdf";
    PDFUtils app = new PDFUtils();

    try {
        ///// crop pdf
        float x = 18f;
        float y = 20f;
        float width = 140f;
        float height = 210f;
        String resultFilePath = app.cropPDFMM(x, y, width, height, srcFilePath);

        System.out.println( "Done!" );
    } catch (Exception e) {
        System.out.println(e);
    }
} You should see a file named in the current directory. file-cropped.pdf How to remove pages from a PDF To remove specific pages from a document, we can utilize an array of integer ranges. Each range consists of a start page and an end page ([startPage1, endPage1, startPage2, endPage2, ...]). The function iterates through each page of the document and checks if the page number falls outside of any of the specified ranges in the array. If a page is not within any range, it is appended to a new document. Add a helper function to test if a page is within a range Test each page number -> append it to a temp. doc Save the temp. doc. -> overwrite the input file public void removePages(String srcFilePath, Integer[] pageRanges) throws IOException {
     // a helper function to test if a page is within a range
     BiPredicate<Integer, Integer[]> pageInInterval = (Integer page, Integer[] allPages) -> {
         for (int j = 0; j < allPages.length; j+=2) {
             int startPage = allPages[j];
             int endPage = allPages[j+1];
             if (page >= startPage-1 && page < endPage) {
                 return true;
             }
         }
         return false;
     };

     File srcFile = new File(srcFilePath);
     PDDocument pdfDocument = PDDocument.load(srcFile);
     PDDocument tmpDoc = new PDDocument();

     // test if a page is within a range
     // if not, append the page to a temp. doc.
     for (int i = 0; i < pdfDocument.getNumberOfPages(); i++) {
         if (pageInInterval.test(i, pageRanges)) {
             continue;
         }
         tmpDoc.addPage(pdfDocument.getPage(i));
     }

     // save the temporary doc.
     tmpDoc.save(new File(srcFilePath));
     tmpDoc.close();
     pdfDocument.close();
 } Let's test it by calling in the main function: removePages ///// remove pages
app.removePages(resultFilePath, new Integer[] {1, 21, 376, 428}); It will overwrite the input (cropped) file. How to split a PDF We will now introduce a function that enables the splitting of a PDF into multiple separate PDFs, with each resulting file containing a specified number of pages. The function expects two inputs: the path to the source PDF document and the desired number of pages in each split file. Extract source file's name for each nrOfPages append them to a temporary document save the temp doc with the source file's name + index public void splitPDF(String srcFilePath, int nrOfPages) throws IOException {
    // extract file's name
    File srcFile = new File(srcFilePath);
    String fileName = srcFile.getName();
    int dotIndex = fileName.lastIndexOf('.');
    String fileNameWithoutExtension =  (dotIndex == -1) ? fileName : fileName.substring(0, dotIndex);

    PDDocument pdfDocument = PDDocument.load(srcFile);

    // extract every nrOfPages to a temporary document
    // append an index to its name and save it
    for (int i = 1; i < pdfDocument.getNumberOfPages(); i+=nrOfPages) {
        Splitter splitter = new Splitter();

        int fromPage = i;
        int toPage = i+nrOfPages;
        splitter.setStartPage(fromPage);
        splitter.setEndPage(toPage);
        splitter.setSplitAtPage(toPage - fromPage );

        List<PDDocument> lst = splitter.split(pdfDocument);

        PDDocument pdfDocPartial = lst.get(0);
        File f = new File(fileNameWithoutExtension + "-" + i + ".pdf");
        pdfDocPartial.save(f);
        pdfDocPartial.close();
    }
    pdfDocument.close();
} Here is the full function: main() public static void main( String[] args ){
    String srcFilePath = "/Users/user/pdfs/file.pdf";
    PDFUtils app = new PDFUtils();

    try {
         ///// crop pdf
        float x = 18f;
        float y = 20f;
        float width = 140f;
        float height = 210f;
        String resultFilePath = app.cropPDFMM(x, y, width, height, srcFilePath);

        ///// remove pages
        app.removePages(resultFilePath, new Integer[] {1, 21, 376, 428});
        
        ///// split pages
        app.splitPDF(resultFilePath, 20);

        System.out.println( "Done!" );
    } catch (Exception e) {
        System.out.println(e);
    }
} Merge 2 pages per sheet (2up) This function is inspired from . https://stackoverflow.com/questions/12093408/pdfbox-merge-2-portrait-pages-onto-a-single-side-by-side-landscape-page Create a temporary document Iterate over the pages of the original doc. -> get the left & right pages Create a new "output" page with the right dimensions Append the left page at (0,0) Append the right page, translated to (left page's width, 0) Save the temp. doc -> overwrite the source file public void mergePages(String srcFilePath) throws IOException {

    // SOURCE: https://stackoverflow.com/questions/12093408/pdfbox-merge-2-portrait-pages-onto-a-single-side-by-side-landscape-page
    File srcFile = new File(srcFilePath);
    PDDocument pdfDocument = PDDocument.load(srcFile);
    PDDocument outPdf = new PDDocument();

    for (int i = 0; i < pdfDocument.getNumberOfPages(); i+=2) {
        PDPage page1 = pdfDocument.getPage(i);
        PDPage page2 = pdfDocument.getPage(i+1);
        PDRectangle pdf1Frame = page1.getCropBox();
        PDRectangle pdf2Frame = page2.getCropBox();
        PDRectangle outPdfFrame = new PDRectangle(pdf1Frame.getWidth()+pdf2Frame.getWidth(), Math.max(pdf1Frame.getHeight(), pdf2Frame.getHeight()));

        // Create output page with calculated frame and add it to the document
        COSDictionary dict = new COSDictionary();
        dict.setItem(COSName.TYPE, COSName.PAGE);
        dict.setItem(COSName.MEDIA_BOX, outPdfFrame);
        dict.setItem(COSName.CROP_BOX, outPdfFrame);
        dict.setItem(COSName.ART_BOX, outPdfFrame);
        PDPage newP = new PDPage(dict);
        outPdf.addPage(newP);

        // Source PDF pages has to be imported as form XObjects to be able to insert them at a specific point in the output page
        LayerUtility layerUtility = new LayerUtility(outPdf);
        PDFormXObject formPdf1 = layerUtility.importPageAsForm(pdfDocument, page1);
        PDFormXObject formPdf2 = layerUtility.importPageAsForm(pdfDocument, page2);

        AffineTransform afLeft = new AffineTransform();
        layerUtility.appendFormAsLayer(newP, formPdf1, afLeft, "left" + i);
        AffineTransform afRight = AffineTransform.getTranslateInstance(pdf1Frame.getWidth(), 0.0);
        layerUtility.appendFormAsLayer(newP, formPdf2, afRight, "right" + i);
    }

    outPdf.save(srcFile);
    outPdf.close();
    pdfDocument.close();
} Update to test it: main() ...
 ///// 2 pages per sheet
app.mergePages(resultFilePath);
... Here is the full list of imports: package com.pdf.pdf_utils;

import org.apache.pdfbox.cos.COSDictionary;
import org.apache.pdfbox.cos.COSName;
import org.apache.pdfbox.multipdf.LayerUtility;
import org.apache.pdfbox.multipdf.Splitter;
import org.apache.pdfbox.pdmodel.PDDocument;
import org.apache.pdfbox.pdmodel.PDPage;
import org.apache.pdfbox.pdmodel.common.PDRectangle;
import org.apache.pdfbox.pdmodel.graphics.form.PDFormXObject;

import java.awt.geom.AffineTransform;
import java.io.File;
import java.io.IOException;
import java.util.List;
import java.util.function.BiPredicate;
import java.util.function.Function; The source code is available . here Also published . here

How to Crop, Split, Remove Pages From PDFs With Java and PDFBox

Introduction Whether you’re a longtime Salesforce developer, new to the platform, or just need to integrate your system of choice to Salesforce, Postman brings you all the tools you need to make the process easier, faster, and more streamlined. In this article, we’ll show how Postman can help you start building the core of your API-driven integration on sides of the API—either as the provider or the consumer. both Developing Salesforce APIs While Salesforce has several pre-built applications for key business tasks such as Sales, Service, and Marketing, in this post we’ll focus on the capability of Salesforce as a development platform, with its own programming language: Apex. Salesforce can expose custom-coded services to third-party applications, either as SOAP web services or REST APIs. In our demo, we will develop a very lightweight REST API and demonstrate how Postman can speed up that process. How Postman accelerates development One of the most popular use cases for Postman is to explore the API of third-party apps, to better understand how to submit requests, and what to expect for responses. By seeing the requests and responses, developing your own code for handling these APIs becomes much easier. We can also develop a mock server implementation of our own API, one that generates expected responses. In this way, we don’t need to wait for a “real” implementation of the API before we can start developing for it. By using Postman’s tools for API development, we can rapidly prototype a Salesforce REST API the API—and the code that uses it—has completed development. before Bringing it Together As our first step, we'll use one of Postman’s most powerful features: mock servers. Mock Servers A mock server is a lightweight server interface that responds to your API requests realistically, allowing you to quickly and easily get a valid response without worrying too much about the details. With Postman, you can start a mock server that responds to HTTP requests of your design in a very short time, with no coding required. By pointing your code at this mock server, you can write and test your API consumer code. We’ll be using the Desktop client for our examples, but everything here should be equally applicable with Postman’s web client. Mock Servers can be found within your Workspace in Postman. Creating and Configuring the Mock Server Click on to get started. Create Mock Server Next, we can start defining the HTTP requests we’d like to mock. By specifying the HTTP request method, URL, response code, and response body, we can tell Postman how to respond to requests. In this example, we’re mocking a request for a Salesforce Account record. Rather than hardcoding a Salesforce account , we’re using Postman’s ability to use variables. By matching the variable in both the request and the response, we can return whatever value was supplied in the request. id We’ll use this feature in more detail later. For now, we will just mock that one request and click the button to finalize our Mock Server setup with a few more parameters. Next Besides naming the mock server, we’ll just stick to the defaults and click the button. This will create our mock server instance with a unique URL for receiving requests, as illustrated below. Create Mock Server We selected the option to save the mock server URL as an environment variable, however, there is an easier way to reference this. If we expand the environment dropdown in the top-right of Postman, we will see that an environment was automatically created for us. If we select this environment, the mock server URL is automatically populated for us in a parameter called . The process of creating a new mock server also created a new Postman collection for us. That collection has our request, and the request is ready for us to populate with parameters where applicable. {{url}} When we select this request, we see the user interface for building our request. By replacing the variable in the request with an example and sending the request, we should receive a response from our Mock Server that repeats that back to us. {{accountId}} id id Extending the Mock Response Now that we have our basic mock server working, we can extend the responses to be more meaningful and realistic. Expand the example request in our collection from the Workspace tree view, and click on the example (currently called “Default”). We’re going to make some changes to how the mock server responds to this request. The field is not essential. We’re just simulating how Salesforce would respond. attributes In the response body tab in the bottom section, replace the contents with the following JSON: {
  "attributes" : 
    {
      "type" : "Account",
      "url" : "/services/data/v53.0/sobjects/Account/accountId"
    },
  "Id" : "{{accountId}}",
  "Name" : "{{$randomCompanyName}}"
} Note how we made use of Postman’s convenient variable. Many useful variables can be used to generate example data, documented . $randomCompanyName here In the response headers tab in the bottom section, add a key with the value . Content-Type application/json Click to update the example response. The mock server will now respond with the updated response to the request we made earlier. Save At this point, we can add additional requests and examples to our collection. Click the ellipsis ( ) icon next to our collection name and select to generate a new one. Then, click the ellipsis icon next to the new request and select . This adds a new example response that the mock server will serve to your request. You can build a new mock server response in the same way as previously—by specifying new paths, HTTP verbs, and responses—until you’ve drafted your API.  At this point, we can even test the API from outside of Postman - one of the quickest ways to do this is via Postman’s code snippet functionality.  This allows for equally rapid development of code to consume the API. ... Add request Add example Snippets Postman provides example code for calling your APIs, mock or otherwise, in several languages and libraries. With a request selected in your workspace, click the icon on the right to expand the code snippet menu. From here, you can select a suitable language/library combination and see the example code to call your API. </> is enabled for Postman mock servers. As a result, you can stub your web apps with mocked data using the mock endpoints. Development or production web apps can then make requests to your Postman mock endpoint and receive example responses. CORS The code snippet will resolve variables where it can. In our example, where we use the variable to reference our Mock Server, this is expanded for us. This is shown in the JavaScript Fetch code example below. {{url}} this code snippet, as generated from Postman, has a small error.  HTTP GET requests sent via Fetch should set a body in the request.  For our testing, we will need to remove line 5 in the example above.  Below is the updated code, wrapped in a lightweight HTML page. Important note: not <html>
    <head>
        <script>
            var raw = "";

            var requestOptions = {
            method: 'GET',
            redirect: 'follow'
            };

            fetch("https://768bb73c-2824-49fa-8787-3967ce6ea0c1.mock.pstmn.io//Account/001000000WCFB8", requestOptions)
            .then(response => response.text())
            .then(result => console.log(result))
            .catch(error => console.log('error', error));
        </script>
    </head>
    <body>
        <p>Check the browser console to see the output from our mock server.</p>
    </body>
</html> Summary In this article, we’ve looked at the basics of setting up a Mock Server in Postman—from creating the mock server and a sample response to extending it with more meaningful JSON data and adding additional responses. We’ve also seen how simple it is to generate code snippets that show how to consume the API in the language/platform of your choice. Code snippets greatly aid the development of your own tools that utilize your API. With the tools that Postman provides, we can provide a technical requirement to both our Salesforce developers implementing the API and our developers on other platforms communicating with Salesforce as part of an integration. There is a wealth of further resources available for working with both Postman and Salesforce. Some of the ones relevant to what we’ve covered here can be found below: Building a mock API Mock Servers: The Exploratory Integrating With a Custom Salesforce App in Postman Exposing Apex Classes as REST WebServices Salesforce Trailhead: Postman API Client

Build a Lightweight REST API with Salesforce and Postman

Of all the development eras I’ve witnessed in my 30+ years building apps and features, the design pattern is my favorite. Prior to the RESTful approach, I always felt like something was missing when developing web applications. RESTful API My concerns were put to rest when I attended the Gartner Enterprise Architecture Summit in 2008. Most notably, a session called “SOAP v REST” was not only informative and funny, but it opened my eyes. I walked away with a desire to understand more about RESTful APIs and soon started experimenting with this new design pattern during my personal time. A job change was required before I officially started building RESTful APIs—a change which is now more than ten years old. To this day, I still get fired up when I find an impressive API. About the Salesforce APIs It shouldn’t surprise any readers of my past publications that I am quite impressed with the RESTful APIs provided by Salesforce. In fact, I am in the middle of a series called “ ,” which is possible because of the fully-featured RESTful API that developers can utilize to meet their needs. Using Salesforce Using Spring Boot Just recently, the site has been refactored to provide a far better experience for developers seeking to utilize the available APIs. Seeing such activity solidifies my belief that Salesforce places lots of value on IT professionals who make Salesforce part of their development repertoire. Salesforce Developers Whenever I have the opportunity to integrate with or simply utilize the Salesforce APIs, I look forward to the engagement. In every case, I have walked away learning something new, which results in better APIs for my customers and clientele—even those who have no connections to the Salesforce platform. Composite Requests After watching a on composite requests by , I immediately saw the value of a composite requests approach, and I could not wait to share it with my readers. presentation Philippe Ozil So, what are composite requests, anyway? In the Salesforce environment: Composite requests execute a series of REST API requests in a . The output of the initial request can be used with the input to a subsequent request. The response bodies and HTTP statuses of the requests are returned in a single response body. single call As a result, the entire series of requests count as a single call toward your API limits, which is something all developers using the Salesforce ecosystem should be aware of when building integrations and applications. Each subrequest within the composite request includes an which maps to the values utilized in standard RESTful communication. httpStatusCode HTTP status code A Simple Composite Request Example In Salesforce, a object is associated with an object. Additionally, every contact can include a corresponding object. contact account individual Prior to the existence of composite requests, API developers would first need to POST a new account object, then use the corresponding ID for the new account to POST a new contact object. As a result, two calls would be applied against the underlying organization’s API limits in Salesforce. Using composite requests, a single POST can be made for both items. Below is an example of the payload: {
"compositeRequest" : [{
  "method" : "POST",
  "url" : "/services/data/v52.0/sobjects/Account",
  "referenceId" : "refAccount",
  "body" : { "Name" : "Doe’s Widgets" }
  },{
  "method" : "POST",
  "url" : "/services/data/v52.0/sobjects/Contact",
  "referenceId" : "refContact",
  "body" : { 
    "FirstName" : "John",
    "LastName" : "Doe",
    "AccountId" : "@{refAccount.id}"
    }
  }]
} In this example, a new account for “Doe’s Widgets” will be created, and the underlying ID will be used to create a new contact for “John Doe.” The two are associated via the use of the which is established from the property of the account (line #5). @{refAccount.id} referenceId In fact, it could be possible to create an “individual” object for the John Doe contact using the same approach to set properties like birthdate and current occupation. We will actually implement this very scenario a little later. You might be asking yourself, when should I use (and not use) composite requests? The following table is intended to act as a quick reference for that question: Using Postman to Make Composite Requests Postman is an API platform for building and using APIs. I started using Postman about six years ago, mostly to validate my API designs and exercise the GET, POST, PUT, PATCH, and DELETE methods common to RESTful APIs. The available functionality in Postman goes well beyond my daily needs, including items such as: API tools — extends my basic usage to include documentation, mocking, testing, and discovery API repository — provides a centralized location where teams can share API artifacts Workspaces — allows for common Postman functionality to be grouped for easy reference Advanced features — improves API operations by leveraging concepts like search, notifications, reporting, alerts, and security warnings For the remainder of this article, I will leverage Postman to explore the concept of composite requests against the Salesforce API. Acquiring a Salesforce org Before we can get started using composite requests with Salesforce, we need an instance of Salesforce to utilize. For this article, I am going to utilize the Salesforce environment I created for my “ ” series, which includes the steps necessary to acquire a Salesforce instance (which can be utilized for this article). Leveraging Salesforce Without Using Salesforce If you would prefer to stick with the instructions from Salesforce, the following URL can also get you started: Create a Developer Org Configuring Postman Once Postman is installed, we leverage the Salesforce APIs collection located in a public workspace called . The collection includes all of the base functionality we need to log in and make our composite requests. Salesforce Developers Before making any changes to the collection, we need to fork it into our own Postman workspace: I named my fork “jvc-composite-requests” and used the default values for the other options: Now, I have a collection in my local Postman workspace: Salesforce APIs Logging in to Salesforce Now, we are ready to log in to Salesforce using OAuth 2.0 via Postman. Navigate to the tab and scroll down until the button is visible. Authorization Get New Access Token The button will open a new browser window so you can log in to Salesforce. Once logged in, a modal will appear to allow access to be granted for API requests. Get New Access Token Once completed, a summary screen will be presented: The last step is to copy the value into the collection variable, which will point the Postman workspace to the correct Salesforce org. instance_url _endpoint Validate Salesforce Connectivity In order to validate connectivity to Salesforce via Postman, I decided to use the request, which is found in the Salesforce APIs | REST folder. Sending the request resulted in a 200 OK response, along with a list of contacts from my Salesforce instance: Query Now that we have validated connectivity from Postman to Salesforce, we turn our focus to making composite requests. Making Composites Requests Against Salesforce Building on the example above, I would like to create the following items in Salesforce using a single composite request for one of my favorite bands, : Rush Create a new account called Rush Create a new contact for Rush called Geddy Lee Create a new individual record for Geddy Lee with an occupation of Bass Create a new contact for Rush called Alex Lifeson Create a new individual record for Alex Lifeson with an occupation of Guitar Create a new contact for Rush called Neil Peart Create a new individual record for Neil Peart with an occupation of Drums The payload of the composite request API is as follows: {
   "compositeRequest": [
       {
           "method": "POST",
           "url": "/services/data/v52.0/sobjects/Account",
           "referenceId": "refAccount",
           "body": {
               "Name": "Rush"
           }
       },
       {
           "method": "POST",
           "url": "/services/data/v52.0/sobjects/Individual",
           "referenceId": "refIndividualGeddy",
           "body": {
               "LastName": "Lee",
               "Occupation": "Bass"
           }
       },
       {
           "method": "POST",
           "url": "/services/data/v52.0/sobjects/Contact",
           "referenceId": "refContactGeddy",
           "body": {
               "FirstName": "Geddy",
               "LastName": "Lee",
               "AccountId": "@{refAccount.id}",
               "IndividualId": "@{refIndividualGeddy.id}"
           }
       },
       {
           "method": "POST",
           "url": "/services/data/v52.0/sobjects/Individual",
           "referenceId": "refIndividualAlex",
           "body": {
               "LastName": "Lifeson",
               "Occupation": "Guitar"
           }
       },
       {
           "method": "POST",
           "url": "/services/data/v52.0/sobjects/Contact",
           "referenceId": "refContactAlex",
           "body": {
               "FirstName": "Alex",
               "LastName": "Lifeson",
               "AccountId": "@{refAccount.id}",
               "IndividualId": "@{refIndividualAlex.id}"
           }
       },
       {
           "method": "POST",
           "url": "/services/data/v52.0/sobjects/Individual",
           "referenceId": "refIndividualNeil",
           "body": {
               "LastName": "Peart",
               "Occupation": "Drums"
           }
       },
       {
           "method": "POST",
           "url": "/services/data/v52.0/sobjects/Contact",
           "referenceId": "refContactNeil",
           "body": {
               "FirstName": "Neil",
               "LastName": "Peart",
               "AccountId": "@{refAccount.id}",
               "IndividualId": "@{refIndividualNeil.id}"
           }
       }
   ]
} In plain language, the requirements translate to the following: Create a new account for Rush Create an individual record for Bass Create a contact for Geddy Lee and link the Rush account and individual Bass records Create an individual record for Guitar Create a contact for Alex Lifeson and link the Rush account and individual Guitar records Create an individual record for Drums Create a contact for Neil Peart and link the Rush account and individual Drums records The request utilized the following POST URI: {{_endpoint}}/services/data/v{{version}}/composite After we send the request, we receive an HTTP status of 200 (OK): The resulting payload is included below: {
   "compositeResponse": [
       {
           "body": {
               "id": "0015e00000JcTSMAA3",
               "success": true,
               "errors": []
           },
           "httpHeaders": {
               "Location": "/services/data/v52.0/sobjects/Account/0015e00000JcTSMAA3"
           },
           "httpStatusCode": 201,
           "referenceId": "refAccount"
       },
       {
           "body": {
               "id": "0PK5e000000sYlKGAU",
               "success": true,
               "errors": []
           },
           "httpHeaders": {
               "Location": "/services/data/v52.0/sobjects/Individual/0PK5e000000sYlKGAU"
           },
           "httpStatusCode": 201,
           "referenceId": "refIndividualGeddy"
       },
       {
           "body": {
               "id": "0035e00000FMahHAAT",
               "success": true,
               "errors": []
           },
           "httpHeaders": {
               "Location": "/services/data/v52.0/sobjects/Contact/0035e00000FMahHAAT"
           },
           "httpStatusCode": 201,
           "referenceId": "refContactGeddy"
       },
       {
           "body": {
               "id": "0PK5e000000sYlPGAU",
               "success": true,
               "errors": []
           },
           "httpHeaders": {
               "Location": "/services/data/v52.0/sobjects/Individual/0PK5e000000sYlPGAU"
           },
           "httpStatusCode": 201,
           "referenceId": "refIndividualAlex"
       },
       {
           "body": {
               "id": "0035e00000FMahMAAT",
               "success": true,
               "errors": []
           },
           "httpHeaders": {
               "Location": "/services/data/v52.0/sobjects/Contact/0035e00000FMahMAAT"
           },
           "httpStatusCode": 201,
           "referenceId": "refContactAlex"
       },
       {
           "body": {
               "id": "0PK5e000000sYlQGAU",
               "success": true,
               "errors": []
           },
           "httpHeaders": {
               "Location": "/services/data/v52.0/sobjects/Individual/0PK5e000000sYlQGAU"
           },
           "httpStatusCode": 201,
           "referenceId": "refIndividualNeil"
       },
       {
           "body": {
               "id": "0035e00000FMahNAAT",
               "success": true,
               "errors": []
           },
           "httpHeaders": {
               "Location": "/services/data/v52.0/sobjects/Contact/0035e00000FMahNAAT"
           },
           "httpStatusCode": 201,
           "referenceId": "refContactNeil"
       }
   ]
} Notice how there is an for each subrequest being made. This allows the feature or service developer to understand which portions of the request were successful and which failed. In fact, there is even an property that controls transaction rollback - which allows for successful items to be kept or all items discarded. httpStatusCode allOrNone In the example above, I made one API call to Salesforce—instead of seven. This reflects an 85% improvement. This benefit can be further qualified by the avoidance of potential issues that may result when making a request and waiting for the reply before continuing with the next request of related data. cyclomatic complexity Conclusion Starting in 2021, I have been trying to live by the following mission statement, which I feel can apply to any IT professional: “Focus your time on delivering features/functionality which extends the value of your intellectual property. Leverage frameworks, products, and services for everything else.” J. Vester In this article, we were able to explore the concept of composite requests against the robust Salesforce API. While there is a minor learning curve to understanding the approach, use of composite requests not only packages all related items in a single request, there is an n+1 reduction of API requests counting toward your limits in the Salesforce ecosystem. Certainly, Salesforce has introduced a service that allows feature and service-tier developers to combine related data in a single request, thereby avoiding the additional programming logic required to make the first request and also waiting for the response before submitting the next request. Provided your scenario does not exceed 25 subrequests, consideration should be made to employ composite requests when communicating with the Salesforce API. In fact, API developers outside the Salesforce realm should consider learning from the Salesforce team and offering composite requests as a viable option. See? I ended up learning something new from the Salesforce API just by exploring the idea of composite requests. Happens every time, it seems. Have a really great day!

How to Make Composites Requests Against Salesforce

In the “ ” article, I navigated the course for introducing a Spring Boot service that would leverage the well-established Salesforce RESTful API. The goal of this service was to act as a middleware layer; that way, clients not written in Salesforce could retrieve and update contact data stored in Salesforce. This backend service implemented its own caching layer to provide a faster response time and also cut down on the number of times Salesforce needed to be called. Leveraging Salesforce Using Spring Boot In “ ,” I introduced a simple client written in Svelte, which made it possible to update the Salesforce data using an inline editor—again, without actually using the Salesforce client. Leveraging Salesforce Using a Client Written In Svelte The “ ” article introduced a client application using the Vue.js framework to further interact with the Spring Boot service. Using Vue.js, the resulting client was not only able to read data from Salesforce but also processed and displayed updates made to the Salesforce data via a server-sent events (SSE) implementation. Leveraging Salesforce Using a Client Written In Vue.js The fourth article in the series, “ ,” introduced native mobile applications for Android and iOS devices leveraging a single source codebase written in React Native. This new client offering allowed senior executives to monitor the progress of the Salesforce data. Leveraging Salesforce Using Mobile Applications Written (Once) In React Native In this article, we will use the Angular framework to complete a new feature request. In this example, the same contact data from Salesforce will be utilized in a drop-down list to avoid having a different source of contact data. Revisiting the Example Use Case Let’s briefly recap our example use case: The Business Call Center is about to launch a major marketing campaign. However, they recently discovered that the title generated for the list of contacts was incorrect approximately 90% of the time. A team of interns has been updating contacts using the Svelte client, and the managerial team has been using the Vue.js client to monitor the updates as they occur, complete with server-sent events appearing as toast messages. Executives have been monitoring the progress using their Android and iOS devices from native clients which have been deployed. The feature team responsible for the new widget product line has realized that they too can benefit from the contact information stored in Salesforce. The following requirements have been added to the widget application: The new widget form requires a contact field. The selection options for the contact field will be a drop-down list. The source data will be a dynamic list of contacts from Salesforce. Each selection option will present the contact’s full name with their title in parentheses (if available). As changes are made to contacts in Salesforce, the list of contact selection options should automatically update (including the title value). The feature team for the widget product line is planning to start this work right away and should have everything they need based upon the results of prior work completed for this series. As a point of reference, below is a link to the Spring Boot service which has been used for this entire series: https://gitlab.com/johnjvester/salesforce-integration-service Why Angular? is a TypeScript-based web client framework that is led by and fueled by a very large open-source community. Of all the frameworks I have used in this series, Angular is certainly the largest—almost to the point where it may be better to call it a platform. Angular Google Some benefits of using Angular are noted below: Designed to handle enterprise web applications, accommodating next-generation design patterns, including . progressive web applications Continues to evolve with a dedicated open-source community. This leads to an impressive bug/resolution time frame and a large library of third-party solutions or dependencies which can be added to any modern Angular project. Supported by Google, serving as the primary web-client framework for technology powerhouses that include Gmail, Microsoft Office, PayPal, Upwork (freelance program), and Samsung. Personally, I have been involved with enterprise web applications running in both AngularJS and Angular since early 2014. While Angular is designed to handle large-scale applications, I have been equally successful in using the same framework for small and simple applications. Getting Started with Angular For this article, I decided to step outside of my comfort zone by giving version 12 of Angular a try. (As a point of reference, I last used version 9 for the fitness application I wrote for my sister-in-law in my “ ” series last year.) Using Heroku to Quickly Build a Multi-Tenant SaaS Product Since my Angular command-line interface (CLI) was still on version 9, I needed to use the following command to upgrade to version 12 of the Angular CLI: npm install -g @angular/cli First-time users can use this same command as well. Issuing an command provided me with the following results: ng version _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.2.0
Node: 14.15.5
Package Manager: npm 6.14.11
OS: darwin x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1202.0 (cli-only)
@angular-devkit/core         12.2.0 (cli-only)
@angular-devkit/schematics   12.2.0 (cli-only)
@schematics/angular          12.2.0 (cli-only) To create a new Angular 12 application, I issued the following Angular CLI command: ng new salesforce-integration-angular The Angular CLI created the application in a new folder called salesforce-integration-angular. Below is a summary of some of the command’s output: ? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
...
✔ Packages installed successfully. At this point, I used the command to show the newly created Angular application: ng serve Of course, there is not a lot there, but at least the Angular application started in a matter of seconds. Adding Some Dependencies The requirements for the widget application contained an interesting business rule. To avoid having to scroll back to the top of the page, I captured the information below: As changes are made to contacts in Salesforce, the list of contact selection options should automatically update (including the title value). This requirement translates to the widget application having to maintain the current state of the contact objects. Meaning, the contact list information always needs to be current. In the “Leveraging Salesforce Using a Client Written In Vue.js” article, the Spring Boot service was updated to broadcast SSEs as changes were made to the state of the contacts stored in Salesforce. The Angular application will also need to listen to those same SSEs. However, with the Angular application, I decided to use @ngrx/store, which is a Redux-inspired global state management for Angular applications—powered by RxJS. What this means is that I will wire the SSEs from Spring Boot to maintain the state of Salesforce contacts inside the browser. Then, the widget component can employ a reactive design to always have the latest changes—without having to make another call to the Spring Boot service. Adding the ngrx/store dependency to the Angular 12 application required a simple command: npm install @ngrx/store --save With this single dependency added to the project, I can focus on creating the widget component in Angular. Creating the Widget Component For this simple example, launching the Angular 12 application will present a new widget form. Because we’re keeping things simple, the form will look like this: The model field will be a freeform text field and the contact field will contain a dynamic list of Salesforce contacts, kept up to date via the SSE listeners communicating with NgRx. Creating a new component using the Angular CLI requires the following command: ng generate component widget The Angular CLI responds with the following status updates: CREATE src/app/widget/widget.component.css (0 bytes)
CREATE src/app/widget/widget.component.html (21 bytes)
CREATE src/app/widget/widget.component.spec.ts (626 bytes)
CREATE src/app/widget/widget.component.ts (275 bytes)
UPDATE src/app/app.module.ts (727 bytes) As a result, a widget component has been created and is ready to use in the folder of the Angular 12 application. /src/app/widget Configuring NgRx Rather than include all of the necessary information around configuring NgRx here, the following link to the NgRx website provides a great amount of detail: https://ngrx.io/guide/store#ngrxstore Part of this documentation includes the following diagram: At a high level, we’ll add the following elements to the Angular 12 application: ContactService: to make API calls to Spring Boot, allowing for us to receive contacts. EventService: to make the connection to the SSE URI running in the Spring Boot service. ContactEffect: to register event listeners and load the original contacts from the Spring Boot service. ContactAction: to describe the events that are dispatched from the ContactService. ContactReducer: to ensure the state changes are being processed. ContactSelector: to select and derive contact information from the store. WidgetComponent: to listen to the ContactAction and receive data from the ContactSelector. Let’s dive into the code and see how this looks in TypeScript. ContactService The ContactService handles making basic API calls to the Spring Boot service that has been used throughout this series. The Angular 12 client will simply make a call to the /contacts URI and return an “observable” containing a list of contact objects: export class ContactService {
  constructor(private http: HttpClient) { }

  getContacts(): Observable<Contact[]> {
    return this.http.get<Contact[]>( environment.api + '/contacts')
      .pipe(
        retry(1),
        catchError(this.handleError)
      )
  }
} EventService The EventService establishes a connection to the URI in Spring Boot which is broadcasting SSE updates. I added the method to make the connection: getServerSentEvent() getServerSentEvent(): Observable<any> {
    return Observable.create((observer: { next: (arg0: any) => void; error: (arg0: any) => void; }) => {
      const eventSource = this.setSource();
      eventSource.onmessage = event => {
        this.zone.run(() => {
          observer.next(event);
        });
      };
      eventSource.onerror = error => {
        this.zone.run(() => {
          observer.error(error);
        });
      };
    });
  } When a SSE arrives, the method is called: _onMessage() private _onMessage(e: MessageEvent): void {
    const message = JSON.parse(e.data);
    if (message) {
      this.dispatchActionInNgZone(processSseUpdate(message));
    }
  } This in turn dispatches the action into the NgZone: private dispatchActionInNgZone(action: Action): void {
    this.zone.run(() => this.store.dispatch(action));
  } ContactEffect The ContactEffect registers an event listener to the EventService, updates contacts from SSE messages that are received, and loads the original contacts from the Spring Boot service. registerEventListener$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(ContactActionTypes.AllContactsLoaded),
        tap(action => {
          this.eventListenerService.register();
        }),
        repeat()
      ),
    { dispatch: false }
  );

  updateContactFromSSE$ = createEffect(() =>
    this.actions$.pipe(
      ofType(processSseUpdate),
      map( payload => {
        const anyContact:any = (payload as any);
        const contact = (anyContact as Contact);
        const updatedAction:Update<Contact> = {
          id: contact.id,
          changes: { ...contact }
        };
        return new ContactUpdated({contact: updatedAction});
      })
    )
  );

  loadAllContacts$ = this.actions$.pipe(
      ofType<AllContactsRequested>(ContactActionTypes.AllContactsRequested),
      mergeMap(() => this.contactService.getContacts()),
      map(contacts => { new AllContactsLoaded({ contacts })} )
    ); ContactAction The ContactAction describes the events that are dispatched from the ContactService. export enum ContactActionTypes {
  AllContactsRequested = '[Contact API] All Contacts Requested',
  AllContactsLoaded = '[Contact API] All Contacts Loaded',
  ContactUpdated = '[Contact API] Contact Updated'
}

export class AllContactsRequested implements Action {
  readonly type = ContactActionTypes.AllContactsRequested;
}

export class AllContactsLoaded implements Action {
  readonly type = ContactActionTypes.AllContactsLoaded;
  constructor(public payload: { contacts: Contact[] }) { }
}

export class ContactUpdated implements Action {
  readonly type = ContactActionTypes.ContactUpdated;
  constructor(public payload: { contact: Update<Contact> }) { }
}

export type ContactActions = AllContactsRequested |  AllContactsLoaded | ContactUpdated; ContactReducer The ContactReducer makes sure the state changes are processed. export function contactReducer(state = initialContactsState, action: ContactActions): ContactsState {
  switch(action.type) {
    case ContactActionTypes.AllContactsLoaded:
      return adapter.setAll(action.payload.contacts, {...state, allContactsLoaded: true });
    case ContactActionTypes.ContactUpdated:
      return adapter.updateOne(action.payload.contact, state);
    default: {
      return state;
    }
  }
} WidgetComponent Finally, the WidgetComponent leverages all the NgRx state-management elements to provide a dynamic and self-updating list of contact information from Salesforce via the Spring Boot service and SSE URI. The method connects to the NgRx store, then receives the original list of contacts: ngOnInit() ngOnInit(): void {
    this.widget.model = "Some Model Description Goes Here";

    this.contactService.getContacts().subscribe((data) => {
      this.store.dispatch(new AllContactsLoaded({ contacts: data }));
      this.loading = false;
    });
  } With the NgRx implementation in place, updates will be processed as they are received from the Spring Boot service over the SSE URI. To make sure the Widget component is displayed when Angular starts, I reduced the app.component.html file to a single line: <widget></widget> Using the Angular Application Using ng serve from the Angular CLI, we start up the Angular 12 application with all of the above changes in place. This displays the widget form, showing the contact data from Salesforce in the drop-down list: Using the following cURL command, I updated the title for Rose Gonzales from “SVP, Procurement” to “SVP, Information Technology.” curl --location --request PATCH 'http://localhost:9999/contacts/0035e000008eXq0AAE' \
--header 'Content-Type: application/json' \
--data-raw '{
    "Title": "SVP, Information Technology"
}' The PATCH command resulted in an HTTP status code of 202 (Accepted) and returned the following payload: {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v52.0/sobjects/Contact/0035e000008eXq0AAE"
    },
    "id": "0035e000008eXq0AAE",
    "Name": "Rose Gonzalez",
    "Title": "SVP, Information Technology",
    "Department": "Procurement"
} Without making any changes to the widget form, the drop-down list options now appear like this: Notice how the contact title changed automatically for Rose Gonzalez. Conclusion Starting in 2021, I have been trying to live by the following mission statement, which I feel can apply to any IT professional: “Focus your time on delivering features/functionality which extends the value of your intellectual property. Leverage frameworks, products, and services for everything else.” J. Vester In this article, I created a widgets component using Angular 12 which included a drop-down list of contacts populated with data from within the Salesforce implementation. I added NgRx state-management functionality to listen for SSE messages from Spring Boot in order to keep the list of contacts current. In this case, I leveraged the powerful NgRx state-management framework to do the work for me—requiring very few changes to the widget component at all. Similar to my experiences with Svelte, Vue.js, and React Native, the time to create a ready-to-deploy component was very fast, measured in minutes rather than hours. Just like in all of this series’ articles, we have been able to use Salesforce without actually using a Salesforce client. Of course, a production-ready scenario would require some additional work to prepare this application for “prime time” use. If you are interested in the source code used for the Angular client, simply navigate to the following repository on GitLab: https://gitlab.com/johnjvester/salesforce-integration-angular In the next article of this series, I plan to turn things 180 degrees and use Lightning Web Components (LWC) outside the Salesforce ecosystem. Have a really great day! Also published on: https://dzone.com/articles/leveraging-salesforce-using-a-client-written-in-an

Stories, News & Mentions about QCOBJECTS

Qcobjects’s Stories on HackerNoon