COMPANY NEWS: Pure Storage®, the IT pioneer delivering the world’s most advanced data storage technologies and services, and CoreWeave, the AI HyperscalerTM, today announced Pure Storage’s strategic investment in CoreWeave to accelerate AI cloud services innovation.

iTWire - Pure Storage announces partnership with CoreWeave to accelerate large-scale AI Cloud Services Innovation

Pure Storage announces strategic investment in CoreWeave, integrating its unified storage platform with 99.9999% reliability into CoreWeave's AI supercomputer environments.

Pure Storage Partners with CoreWeave to Power AI Cloud Infrastructure | PSTG Stock News

The iShares Cybersecurity and Tech provides exposure to the growing cybersecurity sector with a focus on innovation and global reach. Learn more on IHAK ETF here.

IHAK: A Pure Cybersecurity Play (NYSEARCA:IHAK) | Seeking Alpha

Pure

pure

We  recently launched Rio, our new framework designed to help you create  web and local applications using just pure Python. The response from our  community has been overwhelmingly positive and incredibly motivating  for us. With the praise has come a wave of curiosity. The most common  question we’ve encountered is, “How does Rio actually work?”  If you’ve been wondering the same thing, you’re in the right place!  Here we’ll explore the inner workings of Rio and uncover what makes it  so powerful. A Fresh Layouting System When  it comes to building modern apps, components are just the beginning,  it’s the layouting that pulls them together into a cohesive,  user-friendly interface. In our last topic, we took a closer look at  components, the essential pieces of any app. Now, let’s shift our focus  to the layout system that arranges them harmoniously. Designing a layout  system isn’t a one-size-fits-all task; different frameworks bring  unique strengths, with CSS often at the center of debate. As we designed  Rio’s layout system, we aimed for something Pythonic, simple, flexible,  and efficient — a system that keeps developers focused on their app’s  function, not the complexities of positioning. Here, we’ll break down  the core principles behind Rio’s two-step approach to layouting, where  each component starts by defining its own natural size before the  available space is thoughtfully distributed. Take a look at our playground (Layouting Quickstart), where you can try out our layout concept firsthand with just a click and receive real-time feedback. What Makes a Great Layout System? Each UI framework approaches layouting differently, all with their own unique strengths and quirks. There’s of course the polarizing incumbent,  CSS, but also the many systems built into popular frameworks like  Flutter, QT, and others. Before we got to designing our own, we took a  step back to understand what makes a great layout system. Here are some  key principles we identified: Pythonic: Rio embraces Python’s simplicity. No numbers encoded as strings or complex unit declarations. For example, width=10 is preferred over width="10px". This isn’t just cleaner, but also aids type checking tools and allows for easy mathematical operations.
Simple: The system should be intuitive, even for developers without a deep background in UI design. Rather than a tangled set of rules and exceptions, it should be governed by a handful of principles that are applied consistently.
Flexible: From basic layouts to complex, nested structures, the system needs to handle them all. Templates and restrictive built-in patterns won’t cut it.
Efficient: Especially when targeting the web, performance is key. A good layouting system should be automatically convertible to CSS, maybe with some JavaScript sprinkled in occasionally for dynamic calculations. Rio’s Approach: Two-Step Layouting We’ve decided on a two-step layouting system that balances simplicity and flexibility. Here’s how it works: Step 1: Natural Size Calculation First, each component determines how much space it needs to fit its content. We call this the component’s “natural size.” For some components this is simple. For example, rio.Switch has a fixed size, so that is also its natural size. But not all components are that simple. Take a rio.Row  for example. The row itself doesn't need any space, but it needs to  request enough space to fit its children. So the natural width of a row  is the sum of the natural widths of its children, plus any spacing  between them. Another more in-depth example is rio.Text. It's size depends on a variety of things, such as its text content, font size, whether the font is bold, etc. This  process starts at the leaves of the component tree, i.e. first  components without any children are calculated, then their parents, and  so on, until the entire tree has computed its natural width &  height. Step 2: Space Distribution Once  each component has determined its natural size, we must decide how to  allocate the available space. For example, in a large window with only a  button, should the button be centered, aligned to one side, or  stretched? There isn’t a real reason to prefer one over the other. We are solving this, by simply giving all  space to the button. If you don’t want for that to happen, you can  explicitly set the button’s alignment, and Rio will take it into  account. Example Imagine a simple rio.Row containing a rio.Text and a rio.Switch.  First, we need to calculate the natural size of all components. We'll  start with components that don't have any children, so in this case the rio.Text and rio.Switch. The rio.Text will calculate its natural size based on its text content, font size, etc. The rio.Switch has a fixed size, so that is also its natural size. Now that all children have had their natural size calculated, the rio.Row  can get to work. It's natural width is the sum of the natural widths of  its children (plus any spacing) and its natural height is the maximum  of the natural heights of its children. Finally,  we need to distribute the available space. Since the window itself  always has a single child, it will pass all available space to that  child — in this case the rio.Row. The row will then distribute the space to its children; But how? Since there’s only so few components in the view there is likely too much space available. Thus, the rio.Row  will have to decide how much space to pass to each child. Since we  always want all components to have enough space to fit their content  ("natural size") we'll allocate each child that much space. Then, if  space is leftover we can distribute that proportionally. Ta-da! All  components now know how large they are. Their positions also follow from  this. Since this is such a common use-case, rio.Row also honors the grow_x and grow_y attributes of components. If a component is marked to grow,  and superfluous space is available, all space will be given to that  component. If there are multiple components that are marked to grow, the  space will be distributed proportionally just between those components. Implementation The  system described above is what we call our reference layouting system.  It isn’t actually implemented like this in code, but rather as a set of  CSS rules, that result in this exact behavior. This allows our layouting  to run at maximum performance, because it relies on the browser’s  native layouting engine. The described algorithm is nonetheless useful,  as it guides Rio developers to how a component should behave. It’s just  that this behavior is then achieved by internal CSS rules rather than  the algorithm itself. Best  of all, you’ll never have to see a single line of CSS. All of this is  handled by Rio internally, so you can focus on building your app. Limitations and Trade-offs While  Rio’s layout system is powerful and flexible, it isn’t perfect. In the  interest of full transparency, we’d like to share some limitations that  we’ve found: Some layouts cannot achieved just using CSS. Notably, when using the proportions attribute of rio.Row or rio.Column, JavaScript jumps into action to help out, because we are not aware of any pure-CSS way to achieve our desired behavior. (If you're a CSS magician and know a way, reach out!)
There are occasional layouts that cannot be realized with this system. One such situation that we’ve found is to have a row containing an icon and text, while that text is both centered and has wrapping enabled.
This sounds like a simple case, but no combination of parameters yields the desired result. Aligning the text to 0.5 (center) won't center the icon. Same when using the justify attribute. Aligning the entire rio.Row will make the row take up as little space as possible, thus squishing the text.
We’ve had some discussions about introducing a “preferred size” that would solve this, but it’s not in Rio yet. Github: https://github.com/rio-labs/rio Website: https://rio.dev/ We  recently launched Rio, our new framework designed to help you create  web and local applications using just pure Python. The response from our  community has been overwhelmingly positive and incredibly motivating  for us. With the praise has come a wave of curiosity. The most common  question we’ve encountered is, “How does Rio actually work?” If you’ve been wondering the same thing, you’re in the right place!  Here we’ll explore the inner workings of Rio and uncover what makes it  so powerful. “How does Rio actually work?” A Fresh Layouting System When  it comes to building modern apps, components are just the beginning,  it’s the layouting that pulls them together into a cohesive,  user-friendly interface. In our last topic, we took a closer look at  components, the essential pieces of any app. Now, let’s shift our focus  to the layout system that arranges them harmoniously. Designing a layout  system isn’t a one-size-fits-all task; different frameworks bring  unique strengths, with CSS often at the center of debate. As we designed  Rio’s layout system, we aimed for something Pythonic, simple, flexible,  and efficient — a system that keeps developers focused on their app’s  function, not the complexities of positioning. Here, we’ll break down  the core principles behind Rio’s two-step approach to layouting, where  each component starts by defining its own natural size before the  available space is thoughtfully distributed. Take a look at our playground ( Layouting Quickstart ), where you can try out our layout concept firsthand with just a click and receive real-time feedback. Layouting Quickstart What Makes a Great Layout System? Each UI framework approaches layouting differently, all with their own unique strengths and quirks. There’s of course the polarizing incumbent ,  CSS, but also the many systems built into popular frameworks like  Flutter, QT, and others. Before we got to designing our own, we took a  step back to understand what makes a great layout system. Here are some  key principles we identified: polarizing incumbent Pythonic: Rio embraces Python’s simplicity. No numbers encoded as strings or complex unit declarations. For example, width=10 is preferred over width="10px". This isn’t just cleaner, but also aids type checking tools and allows for easy mathematical operations. Simple: The system should be intuitive, even for developers without a deep background in UI design. Rather than a tangled set of rules and exceptions, it should be governed by a handful of principles that are applied consistently. Flexible: From basic layouts to complex, nested structures, the system needs to handle them all. Templates and restrictive built-in patterns won’t cut it. Efficient: Especially when targeting the web, performance is key. A good layouting system should be automatically convertible to CSS, maybe with some JavaScript sprinkled in occasionally for dynamic calculations. Pythonic: Rio embraces Python’s simplicity. No numbers encoded as strings or complex unit declarations. For example, width=10 is preferred over width="10px" . This isn’t just cleaner, but also aids type checking tools and allows for easy mathematical operations. Pythonic: width=10 width="10px" Simple: The system should be intuitive, even for developers without a deep background in UI design. Rather than a tangled set of rules and exceptions, it should be governed by a handful of principles that are applied consistently. Simple: Flexible: From basic layouts to complex, nested structures, the system needs to handle them all. Templates and restrictive built-in patterns won’t cut it. Flexible: Efficient: Especially when targeting the web, performance is key. A good layouting system should be automatically convertible to CSS, maybe with some JavaScript sprinkled in occasionally for dynamic calculations. Efficient: Rio’s Approach: Two-Step Layouting We’ve decided on a two-step layouting system that balances simplicity and flexibility. Here’s how it works: Step 1: Natural Size Calculation First, each component determines how much space it needs to fit its content. We call this the component’s “natural size.” For some components this is simple. For example, rio.Switch has a fixed size, so that is also its natural size. But not all components are that simple. Take a rio.Row for example. The row itself doesn't need any space, but it needs to  request enough space to fit its children. So the natural width of a row  is the sum of the natural widths of its children, plus any spacing  between them. rio.Switch rio.Row Another more in-depth example is rio.Text . It's size depends on a variety of things, such as its text content, font size, whether the font is bold, etc. rio.Text This  process starts at the leaves of the component tree, i.e. first  components without any children are calculated, then their parents, and  so on, until the entire tree has computed its natural width &  height. Step 2: Space Distribution Once  each component has determined its natural size, we must decide how to  allocate the available space. For example, in a large window with only a  button, should the button be centered, aligned to one side, or  stretched? There isn’t a real reason to prefer one over the other. We are solving this, by simply giving all space to the button. If you don’t want for that to happen, you can  explicitly set the button’s alignment, and Rio will take it into  account. all Example Imagine a simple rio.Row containing a rio.Text and a rio.Switch .  First, we need to calculate the natural size of all components. We'll  start with components that don't have any children, so in this case the rio.Text and rio.Switch . rio.Row rio.Text rio.Switch rio.Text rio.Switch The rio.Text will calculate its natural size based on its text content, font size, etc. The rio.Switch has a fixed size, so that is also its natural size. rio.Text rio.Switch Now that all children have had their natural size calculated, the rio.Row can get to work. It's natural width is the sum of the natural widths of  its children (plus any spacing) and its natural height is the maximum  of the natural heights of its children. rio.Row Finally,  we need to distribute the available space. Since the window itself  always has a single child, it will pass all available space to that  child — in this case the rio.Row . The row will then distribute the space to its children; But how? rio.Row Since there’s only so few components in the view there is likely too much space available. Thus, the rio.Row will have to decide how much space to pass to each child. Since we  always want all components to have enough space to fit their content  ("natural size") we'll allocate each child that much space. Then, if  space is leftover we can distribute that proportionally. Ta-da! All  components now know how large they are. Their positions also follow from  this. rio.Row Since this is such a common use-case, rio.Row also honors the grow_x and grow_y attributes of components. If a component is marked to grow ,  and superfluous space is available, all space will be given to that  component. If there are multiple components that are marked to grow, the  space will be distributed proportionally just between those components. rio.Row grow_x grow_y grow Implementation The  system described above is what we call our reference layouting system.  It isn’t actually implemented like this in code, but rather as a set of  CSS rules, that result in this exact behavior. This allows our layouting  to run at maximum performance, because it relies on the browser’s  native layouting engine. The described algorithm is nonetheless useful,  as it guides Rio developers to how a component should behave. It’s just  that this behavior is then achieved by internal CSS rules rather than  the algorithm itself. Best  of all, you’ll never have to see a single line of CSS. All of this is  handled by Rio internally, so you can focus on building your app. Limitations and Trade-offs While  Rio’s layout system is powerful and flexible, it isn’t perfect. In the  interest of full transparency, we’d like to share some limitations that  we’ve found: Some layouts cannot achieved just using CSS. Notably, when using the proportions attribute of rio.Row or rio.Column, JavaScript jumps into action to help out, because we are not aware of any pure-CSS way to achieve our desired behavior. (If you're a CSS magician and know a way, reach out!) There are occasional layouts that cannot be realized with this system. One such situation that we’ve found is to have a row containing an icon and text, while that text is both centered and has wrapping enabled. This sounds like a simple case, but no combination of parameters yields the desired result. Aligning the text to 0.5 (center) won't center the icon. Same when using the justify attribute. Aligning the entire rio.Row will make the row take up as little space as possible, thus squishing the text. We’ve had some discussions about introducing a “preferred size” that would solve this, but it’s not in Rio yet. Some layouts cannot achieved just using CSS. Notably, when using the proportions attribute of rio.Row or rio.Column , JavaScript jumps into action to help out, because we are not aware of any pure-CSS way to achieve our desired behavior. (If you're a CSS magician and know a way, reach out!) proportions rio.Row rio.Column There are occasional layouts that cannot be realized with this system. One such situation that we’ve found is to have a row containing an icon and text, while that text is both centered and has wrapping enabled. This sounds like a simple case, but no combination of parameters yields the desired result. Aligning the text to 0.5 (center) won't center the icon. Same when using the justify attribute. Aligning the entire rio.Row will make the row take up as little space as possible, thus squishing the text. 0.5 justify rio.Row We’ve had some discussions about introducing a “preferred size” that would solve this, but it’s not in Rio yet. Github: https://github.com/rio-labs/rio Github: https://github.com/rio-labs/rio https://github.com/rio-labs/rio Website: https://rio.dev/ Website: https://rio.dev/ https://rio.dev/

Rio: WebApps in pure Python — A fresh Layouting System

Web development is one of the most popular use cases for programming. Python is one of the most popular programming languages in the world. So why can't we build web apps in Python? Making a UI should be simple, but even you have great engineers on your team, the overhead of learning a new language and tools was a huge barrier. Often making a UI could be harder than the actual work one is doing! We built Reflex, an open source Python web framework to solve this exact problem. TLDR Under the hood, Reflex apps compile down to a React frontend app and a FastAPI backend app. Only the UI is compiled to Javascript; all the app logic and state management stays in Python and is run on the server. Reflex uses WebSockets to send events from the frontend to the backend, and to send state updates from the backend to the frontend. Existing Python Solutions There were a few ways already to build apps in Python, but none of them fit our needs. On the one hand, there are frameworks like Django and Flask that are great for building production-grade web apps. But they only handle the backend - you still need to use JavaScript and a frontend framework, as well as writing a lot of boilerplate code to connect the frontend and backend. On the other hand, pure Python libraries like Dash and Streamlit can be great for small projects, but they are limited to a specific use case and don't have the features and performance to build a full web app. As your app grows in features and complexity, you may find yourself hitting the limits of the framework, at which point you either have to limit your idea to fit the framework, or scrap your project and rebuild it using a "real web framework". We want to bridge this gap by creating a framework that is easy and intuitive to get started with, while remaining flexible and powerful to support any app. Goals of Reflex Pure Python: Use one language for everything.
Easy to get started: Build your ideas easily without needing web development experience.
Full flexibility: Web apps should match the customizability and performance of traditional web frameworks.
Batteries included: Handle the full-stack from the frontend, to the backend, to deployment. Now let's dive into how we built Reflex to meet these goals. The Reflex Architecture Full-stack web apps are made up of a frontend and a backend. The frontend is the user interface, and is served as a web page that runs on the user's browser. The backend handles the logic and state management (such as databases and APIs), and is run on a server. In traditional web development, these are usually two separate apps, and are often written in different frameworks or languages. For example, you may combine a Flask backend with a React frontend. With this approach, you have to maintain two separate apps and end up writing a lot of boilerplate code to connect the frontend and backend. We want to simplify this process in Reflex by defining both the frontend and backend in a single codebase, while using Python for everything. Developers should only worry about their app's logic and not about the low-level implementation details. Frontend We want Reflex apps to look and feel like a traditional web app to the end user, while still being easy to build and maintain for the developer. To do this, we built on top of mature and popular web technologies. When you reflex run your app, Reflex compiles the frontend down to a single-page Next.js app and serves it on a port (by default 3000) that you can access in your browser. The frontend's job is to reflect the app's state, and send events to the backend when the user interacts with the UI. No actual logic is run on the frontend. Components Reflex frontends are built using components that can be composed together to create complex UIs. Instead of using a templating language that mixes HTML and Python, we just use Python functions to define the UI. Under the hood, components compile down to React components. Many of our core components are based on Radix, a popular React component library. We also have many other components for graphing, datatables, and more. We chose React because it is a popular library with a huge ecosystem. Our goal isn't to recreate the web ecosystem, but to make it accessible to Python developers. This also lets our users bring their own components if we don't have a component they need. Users can wrap their own React components and then publish them for others to use. Over time we will build out our third party component ecosystem so that users can easily find and use components that others have built. Styling We wanted to make sure Reflex apps look good out of the box, while still giving developers full control over the appearance of their app. We have a core theming system that lets you set high level styling options such as dark mode and accent color throughout your app to give it a unified look and feel. Beyond this, Reflex components can be styled using the full power of CSS. We leverage the Emotion library to allow "CSS-in-Python" styling, so you can pass any CSS prop as a keyword argument to a component. This includes responsive props by passing a list of values. Backend In Reflex only the frontend compiles to Javascript and runs on the user's browser, while all the state and logic stays in Python and is run on the server. When you reflex run, we start a FastAPI server (by default on port 8000) that the frontend connects to through a websocket. All the state and logic are defined within a State class. The state is made up of vars and event handlers. Vars are any values in your app that can change over time. They are defined as class attributes on your State class, and may be any Python type that can be serialized to JSON. Event handlers are methods in your State class that are called when the user interacts with the UI. They are the only way that we can modify the vars in Reflex, and can be called in response to user actions, such as clicking a button or typing in a text box. Since event handlers are run on the backend, you can use any Python library within them. Event Processing Normally when writing web apps, you have to write a lot of boilerplate code to connect the frontend and backend. With Reflex, you don't have to worry about that - we handle the communication between the frontend and backend for you. Developers just have to write their event handler logic, and when the vars are updated the UI is automatically updated. Event Triggers The user can interact with the UI in many ways, such as clicking a button, typing in a text box, or hovering over an element. In Reflex, we call these event triggers. Event Queue On the frontend, we maintain an event queue of all pending events. An event consists of three major pieces of data: client token: Each client (browser tab) has a unique token to identify it. This let's the backend know which state to update.
event handler: The event handler to run on the state.
arguments: The arguments to pass to the event handler. When an event is triggered, it is added to the queue. We have a processing flag to make sure only one event is processed at a time. This ensures that the state is always consistent and there aren't any race conditions with two event handlers modifying the state at the same time. There are exceptions to this, such as background events which allow you to run events in the background without blocking the UI. Once the event is ready to be processed, it is sent to the backend through a WebSocket connection. State Manager Once the event is received, it is processed on the backend. Reflex uses a state manager which maintains a mapping between client tokens and their state. By default, the state manager is just an in-memory dictionary, but it can be extended to use a database or cache. In production we use Redis as our state manager. Event Handling Once we have the user's state, the next step is to run the event handler with the arguments. State Updates Every time an event handler returns (or yields), we save the state in the state manager and send the state updates to the frontend to update the UI. To maintain performance as your state grows, internally Reflex keeps track of vars that were updated during the event handler (dirty vars). When the event handler is done processing, we find all the dirty vars and create a state update to send to the frontend. We store the new state in our state manager, and then send the state update to the frontend. The frontend then updates the UI to reflect the new state. Conclusion I hope this provides a good overview of how Reflex works under the hood. We will have more posts coming out to share how we made Reflex scalable and performant through features such as state sharding and compiler optimizations. Web development is one of the most popular use cases for programming. Python is one of the most popular programming languages in the world. So why can't we build web apps in Python? Making a UI should be simple, but even you have great engineers on your team, the overhead of learning a new language and tools was a huge barrier. Often making a UI could be harder than the actual work one is doing! We built Reflex, an open source Python web framework to solve this exact problem. TLDR Under the hood, Reflex apps compile down to a React frontend app and a FastAPI backend app. Only the UI is compiled to Javascript; all the app logic and state management stays in Python and is run on the server. Reflex uses WebSockets to send events from the frontend to the backend, and to send state updates from the backend to the frontend. React FastAPI WebSockets Existing Python Solutions There were a few ways already to build apps in Python, but none of them fit our needs. On the one hand, there are frameworks like Django and Flask that are great for building production-grade web apps. But they only handle the backend - you still need to use JavaScript and a frontend framework, as well as writing a lot of boilerplate code to connect the frontend and backend. Django Flask On the other hand, pure Python libraries like Dash and Streamlit can be great for small projects, but they are limited to a specific use case and don't have the features and performance to build a full web app. As your app grows in features and complexity, you may find yourself hitting the limits of the framework, at which point you either have to limit your idea to fit the framework, or scrap your project and rebuild it using a "real web framework". Dash Streamlit We want to bridge this gap by creating a framework that is easy and intuitive to get started with, while remaining flexible and powerful to support any app. Goals of Reflex Pure Python: Use one language for everything. Easy to get started: Build your ideas easily without needing web development experience. Full flexibility: Web apps should match the customizability and performance of traditional web frameworks. Batteries included: Handle the full-stack from the frontend, to the backend, to deployment. Pure Python : Use one language for everything. Pure Python Easy to get started : Build your ideas easily without needing web development experience. Easy to get started Full flexibility : Web apps should match the customizability and performance of traditional web frameworks. Full flexibility Batteries included : Handle the full-stack from the frontend, to the backend, to deployment. Batteries included Now let's dive into how we built Reflex to meet these goals. The Reflex Architecture Full-stack web apps are made up of a frontend and a backend. The frontend is the user interface, and is served as a web page that runs on the user's browser. The backend handles the logic and state management (such as databases and APIs), and is run on a server. In traditional web development, these are usually two separate apps, and are often written in different frameworks or languages. For example, you may combine a Flask backend with a React frontend. With this approach, you have to maintain two separate apps and end up writing a lot of boilerplate code to connect the frontend and backend. We want to simplify this process in Reflex by defining both the frontend and backend in a single codebase, while using Python for everything. Developers should only worry about their app's logic and not about the low-level implementation details. Frontend We want Reflex apps to look and feel like a traditional web app to the end user, while still being easy to build and maintain for the developer. To do this, we built on top of mature and popular web technologies. When you reflex run your app, Reflex compiles the frontend down to a single-page Next.js app and serves it on a port (by default 3000 ) that you can access in your browser. reflex run Next.js 3000 The frontend's job is to reflect the app's state, and send events to the backend when the user interacts with the UI. No actual logic is run on the frontend. Components Reflex frontends are built using components that can be composed together to create complex UIs. Instead of using a templating language that mixes HTML and Python, we just use Python functions to define the UI. Under the hood, components compile down to React components. Many of our core components are based on Radix , a popular React component library. We also have many other components for graphing, datatables, and more. We chose React because it is a popular library with a huge ecosystem. Our goal isn't to recreate the web ecosystem, but to make it accessible to Python developers. Radix This also lets our users bring their own components if we don't have a component they need. Users can wrap their own React components and then publish them for others to use. Over time we will build out our third party component ecosystem so that users can easily find and use components that others have built. Styling We wanted to make sure Reflex apps look good out of the box, while still giving developers full control over the appearance of their app. We have a core theming system that lets you set high level styling options such as dark mode and accent color throughout your app to give it a unified look and feel. Beyond this, Reflex components can be styled using the full power of CSS. We leverage the Emotion library to allow "CSS-in-Python" styling, so you can pass any CSS prop as a keyword argument to a component. This includes responsive props by passing a list of values. Emotion Backend In Reflex only the frontend compiles to Javascript and runs on the user's browser, while all the state and logic stays in Python and is run on the server. When you reflex run , we start a FastAPI server (by default on port 8000 ) that the frontend connects to through a websocket. reflex run 8000 All the state and logic are defined within a State class. The state is made up of vars and event handlers . Vars are any values in your app that can change over time. They are defined as class attributes on your State class, and may be any Python type that can be serialized to JSON. State vars event handlers State Event handlers are methods in your State class that are called when the user interacts with the UI. They are the only way that we can modify the vars in Reflex, and can be called in response to user actions, such as clicking a button or typing in a text box. State Since event handlers are run on the backend, you can use any Python library within them. Event Processing Normally when writing web apps, you have to write a lot of boilerplate code to connect the frontend and backend. With Reflex, you don't have to worry about that - we handle the communication between the frontend and backend for you. Developers just have to write their event handler logic, and when the vars are updated the UI is automatically updated. Event Triggers The user can interact with the UI in many ways, such as clicking a button, typing in a text box, or hovering over an element. In Reflex, we call these event triggers . event triggers Event Queue On the frontend, we maintain an event queue of all pending events. An event consists of three major pieces of data: client token: Each client (browser tab) has a unique token to identify it. This let's the backend know which state to update. event handler: The event handler to run on the state. arguments: The arguments to pass to the event handler. client token : Each client (browser tab) has a unique token to identify it. This let's the backend know which state to update. client token event handler : The event handler to run on the state. event handler arguments : The arguments to pass to the event handler. arguments When an event is triggered, it is added to the queue. We have a processing flag to make sure only one event is processed at a time. This ensures that the state is always consistent and there aren't any race conditions with two event handlers modifying the state at the same time. There are exceptions to this, such as background events which allow you to run events in the background without blocking the UI. processing Once the event is ready to be processed, it is sent to the backend through a WebSocket connection. State Manager Once the event is received, it is processed on the backend. Reflex uses a state manager which maintains a mapping between client tokens and their state. By default, the state manager is just an in-memory dictionary, but it can be extended to use a database or cache. In production we use Redis as our state manager. state manager Event Handling Once we have the user's state, the next step is to run the event handler with the arguments. State Updates Every time an event handler returns (or yields), we save the state in the state manager and send the state updates to the frontend to update the UI. To maintain performance as your state grows, internally Reflex keeps track of vars that were updated during the event handler ( dirty vars ). state updates dirty vars When the event handler is done processing, we find all the dirty vars and create a state update to send to the frontend. We store the new state in our state manager, and then send the state update to the frontend. The frontend then updates the UI to reflect the new state. Conclusion I hope this provides a good overview of how Reflex works under the hood. We will have more posts coming out to share how we made Reflex scalable and performant through features such as state sharding and compiler optimizations.

Designing a Pure Python Web Framework

Design af et rent Python Web Framework

Diseño de un marco web basado en Python puro

Pure Python Web Frameworkin suunnittelu

Dizajniranje čistog Python web okvira

Pure Python webes keretrendszer tervezése

純粋な Python Web フレームワークの設計

ការរចនាក្របខ័ណ្ឌបណ្តាញ Python សុទ្ធ

Mereka bentuk Rangka Kerja Web Python Tulen

Projektowanie czystego frameworka internetowego w języku Python

Designa ett rent Python-webbramverk

Pagdidisenyo ng Purong Python Web Framework

Розробка веб-фреймворку на чистому Python

Rio: WebApps in Pure Python - Technical Description

Hi everyone! We're excited to announce that our reactive web UI framework is now public. This project has been in the works for quite some time, and we're excited to share it with you. Feel free to check it out and share your feedback! Website
GitHub
Demo Video What My Project Does Rio is a brand-new GUI framework designed to let you create modern web apps with just a few lines of Python. Our goal is to simplify web and app development, allowing you to focus on what matters most instead of getting stuck on complicated user interface details. We achieve this by adhering to the core principles of Python that we all know and love. Python is meant to be simple and concise, and Rio embodies this philosophy. There's no need to learn additional languages like HTML, CSS, or JavaScript, as all UI, logic, components, and even layout are managed entirely in Python. Moreover, there's no separation between front-end and back-end; Rio transparently handles all communication for you. Showcase Rio doesn't just serve HTML templates like you might be used to from frameworks like Flask. In Rio, you define components as simple data classes with a React/Flutter-style build method. Rio continuously watches your attributes for changes and updates the UI as necessary. class MyComponent(rio.Component):
        clicks: int = 0

        def _on_press(self) -> None:
            self.clicks += 1

        def build(self) -> rio.Component:
            return rio.Column(
                rio.Button('Click me', on_press=self._on_press),
                rio.Text(f'You clicked the button {self.clicks} time(s)'),
            )

    app = rio.App(build=MyComponent)
    app.run_in_browser() Notice how there is no need for any explicit HTTP requests. In fact, there isn't even a distinction between frontend and backend. Rio handles all communication transparently for you. Unlike ancient libraries like tkinter, Rio ships with over 50 built-in components in Google's Material Design. Moreover, the same exact codebase can be used for both local apps and websites. Key Features Full-Stack Web Development: Rio handles front-end and backend for you. In fact, you won't even notice they exist. Create your UI, and Rio will take care of the rest. Python Native: Rio apps are written in 100% Python, meaning you don't need to write a single line of CSS or JavaScript. Modern Python: We embrace modern Python features, such as type annotations and asynchrony. This keeps your code clean and maintainable and helps your code editor help you out with code completions and type checking. Python Debugger Compatible: Since Rio runs on Python, you can connect directly to the running process with a debugger. This makes it easy to identify and fix bugs in your code. Declarative Interface: Rio apps are built using reusable components, inspired by React, Flutter & Vue. They're declaratively combined to create modular and maintainable UIs. Batteries included: Over 50 builtin components based on Google's Material Design Target Audience Rio is perfect for developers who want to create web apps without spending time learning new languages. It’s also ideal for those who want to build modern, professional-looking apps without stressing over the details We Want Your Feedback! We welcome your thoughts and questions in the comments! If you like the project, please give us a star on GitHub to show your support and help us continue improving it. Hi everyone! We're excited to announce that our reactive web UI framework is now public. This project has been in the works for quite some time, and we're excited to share it with you. Feel free to check it out and share your feedback! Website GitHub Demo Video Website Website GitHub GitHub Demo Video Demo Video What My Project Does Rio is a brand-new GUI framework designed to let you create modern web apps with just a few lines of Python. Our goal is to simplify web and app development, allowing you to focus on what matters most instead of getting stuck on complicated user interface details. We achieve this by adhering to the core principles of Python that we all know and love. Python is meant to be simple and concise, and Rio embodies this philosophy. There's no need to learn additional languages like HTML, CSS, or JavaScript, as all UI, logic, components, and even layout are managed entirely in Python. Moreover, there's no separation between front-end and back-end; Rio transparently handles all communication for you. Showcase Rio doesn't just serve HTML templates like you might be used to from frameworks like Flask. In Rio, you define components as simple data classes with a React/Flutter-style build method. Rio continuously watches your attributes for changes and updates the UI as necessary. class MyComponent(rio.Component):
        clicks: int = 0

        def _on_press(self) -> None:
            self.clicks += 1

        def build(self) -> rio.Component:
            return rio.Column(
                rio.Button('Click me', on_press=self._on_press),
                rio.Text(f'You clicked the button {self.clicks} time(s)'),
            )

    app = rio.App(build=MyComponent)
    app.run_in_browser() class MyComponent(rio.Component):
        clicks: int = 0

        def _on_press(self) -> None:
            self.clicks += 1

        def build(self) -> rio.Component:
            return rio.Column(
                rio.Button('Click me', on_press=self._on_press),
                rio.Text(f'You clicked the button {self.clicks} time(s)'),
            )

    app = rio.App(build=MyComponent)
    app.run_in_browser() Notice how there is no need for any explicit HTTP requests. In fact, there isn't even a distinction between frontend and backend. Rio handles all communication transparently for you. Unlike ancient libraries like tkinter, Rio ships with over 50 built-in components in Google's Material Design. Moreover, the same exact codebase can be used for both local apps and websites. Key Features Full-Stack Web Development: Rio handles front-end and backend for you. In fact, you won't even notice they exist. Create your UI, and Rio will take care of the rest. Full-Stack Web Development: Rio handles front-end and backend for you. In fact, you won't even notice they exist. Create your UI, and Rio will take care of the rest. Full-Stack Web Development: Full-Stack Web Development: Python Native: Rio apps are written in 100% Python, meaning you don't need to write a single line of CSS or JavaScript. Python Native: Rio apps are written in 100% Python, meaning you don't need to write a single line of CSS or JavaScript. Python Native: Python Native: Modern Python: We embrace modern Python features, such as type annotations and asynchrony. This keeps your code clean and maintainable and helps your code editor help you out with code completions and type checking. Modern Python: We embrace modern Python features, such as type annotations and asynchrony. This keeps your code clean and maintainable and helps your code editor help you out with code completions and type checking. Modern Python: Modern Python: Python Debugger Compatible: Since Rio runs on Python, you can connect directly to the running process with a debugger. This makes it easy to identify and fix bugs in your code. Python Debugger Compatible: Since Rio runs on Python, you can connect directly to the running process with a debugger. This makes it easy to identify and fix bugs in your code. Python Debugger Compatible: Python Debugger Compatible: Declarative Interface: Rio apps are built using reusable components, inspired by React, Flutter & Vue. They're declaratively combined to create modular and maintainable UIs. Declarative Interface: Rio apps are built using reusable components, inspired by React, Flutter & Vue. They're declaratively combined to create modular and maintainable UIs. Declarative Interface: Declarative Interface: Batteries included: Over 50 builtin components based on Google's Material Design Batteries included: Over 50 builtin components based on Google's Material Design Batteries included: Batteries included: Target Audience Rio is perfect for developers who want to create web apps without spending time learning new languages. It’s also ideal for those who want to build modern, professional-looking apps without stressing over the details We Want Your Feedback! We welcome your thoughts and questions in the comments! If you like the project, please give us a star on GitHub to show your support and help us continue improving it. please give us a star on GitHub GitHub

Rio: WebApps in Pure Python - No JavaScript, HTML, or CSS Needed!

Pure functions are the perfect case for unit testing. For a given input, we always expect the same output—there is no internal state involved. Let’s take a look at a few examples and some simple tests that check if the methods work as expected. Jasmine Jasmine is a unit test framework for JavaScript. It can run tests in both Node.js or on the browser. It’s used in the Angular framework, and it’s especially popular in projects based on Angular. It’s a solid choice for Vanilla JS projects, or projects based on other frameworks as well. Happy Path Testing Happy path testing is when we test a method with inputs that it’s expected to work normally. The arguments are valid and within reasonable ranges. Those tests check if the method does its job correctly—the test cases should be straightforward examples of how the method is explained in its documentation. Pseudocode examples: , expect(add(2, 2)).toBe(4) expect(concatenate(“Lorem”, “Ipsum”)).toBe(“LoremIpsum”) Those tests are meant to automatically catch it anytime the method key behavior is broken. Methods Let’s see a few simple methods: simple operations that we might need in some real-world applications. All implementations are greatly simplified—all methods will break in an ugly way if only we provide them with parameters that differ slightly from what is expected. The code is far from being robust. greet Method that greets the user with their name and surname: export function greet(name, surname) {
  return `Hello ${name} ${surname}!`;
} shortDate is a formatting method that takes a date object and returns it formatted as a short string. The code: shortDate export function shortDate(date) {
  return date.toISOString().substring(0, 10);
} ellipsis takes a long text string and an optional length parameter, and then trims the string to fit within the limit: ellipsis export function ellipsis(text, length = 50) {
  if (text.length > length) {
    return text.substring(0, length) + "…";
  }

  return text;
} translate A method that provides translated string values for a and pair. It’s a simplified implementation of what could be replaced with more advanced translating libraries. key lang export function translate(key, lang = "en") {
  switch (lang) {
    case "en":
      switch (key) {
        case "hello":
          return "Hello!";
      }
    case "pl":
      switch (key) {
        case "hello":
          return "Cześć!";
      }
  }
} applyDiscount Method to apply a percentage discount to a price. It can feel like overkill with this naive implementation, but later, when we start investigating edge cases, it will get much more interesting. export function applyDiscount(price, discountPercentage) {
  return price - (price * discountPercentage) / 100;
} calculatePrice This one calculates the total price when buying multiple units at a given price. It will also get more complicated after adding interesting edge cases. export function calculatePrice(unitPrice, quantity) {
  return unitPrice * quantity;
} Complete JS Code The complete JS code, : src/main.js export function greet(name, surname) {
  return `Hello ${name} ${surname}!`;
}

export function shortDate(date) {
  return date.toISOString().substring(0, 10);
}

export function ellipsis(text, length = 50) {
  if (text.length > length) {
    return text.substring(0, length) + "…";
  }

  return text;
}

export function translate(key, lang = "en") {
  switch (lang) {
    case "en":
      switch (key) {
        case "hello":
          return "Hello!";
      }
    case "pl":
      switch (key) {
        case "hello":
          return "Cześć!";
      }
  }
}

export function applyDiscount(price, discountPercentage) {
  return price - (price * discountPercentage) / 100;
}

export function calculatePrice(unitPrice, quantity) {
  return unitPrice * quantity;
} Adding Jasmine Tests To add Jasmine, let’s start by converting the folder into an npm package: $ npm init -y
Wrote to …/package.json:
… Then we can install the Jasmine package: $ npm install --save-dev jasmine

added 42 packages, and audited 43 packages in 2s

13 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities Then we can generate folders and files used by Jasmine: $ npx jasmine init
(no output) This command generates the following: —a folder where we can put files with the test, and spec/ *.spec.js —a file with the Jasmine config. spec/support/jasmine.json Unit Tests For the following unit tests, I’m focusing on the happy path only—I check if the result is as expected for reasonable inputs. The test should be self-explanatory, so let’s take a look at them: import {
  greet,
  shortDate,
  ellipsis,
  translate,
  applyDiscount,
  calculatePrice,
} from "../src/main.js";

describe("main", () => {
  describe("greet", () => {
    it("should greet by name and surname", () => {
      expect(greet("Lorem", "Ipsum")).toEqual("Hello Lorem Ipsum!");
    });
  });

  describe("shortDate", () => {
    it("should format correclty date", () => {
      const date = new Date("2023-11-02");
      expect(shortDate(date)).toEqual("2023-11-02");
    });
  });

  describe("shortDate", () => {
    it("should shorten long text at 50 chars", () => {
      expect(
        ellipsis(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a faucibus massa."
        )
      ).toEqual("Lorem ipsum dolor sit amet, consectetur adipiscing…");
    });

    it("should leave short text unchanged", () => {
      expect(ellipsis("Lorem ipsum sin dolor")).toEqual(
        "Lorem ipsum sin dolor"
      );
    });

    it("should shorten to custom length", () => {
      expect(ellipsis("Lorem ipsum sin dolor", 10)).toEqual("Lorem ipsu…");
    });
  });

  describe("translate", () => {
    it("should translate to supported langauges", () => {
      expect(translate("hello", "en")).toEqual("Hello!");
      expect(translate("hello", "pl")).toEqual("Cześć!");
    });
  });

  describe("applyDiscount", () => {
    it("should lower the price accordingly", () => {
      expect(applyDiscount(120, 25)).toEqual(90);
      expect(applyDiscount(8, 50)).toEqual(4);
    });
  });

  describe("calculatePrice", () => {
    it("should find a price of many products", () => {
      expect(calculatePrice(4, 3)).toEqual(12);
      expect(calculatePrice(9, 0.5)).toEqual(4.5);
    });
  });
}); (file ) spec/main.spec.js Running Tests To run the tests, we can add the following script to : package.json ..
  "scripts": {
    "test": "jasmine"
  },
  … With this in place, runs our tests: npm run test $ npm run test

> testing-example@1.0.0 test
> jasmine

Randomized with seed 76873
Started
........


8 specs, 0 failures
Finished in 0.004 seconds
Randomized with seed 76873 (jasmine --random=true --seed=76873) Summary In this post, we took a look at a simple example of JS code and how it can be covered by unit tests. You can find the . complete code example on GitHub Also published here

Jasmine: A Beginner-Friendly Guide on Pure Functions and Basic Tests

জেসমিন: বিশুদ্ধ ফাংশন এবং প্রাথমিক পরীক্ষাগুলির উপর একটি শিক্ষানবিস-বান্ধব গাইড

Jasmine: Ein anfängerfreundlicher Leitfaden zu reinen Funktionen und grundlegenden Tests

Jasmine: una guía para principiantes sobre funciones puras y pruebas básicas

Jasmine : un guide convivial pour les débutants sur les fonctions pures et les tests de base

जैस्मीन: शुद्ध कार्यों और बुनियादी परीक्षणों पर एक शुरुआती-अनुकूल मार्गदर्शिका

Jasmine: 純粋関数と基本テストに関する初心者向けガイド

Jasmine: 순수 함수 및 기본 테스트에 대한 초보자 친화적인 가이드

Jasmine: um guia para iniciantes sobre funções puras e testes básicos

Жасмин: руководство для начинающих по чистым функциям и базовым тестам

Jasmine: Saf Fonksiyonlar ve Temel Testler Konusunda Yeni Başlayanlara Uygun Bir Kılavuz

Jasmine: Hướng dẫn thân thiện với người mới bắt đầu về các hàm thuần túy và các bài kiểm tra cơ bản

Jasmine：关于纯函数和基本测试的初学者友好指南

The Duty of American Women to Their Country by Catharine Esther Beecher, is part of the HackerNoon Books Series. You can jump to any chapter in this book . Sufferings of Little Children for Want of Pure Air. here SUFFERINGS OF LITTLE CHILDREN FOR WANT OF PURE AIR. To understand this subject properly, it must be borne in mind, that the body is so constructed as to inhale at every breath about a pint of air. The air is composed of 79 parts nitrogen and 21 parts oxygen. When it is drawn into the lungs, the oxygen is absorbed by the blood, and what we exhale is the nitrogen, mixed with the carbonic acid, formed in the lungs by the union of the oxygen of the air with the carbon of the blood. Now, neither carbonic acid, or nitrogen can support life. Take the oxygen from the air, and then breathe it, and instant death ensues. So, put any animal into carbonic acid alone, and it dies instantly. Thus, every breath of every human being uses up the oxygen in one pint of air, and returns it with only nitrogen and carbonic acid. Let a schoolroom, containing 18,000 gallons of air and twenty scholars, be made perfectly airtight, and in twenty minutes they would all be corpses. The horrible sufferings produced by this process, were once witnessed in Calcutta, where 146 men were driven into a room 18 feet square, with only one small window, and kept there from eight at night till six next morning. Before midnight they all became frantic with agony, fought for the window, choaked each other to death, screamed to the soldiers to shoot them, and thus end their misery; and in the morning only 26 were alive, and these in a putrid fever! the amount of oxygen in the air by breathing, produces languor, sleepiness, nausea, headache, flushed face, and sometimes palsy and apoplexy. Lessening On this subject, the superintendents of the New-York schools make these statements: “Confinement in some of our schoolrooms is . Our children, shut up in these hot holes, made so by their own breaths, by perspiration, and by a close, overheated stove, lay the foundation for diseases which show no gain except to the physician, and which, in after-life, no riding on horseback, or journeys by sea or land, or southern residence can cure.” manslaughter Another states, that the uncomfortable condition of the schoolhouses, in his county, is such as to cause much suffering, both mental and bodily, to the children doomed to inhabit their gloomy walls and breathe the tainted air. Another writes of the schoolhouses in his district, that they are usually low, and in cold weather so overheated as to be hotbeds of disease, the close atmosphere being actually dangerous. One teacher, in one instance, was struck with palsy from the effects of confinement in such a poisonous atmosphere. At a public meeting, one citizen stated it as his conviction, that one of his children died from disease engendered by breathing the pestilential atmosphere of the schoolroom. Instances are numerous where the children come home dull, listless, and with severe colds and coughs. The teacher, in such situations, often loses ambition, energy, and health, and closes school pale and emaciated, perhaps to sink to an early grave, a victim of the poisonous air in which, for day after day, he has been confined. 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. Catharine Esther Beecher (2016). The Duty of American Women to Their Country. Urbana, Illinois: Project Gutenberg. Retrieved https://www.gutenberg.org/cache/epub/53739/pg53739-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 , located at . www.gutenberg.org https://www.gutenberg.org/policy/license.html

Sufferings of Little Children for Want of Pure Air.

The Noonification: Smoke and Mirrors in Pure UIKit (5/19/2023)

As app developers, we're not just coders – we're creators, builders, and sometimes, illusionists. The art of app development goes beyond just code and design. Sometimes, it's about crafting an element of surprise and illusion that captures users' attention and creates an immersive experience. This time around, we're stepping out of our comfort zone of the 2D world, and taking a bold leap into the captivating world of . 3D UIKit is more than a set of tools for building user interfaces. It's a powerful toolkit that, when used right, can create amazing visual effects. In this article, we'll dig deep into UIKit and showcase a technique to create a mirror-like reflection. This effect can give your app a visually impressive and engaging look that typically seems achievable only with complex graphical tools, yet it's crafted with nothing but code. The end result Check out this beautiful, shiny cube. It will never rust, as it doesn't use any Metal. Now, let's learn how to create it using code. Some basics first For our purposes, UIKit serves as a slim layer atop Quartz Core, providing us with free access to its 3D capabilities. A holds a reference to a object, which is the actual component the OS uses for on-screen rendering. There are three properties of that influence its on-screen presentation: position, bounds, and transform. The first two are fairly self-explanatory, while can be initialized with any arbitrary 4x4 matrix. When multiple 3D layers need to be presented simultaneously, we must employ a specialized CATransformLayer, which uniquely preserves the 3D space of its child layers instead of flattening them onto a 2D plane. UIView CALayer CALayer transform A cube Let's begin by drawing a simple cube. First, we'll create a helper function to adjust the position of each side: func setupFace(
    layer: CALayer,
    size: CGFloat,
    baseTransform: CATransform3D,
    translation: (x: CGFloat, y: CGFloat, z: CGFloat),
    rotation: (angle: CGFloat, x: CGFloat, y: CGFloat, z: CGFloat)
) {
    layer.bounds = CGRect(origin: CGPoint(), size: CGSize(width: size, height: size))
    
    var transform = baseTransform
    transform = CATransform3DTranslate(transform, translation.x, translation.y, translation.z)
    transform = CATransform3DRotate(transform, rotation.angle, rotation.x, rotation.y, rotation.z)
    layer.transform = transform
} Next, in the body of our ViewController's function, we will assemble all six sides of the cube: viewDidLoad let cubeLayer = CATransformLayer()
cubeLayer.position = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
view.layer.addSublayer(cubeLayer)

let cubeSize: CGFloat = 200.0

var baseTransform = CATransform3DIdentity
baseTransform = CATransform3DRotate(baseTransform, 0.5, 0.0, 1.0, 0.0)
baseTransform = CATransform3DRotate(baseTransform, -0.5, 1.0, 0.0, 0.0)

let frontFace = CALayer()
frontFace.isDoubleSided = false
frontFace.backgroundColor = UIColor.blue.cgColor
setupFace(layer: frontFace, size: cubeSize, baseTransform: baseTransform, translation: (0.0, 0.0, cubeSize * 0.5), rotation: (0.0, 0.0, 1.0, 0.0))
cubeLayer.addSublayer(frontFace)

let backFace = CALayer()
backFace.isDoubleSided = false
backFace.backgroundColor = UIColor.red.cgColor
setupFace(layer: backFace, size: cubeSize, baseTransform: baseTransform, translation: (0.0, 0.0, -cubeSize * 0.5), rotation: (-.pi, 0.0, 1.0, 0.0))
cubeLayer.addSublayer(backFace)

let leftFace = CALayer()
leftFace.isDoubleSided = false
leftFace.backgroundColor = UIColor.green.cgColor
setupFace(layer: leftFace, size: cubeSize, baseTransform: baseTransform, translation: (-cubeSize * 0.5, 0.0, 0.0), rotation: (-.pi * 0.5, 0.0, 1.0, 0.0))
cubeLayer.addSublayer(leftFace)

let rightFace = CALayer()
rightFace.isDoubleSided = false
rightFace.backgroundColor = UIColor.yellow.cgColor
setupFace(layer: rightFace, size: cubeSize, baseTransform: baseTransform, translation: (cubeSize * 0.5, 0.0, 0.0), rotation: (.pi * 0.5, 0.0, 1.0, 0.0))
cubeLayer.addSublayer(rightFace)

let topFace = CALayer()
topFace.isDoubleSided = false
topFace.backgroundColor = UIColor.cyan.cgColor
setupFace(layer: topFace, size: cubeSize, baseTransform: baseTransform, translation: (0.0, -cubeSize * 0.5, 0.0), rotation: (.pi * 0.5, 1.0, 0.0, 0.0))
cubeLayer.addSublayer(topFace)

let bottomFace = CALayer()
bottomFace.isDoubleSided = false
bottomFace.backgroundColor = UIColor.gray.cgColor
setupFace(layer: bottomFace, size: cubeSize, baseTransform: baseTransform, translation: (0.0, cubeSize * 0.5, 0.0), rotation: (-.pi * 0.5, 1.0, 0.0, 0.0))
cubeLayer.addSublayer(bottomFace) Here's what this code looks like in action: It's undeniably 3D, but something feels off, doesn't it? The concept of 3D perspective in art was first mastered by Italian Renaissance painters in the 15th century. Fortunately, we can achieve a similar effect by just using a perspective projection matrix: var baseTransform = CATransform3DIdentity
baseTransform.m34 = -1.0 / 400.0
baseTransform = CATransform3DRotate(baseTransform, 0.5, 0.0, 1.0, 0.0)
baseTransform = CATransform3DRotate(baseTransform, -0.5, 1.0, 0.0, 0.0) Now let’s look at the result: Better, isn’t it? The term at m34 is what creates the perspective effect. For the actual math, see -1.0 / 400.0 https://www.scratchapixel.com/lessons/3d-basic-rendering/perspective-and-orthographic-projection-matrix/building-basic-perspective-projection-matrix.html Mapping the environment Our goal is to demonstrate a mirror effect, so we'll need something to reflect. In 3D graphics, cube maps are commonly used to simulate reflective surfaces. In our example, we can create one using the actual cube we made earlier. First, we assign images to the corresponding faces: frontFace.contents = UIImage(named: "front")?.cgImage
backFace.contents = UIImage(named: "back")?.cgImage
leftFace.contents = UIImage(named: "left")?.cgImage
rightFace.contents = UIImage(named: "right")?.cgImage
topFace.contents = UIImage(named: "up")?.cgImage
bottomFace.contents = UIImage(named: "down")?.cgImage Next, for every face, we set and increase the size of the cube to . This essentially places the "camera" inside the cube: isDoubleSided = true cubeSize: CGFloat = 2000.0 Next, since we're going to create several cubes at once, let's simplify the setup functions: enum CubeFace: CaseIterable {
    case front
    case back
    case left
    case right
    case top
    case bottom

    func translationAndRotation(size: CGFloat) -> (translation: (x: CGFloat, y: CGFloat, z: CGFloat), rotation: (angle: CGFloat, x: CGFloat, y: CGFloat, z: CGFloat)) {
        switch self {
        case .front:
            return ((0.0, 0.0, size * 0.5), (0.0, 0.0, 1.0, 0.0))
        case .back:
            return ((0.0, 0.0, -size * 0.5), (-.pi, 0.0, 1.0, 0.0))
        case .left:
            return ((-size * 0.5, 0.0, 0.0), (-.pi * 0.5, 0.0, 1.0, 0.0))
        case .right:
            return ((size * 0.5, 0.0, 0.0), (.pi * 0.5, 0.0, 1.0, 0.0))
        case .top:
            return ((0.0, -size * 0.5, 0.0), (.pi * 0.5, 1.0, 0.0, 0.0))
        case .bottom:
            return ((0.0, size * 0.5, 0.0), (-.pi * 0.5, 1.0, 0.0, 0.0))
        }
    }
    
    func texture() -> UIImage? {
        ...
    }
    
    func color() -> UIColor {
        ...
    }
}

func setupFace(
    layer: CALayer,
    size: CGFloat,
    baseTransform: CATransform3D,
    face: CubeFace,
    textured: Bool
) {
    layer.bounds = CGRect(origin: CGPoint(), size: CGSize(width: size, height: size))
    layer.isDoubleSided = textured
    
    let (translation, rotation) = face.translationAndRotation(size: size)
    var transform = baseTransform
    transform = CATransform3DTranslate(transform, translation.x, translation.y, translation.z)
    transform = CATransform3DRotate(transform, rotation.angle, rotation.x, rotation.y, rotation.z)
    layer.transform = transform
    
    if textured {
        layer.contents = face.texture()?.cgImage
    } else {
        layer.backgroundColor = face.color().cgColor
    }
}

func setupCube(
    view: UIView,
    size: CGFloat,
    textured: Bool,
    baseTransform: CATransform3D,
    faces: [CubeFace]
) -> CATransformLayer {
    let cubeLayer = CATransformLayer()
    cubeLayer.position = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
    
    for face in faces {
        let faceLayer = CALayer()
        setupFace(layer: faceLayer, size: size, baseTransform: baseTransform, face: face, textured: textured)
        cubeLayer.addSublayer(faceLayer)
    }
    
    return cubeLayer
} Now, let's render both the cube map and a small cube simultaneously: var baseTransform = CATransform3DIdentity
baseTransform.m34 = -1.0 / 400.0
baseTransform = CATransform3DRotate(baseTransform, 0.5, 0.0, 1.0, 0.0)

view.layer.addSublayer(setupCube(view: view, size: 2000.0, textured: true, baseTransform: baseTransform))
view.layer.addSublayer(setupCube(view: view, size: 100.0, textured: false, baseTransform: baseTransform)) Reflections UIKit is a robust framework, yet it lacks built-in features for complex visual effects. However, it does offer the ability to apply arbitrary masks to objects, and that's precisely what we're going to exploit to create the mirror effect. Essentially, we will render the environment six times, each masked by the corresponding cube face. The tricky aspect is that we can't directly mask a . However, we can circumvent this limitation by nesting it inside a container: CATransformLayer CALayer func setupReflectiveFace(
    view: UIView,
    size: CGFloat,
    baseTransform: CATransform3D,
    face: CubeFace
) -> CALayer {
    let maskLayer = CALayer()
    maskLayer.frame = view.bounds
    maskLayer.addSublayer(setupCube(view: view, size: size, textured: false, baseTransform: baseTransform, faces: [face]))
    
    let colorLayer = CALayer()
    colorLayer.frame = view.bounds
    colorLayer.mask = maskLayer
    colorLayer.addSublayer(setupCube(view: view, size: 2000.0, textured: true, baseTransform: baseTransform, faces: [.front, .back, .left, .right, .top, .bottom]))
    
    return colorLayer
} And now, our viewDidLoad should look like this: var baseTransform = CATransform3DIdentity
baseTransform.m34 = -1.0 / 400.0
baseTransform = CATransform3DRotate(baseTransform, 0.5, 0.0, 1.0, 0.0)

for face in CubeFace.allCases {
    view.layer.addSublayer(setupReflectiveFace(view: view, size: 100.0, baseTransform: baseTransform, face: face))
} This image already closely resembles what we intended to achieve, but at this point, the cube is merely a 3D-esque mask over the cube map. So, how do we transform it into an actual mirror? The Mirror Dimension It turns out there's a straightforward method to mirror the world relative to an arbitrary plane in 3D space. Without delving into complex , this is the matrix we're seeking: mathematics func mirrorMatrix(planePoint: Vector4D, planeTransform: CATransform3D, planeNormal: Vector4D) -> CATransform3D {
    let pt = applyTransform(transform: planeTransform, point: planePoint)
    
    let normalTransform = CATransform3DInvert(planeTransform).transposed
    let normal = applyTransform(transform: normalTransform, point: planeNormal).normalized()
    
    let a = normal.x
    let b = normal.y
    let c = normal.z
    let d = -(a * pt.x + b * pt.y + c * pt.z)
    
    return CATransform3D([
        1 - 2 * a * a, -2 * a * b, -2 * a * c, -2 * a * d,
        -2 * a * b, 1 - 2 * b * b, -2 * b * c, -2 * b * d,
        -2 * a * c, -2 * b * c, 1 - 2 * c * c, -2 * c * d,
        0.0, 0.0, 0.0, 1.0
    ]).transposed
} Next, we incorporate the following code into the cube setup function: func setupCube(
    view: UIView,
    size: CGFloat,
    textured: Bool,
    baseTransform: CATransform3D,
    faces: [CubeFace],
    mirrorFace: CubeFace? = nil
) -> CATransformLayer {
    ...
    if let mirrorFace {
        let mirrorPlane = mirrorFace.transform(size: size, baseTransform: baseTransform)
        let mirror = mirrorMatrix(planePoint: Vector4D(x: 0.0, y: 0.0, z: 0.0, w: 1.0), planeTransform: mirrorPlane, planeNormal: Vector4D(x: 0.0, y: 0.0, z: 1.0, w: 1.0))
        cubeLayer.sublayerTransform = mirror
    }
} And finally, we can behold the shiny cube we've been striving for: Why UIKit? Sure, achieving the same effect might seem easier with Metal or a Metal-based framework like SceneKit. But those come with their own set of limits. The big one? You can't bring live UIKit views into the 3D content drawn by Metal. The method we've looked at in this article lets us display all sorts of content in a 3D setting. This includes maps, videos, and interactive views. Plus, it can smoothly blend with any UIKit animations you might want to use. The source code for this article, along with some helper functions, can be found at https://github.com/petertechstories/uikit-mirrors Happy coding!

Smoke and Mirrors in Pure UIKit

বিশুদ্ধ UIKit-এ ধোঁয়া ও আয়না

Rauch und Spiegel in Pure UIKit

Humo y espejos en UIKit puro

Fumée et miroirs dans Pure UIKit

शुद्ध UIKit में धुआँ और दर्पण

Pure UIKit の煙とミラー

Pure UIKit의 연기와 거울

Fumaça e espelhos em Pure UIKit

Pure UIKit'te Duman ve Aynalar

Khói và Gương trong Pure UIKit

纯 UIKit 中的烟雾和镜子

Purely personal odors

🏆 What will you learn in this tutorial? Single page application fetches and loads the main UI skeleton into the browser only once, during the first fetch. And thereafter, loads the subsequent UI modules dynamically without re-fetching as the user interacts with the app. Look at the example given below. It is a simple single-page application developed using purely HTML, CSS and Javascript. In this tutorial, you are going to learn how to implement it. Open Example In New Tab 💡 What's New In This Tutorial? Front-end frameworks such as React, Angular, Vue, etc. exist today that enable the development of single-page applications. But the development of single-page applications using purely HTML, CSS and Javascript is still not very straightforward. In this tutorial, you will learn about , which allows you to architect HTML applications in a modular fashion. It paves the way for developers to choose just HTML, CSS and Javascript for writing complex apps with a scalable, maintainable and testable codebase. SfNav, a web component ⚠ Before You Begin The following are the pre-requisites for this tutorial: - You need to be familiar with the basic concepts of HTML, CSS & Javascript. You need not be an expert developer, but basic knowledge is necessary. could be a good starting point for this. Familiarity with Web Development W3 Schools Roadmap - In this example, we will use an NPM-based web server. So to follow this tutorial properly, I will recommend that you have npm installed on your development machine. Once you get the hang of it, you can also try the same method on other web servers, no problem! NPM Installation - You will also need a good web editor. I like VS Code. You can use any editor of your choice. Editor 🍽 Step 1 - Project Setup 1.1 Project Directory Create a new folder on your machine for this task. I called it SfNav-Demo. You can name it as you want. 1.2 Initialize NPM npm init Just accept the default values, and keep pressing ENTER until the initialization completes and the package.json file is generated. Your project will now have only one file, namely package.json. 1.2 Create the dist/ folder Create a folder to store all the html files. I called it "dist/". 1.3 Install the HTTP-server packages npm install connect serve-static 1.4 Create index.js Create index.js, to hold the code for the HTTP-server. Paste the code given below in index.js. var connect = require('connect');
var serveStatic = require('serve-static');

connect()
     .use(serveStatic('./dist'))
     .listen(8080, () => console.log('Server running on 8080...')); Your folder structure should look like this: 1.5 Start the HTTP-server Start the web server using the below command node index.js Browse to for confirming that the web server is running. A running server will throw an error message similar to the one given below. This is because we haven't yet created index.html in the dist folder. http://localhost:8080/ 1.6 Create dist/index.html Create index.html file in the dist folder and initialize it with the following code: <html>
hello sfnav
</html> Go back to the browser and refresh it. Confirm that the HTTP-server now serves the index.html page. At this point, the basic project setup is complete. Let us move on to the next steps. 💀 Step 2 - Create The HTML App Skeleton The code of the HTML skeleton is given below. Copy and paste it into your dist/index.html. <!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>&lt;sf-nav&gt; Demo</title>
    
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap" rel="stylesheet">
    
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
    
    <script type="module">
        import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
        import {SfNav} from 'https://unpkg.com/sf-nav/sf-nav.js?module';
    </script>
    <style>
      
      body {
        background-color: #efefef;
        margin: 0px;
        font-family: 'Source Sans Pro';
      }

      sf-nav:not(:defined) {
        display: none;
      }
      
    </style>
  </head>
  <body style="margin: 0px;">
    <sf-nav>

      
      <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
      
      <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>
      
    </sf-nav>
  </body>
</html> This skeleton code does the following: It sets up the viewport It includes the material icons package, which is required by the SfNav web component It includes fonts, although you can use any fonts of your choice It includes the web component loader script It includes the Lit library. SfNav component depends on Lit, hence this inclusion is necessary It includes the SfNav web component library It includes a style block that - (1) Sets some basic styling to the document body and (2) Ensures that the SfNav component will show up only after it is defined properly It then includes/renders the SfNav component in the body HTML with a brand name and brand image. 💾 ↺ Save dist/index.html, and reload the browser. You will see that a bare-bones navigation component has loaded which only contains the brand name and brand image. The point to note is that it contains both the header part and the footer part. ⥣ Step 3 - Setup Routing 3.1 Understanding Links SfNav recognizes routes that are prefixed with hash. For example, in the file dist/index.html, the brand name and the brand image are linked to #home, which essentially means that the component home.html will be loaded if the user clicks on either of the brand name and the brand image links. 3.2 Setup Route Container Create a page content slot in the sf-nav block as shown below. This container sits between the header and footer and dynamically displays the page content as the user navigates across pages. <sf-nav>

        
        <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
        
        <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>

        
        <div slot="content">
        </div>
      
</sf-nav> 3.3 Setup Parameter Passing To enable parameter pass-down during routing, include the following Javascript code block in the sf-nav block. This code block: Listens to the routeChange event from SfNav and updates the routeMap associative array with the new route and its parameters, every time the routeChange event is fired. Exposes two functions - (1) getCurrentPathname and (2) getCurrentArgs, which can be used to obtain the current location and the current parameters. <body>
    <sf-nav>

        <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
        
        <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>
        
        <div slot="content">
        </div>
    </sf-nav>

    <script>
        var routeMap = [];
  
        function getCurrentPathName() {
          return window.location.hash.length === 0 ? '' : window.location.hash.split("/")[0].replace('#', '');
        }
        function getCurrentArgs() {
          return routeMap[getCurrentPathName() + '.html'];
        }
  
        document.getElementsByTagName('sf-nav')[0].addEventListener('routeChange', (e) => {
          routeMap[e.detail.pathName] = e.detail.args;
        })
    </script>

</body> 3.4 Confirm That Routing Works At this point, the routing configuration is complete. 💾 ↺ Save dist/index.html, and reload the browser. You will observe the following: The header and the Footer are now separated with a content block in between. SfNav now throws the 'Could not find home.html' message. Don't worry, this is perfectly fine because we haven't yet created the home.html file. 3.5 Create dist/home.html Create a new file dist/home.html with the below HTML: <div class="cContainer">
    <h1>Home Page</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div> 💾 ↺ Save dist/home.html, and reload the browser. The home page content will now load. You will observe that the content loads properly. Let us style it a bit, so that it looks a bit nicer. Add the following styles in the style block of dist/index.html: <head>
    <style>
        
        
        .cContainer {
            margin: 10px;
            padding: 20px;
            border: dash 1px gray;
        }
    </style>
</head> 💾 ↺ Save dist/index.html, and reload the browser. This looks good for now. We can surmise now that routing is working normally. Let us move ahead. 🍔 Step 4 - Setup Main Menu SfNav supports two-level menus. Creating it is pretty straightforward. Create an unordered list as shown below and set it to the main menu slot. Some menu items point to internal links (links with hash) and some menu items point to external links (links with http(s)). <body>
    <sf-nav>
        
        <ul slot="mainMenu">
            <li><a href="#about">About</a></li>
            <li class="li-solutions">
                <a href="javascript:void(0);" class="a-solutions">Solutions</a>
                <ul>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#products">Products</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">Contact Us</a>
                <ul>
                    <li><a href="https://instagram.com">Instagram</a></li>
                    <li><a href="https://facebook.com">Facebook</a></li>
                    <li><a href="https://youtube.com">YouTube</a></li>
                </ul>
            </li>
        </ul>
    </sf-nav>
</body> 💾 ↺ Save dist/index.html, and reload the browser. If you click on any menu items with internal links such as services, products, you will observe that SfNav throws the file not found message. This is because we haven't yet created these files. 📝 Quick Task Go ahead and create and with any content of your choice and observe how it is rendered. services.html products.html Drop your observations in the comments section! 🔎 Step 5 - Setup Search Search functionality is available by default. Just subscribe to the searchClick event to capture the event when the user types something in the search box and presses Enter. <script>
document.getElementsByTagName('sf-nav')[0].addEventListener('searchClick', (e) => {console.log('search clicked ' + JSON.stringify(e.detail));})
</script> 🦜 Step 6 - Setup Social Media Links Social media links can be configured using an unordered list as well. Below is an example: <body>
    <sf-nav>
        
        
        <ul slot="socialMedia">
            <li><a href="https://facebook.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/facebook-black_round.png" /></a></li>
            <li><a href="https://twitter.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/twitter_black_round.png" /></a></li>
            <li><a href="https://youtube.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/youtube_black_round.png" /></a></li>
        </ul>

    </sf-nav>
</body> 💾 ↺ Save dist/index.html, and reload the browser. 🔔 Step 7 - Setup Notifications 7.1 HTML Configuration The notifications section has three parts - (1) Unread notifications, (2) Read notifications and (3) View-all link. Configuration is shown below: <body>
    <sf-nav>
        
        
        <ul slot="unreadNotifications">
            <li><a href="#notification/1"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
            <li><a href="#notification/2"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
            <li><a href="#notification/3"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
        </ul>
        <ul slot="readNotifications">
            <li><a href="#notification/4"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
            <li><a href="#notification/5"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
            <li><a href="#notification/6"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
        </ul>
        
    </sf-nav>
</body> 💾 ↺ Save dist/index.html, and reload the browser. If you try clicking on any notification, you will see the file not found message. This is fine because we haven't yet created dist/notification.html. Shall we do that now? 7.2 Create dist/notification.html Create a new file dist/notification.html. Copy and paste the HTML code given below into it. <div class="cContainer">
    <h1>Notification Page</h1>
    <h2></h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<script>
    document.getElementsByClassName('cContainer')[0].children[1].innerHTML = 'Arguments: ' + JSON.stringify(getCurrentArgs())
</script> 💾 ↺ Save dist/notification.html, and reload the browser. Go ahead, and try clicking on any of the notifications. You will observe the following: The notification page will render. The URL parameters or arguments such as #notification/1 or #notification/2 will be passed down to the notification component and rendered as well. Quick Note This is essentially routing at work where the parameters from the browser address bar are fed to the notification component. © Step 8 - Copyright Notice Copyright notice can be configured in the footer as follows: <body>
    <sf-nav>
        
        
        <p slot="copyright">Copyright 2022 Superflows</p>

    </sf-nav>
</body> 💾 ↺ Save dist/notification.html, and reload the browser. The copyright notice will be displayed in the footer. 🕺 Step 9 - Setup Call To Action Button Most navbars have a call to action button. In SfNav, it can be configured as follows: <a slot="cta" href="#login">Sign In</a> 💾 ↺ Save dist/notification.html, and reload the browser. The call to action button will be displayed in the header. 👨👩 Step 10 - Setup User Profile The user profile section contains two parts - (1) The profile picture toggle and (2) The profile menu. Both parts can be configured as follows: <body>
    <sf-nav>
        
        
        <img alt="profile" slot="profilePicture" src="https://preview.keenthemes.com/metronic-v4/theme/assets/pages/media/profile/profile_user.jpg" />

        
        <ul slot="profileMenu">
            <li><a href="#settings">My Profile</a></li>
            <li>
                <a href="javascript:void(0);">Settings</a>
                <ul>
                    <li><a href="#settings_data">Data & Privacy</a></li>
                    <li><a href="#settings_notifications">Notifications</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">Support</a>
                <ul>
                    <li><a href="#ticket">Create Ticket</a></li>
                    <li><a href="#chat">Chat With Us</a></li>
                </ul>
            </li>
            <li><a href="#signout">Sign Out</a></li>
        </ul>

    </sf-nav>
</body> 💾 ↺ Save dist/notification.html, and reload the browser. 🔴🟢🔵 Step 11 - Theme The User Interface Let us now modify the colours, to make the UI more attractive and customizable to your needs. For the sake of this tutorial, we have used some colours, but you are free to choose any colours. Add the below-given styles to the style block of dist/index.html. <style>

    sf-nav {
        --nav-background-color: rgb(4, 135, 205);
        --nav-color: #fff;
        --notif-background-color: rgb(4, 135, 205);
        --notif-color: #fff;
        --menu-background-color: rgb(49, 161, 222);
        --menu-color: #fff;
        --footer-background-color: rgb(167, 147, 60);
        --footer-color: #fff;
    }

</style> 💾 ↺ Save dist/notification.html, and reload the browser. Conclusion That is it then! I have shown you how to create a single-page web application with a modular code architecture using SfNav, a web component provided by Superflows. If you have any questions, do not hesitate to drop a comment below and I would be happy to answer. Please find a video of the same tutorial below: https://www.youtube.com/watch?v=ZGDhUaleN84&embedable=true Resources Documentation Read Demo Project View Demo YouTube Channel View Channel Join The Community Join Now Also published . here

Creating a Single Page Modular App Architecture Using Pure HTML, CSS & Javascript

Stories, News & Mentions about PURE

Pure’s Stories on HackerNoon

Pure's News & Mentions