For a decade, the Vermont Chamber of Commerce has brought together industry peers to facilitate sourcing and procurement opportunities at the Manufacturing Summit.

Vermont Chamber of Commerce hosts 10th annual Manufacturing Summit

Instead of proposing to grow the Vermont populations, let’s discuss what is a long-term sustainable population size and how do we get there.

George Plumb: Vermont is already almost 150,000 beyond a sustainable population level

The U.S. Department of Agriculture is encouraging agricultural producers and forest landowners in Vermont to participate in voluntary conservation programs and adopt climate-smart practices in fiscal

Producers in Vermont encouraged to apply for USDA conservation programs

The federal government has selected the Burlington area as one of 31 small and rural regions nationwide that will be eligible for millions of

Burlington Area Selected as Semiconductor 'Tech Hub'

Vermont Arts Council From federal tax policy to state grant programs to local public art commissions, public policies and government investments play a critical role in the wellbeing of Vermont’s artists, makers, creative businesses, and cultural ...

Vermont Creative Sector Advocacy Webinar Series, Nov 8 & 16

For six years, he led Vermont Public Radio, today simply known as Vermont Public. At the conclusion of 2023, he'll be stepping down as President/CEO.

Vermont Public CEO To Step Down

A new partnership between the University of Vermont and GlobalFoundries is helping to produce a new semiconductor lab on campus.

UVM partnership with GlobalFoundries to bolster new degree program

Fifteen years ago, shortly after the launch of the iPhone, Seven Days helped plan the first Vermont Tech Jam. It was a response and

From the Publisher: Technically Speaking

Everybody’s gotta eat. The keynote presentation at this year’s Vermont Tech Jam focuses on a new way to feed people — by growing meat

Event: Learn About Lab-Grown Meat at the Vermont Tech Jam

Notable expects to initiate trading on the Nasdaq Capital Market under ticker symbol “NTBL” effective at market open on October 17 - - Aggregate net transaction proceeds expected to fund planned operations into 2025 - - Completed previously announced $10.

Notable Labs Closes Merger Transaction With VBL Therapeutics

VT Labs

vtlabs

What are the most common challenges when building an e-commerce system on Shopify? Let's start with standard Shopify theme templates. The fundamental and most significant issue is that Liquid is a template language, making it challenging to develop. Custom databases, complex logic, and third-party service requests are impossible. Furthermore, when developers think about frameworks like Ruby on Rails, or Django, Liquid is a View layer. The developer has no direct access to the controllers and models that have been predetermined. The second issue is that the Liquid theme tightly couples your code to Shopify. You won't be able to reuse the code if you want to move to a different system. It inhibits companies from evolving because it makes e-commerce platforms the sole arbiter of success. When businesses must change the platform, they are forced to discard the entire system. Thousands of hours and hundreds of thousands of dollars may be lost as a result. The third Liquid theme drawback restricts you to how and what you can develop. Do you want to create a single-page application? No. Perhaps a progressive web application? No. Is it possible to unit-test your markup? Again, no! Even custom URLs are not an option. What about headless? The headless technique decouples the front end from the backend, allowing you to interact with third-party services and obtain data via API. The main advantage of headless is that the front end may not be aware of the e-commerce platform it uses. As a result, you can develop and integrate whatever you want and connect all the services you require. When you utilize Shopify as an e-commerce component of the headless system, you may encounter several typical difficulties. To begin with, you'll need additional hosting to hold your front end, which increases the cost over the themed option. In addition, another hosting fee will rise alongside traffic, despite Shopify's cost not being influenced by it. So the prices might be relatively high in some instances. Another issue is server-side rendering. Because Shopify Storefront API has IP-based limits, it's simple to render whatever you want on the client's side, but e-commerce sites should render pages on the server so that Google can index them correctly. However, JAMStack tools such as Next.js or Gatsby effectively address this issue. Finally, the last significant issue is Shopify Apps. We can't use the part of the ecosystem that utilizes themes if we don't use a Shopify Theme. It's not a problem but a design feature; if we want to be self-sufficient and utilize a headless system, we should expect not to use features that increase coupling. Instead, we may create any connection with any third-party system that provides API. When comparing these two methods, we notice that both have their drawbacks. The most significant distinction is that, in the headless variation, the problems are conquerable at the cost of development resources. Still, the themed variant has no way to address fundamental issues. So let's describe how the new Hydrogen by Shopify addresses that problems. Is Shopify Hydrogen right for your eCommerce? Take a quiz Shopify Hydrogen and Oxygen Hydrogen is a framework that combines React Server Components, streaming server-side rendering with suspense, and intelligent caching settings. It's the quick framework for developers and customers when coupled with the Storefront API globally accessible across all Shopify stores, Shopify-optimized commerce components, and a Vite-powered development environment. Additionally, Oxygen is a global hosting solution for Hydrogen storefronts. Shopify Oxygen hosting Shopify's 2021 event, Shopify Unite, saw the debut of Oxygen, a method to host Hydrogen stores directly on Shopify that is quick, works worldwide, and is designed for ecommerce. The Oxygen Shopify server overcomes the hosting issue of a headless solution, which we've described above. In addition, by providing a global hosting solution, Shopify aims to eliminate one of the main drawbacks of using a headless system. Shopify Hydrogen release date It's still early days for Hydrogen in 2022. The initial version was made available on November 6, 2021, and the framework has been improved numerous times. The longer that , and organizations that rely on Hydrogen still require a dedicated server. Unlike JAMStack platforms like Next.js or Gatsby, Hydrogen does not prerender HTML files and instead employs server-side rendering, so you cannot utilize a simple hosting platform like AWS S3. However, there should be a Node.JS server that can be more costly for the website to work correctly. Oxygen has not yet been live, and will be available by the end of 2022. It implies that headless hosting difficulties have not yet been resolved To summarize, the Hydrogen Shopify stack currently does not offer a solution for the headless hosting problem. Structure of Hydrogen by Shopify Hydrogen extends Shopify features and ideas with commerce components, hooks, and utilities. In addition, it delivers boilerplate code that you may use to create your own storefront, allowing you to focus on creating distinct experiences. The Storefront API's GraphQL types are used to generate and optimize the data for hydrogen. The structure of the information supplied to components, hooks, and utilities is based on the GraphQL types from the Storefront API. While the Storefront API allows you to create bespoke storefronts in any language and technology, Hydrogen is a tool that aims to speed up the development process. In other words, the architecture of a hydrogen application is built on top of a development framework and UI components. The Vite plugin for the Hydrogen platform offers server-side rendering (SSR), hydration middleware, and client component code transformations. The components, hooks, and utilities of Hydrogen UI are meant to support Shopify features and ideas. Shopify Hydrogen framework Like in Liquid theme creation, Hydrogen provides developers with a precise path to follow. But, on the other hand, it makes higher-level development simpler. Instead of using Webpack, the Developer will utilize the Vite plugin as a development environment tool. However, it implies that by adding another npm dependency. Therefore, hydrogen developers won't be able to use Hydrogen in existing projects must serve as a focal point of the system. This is exactly what we see in data-sourcing strategies. It's all about the same goal when Hydrogen aspires to be the system's core. The Storefront API serves as the data source for this project's Shopify-based storefront. The data structure supplied to components, hooks, and utilities follow and adhere to the Storefront API's GraphQL types. You can directly deliver data from the Storefront API into components, hooks, and utilities. If you want to integrate Hydrogen components with a non-Shopify data source, you must first convert the data into the appropriate formats for the Hydrogen. In addition, an adapter must translate third-party data into the types expected by Hydrogen. If you opt to use a third-party data source, you may query it in your bespoke storefront software. Hydrogen can also handle data from third-party sources, such as API-first CMSes like Prismic or Contentful, or even non-Shopify e-commerce systems. Hydrogen utilizes a modified version of server components that support context and SSR (server-side rendering), which is not yet available in Next.js' current version. Also, you can't utilize server-only Hydrogen GraphQL queries with Storefront API integrations that use other frameworks. However, you may not use the Hydrogen framework Shopify's layer with other frameworks like Gatsby or Next.js. In other words, Hydrogen provides a straightforward method to construct a contemporary Shopify shop at the expense of technological independence and software modifiability restrictions. It implies a quicker start-up and time-to-market, as well as higher long-term costs when compared to others. Shopify Hydrogen React UI components. Shopify React Hydrogen commerce components, hooks, and utilities are available in various types to help you speed up development. Routing and session management are included in the and hooks offered with the Hydrogen. framework components The basic building blocks for different component kinds include products, variants, and carts, all based on . Metafields, money representations, and other elements are included in primitive components. primitive components The , such as ShopifyProvider, surround the whole application. For example, the ShopifyProvider component is connected to the hooks used for data retrieval from server components. Global components and hooks aim to link the data layer with the user interface layer. global components The and hooks describe the goods, digital downloads, services, and gift cards that a business offers. For example, if a product has options, like size or color, merchants can add a variant for each combination of options. These components make it easy to create product pages or product blocks. product and variant components The and hooks are related to the products that a client intends to get. Therefore, such elements allow for rapid implementation of a shopping cart. cart components Translating a product page into multiple languages and currencies is the job of and hooks. The LocalizationProvider component is present in Hydrogen. localization components and hooks link Shopify resources with specialized information, such as part numbers or release dates. Metafield components Hydrogen also provides several utilities to assist you in speeding up your development process. Hydrogen, again, aspires to be the heart of the system at both the framework and component levels. The data is received in Shopify format, transmitted across layers in Shopify format, and then React components accept the data in Shopify format. Is Shopify Hydrogen headless? Is it possible to utilize Hydrogen to create headless storefronts? . The unexpected answer is no Hydrogen is a wonderful tool for . It allows developers to construct a Shopify store with React and contemporary JS, makes it a Single Page Application or even a Progressive Web App, and gains more control over rendering, but it's still a Shopify shop. The headless system's major aim is to decouple the frontend from the backend, whereas Shopify's main idea is to maintain tight integration. creating modern Shopify stores Each system is a third-party system for the headless backend, whether it is an e-commerce platform or not. Therefore, the frontend should be unaware of platform specifics. Instead, Hydrogen places itself and Shopify in the center of the system. It's not bad because it's still a valuable tool for rapid Shopify development. It is, however, not headless. It's also a wise business decision for Shopify. While the headless design is vendor-agnostic and enables freedom from any platform, Shopify, as a corporation, strikes back by providing tools for fast and contemporary development to its clients while maintaining tight ties between them. Shopify Hydrogen vs. Liquid If Hydrogen was not designed to create headless shops, it implies that it is intended to take the place of Liquid. However, , and controls rendering and routing. Therefore, the following steps for Shopify will likely be the development of a template catalog similar to the Shopify Theme Store. it solves most of the Liquid issues since it has both a backend and frontend, employs powerful JavaScript instead of a simple templating language On the other hand, Hydrogen has several drawbacks from the headless design. There's also the problem of hosting. There is a need for a dedicated server until Shopify Hydrogen Oxygen hosting is available. . Shopify apps that utilize Liquid as a front-end will not function with Hydrogen Conclusion or TL;DR Now it's clear Shopify Oxygen Hydrogen isn't a tool for building headless systems but rather a contemporary replacement for Liquid; let's talk about the concerns raised at the start. Does hydrogen solve the Liquid problem of complex development? Definitely. Modern JavaScript is capable of addressing nearly all current ecommerce issues. As we previously suggested, Hydrogen intends to be the system's heart, and it tightly couples the front-end to Shopify, as Liquid does. The connection is not as tight as it may be, but it's enough to prevent the front-end from being reused on other ecommerce platforms. As a result, the Liquid coupling problem is unaddressed; instead, it has been intentionally created. Hydrogen still plays a significant role in deciding what and how to construct, but it allows for more flexibility than Liquid does. You can build your own routing and SPA/PWAs, but the developer has no control over the bundler, dev server, or other tools. As a result, this issue is somewhat addressed. What are the difficulties of headless development? Oxygen overcomes the limitations associated with hosting, but it is not yet live in mid-2022. As a result, the issue remains, but it will be addressed over several months. Finally, as with headless stores, Hydrogen suffers from the Shopify Apps issue. As a result, that problem has not been addressed. Finally, although hydrogen solves some Liquid and headless issues, it also has its drawbacks. So when should companies switch to Hydrogen? Restricting the building procedure also avoids architectural blunders. Hydrogen developers must follow the directions, but headless system developers should be able to build the approach from scratch. So, in a nutshell: . When Liquid is not enough, the development team has no prior expertise in creating headless systems and keeping the coupling low so that the system may be vendor-agnostic Also Published Here

Is Shopify Oxygen Hydrogen Right for Your ECommerce Business?

Listen to our discussion about what this means on or . iTunes Google Podcast I have worked with Dane on multiple projects before, most notably when my marketing firm was the marketing department for Knowtify in 2015. He was Founder and CTO of Knowtify, they were a Techstars company that got acquired by Kissmetrics. His primary responsibilities will be evaluating potential hires ( & ) and working with the new team members to build our own infrastructure. I think this setup will help mitigate technical risk, and frankly make my day to day more enjoyable. front end back end We talk about the finer points of on the . Listen on or product iteration Hacker Noon podcast iTunes Google Podcast. Also check out , and . October’s top stories the latest stories today’s homepage

Hacker Noon Hires v1Labs Dane Lyons as Interim CTO

Hacker Noon 2.0: Origin Story And Raising Funds

Meet the Winners of Startups in North and Central America

Product Iteration with Hacker Noon Interim CTO Dane Lyons

I’m one of an estimated to of Americans who counts themselves a fan of the NFL. I’m sure they’re busy preparing for the upcoming 2018 season. Engaging ~200 million US fans can’t be easy. 49% 70% So I thought I’d take some time to help explore the user experience on the . Here is a screenshot of their current interface, minus the ads. NFL.com standings screen The blue line represents what you can see above the fold on my Macbook Pro with their current navigation. If I delete the navigation, the red line represents the new fold. This isn’t an exhaustive list, but there are 3 primary issues I’d like to address with this interface: Using so much vertical real estate to represent this data means users are only able to view a small portion of the table at a time. This forces you to scroll up/down hunting for a team. Then you memorize 1–2 relevant data points. Then you hunt for another team and compare your memory to what’s on screen. This is a slow process that breaks down as you try to compare more than 2 teams at once. It’s very hard to compare teams I seriously don’t think the average fan cares about the percentage of games a team wins within their conference. I consider myself to be a fairly serious fan and the only reason I’d care about half of the columns here is in a playoff tie breaking scenario. In most cases, this extra data is just adding cognitive overhead. The table is too noisy **Unnecessary tabs**The 3 tabs at the top just toggle between showing exactly the same information by clustering teams into different buckets. I do find it nice to see teams bucketed by division but there should be a better solution. With the above in mind, I created a functional to explore a different approach. Instead of broadly thinking about this as or , try thinking of it as having and . If the pros make the common user needs easier to achieve, and the cons make uncommon user needs harder to achieve, then the trade off is likely worth it. prototype better worse pros cons This version addresses some of the issues I highlighted above. Showing each conference side-by-side does make comparisons much easier. But, there will always be trade offs. Here are a few potential problems and compromises I’ve made with this approach: UX I thought about introducing a new functionality where if you click on a team, it highlights the rows of the teams in the division for comparison. Ultimately, I think that interaction is unintuitive. If you click on a team, the expectation is to see more about that team. Another option is to introduce filters in the same section you select the year. The default could be followed by , , and . It’s harder to compare divisions All Teams North South East West If you want to see if offensive or defensive success translates to more wins, you’ve still got to memorize stats, click a button to change the tables and compare your memory to the current state. My assumption is this screen is more for comparing different teams. If you want to do deeper analysis on a single team, the team screen should solve that problem. Comparing offense/defense to wins/losses My initial approach was to add the exact same table columns on offense and defense. This approach makes some sense but the visual similarity adds confusion. This caused me to introduce a label on the top right of the table for , and . I am not at all happy with that solution. More thought should be put into figuring out what people are looking for in determining offensive and defensive output and the tables should be more tailored towards those expectations. Offense too visually similar to defense Record Offense Defense When you interact with one part of the app and it reacts as expected, great. When another part of the app also reacts to that interaction, your brain is like “Whoa, what’s going on here”. It’s possible this is only a minor annoyance and the overall experience is better so users overcome the friction. Or maybe not. This is definitely something to think about while testing. Syncing table animations is a bit jarring v1Labs.com Thanks for checking out my latest prototype. 🏈 Feel free to and let me know what you think. Also, check out and follow me for more UX prototypes! play around with it here v1Labs

UX Prototype: NFL Standings Table

Continuous learning, continuous improvement As a software developer, I’ve spent a lot of time trying to figure out new ways to gather and retain useful information. It’s frankly tough to keep pace as evolves. On an average week, I might have a few free hours to invest honing my skills. So I’ve got to make them count. technology Are you in the process of honing your personal learning stack? Here are a few ideas free for the taking. Start an open source project You learn by doing. There really isn’t some magic shortcut. Just get your hands dirty and build something. Don’t have an idea? . Try this I’m no code churning Jedi. I’ll always favor scrappy solutions over academic solutions. It’s just in my nature. But I will say the little time I’ve spent working on open source projects has taught me more about writing quality code than years of peer devs harassing me to write tests. Open source code needs to be easily understood, stable and flexible. The same is not always true when writing single-use code. It’s like the difference between designing a high performance water bottle or a dixie cup. In many cases, the dixie cup works just fine. But try filling it with water, strapping it on a mountain bike and going for a ride. Side projects Similar to starting an open source project but with a key difference. Open source projects help you write higher quality code. Side projects help you better understand user needs and the business side of things. Social listening Companies have been using social listening to monitor the health of their brand(s). It makes sense. Marketers represented the majority of early social media adopters. It’s expected that their use cases dominate the social listening landscape. But tools don’t have to be relegated to obvious use cases. Tapping into the collective intelligence of social media should be a part of your learning stack, especially if you’re a developer and have the tools to parse the stream of content. At , I’ve created a tool to monitor Twitter for the best UX tweets. I had to write over 10 scripts to do the following: v1Labs Discover candidates for a list called the . UXers Analyze candidates to make sure they’re socially active and on topic. If so, I add them to the list. Maintain the list to drop inactive members and add new candidates. Collect a pool of tweets based on engagements from the list. Analyze and surface the top 5–10 tweets from a pool of ~500k tweets. Rinse and repeat. Writing code to monitor tweets is a lot of work but definitely worth it. I figure I’m able to learn as much in 20–30 minutes of consuming highly filtered content as I could in 5–6 hours of idle searching unfiltered content. Interactive media Code School was a pretty inspirational learning resource for me back when produced . Excellent demonstration of how to pair story telling with guided interactive challenges. Immediately applying what you learn is a great way to retain material. Gregg Pollack Rails for Zombies Gregg is now working with on a projected called . They’re diverging from the idea of producing a “course” which quickly becomes dated. Instead, they’re committed to producing fresh content weekly. was recently launched and they already have it covered. Adam Jahr Vue Mastery Vue CLI 3 I’m excited to see how Gregg and Adam evolve Vue Mastery and take video content to the next level. Here are a few random ideas: Instead of transitioning from video to video in a linear series, it might make sense to seamlessly stitch videos together using flowchart logic powered by in-video interactions. This could be great for injecting context for beginners and skipping ahead for advanced consumers. Non-linear video content One of the great things about Twitch is the community aspect of watching a live event together with a group of people to get reactions and commentary. In the case of watching lessons, it doesn’t make a lot of sense to do it live. Instead maybe the “liveness” can be simulated and you can see the reactions of previous viewers as if they were watching live with you. Async group watching Personalized curriculum with bots I’ve noticed a trend where apps employ bots to direct users to associated help docs. Why not generalize that solution and have bots help you create a personalized curriculum? Bots shouldn’t necessarily be in charge of maintaining your curriculum. I think people might be a bit skittish at that thought. Instead, bots can collaborate with you and surface new learning tracks on demand. If something sounds interesting, they can help with scheduling. Find a cross functional collaborator I highly recommend finding and regularly communicating with people who have diverging skillsets. I chat weekly with , author of . People likely classify me as more of a frontend developer and him as more of a backend developer. Reality is far more nuanced than the broad labels we apply to things. Austin Pocus Crypto Padawan Austin has a deep appreciation for cryptography, random languages, hacker history, privacy and rap music. I am an expert in exactly none of those things. But that doesn’t stop us from exploring ideas. Sometimes ignorance helps you gain a new vantage point and sidestep the echo chamber. programming Write for Hacker Noon Maybe the idea of starting a blog is daunting because you’ve got to put so much work into building an audience. Good news, you can have an audience tomorrow via ! If you put in effort to document your coding adventures, I’d be shocked to see and the Hacker Noon team reject your work. They work hard to maintain their community of over 1,000 writers/hackers. Hacker Noon David Reading Hacker Noon is also a pretty swell idea. Coding bootcamps? Unfortunately, I haven’t gone through a coding bootcamp so it’s hard for me to properly evaluate this avenue. I’ve seen people come out of bootcamps and produce some pretty fantastic code. On the other hand, I’ve seen people become overly dogmatic about the processes and frameworks taught in bootcamps. I believe bootcamps offer structured education which is pretty desirable for many aspiring developers. If you feel that way, feel free to incorporate a bootcamp into your learning stack. But don’t assume you’ll just be able to pick up a few quick skills and be good to go. Read docs If you run into a problem, it’s always tempting to find the answer in Stack Overflow then move on to the next problem. Try to resist that urge as much as possible. Go read docs to build context and a deeper understanding. I know most docs are poorly organized and it can be a slog. It’s worth it. Here is a neat trick I recently ran into while reading the MDN docs. Let’s say you’re writing a bit of javascript and using to debug. If you happen to be working with a simple object and find yourself spending a lot of time navigating the object, try using instead. Works great for tabular data. console.log() [console.table()](https://developer.mozilla.org/en-US/docs/Web/API/Console/table) Hackathons My opinion on hackathons has changed pretty dramatically over the years. Initially I loved the concept. Seems like a great environment for a scrappy engineer to test ideas. As my exposure to hackathons increased my favorable impression quickly decreased. Instead of people exploring ideas and collaborating, I saw a lot of hackathons used as a platform to launch startups. And I saw a lot of people joining as “idea people” with the expectation that they’d find a developer to build their shit. I recently joined a hackathon designed by the to explore problems and solutions for users of their platform. I saw a lot of the things that appealed to me years ago. People were scrappy and collaborative. It gives me hope that well designed hackathons could hold a prominent place in the learning stack. Traackr team Cloud coding I’ve bounced around using various cloud coding tools. and are both solid tools that made it possible to quickly explore, iterate on and share an idea without spinning up a server. Codepen JSFiddle builds on the idea and gives you a file system and excellent dependency management if you’re using a common dev stack such as Vue.js or React. Codesandbox Personalized group learning I previously wrote a post about . I believe it would be amazing to get together a group of 10 people who all have similar baseline skills and are also interested in acquiring the same new skill. To organize, they could have a daily standup meeting for everyone to report: leveling up your hack skill tree Screenshots and gists should be encouraged. What did I accomplish? What did I discover? What frustrates me? Normally I’m not a fan of standup meetings. In startups, standup meetings typically function as a management tool to hold people accountable for the tasks they’ve been given. In this case, it’s self-driven which makes a huge difference. Thanks for reading! Check out and follow me if you’re interested in UX hacks. v1Labs I hope I’ve given you a few ideas to add to your learning stack. Did I miss anything? Leave a comment to help fill in the gaps.

Learning Stack for the Modern Developer

When new interactive elements for an app, it is often helpful to scaffold the layout to show how the pieces fit together. There are a few problems with this approach. prototyping It can take a lot of dev work to essentially rebuild an app layout just to explore a small, yet significant, interaction. Getting the right level of abstraction is tough. If you make the prototype look exactly like the live app, you’re inviting the team to talk about issues unrelated to the problem at hand. design With that in mind, recently started a new open source component framework called . The goal is to give designers & developers a tool to assemble an abstracted layout to frame a prototype in under 5 minutes. v1Labs Protovue A functional is available today. I’ll show you how to create the following layout. Follow along on . alpha Codesandbox.io Installing Protovue If you are using CodeSandbox, just add as a dependency. To add to a local Vue.js app run: v1labs-protovue $ npm install v1labs-protovue --save# or$ yarn add v1labs-protovue Then add Protovue as a plugin when you initialize Vue. import Vue from "vue";import Protovue from "v1labs-protovue"; Vue.use(Protovue); new Vue({}); Setting up the grid By default, grids are designed to be wide, tall. It is a good idea to add your grid as the first element of . 100% 100% v-app <v-app><v1-grid guides size="12x10" gap="10"></v1-grid></v1-grid> The above grid is x with a gap between cells. Also note the attribute. This shows a grid of blue lines designed to help you lay out your cells. You can remove it once you place all your cells. 12 columns 10 rows 10px guides The grid with guides should look like this. Adding cells First let’s add a cell to represent the navigation. <v1-cell size="12x1" /> In this case we just want a cell that spans and . It should look like this. 12 colums 1 row Now for the left sidebar. <v1-cell size="3x9" y="1" /> This cell has a attribute which offsets the cell 1 row from the top. 3x9 y="1" The right sidebar is very similar to the left. <v1-cell size="2x9" y="1" x="10" /> We made it narrower and offset it from the left. 1 column 10 columns Getting the hang of it? Now let’s add the main content cell and the footer cell. <v1-cell size="7x8" y="1" x="3" /><v1-cell size="7x1" y="9" x="3" /> You’ve now placed all your cells so remove the attribute from . This is what you should have so far. guides <v1-grid> Adding a mock navigation In your first cell, add a element. <v1-nav /> <v1-cell size="12x1"><v1-nav /></v1-cell> Left sidebar content <v1-cell size="3x9" y="1"><v1-image center round width="70px" height="70px" /><v1-text center rows="3" /><v1-avatar count="6" /></v1-cell> The image element is and . centered round 70x70 The text is width 3 rows. centered The avatar element repeats 6 times. Right sidebar content <v1-cell middle size="2x9" y="1" x="10"><v1-image center round width="100px" height="100px" /><v1-text center rows="7" /></v1-cell> Similar to the left content elements. Note that adding to a cell vertically centers content. middle Footer content <v1-cell size="7x1" y="9" x="3"><v1-footer /></v1-cell> Easy enough. Just added a element. <v1-footer /> Ready to start prototyping It only takes a few lines of code to scaffold your app. <v1-grid size="12x10" gap="10"><v1-cell size="12x1"><v1-nav /></v1-cell><v1-cell size="3x9" y="1"><v1-image center round width="70px" height="70px" /><v1-text center rows="3" /><v1-avatar count="6" /></v1-cell><v1-cell middle size="2x9" y="1" x="10"><v1-image center round width="100px" height="100px" /><v1-text center rows="7" /></v1-cell><v1-cell middle size="7x8" y="1" x="3"></v1-cell><v1-cell size="7x1" y="9" x="3"><v1-footer /></v1-cell></v1-grid> Get updated on Protovue progress Support us on to get tutorials and release updates. You’ll also get to vote on which new components we prioritize. If you’re interested in contributing, checkout or . Product Hunt github repo

Hello Protovue — Prototyping Component Framework for Vue.js

It’s time to install a MongoDB ReplicaSet on a Kubernetes cluster on Azure and try to kill it in all possible ways!Starring: Helm StatefulSet PersistentVolumes PersistentVolumeClaims Azure Kubernetes Cluster configuration Let’s install a Cluster with 1 Master and 3 Nodes all running Linux using ACS Engine with following commands. I described detailed steps on ACS Engine usage for installing a cluster in my article. Please refer to it for details. Here I list quickly commands to be used. Kubernetes Adventures on Azure — Part 3 (ACS Engine & Hybrid Cluster) Creation of Resource Group This is needed to group all resources for this tutorial in a single logical group, to be able to delete everything with a single command at the end. az group create --name k8sMongoTestGroup --location westeurope Cluster provisioning I usually create an ssh pair for my test on acs. Please check my article on how to do it. I will change the examples/kubernetes.json file to use previously created ssh pair, dnsPrefix and servicePrincipalProfile ( ). here following Deploy a Kubernetes Cluster suggestions from Microsoft my kubernetes.json file with changes in is: bold {"apiVersion": "vlabs","properties": {"orchestratorProfile": {"orchestratorType": "Kubernetes","orchestratorRelease": "1.7"},"masterProfile": {"count": 1,"dnsPrefix": " ","vmSize": "Standard_D2_v2"},"agentPoolProfiles": [{"name": "agentpool1","count": 3,"vmSize": "Standard_D2_v2","availabilityProfile": "AvailabilitySet"}],"linuxProfile": {"adminUsername": "azureuser","ssh": {"publicKeys": [{"keyData": " "}]}},"servicePrincipalProfile": {"clientId": " ","secret": " "}}} ivank8stest ssh-rsa yourpubkeyhere yourappclientid yourappsecrete Create your cluster with: acs-engine deploy --subscription-id Wait for the cluster to be up running: INFO[0010] Starting ARM Deployment (k8sMongoGroup-2051810234). This will take some time…INFO[0651] Finished ARM Deployment (k8sMongoGroup-2051810234). Connect to it using kubeconfig file generated during deployment in _output folder. export KUBECONFIG=~/acs/acs-engine/_output/ /kubeconfig/kubeconfig.westeurope.json ivank8stest Following commands can be used to determine when cluster is ready: kubectl cluster-infokubectl get nodes NAME                        STATUS    AGE       VERSIONk8s-agentpool1-33584487-0   Ready     46m       v1.7.4k8s-agentpool1-33584487-1   Ready     46m       v1.7.4k8s-agentpool1-33584487-2   Ready     46m       v1.7.4k8s-master-33584487-0       Ready     46m       v1.7.4 Now you can open Kubernetes Dashboard if you want to use a UI to check you cluster status: and then open a browser at kubectl proxy http://127.0.0.1:8001/ui Helm MongoDB Charts Helm is the Package Manager for Kubernetes. It simplifies installation and maintenance of products and services like: MongoDB Redis RabbitMQ and many other We will use it to install and configure a MongoDB Replica Set. Helm installation Prerequisites, installation steps and details can be found in the article from Microsoft. Use Helm to deploy containers on a Kubernetes cluster With all prerequisites in place, Helm installation is as simple as running command: helm init --upgrade Clone charts repository Let’s clone charts repository to be able to examine and change MongoDB chart files before deploying everything on our cluster: git clone https://github.com/kubernetes/charts.git Now go in the folder. Here you will find all artifacts composing an Helm Chart. If needed you can change file to tailor installation based on your needs. For now let’s try a standard installation. /charts/stable/mongodb-replicaset values.yaml Run following command: and wait for following output: helm install . NAME:   foppish-angelfishLAST DEPLOYED: Sun Sep 10 20:42:42 2017NAMESPACE: defaultSTATUS: DEPLOYED RESOURCES:==> v1/ServiceNAME                                  CLUSTER-IP  EXTERNAL-IP  PORT(S)    AGEfoppish-angelfish-mongodb-replicaset  None        <none>       27017/TCP  5s ==> v1beta1/StatefulSetNAME                                  DESIRED  CURRENT  AGEfoppish-angelfish-mongodb-replicaset  3        1        5s ==> v1/ConfigMapNAME                                        DATA  AGEfoppish-angelfish-mongodb-replicaset        1     5sfoppish-angelfish-mongodb-replicaset-tests  1     5s NOTES:... DONE! MongoDB Replicaset is up and running! Helm is ultra easy and powerful! Helm is ultra easy and powerful! MongoDB installation test From output of helm install pick up the NAME of your release and use it in the following command: export RELEASE_NAME= foppish-angelfish Here we follow a different path from Helm Chart. Let’s open an interactive shell session with remote Mongo server! kubectl exec $RELEASE_NAME-mongodb-replicaset-0 --mongo --shell OUTPUT MongoDB shell version v3.4.8connecting to: mongodb://127.0.0.1:27017MongoDB server version: 3.4.8type "help" for help......A LOT OF WARNING (I will check these in a future post to clean them up, if possible)......rs0:PRIMARY> Who is the primary? In theory Pod 0 should be the master as you can see rom rs: > prompt. If this is not the case tun following command to find the Master: PRIMARY rs0:SECONDARY> db.isMaster().primary Take note of the primary Pod because we are going to kill it soon and connect to it using last kubectl exec used above. Failover testing We need to create some data to check persistence across failures. We are already connect to the mongo shell, creating a document and leaving the session is as simple as: rs0:PRIMARY> db.test.insert({key1: 'value1'})rs0:PRIMARY> exit Use following command to monitor changes in replica set: kubectl run --attach bbox --image=mongo:3.4 --restart=Never --env="RELEASE_NAME=$RELEASE_NAME" -- sh -c 'while true; do for i in 0 1 2; do echo $RELEASE_NAME-mongodb-replicaset-$i $(mongo --host=$RELEASE_NAME-mongodb-replicaset-$i.$RELEASE_NAME-mongodb-replicaset --eval="printjson(rs.isMaster())" | grep primary); sleep 1; done; done'; OUTPUTfoppish-angelfish-mongodb-replicaset-0 "primary" : "foppish-angelfish-mongodb-replicaset-0.foppish-angelfish-mongodb-replicaset.default.svc.cluster.local:27017",foppish-angelfish-mongodb-replicaset-1 "primary" : "foppish-angelfish-mongodb-replicaset-0.foppish-angelfish-mongodb-replicaset.default.svc.cluster.local:27017",foppish-angelfish-mongodb-replicaset-2 "primary" : "foppish-angelfish-mongodb-replicaset-0.foppish-angelfish-mongodb-replicaset.default.svc.cluster.local:27017",......... Kill the primary! Here it is: kubectl delete pod $RELEASE_NAME-mongob-replicaset-0 MongoDB will start an election and another Pod will become master: foppish-angelfish-mongodb-replicaset-1 “primary” : “foppish-angelfish-mongodb-replicaset-1.foppish-angelfish-mongodb- And in the meantime Kubernetes will immediately take corrective actions instantiating a new Pod 0. Kill’em all Now we have to simulate a real disaster: let’s kill all Pods and see the StatefulSet magically recreating everything with all data available. kubectl delete po -l "app=mongodb-replicaset,release=$RELEASE_NAME"kubectl get po --watch-only After few minutes our MongoDB replicaset will be back online and we can test it again to see if our data are still there. Final check and clean up Run following command to verify that key created is still there: kubectl exec $RELEASE_NAME-mongodb-replicaset-1 --mongo --eval=”rs.slaveOk(); db.test.find({key1:{\$exists:true}}).forEach(printjson)” As always you can delete everything with a simple Azure CLI 2 command: az group delete --name k8sMongoTestGroup --yes --no-wait How to expose this replicaSet externally? This is a topic for a e post. It seems trivial as a but it is not so easy. If you expose the existing service, it will be LoadBalanced on 3 nodes behind it and this is wrong. We need 3 LoadBalancers, exposing 3 services, 1 for each Pod in the StatefulSet. Moreover we have to activate Authentication and SSL to ensure best practice from perspective. futur kubectl expose security I will find best way to do it, while playing with Heml, Kubernetes, MongoDB and Azure!

Kubernetes: Installing MongoDB ReplicaSet on Azure using Helm

Picture-Copyright: LIK Studio The question about garbage collectors is viral. You can hear it almost in every interview. So I put the necessary information in one place and used my favorite principle - keep it short and simple. So let's begin with the purpose of CG and why we need multiple types of garbage collectors. Idea: Give the programmer a language tool to manage memory instead of himself. Solution: Provide a garbage collector system. In such languages as C, we need to store information about our entities in our memory and write a lot of boilerplate code to free the memory. Nobody is perfect. So memory leaks are frequent guests in such programs. Java solves this problem with GC, but you must know which CG will help you better. Your program may run on weak hardware, or your program will work with a large number of objects, or your program needs to be speedy. You must tweak your GC to achieve the desired performance in all these situations. So let's start. How JVM Works With Memory The JVM divides its memory into two areas: the heap, which stores the application data, and the non-heap, which stores the program code and other data. Let us focus our attention on the heap area. Because precisely in this location, our program creates new objects. (Note: we also can create some records in the non-heap areas. For example, if our program creates new classes on the fly) All garbage collectors are based on one crucial observation - many programs use short-lived objects. These objects have been created, have fulfilled their function, and are no longer needed.   They prevail. Some objects live much longer, perhaps even the entire lifetime of the program. This is where the idea of dividing objects into the young and old generations comes in. We need very often to check the young generation. So in accordance with this division, the garbage collection processes are divided into minor GC, which affects only the younger generation, and full GC, which can affect both generations. CG is a program. And at first, it needs time and your computer resources to function. And it also affects our application. How? To perform garbage collection, the JVM pauses our application. So, this is called Stop-The-World (STW) pause. All application threads are paused at this time. The application inside does not suspect this at all. For the application, time runs evenly. Why is it so bad? Just imagine you are writing some application for exchange or an application for the plane’s autopilot. Your application could “sleep” for one second, but the context for your problem could change dramatically. So, this pause is a significant parameter for every GC. The following fundamental CG property - is the total time spent in garbage collection relative to the total program execution time. What does it mean, and why is this so important? Instead of one big “stop the world” phase, we can find an algorithm with many small pauses. Small pauses are preferable, but nothing is free. In this case, we pay for the total execution time of the program. And we also have to take this into account. The following parameter - is the number of hardware resources. Each CG needs memory to store information about objects and the CPU to perform cleaning. The last one - Promptness. Promptness in garbage collection refers to how quickly and efficiently a garbage collector (GC) reclaims the memory that is no longer being used by a program. It is the art of designing an algorithm that can free up memory as fast as possible while consuming minimal resources; Let's take a look at the garbage collectors available to us. You need to know the first five for the interview. The other two are much more difficult. Serial GC The is a garbage collector in the Java Virtual Machine that has been in use since the early days of Java. It is helpful for programs with tiny heaps and running on less powerful machines. Serial GC The garbage collector divides the heap into regions, including the Eden region, where newly created objects are placed. As the heap fills up, objects move between the Eden and Survivor regions. The JVM constantly monitors how objects move between Survivor regions and choose an appropriate threshold for the number of such moves, after which the objects move to the older generation (Tenured) region. When there is not enough room in the Tenured region, full garbage collection comes into play, working with objects from both generations. The main of this garbage collector is its low overhead, and it needs super low CPU resources to perform collection. advantage The main disadvantage is its long pauses during garbage collection, particularly for larger volumes of data. Parallel CG is similar to the sequential builder but includes parallel processing for some tasks and the ability to adjust performance settings automatically. Parallel CG The Parallel GC is a garbage collector in Java Virtual Machine that builds on the ideas behind the Serial GC but adds parallelism and intelligence. If the computer has more than one processor core, the old JVM automatically chooses Parallel GC (valid for old JSMs). The heap is divided into the same regions as Serial GC - Eden, Survivor 0, Survivor 1, and Old Gen (Tenured). However, multiple threads are involved in garbage collection in parallel, and the collector can adjust to the required performance parameters. Each collector thread has a memory area to clean. The Parallel GC also has settings geared towards achieving the garbage collection efficiency required, and the collector uses statistics from previous garbage collections to adjust performance parameters for future collections. The Parallel GC provides automatic tuning to desired performance parameters and less pause time for build time, and certain memory fragmentation is a minor drawback. It is suitable for most applications, and there are no hidden overheads. However, for more sophisticated applications, advanced garbage collector implementations are needed. Pros: In many cases faster than serial. Has good throughput. Cons: Consumes more resources, and pauses can be very long because we can adjust the maximum stop the world pause. Concurrent Mark Sweep aims to decrease maximum latency by performing some garbage collection tasks concurrently with the application threads and is suitable for managing large amounts of data in memory. Concurrent Mark Sweep (CMS) The Concurrent Mark Sweep (CMS) builder is an alternative to Parallel GC in the Java Virtual Machine (JVM), designed for applications that require access to multiple CPU cores and are sensitive to Stop-The-World pauses. The CMS builder performs the Mark and Sweep garbage collection steps in parallel with the main program, allowing it to run while it is still running. It uses the same memory organization as Serial and Parallel GC but does not wait for the Tenured region to fill up before starting the old-gen collection. Instead, it runs in the background and tries to keep the Tenured region compact. The CMS builder starts with the initial marking phase, which briefly stops the main threads of the application and marks all objects directly accessible from the roots. The main application threads then resume work, and CMS starts searching for all live objects accessible via the links from the marked root objects. After marking all live objects, the collector cleans the memory from the dead objects in several parallel threads. One of the advantages of CMS is its focus on minimizing downtime, which is critical for many applications. However, this requires sacrificing CPU resources and often total bandwidth. Additionally, the CMS does not compact objects in the older generation, leading to fragmentation. Long pauses for potential concurrent mode failures can be an unpleasant surprise, although they are not frequent, and CMS manages to avoid them with enough memory. Pros: Fast. Has small STW pauses. Cons: it consumes more memory, some pauses could be long, don’t like when the app creates a lot of objects. Garbage-First is intended to replace CMS, particularly for server applications running multiprocessor servers and managing large data sets. Garbage-First (G1) The G1 garbage collector organizes memory into multiple regions of equal size except for huge regions, which are created by merging regular regions to accommodate massive objects. The regions do not have to be organized in a row and may change their generation's belonging. Small collections are performed periodically to clean up the younger generation and move objects to Survivor regions or upgrade them to the older generation with a transfer to Tenured. Cleanup is performed only on the part of the regions to avoid exceeding the desired time, and it chooses to clean those regions with the most garbage ( CG tries to predict such areas). Complete collections use a marking cycle that runs parallel with the main application to list live objects. After the marking cycle, G1 switches to running mixed collections, which add older generation regions to the set of younger generation regions to be cleaned. The number of such assemblies is chosen based on statistics about previous assemblies to stay within the required build time. The G1 garbage collector is considered more accurate than the CMS collector in predicting pause sizes and is better at distributing garbage collections over time to prevent lengthy application stoppages, particularly with large heap sizes. It also does not fragment memory like the CMS collector. However, the G1 collector requires more CPU resources to work parallel with the main program, reducing application throughput. Pros: works better than CMS. Has shorter pauses. Cons: consumes more CPU. It Consumes more memory in case we have a lot of quite big objects(more than 500kb) because it places such objects into one region (1-32 MB) Epsilon GC is designed for situations where no garbage collection is necessary. Epsilon GC The Epsilon GC does not perform garbage collection. It uses TLABs( ) to allocate new objects - small memory buffers requested by individual threads from the heap. Humongous objects that do not fit in the buffer request memory blocks specifically for them. thread-local allocation buffers When Epsilon GC exhausts resources, an is generated, and the process terminates. OutOfMemoryError Epsilon GC's benefits include less overhead costs and faster memory allocation for applications that create all the objects they need at startup or run short-lived applications that don't use all the memory allocated. Epsilon GC can also help analyze the overhead that other garbage collectors bring to your application. Pros: Super fast. Cons: Doesn’t collect objects :) The following two collectors are the most advanced of their kind and also the most complex. So we consider them briefly. ZGC aims to maintain pauses at a sub-millisecond level, even when managing huge amounts of data. ZGC ZGC is a garbage collector developed by Oracle for Java that is designed to provide high throughput and low latency while handling large heaps (up to 16TB). ZGC is based on the principles of virtual memory and uses pointer coloring to track the state of objects during garbage collection. Pros: Sub-millisecond pauses, even on large heaps, benefit applications requiring short query processing times. It works with very big heaps with good throughput. ZGC can compact the heap memory during garbage collection Cons: High CPU usage and initial overhead because ZGC has a relatively high initial overhead, which can slow down the startup time of applications. Shenandoah GC is another garbage collector aiming for short pauses regardless of the heap size. Shenandoah GC Shenandoah GC is a low-pause-time garbage collector developed by Red Hat. It is designed to minimize an application's time to stop its execution during garbage collection. Like ZGC, it is a concurrent collector, which means it operates while the application is still running, minimizing pauses. Shenandoah GC uses "forwarding pointers" to move objects during garbage collection. And a technique called "load-barrier elimination" to improve performance. Pros: pause times. Shenandoah GC can achieve short pause times, often under 10ms, even for massive heaps. Promising throughput. Cons: high CPU usage and complexity - it has unexpected approaches to working under heavy loads. Garbage collectors are one of the most difficult tasks in programming. Scientific research is constantly being conducted in this direction. Developers very rarely resort to GC customization. But it is still necessary to know superficially how your instrument works. Thanks for your attention.

Stories, News & Mentions about VTLABS

Vtlabs’s Stories on HackerNoon

Vtlabs's News & Mentions