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

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

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

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

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 

When we hear the word "group," we often think of various associations, from social circles to musical bands or even a gathering of animals. A Fabric.js group is a collection of objects that are clustered together. These groups serve multiple purposes, such as moving and modifying objects collectively or applying property changes uniformly across multiple objects. In this blog post, we will explore how to create object groups using Fabric.js, empowering you to streamline your object manipulation and modification tasks. Why Use Object Groups in Fabric.js: Object groups offer several advantages and functionalities, including: With object groups, you can conveniently move multiple objects as a single unit, simplifying the positioning and arrangement of complex scenes. Moving Multiple Objects Together: By grouping objects, you can apply modifications uniformly across the entire group, saving time and effort when making changes to related objects. Modifying Objects as a Group: Object groups enable simultaneous property changes, allowing you to apply transformations like skewing, scaling, fill color, stroke, and more to multiple objects at once. Applying Property Changes: Creating Object Groups in Fabric.js: To create an object group in Fabric.js, we utilize the fabric.Group constructor. Let's take a closer look at its syntax and usage: Syntax: new fabric.Group(objects: Object, 
                  options(optional): Object, 
                  isAlreadyGrouped(optional): Boolean); The parameter accepts an array of objects that we want to group together. objects Optional can be passed as an object, allowing customization of group properties like position and angle. options The parameter is used to indicate if the provided objects are already grouped. isAlreadyGrouped Creating a Basic Object Group: Follow these steps to create a basic object group: You can group shapes, images, or text elements by creating individual objects. Pass these objects as an array to the constructor. fabric.Group Example: var circle = new fabric.Circle({ radius: 30, fill: "#FF0000" });
var image = new fabric.Image(...);
var text = new fabric.Text("Hello", ...);

var group = new fabric.Group([circle, image, text]);
canvas.add(group); A circle, an image, and a text element are combined in the above example. The variable represents the newly created object group, which is then added to the canvas. group Customizing Object Groups: You can further customize object groups by providing optional properties to the object parameter. These properties allow you to define the group's position, rotation angle, and other visual attributes. options Example: var group = new fabric.Group([circle, image, text], {
  left: 70,
  top: 94,
  angle: -10,
}); In the above example, we set the and properties to position the group on the canvas. Additionally, we specify an to rotate the entire group. left top angle Creating a Group of Two Objects: Creating a group of two objects follows a similar approach. However, we need to ensure proper alignment within the group by setting the and properties to "center" for each object. originX originY Example: var rect = new fabric.Rect({
    width: 100,
    height: 85,
    fill: "#FFC0CB",
    originX: "center",
    originY: "center"
});
var text = new fabric.Text("Hello world@", {
    fontSize: 30,
    originX: "center",
    originY: "center"
});

var group = new fabric.Group([rect, text], {
    left: 150,
    top: 100,
    angle: -10
});
canvas.add(group); In the above example, we create a group of a rectangle and text element. By specifying the and properties as "center" for each object, we ensure they are properly centered within the group. originX originY Ungrouping Fabric.js Objects In addition to creating groups of objects in Fabric.js, you also have the ability to ungroup them when needed. Ungrouping objects allows you to restore their individual properties and manipulate them independently. Let's explore how to ungroup objects using Fabric.js with an example. Example of Ungrouping Objects: You want to ungroup a group of objects and treat them separately. Consider a group consisting of two rectangles and a text element. We will demonstrate how to ungroup them using Fabric.js. var canvas = new fabric.Canvas("canvas");

// Create the rectangles
var rect1 = new fabric.Rect({
  width: 100,
  height: 50,
  fill: "blue",
  left: 50,
  top: 50,
});

var rect2 = new fabric.Rect({
  width: 100,
  height: 50,
  fill: "red",
  left: 200,
  top: 50,
});

// Create the text element
var text = new fabric.Text("Hello", {
  fontSize: 20,
  fill: "white",
  left: 120,
  top: 60,
});

// Group the objects
var group = new fabric.Group([rect1, rect2, text], {
  left: 100,
  top: 100,
});

canvas.add(group);

// Ungroup the objects
var activeObj = canvas.getActiveObject();
var activegroup = activeObj.toGroup();
var objectsInGroup = activegroup.getObjects();

activegroup.clone(function(newgroup) {
    canvas.remove(activegroup);
    objectsInGroup.forEach(function(object) {
        canvas.remove(object);  
    });
    canvas.add(newgroup);
    canvas.setActiveObject(newgroup);
    canvas.requestRenderAll();
});

canvas.renderAll(); In the code above, we assume that canvas is the Fabric.js canvas object. First, we retrieve the active object from the canvas using . We then convert the active object into a group using the method, and store it in the activegroup variable. getActiveObject() toGroup() A list of objects within the group is obtained using the method and stored in the variable. getObjects() objectsInGroup A clone of the activegroup is then created using the clone() method. Inside the callback function of clone(), we remove the activegroup from the canvas using . remove(activegroup) We iterate over the objectsInGroup array and remove each individual object from the canvas using . remove(object) After removing the group and its objects, we add the cloned group back to the canvas using . add(newgroup) Finally, we set the newgroup as the active object on the canvas using , and request the canvas to render the changes using By executing this code, you will ungroup the objects and have them restored as separate entities on the canvas. setActiveObject(newgroup) requestRenderAll(). Conclusion Mastering object grouping in Fabric.js empowers you to simplify object manipulation and modification tasks. By creating object groups, you can move, modify, and apply property changes to multiple objects simultaneously, enhancing your productivity and efficiency. Whether you're working with complex scenes or need to apply uniform transformations, object groups in Fabric.js are a valuable tool in your development arsenal. Start leveraging the power of object grouping in Fabric.js and take your canvas-based applications to the next level.

Simplifying Object Manipulation: Grouping and Ungrouping Fabric.js Objects

Exciting news in the world of AI and image editing: Drag Your GAN, a groundbreaking research, was just ! introduced by Pan et al. This new approach allows you to alter images by simply dragging points from A to B, revolutionizing the way we interact with image editing. This isn’t just editing, but actually the creation of completely new images, allowing you to change object positions, subject poses, and more. Drag Your GAN prioritizes precise object dragging over image generation or text manipulation The AI realistically adapts the entire image, modifying the object's position, pose, shape, expressions, and other frame elements. 🐶🌄 Edit expressions of dogs, make them sit, adjust human poses, or even alter landscapes seamlessly. Drag Your GAN offers an innovative and interactive way to experiment with image editing. How does it work? Drag Your Gan leverages StyleGAN2, a state-of-the-art architecture by NVIDIA. By operating in the feature space (latent code), the AI learns how to edit images properly through a series of steps and loss calculations. GAN Even though the results are fantastic, as you will see below, it's essential to note that Drag Your Gan has some limitations, including only being able to edit generated images for now. Images are part of the distribution. Other limitations are that the selection of points is based on pixel colors and contrast, so you cannot really drag anything. If you take a part of a red car and move it staying on the red car, it might not understand that you move it at all. Can't wait to try it out? The authors mention that the code should be available in June. Tune in to the video to learn more about this new image manipulation style with DragYourGan! Learn More by Watching the Video and Skip to Any Portion You’d Like Via the Transcript https://youtu.be/r1mh-IqBEjg?embedable=true&transcript=true

Introducing Drag Your GAN: Drag Objects to Create New Images

Presentamos Drag Your GAN: arrastre objetos para crear nuevas imágenes

Présentation de Drag Your GAN : Faites glisser des objets pour créer de nouvelles images

पेश है ड्रैग योर गण: नई इमेज बनाने के लिए ऑब्जेक्ट को ड्रैग करें

Drag Your GAN の紹介: オブジェクトをドラッグして新しい画像を作成

Apresentando Drag Your GAN: Arraste objetos para criar novas imagens

Giới thiệu Kéo GAN của bạn: Kéo đối tượng để tạo hình ảnh mới

介绍拖动你的 GAN：拖动对象创建新图像

Fabric.js is an open-source JavaScript library used for creating interactive and high-quality graphics for the web. It's a powerful tool that enables developers to create complex shapes, graphics, and animations on the canvas element of HTML5. Fabric.js simplifies the process of creating and manipulating graphical objects, making it easier for developers to build creative and dynamic web applications. Demo project structure To fully grasp Fabric.js, it's essential to first comprehend the demo project structure. Fabric.js comes with a "demo" folder that includes numerous examples and projects showcasing its capabilities. The demo folder is organized in a user-friendly manner, allowing for easy modification of projects to meet individual requirements. Canvas initializing In order to utilize Fabric.js, a canvas element must be present on your webpage. The initial step for setting up a Fabric.js canvas involves creating an instance of the fabric.Canvas class, which is responsible for managing the graphical objects on the canvas element. To initialize the canvas, the following code can be used: var canvas = new fabric.Canvas('canvasId'); The code requires you to provide the ID of the canvas element that exists on your webpage as "canvasId". After the canvas initialization process is complete, you can begin generating and altering graphical objects on it. Fabric.js is a powerful tool for developing engaging and innovative web applications. Its range of functionalities is extensive, allowing for the effortless creation of intricate shapes, graphics, and animations. By familiarizing yourself with the demo project structure, the process of initializing a canvas, as well as the various other features and functions of Fabric.js, you can elevate your web development projects to new heights. Drawing Objects with Fabric.js Fabric.js is a robust library that enables the creation of diverse shapes and objects. The following section will guide you through the process of drawing multiple objects with the help of Fabric.js. Drawing Rectangles and Ellipses Creating rectangles and ellipses is a simple procedure with Fabric.js. To draw a rectangle, you can utilize the class and specify its essential attributes like height, width, fill color, border color, and border width. In a similar fashion, to draw an ellipse, you can use the class and provide necessary attributes such as radius, fill color, border color, and border width. fabric.Rect fabric.Ellipse The code below illustrates the process of drawing a rectangle and an ellipse using Fabric.js: // Create a rectangle
var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 50,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 2
});

// Create an ellipse
var ellipse = new fabric.Ellipse({
    left: 250,
    top: 100,
    rx: 50,
    ry: 25,
    fill: 'blue',
    stroke: 'black',
    strokeWidth: 2
});

// Add both objects to the canvas
canvas.add(rect, ellipse); Free-hand Drawing With Fabric.js, you can create free-hand shapes by utilizing the class. To draw a free-hand shape, you need to specify an array of points that determine the path's outline. The code below illustrates how to draw a free-hand shape using Fabric.js: fabric.Path // Create a free-hand path
var path = new fabric.Path('M 0 0');

// Set the stroke color and width

path.set({
    stroke: 'green',
    strokeWidth: 5
});

// Add the path to the canvas
canvas.add(path);


// Listen for mouse down event to start drawing the path
canvas.on('mouse:down', function(event) {
    var pointer = canvas.getPointer(event.e);
    path.path[0][1] = pointer.x;
    path.path[0][2] = pointer.y;

    canvas.renderAll();
});


// Listen for mouse move event to continue drawing the path
canvas.on('mouse:move', function(event) {
    if (!path.path.length) return;
    var pointer = canvas.getPointer(event.e);

    path.path.push(['L', pointer.x, pointer.y]);
    canvas.renderAll();
});


// Listen for mouse up event to stop drawing the path
canvas.on('mouse:up', function(event) {
    path.setCoords();
    canvas.renderAll();
}); Line-dashed Line With Fabric.js, you have the ability to create dashed lines using the fabric.Line class. To achieve this, simply specify the strokeDashArray attribute, which requires an array of numbers to determine the length of both the dashes and gaps within the line. The example code below demonstrates how to use Fabric.js to draw a dashed line: // Create a dashed line
var line = new fabric.Line([50, 50, 250, 50], {
    stroke: 'black',
    strokeWidth: 2,
    strokeDashArray: [5, 2]
});

// Add the line to the canvas
canvas.add(line); Polygon Fabric.js also facilitates the creation of polygons. To draw a polygon, you must specify the points attribute, which is an array of numbers representing the x and y coordinates of each point in the polygon. The code below demonstrates how to draw a polygon using Fabric.js: var polygon = new fabric.Polygon([{
    x: 150,
    y: 50
}, {
    x: 225,
    y: 150
}, {
    x: 150,
    y: 250
}, {
    x: 75,
    y: 150
}], {
    fill: 'orange',
    stroke: 'black',
    strokeWidth: 5
}) Working with Events In web development, events refer to actions or occurrences that happen within a webpage, which may be initiated by a user, an external system, or internal browser functions. Fabric.js offers a comprehensive event system that enables you to define actions in response to user interactions with your canvas and its objects. Mouse events are among the most widely used events in web development. In Fabric.js, you can listen for and react to various mouse events, including click, double-click, hover, press, and release. These events are linked to canvas objects and can be utilized to execute custom actions of your choosing. For instance, you could create a click event that changes the color of a shape or launches a custom popup when an object is double-clicked. Keyboard events are another crucial type of event that you can utilize in Fabric.js. These events let you respond to user keyboard input within your canvas. You can use this to control the behavior of objects within the canvas, such as moving them in response to arrow key input or applying a transformation with another key. Additionally, the Fabric.js event system includes object events that are triggered when a particular canvas object is interacted with. For example, you could define a custom event that fires when a specific shape is clicked or double-clicked. These object events can be used to create custom interactions and functionality within your canvas. To work with events in Fabric.js, you need to define an event listener function that is attached to either the canvas or specific objects within it. The function will then execute whenever the event is triggered. For example, to respond to a click event on a canvas, you could define a function as shown below: // Create a new canvas
var canvas = new fabric.Canvas('canvas');

// Add a rectangle object to the canvas
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: 'red'
});
canvas.add(rect);

// Define a function to handle the click event
function handleClick(event) {
  console.log('Rectangle clicked!');
  rect.set('fill', 'blue');
  canvas.renderAll();
}

// Add a click event listener to the rectangle object
rect.on('mousedown', handleClick); Tips for Optimizing Fabric.js Performance Optimizing performance is crucial for Fabric.js, not just for debugging and troubleshooting, but also for ensuring maximum efficiency and speed. Here are a few helpful tips to help you improve the performance of your Fabric.js project: Use caching: Fabric.js provides a powerful caching mechanism that can speed up object rendering and manipulation. Caching frequently used objects and settings can reduce the processing power required to display or modify them. You can learn more about Fabric.js caching by visiting the official documentation page. Preload images: When using images in your Fabric.js project, preloading them before they're used can significantly reduce load times and improve overall performance. Use object pooling: Object pooling is a technique that involves reusing existing objects instead of creating new ones. By reusing objects, you can reduce the amount of memory required to run your Fabric.js project. This technique is especially useful when dealing with large numbers of objects. Minimize DOM interactions: Interacting with the Document Object Model (DOM) can be slow and resource-intensive. To reduce the impact of DOM interactions on your Fabric.js project, use techniques like batching and throttling to minimize the number of interactions required. Optimize animations: Animations can be resource-intensive, so it's important to optimize them for maximum performance. Techniques like using requestAnimationFrame and limiting the number of animations can help improve your Fabric.js performance. By implementing these tips and techniques, you can help ensure that your Fabric.js project runs smoothly and efficiently, with minimal errors and maximum performance. For further information or support, refer to Fabric.js official documentation or visit the Fabric.js community forum. Applications of Fabricjs Fabric.js is a versatile library that can be used to build a wide range of interactive and dynamic web applications. Some examples of what can be built using Fabric.js include: Drawing and editing tools, such as image editors and graphic design software. Interactive games and simulations. E-commerce and product customization applications. Data visualization and reporting tools. Collaborative applications, such as whiteboard and brainstorming tools. Virtual try-on and augmented reality experiences. Educational and training tools, such as interactive tutorials and quizzes. Animated infographics and explainer videos. Responsive and mobile-friendly user interfaces. Customized dashboards and analytics tools. The possibilities with Fabric.js are endless, and its robust features and easy-to-use API make it a powerful tool for web developers looking to create dynamic and engaging user experiences.

A Comprehensive Guide to Working with Objects and Shapes in Fabric.js

In this article, we will discuss how to follow the best for Page Objects. 7 practices What is Page Object? A is a the most common design pattern used in test automation. Each page elements and methods are written in separate class. These methods include all the necessary interaction that you need to do on that particular page. Page Object For example, login to the website, search something on the website, add product to the basket — all of these are separate methods in the Page Object Pattern. Later, you can use easily these methods in the your tests instead writing this repetitive code in each test. It’s and many more useful benefits. easy to maintain, easy to write, easy to read Let’s check the example In this example, I’m using and . JavaScript Playwright The main steps to create any Page Object would be: Create a separate class Add locators for this class Create methods to use in the tests const { Locator } = require('@playwright/test');

class GoogleSearchPage {
  searchInput = new Locator('input[name="q"]');

  constructor(page) {
    this.page = page;
  }

  async goto() {
    const baseUrl = BASE_URL;
    await this.page.goto(baseUrl);
  }

  async setSearchInput(query) {
    const searchInput = await this.searchInput.waitFor();
    await searchInput.fill(query);
  }

  async search(query) {
    await this.setSearchInput(query);
    await this.page.keyboard.press('Enter');
    return new GoogleSearchResultsPage(this.page);
  }
} It looks good. But we still have many questions as to what are the best practices here. Let’s take a deeper look. Keeping Your Tests Clean and Your Sanity Intact 1. The first and main best practice is one Page Object for one page Create a separate Page Object for page or component. Each Page Object should represent a single page in your application. This is important because it helps keep your code organized and makes it easier to maintain in future. When you have a separate Page Object for each page, you can easily update the methods related to that page, without affecting other parts of your code. each This is the biggest the difference between having the same code in each test and having PO. Overall, creating a separate Page Object for each page or component ensures that your test code remains clean, and easy to maintain. And this is beneficial for you in future or your future colleagues who eventually will start helping you with tests. 2. Separate Page Objects from test code Keep your Page Objects separate from your test code. Create a separate folder for Page Objects and keep them organised there in alphabetical order. This is a clean solution for you to avoid mess later on. 3. Use descriptive names for methods and locators Use descriptive and meaningful names for your Page Objects and their methods or anything else inside the page really. This will make your code more readable and easier to understand. 4. Include only methods that interact with the page Your Page Objects should include only methods that interact with the page for which you created this Page Object. 5. Avoid using any hardcoded values Avoid using hardcoded values (e.g., URLs, usernames, passwords) in your Page Objects. Use configuration files or environment variables instead. You can also keep your hardcoded values in the separate file with constants. Don’t save the this file with passwords and usernames or any important information on your open GitHub profile. 6. Transitions should return new objects Eventually, you would need methods to interact with elements on a page. However, when your click leads to a new page, your method should return new page object of page which you navigated to. For example, when we search for something in Google, once we press the “Enter” button we’re navigating to the new page - GoogleSearchResultsPage(this.page); 7. Locators Locators as methods should be defined as part of the Page Object class, and should not be hardcoded into the test code. This makes it easier to change the locators if the UI changes and reduces the amount of duplication in the test code. By following these best practices, you can create a Page Object framework that is easy to maintain, reusable, and provides a high-level, abstract interface. The lead image for this article was generated by HackerNoon's via the prompt "a zen monk writing code on a laptop". AI Image Generator

The Zen of Page Objects: Find Inner Peace and Clean Code

Lighting of objects or of a scene can alone produce an illusion

Little Essays of Love and Virtue by Havelock Ellis is part of the HackerNoon Books Series. You can jump to any chapter in this book here . THE OBJECTS OF MARRIAGE THE OBJECTS OF MARRIAGE What are the legitimate objects of marriage? We know that many people seek to marry for ends that can scarcely be called legitimate, that men may marry to obtain a cheap domestic drudge or nurse, and that women may marry to be kept when they are tired of keeping themselves. These objects in marriage may or may not be moral, but in any case they are scarcely its legitimate ends. We are here concerned to ascertain those ends of marriage which are legitimate when we take the highest ground as moral and civilised men and women living in an advanced state of society and seeking, if we can, to advance that state of society still further. The primary end of marriage is to beget and bear offspring, and to rear them until they are able to take care of themselves. On that basis Man is at one with all the mammals and most of the birds. If, indeed, we disregard the originally less essential part of this end—that is to say, the care and tending of the young—this end of marriage is not only the primary but usually the sole end of sexual intercourse in the whole mammal world. As a natural instinct, its achievement involves gratification and well-being, but this bait of gratification is merely a device of Nature's and not in itself an end having any useful function at the periods when conception is not possible. This is clearly indicated by the fact that among animals the female only experiences sexual desire at the season of impregnation, and that desire ceases as soon as impregnation takes place, though this is only in a few species true of the male, obviously because, if his sexual desire and aptitude were confined to so brief a period, the chances of the female meeting the right male at the right moment would be too seriously diminished; so that the attentive and inquisitive attitude towards the female by the male animal—which we may often think we see still traceable in the human species—is not the outcome of lustfulness for personal gratification ("wantonly to satisfy carnal lusts and appetites like brute beasts," as the Anglican Prayer Book incorrectly puts it) but implanted by Nature for the benefit of the female and the attainment of the primary object of procreation. This primary object we may term the animal end of marriage. This object remains not only the primary but even the sole end of marriage among the lower races of mankind generally. The erotic idea, in its deeper sense, that is to say the element of love, arose very slowly in mankind. It is found, it is true, among some lower races, and it appears that some tribes possess a word for the joy of love in a purely psychic sense. But even among European races the evolution was late. The Greek poets, except the latest, showed little recognition of love as an element of marriage. Theognis compared marriage with cattle-breeding. The Romans of the Republic took much the same view. Greeks and Romans alike regarded breeding as the one recognisable object of marriage; any other object was mere wantonness and had better, they thought, be carried on outside marriage. Religion, which preserves so many ancient and primitive conceptions of life, has consecrated this conception also, and Christianity—though, as I will point out later, it has tended to enlarge the conception—at the outset only offered the choice between celibacy on the one hand and on the other marriage for the production of offspring. Yet, from, an early period in human history, a secondary function of sexual intercourse had been slowly growing up to become one of the great objects of marriage. Among animals, it may be said, and even sometimes in man, the sexual impulse, when once aroused, makes but a short and swift circuit through the brain to reach its consummation. But as the brain and its faculties develop, powerfully aided indeed by the very difficulties of the sexual life, the impulse for sexual union has to traverse ever longer, slower, more painful paths, before it reaches—and sometimes it never reaches—its ultimate object. This means that sex gradually becomes intertwined with all the highest and subtlest human emotions and activities, with the refinements of social intercourse, with high adventure in every sphere, with art, with religion. The primitive animal instinct, having the sole end of procreation, becomes on its way to that end the inspiring stimulus to all those psychic energies which in civilisation we count most precious. This function is thus, we see, a by-product. But, as we know, even in our human factories, the by-product is sometimes more valuable than the product. That is so as regards the functional products of human evolution. The hand was produced out of the animal forelimb with the primary end of grasping the things we materially need, but as a by-product the hand has developed the function of making and playing the piano and the violin, and that secondary functional by-product of the hand we account, even as measured by the rough test of money, more precious, however less materially necessary, than its primary function. It is, however, only in rare and gifted natures that transformed sexual energy becomes of supreme value for its own sake without ever attaining the normal physical outlet. For the most part the by-product accompanies the product, throughout, thus adding a secondary, yet peculiarly sacred and specially human, object of marriage to its primary animal object. This may be termed the spiritual object of marriage. By the term "spiritual" we are not to understand any mysterious and supernatural qualities. It is simply a convenient name, in distinction from animal, to cover all those higher mental and emotional processes which in human evolution are ever gaining greater power. It is needless to enumerate the constituents of this spiritual end of sexual intercourse, for everyone is entitled to enumerate them differently and in different order. They include not only all that makes love a gracious and beautiful erotic art, but the whole element of pleasure in so far as pleasure is more than a mere animal gratification. Our ancient ascetic traditions often make us blind to the meaning of pleasure. We see only its possibilities of evil and not its mightiness for good. We forget that, as Romain Rolland says, "Joy is as holy as Pain." No one has insisted so much on the supreme importance of the element of pleasure in the spiritual ends of sex as James Hinton. Rightly used, he declares, Pleasure is "the Child of God," to be recognised as a "mighty storehouse of force," and he pointed out the significant fact that in the course of human progress its importance increases rather than diminishes. While it is perfectly true that sexual energy may be in large degree arrested, and transformed into intellectual and moral forms, yet it is also true that pleasure itself, and above all, sexual pleasure, wisely used and not abused, may prove the stimulus and liberator of our finest and most exalted activities. It is largely this remarkable function of sexual pleasure which is decisive in settling the argument of those who claim that continence is the only alternative to the animal end of marriage. That argument ignores the liberating and harmonising influences, giving wholesome balance and sanity to the whole organism, imparted by a sexual union which is the outcome of the psychic as well as physical needs. There is, further, in the attainment of the spiritual end of marriage, much more than the benefit of each individual separately. There is, that is to say, the effect on the union itself. For through harmonious sex relationships a deeper spiritual unity is reached than can possibly be derived from continence in or out of marriage, and the marriage association becomes an apter instrument in the service of the world. Apart from any sexual craving, the complete spiritual contact of two persons who love each other can only be attained through some act of rare intimacy. No act can be quite so intimate as the sexual embrace. In its accomplishment, for all who have reached a reasonably human degree of development, the communion of bodies becomes the communion of souls. The outward and visible sign has been the consummation of an inward and spiritual grace. "I would base all my sex teaching to children and young people on the beauty and sacredness of sex," wrote a distinguished woman; "sex intercourse is the great sacrament of life, he that eateth and drinketh unworthily eateth and drinketh his own damnation; but it may be the most beautiful sacrament between two souls who have no thought of children." To many the idea of a sacrament seems merely ecclesiastical, but that is a misunderstanding. The word "sacrament" is the ancient Roman name of a soldier's oath of military allegiance, and the idea, in the deeper sense, existed long before Christianity, and has ever been regarded as the physical sign of the closest possible union with some great spiritual reality. From our modern standpoint we may say, with James Hinton, that the sexual embrace, worthily understood, can only be compared with music and with prayer. "Every true lover," it has been well said by a woman, "knows this, and the worth of any and every relationship can be judged by its success in reaching, or failing to reach, this standpoint." [8] [9] [10] Mrs. Havelock Ellis, James Hinton: A Sketch, Ch. IV. [8] Olive Schreiner in a personal letter. [9] Mrs. Havelock Ellis, James Hinton, p. 180. [10] I have mentioned how the Church—in part influenced by that clinging to primitive conceptions which always marks religions and in part by its ancient traditions of asceticism—tended to insist mainly, if not exclusively, on the animal object of marriage. It sought to reduce sex to a minimum because the pagans magnified sex; it banned pleasure because the Christian's path on earth was the way of the Cross; and even if theologians accepted the idea of a "Sacrament of Nature" they could only allow it to operate when the active interference of the priest was impossible, though it must in justice be said that, before the Council of Trent, the Western Church recognised that the sacrament of marriage was effected entirely by the act of the two celebrants themselves and not by the priest. Gradually, however, a more reasonable and humane opinion crept into the Church. Intercourse outside the animal end of marriage was indeed a sin, but it became merely a venial sin. The great influence of St. Augustine was on the side of allowing much freedom to intercourse outside the aim of procreation. At the Reformation, John à Lasco, a Catholic Bishop who became a Protestant and settled in England, laid it down, following various earlier theologians, that the object of marriage, besides offspring, was to serve as a "sacrament of consolation" to the united couple, and that view was more or less accepted by the founders of the Protestant churches. It is the generally accepted Protestant view to-day. The importance of the spiritual end of intercourse in marriage, alike for the higher development of each member of the couple and for the intimacy and stability of their union, is still more emphatically set forth by the more advanced thinkers of to-day. [11] It is well set forth by the Rev. H. Northcote in his excellent book, Christianity and Sex Problems. [11] There is something pathetic in the spectacle of those among us who are still only able to recognise the animal end of marriage, and who point to the example of the lower animals—among whom the biological conditions are entirely different—as worthy of our imitation. It has taken God—or Nature, if we will—unknown millions of years of painful struggle to evolve Man, and to raise the human species above that helpless bondage to reproduction which marks the lower animals. But on these people it has all been wasted. They are at the animal stage still. They have yet to learn the A.B.C. of love. A representative of these people in the person of an Anglican bishop, the Bishop of Southwark, appeared as a witness before the National Birth-Rate Commission which, a few years ago, met in London to investigate the decline of the birth-rate. He declared that procreation is the sole legitimate object of marriage and that intercourse for any other end was a degrading act of mere "self-gratification." This declaration had the interesting result of evoking the comments of many members of the Commission, formed of representative men and women with various stand-points—Protestant, Catholic, and other—and it is notable that while not one identified himself with the Bishop's opinion, several decisively opposed that opinion, as contrary to the best beliefs of both ancient and modern times, as representing a low and not a high moral standpoint, and as involving the notion that the whole sexual activity of an individual should be reduced to perhaps two or three effective acts of intercourse in a lifetime. Such a notion obviously cannot be carried into general practice, putting aside the question as to whether it would be desirable, and it may be added that it would have the further result of shutting out from the life of love altogether all those persons who, for whatever reason, feel that it is their duty to refrain from having children at all. It is the attitude of a handful of Pharisees seeking to thrust the bulk of mankind into Hell. All this confusion and evil comes of the blindness which cannot know that, beyond the primary animal end of propagation in marriage, there is a secondary but more exalted spiritual end. It is needless to insist how intimately that secondary end of marriage is bound up with the practice of birth-control. Without birth-control, indeed, it could frequently have no existence at all, and even at the best seldom be free from disconcerting possibilities fatal to its very essence. Against these disconcerting possibilities is often placed, on the other side, the un-æsthetic nature of the contraceptives associated with birth-control. Yet, it must be remembered, they are of a part with the whole of our civilised human life. We at no point enter the spiritual save through the material. Forel has in this connection compared the use of contraceptives to the use of eye-glasses. Eye-glasses are equally un-æsthetic, yet they are devices, based on Nature, wherewith to supplement the deficiencies of Nature. However in themselves un-æsthetic, for those who need them they make the æsthetic possible. Eye-glasses and contraceptives alike are a portal to the spiritual world for many who, without them, would find that world largely a closed book. Birth-control is effecting, and promising to effect, many functions in our social life. By furnishing the means to limit the size of families, which would otherwise be excessive, it confers the greatest benefit on the family and especially on the mother. By rendering easily possible a selection in parentage and the choice of the right time and circumstances for conception it is, again, the chief key to the eugenic improvement of the race. There are many other benefits, as is now generally becoming clear, which will be derived from the rightly applied practice of birth-control. To many of us it is not the least of these that birth-control effects finally the complete liberation of the spiritual object of marriage. About HackerNoon Book Series: We bring you the most important technical, scientific, and insightful public domain books. This book is part of the public domain. Havelock Ellis (2005). Little Essays of Love and Virtue. Urbana, Illinois: Project Gutenberg. Retrieved October 2022 https://www.gutenberg.org/cache/epub/13615/pg13615-images.html This eBook is for the use of anyone anywhere at no cost and with almost no restrictions whatsoever. You may copy it, give it away or re-use it under the terms of the Project Gutenberg License included with this eBook or online at www.gutenberg.org , located at https://www.gutenberg.org/policy/license.html .

QCObjects News on
HackerNoon and Around the Web

Winner for Best Startup in Santiago, Chile!

qcobjects.com

-- employees

Since n.d.

QCObjects Story Mentions

Read More Tech Stories Related to #QCObjects