Double-digit Growth in NGL and Natural Gas Processing Volumes Increases Financial Guidance for the Second Time in 2023 TULSA, Okla., Oct. 31, 2023 /PRNewswire/ -- ONEOK, Inc. (NYSE: OKE) today announc

Oneok, Inc.: ONEOK Announces 5% Increase in Third Quarter 2023 Net Income and 11% Increase in Adjusted EBITDA Including Transaction Costs

"ONEOK's businesses continued to perform extremely well in the third quarter," said Pierce H. Norton II, ONEOK president and chief executive officer. "Double-digit volume growth in our natural gas liquids and natural gas gathering and processing businesses ...

ONEOK Announces 5% Increase in Third Quarter 2023 Net Income and 11% Increase in Adjusted EBITDA Including Transaction Costs

This suggests that an escalation of the conflict could trigger sharp oil supply disruptions, depending on the duration and scale of the escalation.” Since the beginning of the conflict in early October, energy prices have already increased by 9% ...

‘Dual Energy Shock’: World Bank Warns of Skyrocketing Oil Prices Amid Israel-Hamas Conflict

Heightened geopolitical tension is raising the risks of an oil shock at a challenging moment. The world’s major central banks’ task of regaining inflation control is far from done, and the world economy is slowing.

Oil Prices May Not Stay Well-Behaved. What a New Oil Shock Would Mean.

A BP oil refinery is seen in Gelsenkirchen, Germany. The World Bank says oil prices could be pushed into “uncharted waters” if the violence between Israel and Hamas were to escalate. The organization's Commodity Markets Outlook finds that the effects on oil prices should be limited if the conflict doesn’t widen. (AP Photo/Martin Meissner, File)

Mon. 11:01 a.m.: Oil prices could reach ‘uncharted waters’ if the Israel-Hamas war escalates, the World Bank says

"If a severe oil-price shock materializes, it would push up food price inflation that has already been elevated in many developing countries." The World Bank report said that China's oil demand was surprisingly resilient given strains in the country's real estate sector,

World Bank sees lower 2024 oil price, but Middle East war could cause spike

The draft lays out some broad intentions to bring more renewable energy to the state. It also calls for the controversial Alaska LNG pipeline. The draft lays out some broad intentions to bring more renewable energy to the state.

State’s draft energy plan highlights familiar Alaska megaprojects, offers vague plans for renewables

Oneok Inc. (OKE) reachead $65.44 at the closing of the latest trading day, reflecting a -1.33% change compared to its last close.

Oneok Inc. (OKE) Sees a More Significant Dip Than Broader Market: Some Facts to Know

HOUSTON--(BUSINESS WIRE)--PACIFIC COAST OIL TRUST (OTC–ROYTL) (the “Trust”), a royalty trust formed by Pacific Coast Energy Company LP (“PCEC”), announced today that there will be no cash distribution to the holders of its units of beneficial ...

Pacific Coast Oil Trust Announces There Will Be No October Cash Distribution

Some of the world's largest national oil companies (NOCs) have improved significantly their resilience to oil price slumps in the near future

National Oil Companies Aren't Ready For The Energy Transition

Oneok

oneok

Here’s my to-do list currently — of course, there are a lot of tasks. As I’m sitting at my desk, staring at this long, overwhelming list, I can feel the familiar frustration bubbling up. You know that feeling when you have so much to do that you don’t even know where to start? That was me. My mind was spinning in this chaos. But then I remembered something from The One Thing. This book by Gary W. Keller and Jay Papasan has a simple question that helps me break free from the cycle of overwhelm and uncertainty over and over again: What’s the one thing I want to do today? Or the longer version: What’s the one thing I can do such that by doing it, everything else will be easier or unnecessary Why does this approach help? Simple, It eliminates multitasking (which is a productivity killer)


It helps you prioritize ruthlessly


It keeps you on track with your big goals This quote from The One Thing hits home for me: “Not everything matters equally, and success isn’t a game won by whoever does the most. We can’t fall prey to the notion that everything has to be done, that checking things off our list is what success is all about. Achievers decide what matters and then allow what matters to drive their day. They do those things sooner and focus on them.” So, “The trick to success is to choose the right habit and bring just enough discipline to establish it.” So, what is this question really about? “What’s the ONE thing I can do… ONE thing: You are allowed to pick one thing and one thing only
Can do: You can do it — execute it “… such that by doing it… This part challenges you to dig deep because when you do this one thing, you’re setting something else in motion. “… everything else will be easier or unnecessary?” When you do this one thing, everything else on your list either becomes easier or, in many cases, unnecessary. Most people don’t realize how much they don’t need to do if they just focus on doing the right thing. What to do with this question? ie Simple Path to Productivity 1. Keep asking the One Thing question, both for your long-term vision and your daily routine. The Big-Picture Question: “What’s my ONE Thing?” Use this to develop a vision for your life and the direction for your career or company; The Small-Focus Question: “What’s my ONE Thing right now?” Use this when you first wake up and throughout the day. 2. Find a great answer to that question. Ok, How? Gary W. Keller and Jay Papasan suggest 2-step approach: Find the best research, study of the highest achievers
Look for the next step that aligns with their trajectory — or if needed, go in a completely new direction. 3. Do it. Once you’ve found that next step, time block it. Treat that time like it’s sacred, protecting it as though it’s your most valuable asset. As Keller and Papasan remind us: “When your willpower is its highest, do the priority/one thing work.” How do I apply it to my life? Return to my face-in-palm moment when I was overwhelmed by my to-do list. I asked myself the One Thing question and realized the one thing I needed to accomplish today was: Practice my pitch for tomorrow’s presentation in front of 300 investors. Duh, why was I even struggling to figure this out? Once I finished it, my next one thing was: Write this Substack post, cause I’ve delayed it and I know that the value of this post will compound over time After answering the question, I blocked time, locked myself in a room, and got to work. There’s no better feeling than being fully in the moment, knowing that you’re doing exactly what you need to be doing. How you can apply right away? For your endless todo: Pause for five minutes.
Ask yourself: What’s the one thing I can do such that by doing it, everything else will be easier or unnecessary?
Be super honest with yourself — answer it.
Block time for that one thing and get it done. Bonus tip: If you have extra time, spend a little researching or planning to ensure that you’ve picked the right One Thing. For Random Events and Life Situations Here’s another way I use this framework: when you’re at a networking event or listening to a speaker and you don’t know what to ask, just apply the One Thing question. What is the one thing about [the topic] that help you achieve XXX / you are passionate about?
“What’s the one thing about skiing that you really love?”
“What’s the one thing about marketing that helped you scale to $1M ARR?” There you have it — a simple, applicable framework that’s helped me overcome task paralysis and overwhelm countless times as a knowledge worker, a founder, and even during those awkward moments at networking events. Bonus We also apply this approach for our AI Task Assistant on Saner.AI → Help you prioritize and focus on one thing, each task that matters. It’s available for our early access group now and will be live in a couple of weeks. Stay tuned! If you want to try it early, just DM me :) Here’s my to-do list currently — of course, there are a lot of tasks. As I’m sitting at my desk, staring at this long, overwhelming list, I can feel the familiar frustration bubbling up. You know that feeling when you have so much to do that you don’t even know where to start? That was me. My mind was spinning in this chaos. But then I remembered something from The One Thing . This book by Gary W. Keller and Jay Papasan has a simple question that helps me break free from the cycle of overwhelm and uncertainty over and over again: The One Thing The One Thing What’s the one thing I want to do today? What’s the one thing I want to do today? Or the longer version: What’s the one thing I can do such that by doing it, everything else will be easier or unnecessary What’s the one thing I can do such that by doing it, everything else will be easier or unnecessary Why does this approach help? Simple, It eliminates multitasking (which is a productivity killer) It helps you prioritize ruthlessly It keeps you on track with your big goals It eliminates multitasking (which is a productivity killer) It eliminates multitasking (which is a productivity killer) It helps you prioritize ruthlessly It helps you prioritize ruthlessly It keeps you on track with your big goals It keeps you on track with your big goals This quote from The One Thing hits home for me: The One Thing “Not everything matters equally, and success isn’t a game won by whoever does the most. We can’t fall prey to the notion that everything has to be done, that checking things off our list is what success is all about. Achievers decide what matters and then allow what matters to drive their day. They do those things sooner and focus on them.” “Not everything matters equally, and success isn’t a game won by whoever does the most. We can’t fall prey to the notion that everything has to be done, that checking things off our list is what success is all about. Achievers decide what matters and then allow what matters to drive their day. They do those things sooner and focus on them.” “Not everything matters equally, and success isn’t a game won by whoever does the most. We can’t fall prey to the notion that everything has to be done, that checking things off our list is what success is all about. Achievers decide what matters and then allow what matters to drive their day. They do those things sooner and focus on them.” So, “The trick to success is to choose the right habit and bring just enough discipline to establish it.” “The trick to success is to choose the right habit and bring just enough discipline to establish it.” “The trick to success is to choose the right habit choose the right habit and bring just enough discipline to establish it.” bring just enough discipline to establish it.” So, what is this question really about? “What’s the ONE thing I can do… ONE thing: You are allowed to pick one thing and one thing only Can do: You can do it — execute it ONE thing: You are allowed to pick one thing and one thing only Can do: You can do it — execute it “… such that by doing it… This part challenges you to dig deep because when you do this one thing, you’re setting something else in motion. This part challenges you to dig deep because when you do this one thing, you’re setting something else in motion. “… everything else will be easier or unnecessary?” When you do this one thing, everything else on your list either becomes easier or, in many cases, unnecessary. Most people don’t realize how much they don’t need to do if they just focus on doing the right thing. When you do this one thing, everything else on your list either becomes easier or, in many cases, unnecessary. Most people don’t realize how much they don’t need to do if they just focus on doing the right thing. What to do with this question? ie Simple Path to Productivity 1. Keep asking the One Thing question, both for your long-term vision and your daily routine. The Big-Picture Question: “What’s my ONE Thing?” “What’s my ONE Thing?” Use this to develop a vision for your life and the direction for your career or company; Use this to develop a vision for your life and the direction for your career or company; The Small-Focus Question: “What’s my ONE Thing right now?” “What’s my ONE Thing right now?” Use this when you first wake up and throughout the day. Use this when you first wake up and throughout the day. 2. Find a great answer to that question. Ok, How? Gary W. Keller and Jay Papasan suggest 2-step approach: Find the best research, study of the highest achievers Look for the next step that aligns with their trajectory — or if needed, go in a completely new direction. Find the best research, study of the highest achievers Look for the next step that aligns with their trajectory — or if needed, go in a completely new direction. 3. Do it. Once you’ve found that next step, time block it. Treat that time like it’s sacred, protecting it as though it’s your most valuable asset. time block As Keller and Papasan remind us: “When your willpower is its highest, do the priority/one thing work.” “When your willpower is its highest, do the priority/one thing work.” How do I apply it to my life? Return to my face-in-palm moment when I was overwhelmed by my to-do list. I asked myself the One Thing question and realized the one thing I needed to accomplish today was: Practice my pitch for tomorrow’s presentation in front of 300 investors. Duh, why was I even struggling to figure this out? Practice my pitch for tomorrow’s presentation in front of 300 investors. Duh, why was I even struggling to figure this out? Practice my pitch for tomorrow’s presentation in front of 300 investors. Duh, why was I even struggling to figure this out? Once I finished it, my next one thing was: Write this Substack post, cause I’ve delayed it and I know that the value of this post will compound over time Write this Substack post, cause I’ve delayed it and I know that the value of this post will compound over time Write this Substack post, cause I’ve delayed it and I know that the value of this post will compound over time After answering the question, I blocked time, locked myself in a room, and got to work. There’s no better feeling than being fully in the moment, knowing that you’re doing exactly what you need to be doing. How you can apply right away? For your endless todo: Pause for five minutes. Ask yourself: What’s the one thing I can do such that by doing it, everything else will be easier or unnecessary? Be super honest with yourself — answer it. Block time for that one thing and get it done. Pause for five minutes. Ask yourself: What’s the one thing I can do such that by doing it, everything else will be easier or unnecessary? What’s the one thing I can do such that by doing it, everything else will be easier or unnecessary? Be super honest with yourself — answer it. Block time for that one thing and get it done. Bonus tip : If you have extra time, spend a little researching or planning to ensure that you’ve picked the right One Thing . Bonus tip One Thing For Random Events and Life Situations Here’s another way I use this framework: when you’re at a networking event or listening to a speaker and you don’t know what to ask, just apply the One Thing question. One Thing What is the one thing about [the topic] that help you achieve XXX / you are passionate about? “What’s the one thing about skiing that you really love?” “What’s the one thing about marketing that helped you scale to $1M ARR?” What is the one thing about [the topic] that help you achieve XXX / you are passionate about? “What’s the one thing about skiing that you really love?” “What’s the one thing about marketing that helped you scale to $1M ARR?” There you have it — a simple, applicable framework that’s helped me overcome task paralysis and overwhelm countless times as a knowledge worker, a founder, and even during those awkward moments at networking events. Bonus We also apply this approach for our AI Task Assistant on Saner.AI → Help you prioritize and focus on one thing, each task that matters. Saner.AI It’s available for our early access group now and will be live in a couple of weeks. Stay tuned! If you want to try it early, just DM me :)

Feeling Overwhelmed With Tasks? Here's One Question to Help You Overcome Them

I Asked GPT-4o About AGI. It Was the Most Horrifying Answer of Them All.

When using the Angular CDK Overlay module, you will likely want to transition the opening and closing of the overlay content. It’s something that seems like it should be pretty easy and straightforward, but it’s actually a little tricky. It can’t really be transitioned with only because it’s a markup that gets added into and removed from the document. It’s not a simple style or class change. We need to leverage Angular animations to make it work well. In this post I’ll show you why and I’ll show you how to make animations work for your overlays. Alright, let’s get to it! CSS https://youtu.be/JEKQ21mXyA0?embedable=true Ok, before we get too far along, I’ve created several posts on the Angular CDK Overlay module where I demonstrate how to set up overlays for some common scenarios, how they are positioned, and how they react when scrolling the containers they are contained within. Angular CDK Overlay Tutorials: Learn the Basics How Positioning Works Scroll Strategies So, if you’re new to these concepts, you’ll probably want to check them out first because everything we’ll see in this post will build off the concepts from those videos. The Demo Application Ok, here we have the example that we’ve been working on throughout the videos on the Overlay module. It’s a list of NBA players, and when we click the button on the right, we get a pop-up that’s created with the Overlay module with more details about the player. It works well, but we want to ease in the pop-up when it opens, and then we want to ease it out when it closes. This should be easy, right? Using an Angular and Animation to Animate the CDK Overlay :enter :leave If you’ve used Angular animations in the past, you’d probably expect to use a simple and animation. This type of animation in Angular allows us to animate items that are physically entering into and out of the DOM. This is something that CSS currently does not support. :enter :leave So, let’s try this and see what happens. Creating an :enter/:leave Animation in the Component Animations Metadata Let’s start by adding the animations array. Within this array, let’s add a trigger. We’ll call it “animation”. player-details.component.ts @Component({
    selector: 'app-player-details',
    ...
    animations: [
        trigger('animation', [
        ])
    ]
}) Then, let’s add a transition for our event. Well use the method to add the style we’ll start from. We’ll add a style object where we’ll start from an opacity of zero. And, we’ll start from a scale of point eight. Then, we’ll use the method; for the timings, we’ll use a duration of zero point one five seconds, and we’ll use for our timing function. And we’ll animate to another style object. This time, we’ll be transitioning to an opacity of one and a scale of one as well. :enter style() animate() ease-in-out @Component({
    selector: 'app-player-details',
    ...
    animations: [
        transition(':enter', [
            style({
                opacity: 0,
                transform: 'scale(0.8)'
            }),
            animate('0.15s ease-in-out', style({
                opacity: 1,
                transform: 'scale(1)'
            }))
        ])
    ]
}) Now we’ll add another transition for our :leave state. This time we’ll start from our open state with a style object containing an opacity of one and a scale of one too. Then, we’ll add another animation function. We’ll add the same timing, zero point one five seconds with an timing function. We’ll add another style object to animate to an opacity of zero and a scale of zero point eight, so the inverse of our enter animation. ease-in-out @Component({
    selector: 'app-player-details',
    ...
    animations: [
        trigger('animation', [
            transition(':enter', [
                style({
                    opacity: 0,
                    transform: 'scale(0.8)'
                }),
                animate('0.15s ease-in-out', style({
                    opacity: 1,
                    transform: 'scale(1)'
                }))
            ]),
            transition(':leave', [
                style({
                    opacity: 1,
                    transform: 'scale(1)'
                }),
                animate('0.15s ease-in-out', style({
                    opacity: 0,
                    transform: 'scale(0.8)'
                }))
            ])
        ])
    ]
}) Binding the Animation to the Component Host With the Decorator @HostBinding Ok, now we have the animation setup, but we need to bind it to our player details host element. So, we need to add the decorator. We’ll add our animation trigger, then we’ll create an “animationState” property, and we’ll set it to true so that our animation will properly be bound on the host. @HostBinding export class PlayerDetailsComponent {
    @HostBinding('@animation') animationState = true;
} Ok, now let’s check this out and see what happens. Nice, the animation on open looks great but when we close it looks like it didn’t animate. And, this is because a leave event didn’t fire for this inner component that we’re trying to animate. The overlay is destroyed and removed before the close animation can run. The overlay is detached before the animation completes. We need to complete the close animation before the overlay is detached. So, we’re going to need to do this a different way. Using an Angular State-based Animation to Animate the CDK Overlay What we can do here is actually switch to a state-based animation. We’ll go with the concept of having a “hidden” state and a “visible” state for our overlay content. Creating a State-based Animation in the Component Animations Metadata Let’s remove the code for the :enter/:leave animation and then replace it with our hidden state. We’ll add a style object with opacity zero and a scale of zero point eight. @Component({
    selector: 'app-player-details',
    ...
    animations: [
        trigger('animation', [
            state('hidden', style({
                opacity: 0,
                transform: 'scale(0.8)'
            })
        ])
    ]
}) Then, we’ll add another state call for our visible state. This state will have a style object with an opacity of one and a scale of one as well. @Component({
    selector: 'app-player-details',
    ...
    animations: [
        trigger('animation', [
            state('hidden', style({
                opacity: 0,
                transform: 'scale(0.8)'
            }),
            state('visible', style({
                opacity: 1,
                transform: 'scale(1)'
            }))
        ])
    ]
}) Alright, now we just need to add the transition between these states, so let’s add the transition function. And we’ll transition between hidden and visible states. We’ll also animate this transition with the animation function. Our animation will run over zero point one for five seconds and will use an timing function. ease-in-out @Component({
    selector: 'app-player-details',
    ...
    animations: [
        trigger('animation', [
            state('hidden', style({
                opacity: 0,
                transform: 'scale(0.8)'
            }),
            state('visible', style({
                opacity: 1,
                transform: 'scale(1)'
            })),
            transition('hidden <=> visible', animate('0.15s ease-in-out'))
        ])
    ]
}) Ok, now, for this animation to work correctly, we’ll need to switch our from a Boolean to a hidden/visible string instead, so we’ll initialize it to hidden. animationState export class PlayerDetailsComponent {
    @HostBinding('@animation') animationState = 'hidden';
} Triggering the State-based Animation When Opening and Closing the CDK Overlay Now, when the component is created, we’ll set this property to visible, which will then trigger the open animation to run. We need to add the AfterViewInit lifecycle hook for this. And we’ll need to implement the interface too. Then, within the hook, we’ll set our to visible. animationState export class PlayerDetailsComponent implements AfterViewInit {
    ...
    ngAfterViewInit() {
        this.animationState = 'visible';
    }
} That will trigger the animation on open. Now, we need to handle the close. To do this, we need to do a few things. First, let’s add a public close method. Inside of this method, let’s set our animationState to hidden. export class PlayerDetailsComponent implements AfterViewInit {
    ...
    close() {
        this.animationState = 'hidden';
    }
} Ok, now, in our player component that opens this pop-up, we need to be able to access the instance of our player details component so that we can call the close method that we just added. We’ll use the view child decorator to do this. Its selector will be the , and we’ll name this property . It will be typed to the as well. PlayerDetailsComponent detailsComponent PlayerDetailsComponent player.component.ts export class PlayerComponent {
    @ViewChild(PlayerDetailsComponent) detailsComponent!: PlayerDetailsComponent;
} Ok, now, in our component template, in the event, we’ll now call our method instead of setting our property to false. overlayOutsideClick detailsComponent.close() detailsOpen player.component.html <ng-template
    cdkConnectedOverlay
    ...
    (overlayOutsideClick)="detailsComponent.close()">
</ng-template> So, this will trigger the close animation to run, but it will not actually detach the overlay. In order to properly detach the overlay, we need to wait until the close animation completes and then notify the player component so that it can properly detach the overlay. Using the Angular Animation Done Event and an EventEmitter to Close the CDK Overlay So, back over in the player details component, we need to add an that will emit when the animation completes. We can add the output decorator with a closed property. This property will be a void event emitter. We’ll fire it when the close animation completes. @Output player-details.component.ts export class PlayerDetailsComponent implements AfterViewInit {
    ...
    @Output() closed = new EventEmitter<void>();
} Now, we need a way to wire up to the close animation done event. To do this, we’ll use an animation-done event callback. Since our animation is bound to the host of this component, we’ll need to use the decorator to listen for the animation done event. And we’ll need to pass through the event. Then, we’ll create a done method. And it will have an event parameter that will be typed to an event. Within this method, we need to check if we are animating to the hidden state. Then, within this check, we’ll emit our closed event. @HostListener AngularAnimation export class PlayerDetailsComponent implements AfterViewInit {
    ...
    @HostListener('@animation.done', ['$event']) done(event: AnimationEvent) {
        if (event.toState === 'hidden') {
            this.closed.emit();
        }
    }
} The last thing we need to do is detach the overlay when this event fires. So, let’s go back to the player component template. On our player details component, let’s add our closed event. When it fires, we’ll set the property to false. detailsOpen <ng-template
    cdkConnectedOverlay
    ...>
    <app-player-details [player]="player" (closed)="detailsOpen = false"></app-player-details>
</ng-template> Ok, now it will still transition as it opens and it will now transition when when it closes too. Cool, so now we have a working open and close animation for our pop-ups, but we can make it even better. Making the Animation Better With the @Input cdkConnectedOverlayTransformOriginOn The directive provides the ability for us to specify the item to place a on in order to better animate the overlay from the origin element. To do this, we can add the and in this case, we are animating the element, so we’ll set that as the selector for this input. cdkConnectedOverlay transform-origin cdkConnectedOverlayTransformOriginOn @Input app-player-details <ng-template
    cdkConnectedOverlay
    ...
    cdkConnectedOverlayTransformOriginOn="app-player-details">
</ng-template> Nice, now our pop-up will animate from and to the attachment point on the origin. Ok, so now you know how to animate the opening and closing of overlays. I hope this helps you as you build out modals, pop-ups, tool tips and similar items in your angular apps. Keep an eye out for more videos on the Overlay module in the future. Found This Helpful? If you found this article helpful and want to show some love, you can always buy me a coffee! Want to See It in Action? Check out the demo code and examples of these techniques in the in the stackblitz example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://stackblitz.com/edit/stackblitz-starters-hi2gdg?ctl=1&embed=1&file=src%2Fplayer%2Fplayer-details%2Fplayer-details.component.ts&embedable=true Also published . here

Animating Angular CDK Overlays

Most of the time, when creating responsive applications in Angular, we just need to use CSS and media queries. Every once in a while though, we need to alter some interactivity or logic based on these same media queries. Meaning, we need to access them in some way from JavaScript. And this can get a little messy sometimes. Luckily for us, we can use the Breakpoint Observer utility provided by the Angular CDK. Let’s check it out! https://youtu.be/aKxFbZG_3go?embedable=true To start off, we really should avoid doing this type of thing if possible. If we can simply change some style with a media query in CSS, that’s going to provide the best experience. This technique should really only be used when style isn’t the only thing that needs to be changed. Like, when logic or functionality is involved. What is the Angular CDK Breakpoint Observer? Ok, so what is the Breakpoint Observer? Well, it’s a utility that is part of the Angular CDK or Component Development Kit. And, you can probably guess by its name, but it allows us to monitor media queries programmatically and then react to them as needed. It’s probably easiest to understand through an example, so, let’s look at one. Ok, here we have this layout with our navigation next to our main content. And, when we resize this smaller, the menu is hidden. We can toggle the sidebar display by clicking the "Show Menu" button in the upper right corner. So far, so good. But where the problem comes in, is when we toggle the menu open, then resize larger, and then resize smaller again, the menu is still open. We don’t want this. What we really want to do here is remove the class that makes this visible as soon as we resize to where the menu is always visible. That way, when we shrink back down, it will start off hidden again. So in our code, we are simply toggling the isVisible property when we click the button. nav.component.html <button (click)="isVisible = !isVisible">
  {% raw %}{{ isVisible ? 'Hide Menu' : 'Show Menu' }}{% endraw %}
</button> Then, we bind this visible class on our nav element when true. <nav [class.visible]="isVisible">
  ...
</nav> That class is what positions the menu and makes it visible. So, we’re going to want to set this property to false at the breakpoint where the menu becomes always visible again. Alright, to begin using the Breakpoint Observer, you need to have the Angular CDK installed. To do this, you just need to use your command line from within your angular app, and run the following command: npm i @angular/cdk That will properly install the CDK and all of its dependencies so that we can use them. Now, in this demo project, I’ve already installed it so we’re ready to use it. We start by injecting it within our constructor. nav.component.ts import { BreakpointObserver } from '@angular/cdk/layout';

@Component({
  selector: 'app-nav',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent {
    constructor(private breakpointObserver: BreakpointObserver) {}
} Now, what we want to do is react when our browser is resized and the breakpoint that hides our menu no longer matches. This style change occurs at a of . max-width 585px Now, in our ngOnInit method, we’ll access our breakpoint observer. We'll use its use the observe method. This method takes either a single media query as a string, or an array of media query strings. In our case, we have a single media query, a of , so we’ll add it. max-width 585px This method returns an observable that will fire with a value of a object which contains a matches Boolean value. This value will be true when we are matching our breakpoint, so when we are narrower than . And, since it’s an observable we’ll need to subscribe. But, before we do, we need to make sure to properly remove the subscription on destroy. So we add our pipe, then our , and then we pass it our . Then we’ll name the state object returned, state. BreakpointState 585px takeUntilDestroyed DestroyRef When this state does not match, we’ll want to set our property to false. The observe method fires with a value every time the viewport is resized and it will simply set this property to true when it matches and false when it doesn’t. isVisible @Component({
  selector: 'app-nav',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent {
    protected isVisible = false;

    constructor(private breakpointObserver: BreakpointObserver,
                private destroyRef: DestroyRef) {}

    ngOnInit() {
      this.breakpointObserver.observe(`(max-width: 585px)`)
        .pipe(takeUntilDestroyed(this.destroyRef))
        .subscribe(state => {
          if (!state.matches) {
            this.isVisible = false;
          }
        });
    }
} Now, when we resize down, the menu is hidden. Then, when we open it, and resize wider, and then back down, we see that the menu is no longer open. Just like we wanted. Now, one thing I don’t like about our current set up is that we have our media query breakpoint in two locations. Once in our CSS, and then again in our breakpoint observer observe method. This could be pretty error prone. If we were to change the breakpoint where our menu becomes hidden and forget to update in the breakpoint observer, things would not work as expected. So, what I like to do is share this media query between the CSS and JavaScript maintaining it in a single location. To do this we can move the breakpoint to a sass variable that we can use in our media query. nav.component.scss $menuHidden: 585px; Then, on the host, I add a custom property with this same variable. For this, we need to use sass string interpolation for the variable because, if we don’t, the variable name with dollar sign and everything will be the rendered value for this custom property. We obviously don’t want that. What we do want is the actual value, so we use the hash and curly braces to get the string interpolated value of the variable. :host {
  --breakpointForMenu: #{$menuHidden};
} An important note here, unfortunately we can’t use custom properties in media queries, they just don’t work that way. Which is why I’m creating a sass variable and then using it in these two locations. This keeps it in a single location form maintainability while allowing to do what I need to do with both CSS and the breakpoint observer. @media (max-width: $menuHidden) {
  ...
} Ok, so now that we have this custom property on our host we can access its value from typescript instead of using the hard coded value from before. To do this, we need to inject in within our constructor. Then we can create a breakpoint variable. We’ll set it to the computed style of our ’s native element. Then, we’ll get the value of the custom property that we just added. Now, we can switch our code to use this breakpoint value instead. ElementRef ElementRef @Component({
  selector: 'app-nav',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent {
    protected isVisible = false;

    constructor(private breakpointObserver: BreakpointObserver,
                private destroyRef: DestroyRef,
                private elementRef: ElementRef) {}

    ngOnInit() {
      const breakpoint = getComputedStyle(this.elementRef.nativeElement).getPropertyValue('--breakpointForMenu');
      this.breakpointObserver.observe(`(max-width: ${breakpoint})`)
        .pipe(takeUntilDestroyed(this.destroyRef))
        .subscribe(state => {
          if (!state.matches) {
            this.isVisible = false;
          }
        });
    }
} There, it should still all work as expected. This allows us to keep both the styles and functionality here in sync, and should prevent some mistakes in the future. CDK Predefined Breakpoints Something else that’s pretty cool about this layout module from the CDK is that they provide some standard breakpoints based on Google’s Material Design concepts that we can just use if we want. Here’s a list of the breakpoints and their values: So, there’s quite a few to choose from out of the box, but how do you use them? Well, let’s look at an example. I’ve added this variable for our current visible breakpoint range, and it will be either small, medium or large. @Component({
  selector: 'app-nav',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent {
  ...
  protected currentRange?: 'Small' | 'Medium' | 'Large';
  ...
} This value is going to be rendered in a red bar at the bottom of our view once we set it properly. Now, let’s add an additional observe. This time, let’s use an array of breakpoints. We’ll need to import Breakpoints from the CDK layout module and then we'll pass the small breakpoint, medium, and large. Just like the previous example, we need to make sure to take until destroyed. Then we can subscribe. This time however, I’m not concerned with the state and you’ll see why in just a sec. Here we’re going to use another feature of the Breakpoint observer. We are going to check if our breakpoints are matched using the method. This returns a Boolean value based on the media query passed to it. From here we'll set the current range based on the matched media query. isMatched import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-nav',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent {
    ...
    protected currentRange?: 'Small' | 'Medium' | 'Large';

    ...

    ngOnInit() {
      ...

      this.breakpointObserver.observe([Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large])
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => {
        if (this.breakpointObserver.isMatched(Breakpoints.Small)) {
          this.currentRange = 'Small';
        }
        if (this.breakpointObserver.isMatched(Breakpoints.Medium)) {
          this.currentRange = 'Medium';
        }
        if (this.breakpointObserver.isMatched(Breakpoints.Large)) {
          this.currentRange = 'Large';
        }
      });
    }
} Now we see our red bar at the bottom with the currently matched range. And, when we resize, it gets updated properly based on the media query that matches. Pretty cool. Ok, so I hope that helps for those of you out there who have a need for this type of thing in Angular. It’s definitely come in handy for me in the past. Be sure to keep an eye out for more videos in the future showcasing some of the power of the CDK. Want to See It in Action? Check out the demo code and examples of these techniques in the in the stackblitz example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://stackblitz.com/edit/stackblitz-starters-klqbbi?ctl=1&embed=1&file=src%2Fnav%2Fnav.component.ts&embedable=true

How to Utilize Angular CDK Breakpoint Observer

Ockam Routing: Building End-to-End Channels

Enrutamiento Ockam: creación de canales seguros de extremo a extremo

Routage Ockam : création de canaux sécurisés de bout en bout

ओकाम रूटिंग: सुरक्षित एंड-टू-एंड चैनल बनाना

Ockam ルーティング: 安全なエンドツーエンド チャネルの構築

Roteamento Ockam: Construindo Canais Seguros de Ponta a Ponta

Ockam Routing: Xây dựng các kênh đầu cuối an toàn

Ockam Routing：构建安全的端到端通道

Ok, this might sound like shameless self-promo, but I’m hoping you will indulge me. I hope Hackernoon lets me run this article - I think they’ll let it slide cause Utsav is the homie, and also because if you can look past the self-promotion you will see I’m making an important philosophical point. I started HellaDoge because I got frustrated with Bitclout. At first, I was really excited about Bitclout, I thought it could be THE Web3 site, but I was asking friends to join and they weren’t able to sign up. I began to realize that BITCLOUT IS TOO COMPLICATED, just like the last Web3 company I started, Everipedia. It’s not just easy to sign up like Instagram, you need a Metamask wallet, which even I don’t have - I had signed up for Bitclout before you needed it, but they changed it and made it harder. Another annoying issue is that Web3 companies don’t pay you in Bitcoin, they pay you in their own shitcoin which is hard to sell. I had made $300 on Bitclout but I had no way of cashing out. So I decided to launch HellaDoge, with the idea being that it will be just as easy to sign up as Instagram, and you get Dogecoin for using it, both for creating content and for passively scrolling. But WHERE IS THE DOGECOIN GOING TO COME FROM?? The economics weren’t what motivated me to launch HellaDoge, but I’ve come to realize that’s the most important aspect. EVERY SINGLE WEB 3 SITE - Steemit, Bitclout, Everipedia - runs on the premise that crypto is going to turn the internet into an anarchist fantasy land where we no longer need ads because the users get paid from inflation. That’s totally insane!! Like it or not, one major reason the internet creates so much value is the targeted ads. That’s why businesses switch from TV and radio to the internet - because it makes your data valuable. It’s messed up that Mark Zuckerberg steals all the “data money” and is resultantly worth hundreds of billions, but I think we should redistribute the payout from the data rather than simply destroying it. At first HellaDoge was just going to run Google Ads, but it took Google a while to approve us and we already had some early users who were getting restless waiting to start getting the Doge. So I posted on my Facebook (aka the ENEMY app) asking if anybody wants to sponsor HellaDoge for $69 a month - users would see the “Sponsored Doge” every time they refresh. I got a sponsor! The first sponsor was Underground Cellar, where the CEO is my homie from Y Combinator. He told me Underground Cellar has a lot of crypto customers, so he gave it a shot. The first month we launched, HellaDoge only had a few hundred users. But Underground Cellar made $800 REVENUE from the $69 spend! That’s pretty crazy. Now HellaDoge has been live for 6 months, still in beta but hundreds of thousands of users, top 50K Alexa rank in the US. But the coolest statistic is that we’ve already made thousands of dollars in revenue. We’re “Ramen Profitable” even with the users getting 80%. This is refreshing for me, after having started Genius where the CEO didn’t let us run ads for years - we had MILLIONS of users and were making zero dollars. He thought ads would deteriorate Genius, even though I had lots of fun ideas for lyrics-based ads. The Genius CEO has the mentality of many crypto bros today about ad-free anarchist utopia. These people - usually with rich parents - seem to think capitalism is BAD. I actually think capitalism is chillAF, you just gotta distribute the gains properly, then it resembles socialism. The reason HellaDoge is making so much revenue is because the ads are insanely effective for other sponsors, just like they were for Undergound Cellar. Think about it: would you rather support a company who is wasting your time to give Mark Zuckerberg money, or a company who is giving YOU 80% of the money for your time?? : giving the users 80% of the money for seeing the ad completely transforms what advertising means! It goes from a hostile relationship between client and business to a symbiotic relationship. COMPARING THE EFFECTIVENESS OF WEB3 ADS ON HELLADOGE TO WEB2 ADS ON INSTAGRAM IS LIKE COMPARING THE MARKET CAP OF THE TAXI INDUSTRY TO UBER HellaDoge gives ⅔ of the ad money to content creators, but ⅓ goes to the passive users. For now, it’s not much. But if the entire internet were giving 80% away, I think even a passive user could make $1K a month scrolling the internet. The “DATA DIVIDEND”, sort of like an internet-based Universal Basic Income. That’s the main reason I built HellaDoge: I want to end poverty. But the point I’m trying to make in this essay is, the pie we are giving away 80% of in the HellaDoge system could be WAYYYY WAY bigger than the pie the existing internet is giving away. By giving the ad money to the users, the ads become a lot more effective. Just like ad targeting was the huge breakthrough between TV ads and internet ads, giving 80% of the money to users will be the big breakthrough between Web2 internet ads and Web3 internet ads HellaDoge is pioneering. I’ve been drawn to stuff like this before, but HellaDoge can make it scale. Ever since I was a little kid I was really into coupons - they sent us coupons in the mail and I loved sorting through them seeing which ones I could use. I met the founder of Swagbucks right when Everipedia started and I thought it was a site that needs to start giving out Bitcoin. My Web3 philosophy is basically that Web3 can turn the positive psychology behind coupons into an economic revolution. HellaDoge can do for coupons what Amazon did for mail order catalogs! That would be so swag. Someday I hope HellaDoge also incorporates surveys users can take to get more Dogecoin, on top of the social network. Facebook is making a half-assed attempt at this, giving users a $5 Amazon gift card for taking surveys (called “Faceook Viewpoints”). But I don't think anybody does it. The first Web3 site I ever used was earn.com. You got bitcoin for surveys. It was the only Web3 company Silicon Valley invested in who is kind of doing what I’m trying to do. That’s because Balaji started it, and he’s the only person in Silicon Valley who understands crypto. But earn.com never got traction because it’s too boring. SOMEDAY, HellaDoge can end poverty, if we take over the whole internet. But for now, the users aren’t doing it for the money. Nobody is paying their rent with Doge! OUR USERS ARE IN IT FOR THE PHILOSOPHY. None of us want to be Mark Zuckerberg’s slaves. And our sponsors like it because the users like it. When a user sees an ad on Instagram, there is ANGER. When a user sees an ad on HellaDoge, there is LOVE! The more ads, the more Doge. I think HellaDoge will eventually replace Instagram and Twitter, because the tech behemoths won’t be able to catch up. The big Silicon Valley VCs invested $200 million in Bitclout and the site is awful, has terrible content, impossible to sign up or cash out, and users are quitting! Silicon Valley is pretending to care about Web3, but deep down inside they want to prove it won’t work. 20 years ago, Google wanted to pay! Youtube still pays, probably the only Web2 site that pays lots of users. Google also wanted to pay on Blogger.com, but it never caught on. But then this guy named MARK ZUCKERBERG came on the scene! He said that paying the users makes them feel like it’s work, and it’s better to make them think it’s a game. Paying makes it not fun. Mark Zuckerberg’s philosophy was why the CEO of my first company, Genius, forbade me from paying the users. I tried to start something called “CASH GENIUS” after we raised money in 2012, where some editors can get a $100 check for doing important things like putting up the lyrics to new albums. But the editors got mad, they said I’m discriminating in how I distribute the money. The Genius CEO cancelled Cash Genius and said it was a stupid idea. He told me about Mark Zuckerberg’s philosophy. He said that if I want to pay a user, I can hire someone full-time to come work out of the NYC office. Because it was my only option, I tried that a few times, hiring a power user to join full time. Every single one of them got fired after a year. IT MADE NO SENSE TO HIRE THEM FULL-TIME. The funny part was, these were good editors, but as soon as they came to nyc they’d stop actually editing anything on Genius, and would only focus on preparing for stupid meetings and office politics. The problem with “Cash Genius” was that getting paid in DOLLARS is not as fun as getting paid in doggy coins. Dogecoin is more like video game points, except worth money. So it’s still fun, but you get paid. Right now, Facebook and Twitter have thousands of employees making 6 figure salaries who use their site less than I do. And I get paid zero! I’ve noticed that when people work full-time for a tech company, they treat using the product like it’s KRYPTONITE! The only exception is people who work for Facebook are still addicted to Instagram because, let's face it, EVERYONE is addicted to Instagram. They have no choice! But no FB employee uses Instagram as much as I do. Why are they getting paid 6 figures?? Why do these companies need giant offices nobody is even using??! Such is the psychopathic nature of capitalism, these companies keep doing pointless, destructive things to create “shareholder value”. Look at the pathetic Web3 attempts Facebook and Twitter have already made. Twitter is giving us TIPPING, which is useless. You can already tip someone bitcoin if they are on Coinbase, all you need is their email address. And now, Twitter is giving us NFT PROFILE PICS, which are the stupidest, most pointless use of blockchain technology in history. This guy who drew an ape cartoon made billions. Did he really deserve that much? Is this Web3 or beanie babies? Web3 can end poverty, but Twitter is using it to enrich the cartoon monkey artist instead. And then Facebook with its pitiful Libra, getting called to Congress, having Zucc sit on a pillow to look taller, and then scurrying off, doing nothing. The one smart thing Facebook is doing is they have finally started to pay creators, basically anyone on Instagram with over 10K followers can make $500 a month doing Reels. So they are starting to get the point. BUT HOW DOES THAT HELP THE AVERAGE PASSIVE USER? The users with less than 10K followers, which is 99.999% of them, get NOTHING! And these are the users Facebook relies on to go out and buy the things they are shown in ads. That’s how Facebook makes billions of dollars a year, giving it an almost-trillion dollar valuation! It’s time to overthrow Zuck, but this is not a violent revolution, it is a revolution of LOVE. Forget about Instagram, HellaDoge is COMMUNISTAGRAM. Businesses: spend $69 and $55 of it goes to your audience. They will love you for it in a way no one on Instagram could ever love you, not even if your marketing person makes the funniest memes. USERS of the world unite! You have nothing to lose but your Zucc...

THE HELLADOGE MANIFESTO: Why Web3 Ads are Like Instagram Ads on Steroids

💾 Iso Prep Download the iso and check the gpg signature via the website mount the iso in a usb via something like balena etcher 🚀 Launch Install make sure the bios have the disable and boot on the iso secure boot 🎹 Set Up the Keyboard Layout By default the layout is set to . US If you want to list all the layouts available do . ls /usr/share/kbd/keymaps/**/*.map.gz Use a layout with, for example, (here German layout). loadkeys de-latin1 🛰️ Go to the Internet Wifi dosent work out of the box but ethernet yes Check your network interface name via . ip link Check the status of your wifi card with . If your card is blocked, unblocked them with . rfkill rfkill unblock your-card-id For the wifi connection you have to use the package. Hopefully arch include the package in the iso. iwd Open the prompt with and : iwctl list all your device with device list launch a scan station [device name] scan get the list of the available network station [device name] get-network connect to the network with station [device name] connect [SSID] enter the password check the connection with and station [device name] show ping archlinux.org done :) automatically stores network passphrases in the directory and uses them to auto-connect in the future. iwd /var/lib/iwd 🕛 Update System Clock Just do . Check the service status with . timedatectl set-ntp true timedatectl status 💽 Disk Partitioning warning : this step erase all the data in your disk if you confirm the operation ! List your drive with and note the one you want to use. fdisk -l Open the prompt on the right disk with . fdisk /dev/[your disk] remind to delete the old partition before the following command.
Do that with command and the id of the partition. d Let's create the partition, in the open fdisk prompt : Here we create a gpt partition because I do a EFI install create a new gpt label with g add the first partition with (efi) n partition number is 1 the first sector is the default one (just hit enter) the last sector is for 550mb +550M add the second partition with (swap) n partition number is 2 the first sector is the default one the last sector is (handle the size of your swap like you want, minimum 2gb is ok) +4G add the last partition with (primary/data) n partition number is 3 the first sector is the default one the last sector is the default one Ok now we need to change the partition type with the command : t chose for partition the type (list all the partition type with if your are not sure 1 1 L chose for partition the type 2 19 don't change the partition 3 Just enter to write the partition table. w 🗃️ Make the File System For the efi partition, we need to have a FAT32 file system, do it with mkfs.fat -F32 /dev/[your partition 1] For the swap we need a swap filesystem, do it with mkswap /dev/[your partition 2] and activate the swap with swapon /dev/[your partition 2] For the main partition we do a ext4 filesytem : mkfs.ext4 /dev/[your partition 3] ⚡ Mount the Big Partition in the Live Environment Simply do mount /dev/[your partition 3] /mnt 🧬 Install the Base System We do it via .
Here is the arch system, the kernel. pacstrap /mnt base linux linux-firmware base linux 🧫 Generate the fstab Simply do . genfstab -U /mnt >> /mnt/etc/fstab 🔑 Log to the Newly Installed Arch Do . arch-chroot /mnt 🌍 Set the Timezone here the region and city is in the file /usr/share/zoneinfo do ln -sf /usr/share/zoneinfo/_Region_/_City_ /etc/localtime and generate with /etc/adjtime hwclock --systohc 🏴‍☠️ Set the Locale you need to install nano if you want to use it Edit the file , and uncomment the good option for you. locale.gen nano /etc/locale.gen For example for the generic qwerty. en_US.UTF-8 UTF-8 And generate the local with . locale-gen Add the following line to : . /etc/locale.conf LANG=en_US.UTF-8 👽 Set the Hostname and the Host Just add the wanted hostname in . /etc/hostname For the host open and add the following line : /etc/hosts 127.0.0.1 localhost
::1       localhost
127.0.1.1 [your-hostname].localdomain [your-hostname] 🤓 Create the User set the password the root password with passwd create a user with useradd -m username set the password of the new user passwd username set the group for the user usermod -aG wheel,audio,video,optical,storage username 🎛 Install Sudo and Authorize the User to Use Wheel Group install with pacman -S sudo and open with and uncomment the line. visudo EDITOR=nano visudo %whell ALL=(ALL) ALL Here we use nano but if you want to use vi remove EDITOR=nano, if you don’t want nano nor vi replace nano with your loved one 📟 Install Grub and Basic Package just do pacman -S grub efibootmgr dosfstools os-prober mtools 🎬 Make the EFI Directory and Mount It Do and mkdir /boot/EFI mount /dev/[your efi partition] /boot/EFI 🪃 Init grub install grub (for efi) with grub-install --target=x86_64-efi --bootloader-id=grub_uefi --recheck create the config grub-mkconfig -o /boot/grub/grub.cfg 📦 The Other Stuff (Networking, etc...) Here we install the package, because after the final reboot the package will no longer be available. networkmanager iwd We install too. git pacman -S networkmanager git Enable network manager with . systemctl enable NetworkManager ♻️ Reboot Before reboot exit and unmount : exit
umount -R /mnt And ! reboot 📡 Reconnect WiFi after the Login If the ping command failed after the installation you need to relogin to your wifi. For that we use the previously installed package. nmcli Check if the radio is on with , if not open up with . nmcli radio wifi nmcli radio wifi on Check the wifi point with . nmcli dev wifi list Check your device with . nmcli dev status And connect with . sudo nmcli dev wifi connect [network-ssid] password [network-password] If you want to look all the saved connection do . nmcli con show 📽️ Video Driver For nvidia do pacman -S nvidia nvidia-settings nvidia-utils For other check the wiki 🎞️ Xorg Server Actually we use xorg but if you want another display server check the wiki Install with . xorg-server If needed install check the wiki to know if you need it. xorg-apps It usefull to install xmessage too . pacman -S xorg-xmessage 🧮 Base Devel for Makepkg Mandatory for the use of the AUR package Just do a pacman -S --needed base-devel 🍱 The Essential Package List of, my, essential package to have on a fresh install : unzip pacman -S unzip nerd font Warning: This is a large size repo clone the repo https://github.com/ryanoasis/nerd-fonts.git run for installing all the font ./install.sh bluetooth pacman -S bluez-utils paru (for easy gestion of the aur package) clone https://aur.archlinux.org/paru.git cd into the repo build it makepkg -si 🔏 Activate the Num Lock This method is good because is activate the numlock in the early bootup stage, usefull for the psw prompt in the full-disk encryption for example. Install the AUR package. mkinitcpio-numlock Add in the line (before encrypt if present) in . numlock HOOKS /etc/mkinitcpio.conf Usually between modconf and block ⁉️ And Now What? Now you have Arch and the minimum for booting correctly. All you have to do is install the window manager or the desktop environment you want! Check for information. the wiki page For example, if you want KDE : pacman -S plasma kde-applications If you want some tutorial stuff for XMonad I'm writing a story in a few days, wait for the update! Happy arching mate 🖖

Step-by-Step Guide to Installing Arch Linux 

This story is a part of Hacker Noon's . The series is intended for tech professionals contributing the most insightful Hacker Noon stories to share more about their writing habits, ideas, and professional background (and maybe a hobby or two). Meet the Writer series of interviews If you too would like to start contributing to Hacker Noon, . you can do so here So let’s start! Tell us a bit about yourself. For example, name, profession, and personal interests. I’m Jacob Landry, I’m a Software Engineer, and it’s been two weeks since I last used StackOverflow. Most of my jobs have been full-stack, all focused on PHP, but my interests lie across the board in the programming space, and I’m always interested in learning new languages. Outside of development, I’m a man of (too) many hobbies.  I write (creative and tech), play video games (Steam and Switch mostly), and 3D print, to name a few. Interesting! What was your latest Hackernoon Top story about? My was an initial dive into the basics of several different popular programming languages. My goal is to teach myself many of these languages, so why not record the process? most recent story Do you usually write on similar topics? If not, what do you usually write about? Over the past 12 years, I’ve done a lot of different things. I’ve worked in email marketing, advertising, and gaming. I’ve lived in Washington, Maine, California, and Oregon. I fell in love, got married, and started a family. So there’s an awful lot of life to write about. I’ve had amazing bosses and absolutely terrible ones. I’ve had amazing projects and dead fish. I’ve had amazing days with the family and some that were absolute chaos. I write about what I know and what I experience, so my writing is all over the place, most of the time. I have a wealth of short stories that I’ve published here and there, but I’m really just starting to get my feet wet, especially in the tech space. Great! What is your usual writing routine like (if you have one?) OK so I’m going to skip the whole “my routine is important to me” script that everyone loves to brag about. I read an article recently about how Bezos relishes his morning routine and won’t have any meetings before 10 AM so that he can fully prepare for the day. Let’s skip the survivor bias and get down to brass tacks. Life is busy as hell. It never stops, rarely slows down, and constantly changes. Routines are important but hard to maintain at certain stages in life ( So I plan. cough), like when your wife gets 2 hours of sleep a night because of kids, and you have a full-time job (cough). Every day I have a set of tasks that I do that day. I don’t HAVE to do them, but I can. can For the most part, each day is the same. Workout, get the kids breakfast, work, yadda yadda. But the evening is where it differs. Every Monday, I dedicated myself just to writing. It doesn’t matter what I write, but that’s what I do. I don’t have time every Monday. Some nights the kids are up late, some nights, they’re sick, some nights, I have other responsibilities to attend to around the house, but if I have time, it’s for writing. Tuesdays are for video games. Wednesdays are for writing or working on a hobby project. Thursdays are just for hobby projects. Fridays and Saturdays are for videogames, and Sundays are to prepare for the week. I’m getting long-winded here but I’m getting to the point (queue the “we get there when we get there’’ Incredibles meme). When I sit down to write, it’s intentional. And for me, that’s important. I don’t wander into my office one evening with nothing to do and think “ah, maybe I’ll write tonight!” I have a specific day and time set aside to say, “OK, tonight if you can, you’re gonna write the heck out of some article or story”. And I do it. I just sit down and write. The first draft is godawful because I’m not in the right mindset. I’m thinking about work or my day. The second draft isn’t much better. The third, still garbage. But the fourth draft… that’s still terrible usually… But eventually, I find a rhythm, and I start to feel good about myself. I begin to get into what I’m writing, I find that glorious groove that everyone seeks, and then I just write. Usually, I’m up far too late, and the next morning is rough, what with the kids and the job and all, but it’s worth it. Once those creative juices are flowing, you have to let them go. Being a writer in tech can be a challenge. It’s not often our main role, but an addition to another one. What is the biggest challenge you have when it comes to writing? I think the long-winded digression above really answers this. It’s all about time. Time is the one resource that we can never earn more of. (That’s probably something, don’t quote me. I just read Tuesdays With Morrie again, so check there). You can work to earn money, vacations, thing You can never earn back the time you lose. And it’s the hardest thing to control. If I had infinite amounts of time, I would write all day. My five-year-old once told my wife, “I want to write a story,” and her response was, without hesitation: “Do it. If your dad could, he’d write all day.” She’s absolutely right. But I can’t write all day; I have to work and be an active member of the human race (though they’re a bit overrated if you ask me). Finding the time is the biggest challenge you’ll ever face, but when you find it, it’s golden. What is the next thing you hope to achieve in your career? To become independently wealthy and retire at the young age of… oh who am I kidding, I’m old.  I started at some smaller companies, and now I’m at one of the largest companies in the valley… and I just can’t say that I’m “happy” (professionally speaking). For a long time, I set my hobby projects aside, in fear of a DNC that is probably not as strict as I assumed. The next big thing for me is to follow my dreams. (LOL). OK, actually, it’s just to continue down some roads frequently traveled, building things that I love or need.  At the end of the day, I just want to be proud of the things I’ve built, whether it was for a big company or for myself. Wow, that’s admirable. Now, something more casual: What is your guilty pleasure of choice? Oh dear, that’s a tough one. My hobbies take up most of my time, and I don’t necessarily feel “guilty” about any of them. I suppose it would have to be IPAs. If I have a responsibility-free night (or at least a light-responsibility one), I could easily be found trying out a new IPA (the more hops, the better). Do you have a non-tech-related hobby? If yes, what is it? Dungeons and Dragons. With the pandemic, I haven’t been able to play at all. There are definitely online avenues that you can pursue role-playing in, but none of them have really caught me. Hopefully, someday soon, we can roll some dice again. What can the Hacker Noon community expect to read from you next? Well, I’ve committed to this “learning new languages” series that I’m excited about and definitely will continue down that course. I’ve also, recently, taken a decent amount of time off at work and, in turn, have had a ton of stuff to fix when I return, so I’m thinking of writing some articles on “destruction-free programming.” Writing and committing code in such a way that you can instantly reverse it with no ill effects if needed. Working on a team is fantastic until you don’t get to monitor the PRs for a week. I’m always dedicated to bettering myself and learning, so when I have a person in my life that makes an impact, I do whatever I can to learn from them. So I’m also considering writing some of the bits of wisdom that have been shared with me and how they have impacted my life over the years. Thanks for taking time to join our “Meet the writer” series. It was a pleasure. Do you have any closing words? I only recently discovered Hackernoon, and I’m really excited about the community. I’m loving the posts that I’ve read and I’m enjoying the response to my own work. So keep on writing and keep on reading! I’m happy to be here.

'I Write About What I Know and What I Experience': Meet the Writer Jacob Landry

On 10x Developers and Arrogant Jerks

Ok so before we move on and jump into writing and running 64 bit programs (because all programs today are 64bit these days no? j.k.) let's have a look how to compile a simple program for each of those architectures. This knowledge should also help you better understand how to start a nano VM and "debug" problems that might arise. To produce binaries we will use nasm compiler and to explore them we will use radare2 (https://rada.re/n/). Program that we will compile and analyse will be extremely simple. This is so we can focus on important aspects of 16, 32 and 64 bit programs rather than complexities in the programs themselves. Source code for all examples and compiling them is available in GitLab repo: . https://gitlab.com/mvuksano/kvm-playground/-/tree/master/05-assemly-compiling Let's jump into it. 16 bit assembly Let's compile the following program: , , , , , BITS 16 mov ax 'A' add ax '0' mov dx 0x3f8 out dx al mov eax 0xc000 jmp eax As you can see, it starts with directive. This tells compiler that we are want to produce a 16 bit binary. BITS 16 To produce a binary we only need to invoke compiler. nasm nasm -o a16.bin a16.asm There are a lot of tools that we could use at this point look into the executable. I'll use radare2 as it comes with some bells and whistles (e.g. nicely formatted and colored disassembly) The first line ( ) is represented using 3 bytes. b8 is the opcode for mov instruction while the following two bytes is number 0x41 written using two bytes in little endian format. mov ax, 0x41 Next line ( ) encodes instruction to add to whatever value is in register and store it back into . Notice how ax is 16 bit register and the immediate operand (0x30) is 8 bits in size. ADD instruction ( ) has numerous options that customize its operation. In this case we use to tell ADD op to use register as source and destination. 0x83c030 0x30 ax ax 0x83 0xc0 ax Following that is .  This instruction does similar thing to in the first line. Notice how the second byte changed from to . This is because opcode of this instruction encodes which register is used. In this case this instruction tells CPU to use register . 0xbaf803 0xb84100 8 a dx instruction is a simple one. It's a one byte instruction telling our CPU. 0xee Following is . We've seen before. We also know that is target of our jump instruction written in little endian format. Two questions that remain are: 1. What is that in front of ? and what is that at the end of the instruction? 0x66b800c00000 0xb8 0x00c0 0x66 0xb8 0x0000 is part of the instruction which tells CPU to use non-default instruction length. In our 16bit program default length for instruction is 16 bits (e.g. register). Here we are putting value into 32bit register . In our case can be written as . We just added a number of zeros to get a 32bit number. Now if we write in little endian format we get . This is exactly sequence of digits that we see following . 0x66 MOV ax 0xc000 eax 0xc000 0x0000c000 0x0000c000 0x00c00000 0x66b8 is the last instruction in our program. 0x66 serves same purpose as in previous instruction - it tells CPU to "switch to" using 32 bit operands. is opcode for instruction. 0x66ffe0 0xffe0 jmp eax Before we move on to looking at 32bit version of the same program keep two things in mind: CPU expects operands to be 2bytes in size usually if we want to use 32bit operand size we need to use opcode prefix 0x66 to tell x86 CPU to do so. 32 bit assembly Let's have a look at what the same program looks like compiled using 32 bits: , , , , , BITS 32 mov eax 'A' add eax '0' mov edx 0x3f8 out dx al mov eax 0xc000 jmp eax You can notice a few changes. First line is directive that tells compiler that we want to output 32 bit binary. Also notice that instead of using as operand we use . is name of 32 bit register while is used to name 16 bit register. As a matter of fact represents lower 16 bits of register. nasm ax eax eax ax ax eax Looking at disassembly we can see that it's very similar. Another thing worth pointing out is that prefix in front of second last instruction is not there any more. In 32bit mode default operand size is 32 bits so there's no need for prefix in this case. 0x66 Size of binary has also slightly increased. Instead of being 13 bytes in size its not 15 bytes. 64 bit assembly Lastly let's look at equivalent 64 bit program: , , , , , BITS 64 mov rax QWORD 'A' add rax QWORD '0' mov rdx QWORD 0x3f8 out dx al mov rax QWORD 0xc000 jmp rax Besides directive telling compiler that it should output 64 bit program we use to explicitly specify that immediate operands should be 8 bytes in size. BITS QWORD Looking at the disassembly we can see that it grew in size again. This is expected as size of immediate operands is doubled. Besides the operand size this disassembly looks very similar to 32 bit one. One difference we can immediately notice is that a lot of instructions have prefix. This is so called REX prefix. It's available in 64 bit mode only and in this case tell CPU that the instruction should use 64 bit operand size. Keep in mind that some instructions, in 64 bit mode, do not use 64 bit operand by default but instead use 32 bit ones. MOV is an example of such an instruction. 0x48 Conclusion In this article we have taken a look at a very simple program and its representation as 16, 32 and 64 bit binary. I don't expect you will need to deal with assembly code day to day but being familiar with it is very useful when working with hypervisors and VMs. In the early stages of a VMs life there are very few tools for debugging and the best one you have is in knowing what the code does. In the following article we will modify our VM to switch into long mode and we will execute the 64 bit binary. References http://ref.x86asm.net/coder32.html https://c9x.me/x86/html/file_module_x86_id_222.html https://wiki.osdev.org/X86-64_Instruction_Encoding#togglelink:~:text=4.1.2%20REX%20prefix

Stories, News & Mentions about ONEOK

Oneok’s Stories on HackerNoon

Oneok's News & Mentions