home.social
Sign in Create account

Search

8 results for “photosbykyle”

  1. Hydrian @[email protected] ·

    @photosbykyle there are also other open-source #mesh_network software. #zerotier is one of them. #Tailscale is a great mesh VPN, with lots of nice features but there are a decent amount of competitors that will work too. #headscale isn't the only option, Just the easiest.

    #mesh_network #zerotier #tailscale #headscale
  2. lobster @[email protected] ·

    @photosbykyle my home is #smartly #stupid enough to not require the internet at all 🤓

    #stupid #smartly
  3. photosbykyle @photosbykyle ·

    Discovered Pinchflat over the weekend and liking it so far.

    I thought about getting Tube Archivist going, but it needs three separate docker containers to get up and running. That’s just a bit onerous.

    Pinchflat has a functional UI and got the job done overnight, so far. And Jellyfin handles the presentation layer. So far, so good.

    Anyone else giving it a try?

    github.com/kieraneglin/pinchfl

    #selfhosted #selfhosting #pinchflat #jellyfin
  4. photosbykyle @photosbykyle ·

    And yes it was a perfect day for a kite festival!

    #washingtondc #cherryblossomfestival #photography
  5. Joe Steinbring @[email protected] ·

    How to use wa-grid with Vue

    Last month, we explored using wa-card with Vue.js. In the final example, we created a grid layout using CSS, but Web Awesome also enables this with a WA component. Today, we’ll extend that example by integrating the WA component. Previously, we learned how to center content using Bulma and Bootstrap. WA provides a similar approach to these frameworks.

    Web Awesome wants a basic grid to look like this:

    <div class="wa-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

    You can get fancier with spans or gap definitions, but this is all you really need. So, what does the result look like?

    CodePen Embed Fallback

    The result looks very similar to what we did in the fourth wa-card example. The big difference is that it is more fully Web-Awesome-ized. We could end here, but we could also examine what it looks like with more data in the photos array. You might have guessed that the hard-coded examples come from JWS Pictures. When I created it, I ensured that all.json and all.xml were included so you can retrieve all the photos in your Vue app. If we add an onMounted() lifecycle hook, we can load the photos defined in the JSON file once the component has been mounted. Let’s see what that would look like.

    CodePen Embed Fallback

    Adding all the photos doesn’t seem to affect the design. In fact, it looks pretty good. I don’t want to just dump photos onto the page, so let’s see what Array.prototype.sort() can do for us.

    CodePen Embed Fallback

    Now, the images are sorted from newest to oldest rather than in the order they appear in the JSON file. The next step would be to sort and group the photos simultaneously. This way, it becomes clearer which photos belong to which batches. A photosByYear computed ref would allow for that.

    CodePen Embed Fallback

    The computed ref has properties for a year value and the photos taken in that year. Next time, we will see how we can further evolve this project.

    First example: https://codepen.io/steinbring/pen/gbPJLLK/e3b93e220312e05d6c51444c22ed12ba

    Second example: https://codepen.io/steinbring/pen/xbZNReX/9b05838c6096c00e08690c24900cd9be

    Third example: https://codepen.io/steinbring/pen/GgqKjwM/22f21efec564bee348b1db9eb8dd90de

    Fourth example: https://codepen.io/steinbring/pen/bNebwyx/5dadf66f9b55153a63a02d713f12ccc8

    #CSSGrid #displayGrid #VueJs #WebAwesome
    #cssgrid #displaygrid #vuejs #webawesome
  6. Joe Steinbring @[email protected] ·

    How to use wa-grid with Vue

    Last month, we explored using wa-card with Vue.js. In the final example, we created a grid layout using CSS, but Web Awesome also enables this with a WA component. Today, we’ll extend that example by integrating the WA component. Previously, we learned how to center content using Bulma and Bootstrap. WA provides a similar approach to these frameworks.

    Web Awesome wants a basic grid to look like this:

    <div class="wa-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

    You can get fancier with spans or gap definitions, but this is all you really need. So, what does the result look like?

    CodePen Embed Fallback

    The result looks very similar to what we did in the fourth wa-card example. The big difference is that it is more fully Web-Awesome-ized. We could end here, but we could also examine what it looks like with more data in the photos array. You might have guessed that the hard-coded examples come from JWS Pictures. When I created it, I ensured that all.json and all.xml were included so you can retrieve all the photos in your Vue app. If we add an onMounted() lifecycle hook, we can load the photos defined in the JSON file once the component has been mounted. Let’s see what that would look like.

    CodePen Embed Fallback

    Adding all the photos doesn’t seem to affect the design. In fact, it looks pretty good. I don’t want to just dump photos onto the page, so let’s see what Array.prototype.sort() can do for us.

    CodePen Embed Fallback

    Now, the images are sorted from newest to oldest rather than in the order they appear in the JSON file. The next step would be to sort and group the photos simultaneously. This way, it becomes clearer which photos belong to which batches. A photosByYear computed ref would allow for that.

    CodePen Embed Fallback

    The computed ref has properties for a year value and the photos taken in that year. Next time, we will see how we can further evolve this project.

    First example: https://codepen.io/steinbring/pen/gbPJLLK/e3b93e220312e05d6c51444c22ed12ba

    Second example: https://codepen.io/steinbring/pen/xbZNReX/9b05838c6096c00e08690c24900cd9be

    Third example: https://codepen.io/steinbring/pen/GgqKjwM/22f21efec564bee348b1db9eb8dd90de

    Fourth example: https://codepen.io/steinbring/pen/bNebwyx/5dadf66f9b55153a63a02d713f12ccc8

    #CSSGrid #displayGrid #VueJs #WebAwesome
    #cssgrid #displaygrid #vuejs #webawesome
  7. Joe Steinbring @[email protected] ·

    How to use wa-grid with Vue

    Last month, we explored using wa-card with Vue.js. In the final example, we created a grid layout using CSS, but Web Awesome also enables this with a WA component. Today, we’ll extend that example by integrating the WA component. Previously, we learned how to center content using Bulma and Bootstrap. WA provides a similar approach to these frameworks.

    Web Awesome wants a basic grid to look like this:

    <div class="wa-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

    You can get fancier with spans or gap definitions, but this is all you really need. So, what does the result look like?

    CodePen Embed Fallback

    The result looks very similar to what we did in the fourth wa-card example. The big difference is that it is more fully Web-Awesome-ized. We could end here, but we could also examine what it looks like with more data in the photos array. You might have guessed that the hard-coded examples come from JWS Pictures. When I created it, I ensured that all.json and all.xml were included so you can retrieve all the photos in your Vue app. If we add an onMounted() lifecycle hook, we can load the photos defined in the JSON file once the component has been mounted. Let’s see what that would look like.

    CodePen Embed Fallback

    Adding all the photos doesn’t seem to affect the design. In fact, it looks pretty good. I don’t want to just dump photos onto the page, so let’s see what Array.prototype.sort() can do for us.

    CodePen Embed Fallback

    Now, the images are sorted from newest to oldest rather than in the order they appear in the JSON file. The next step would be to sort and group the photos simultaneously. This way, it becomes clearer which photos belong to which batches. A photosByYear computed ref would allow for that.

    CodePen Embed Fallback

    The computed ref has properties for a year value and the photos taken in that year. Next time, we will see how we can further evolve this project.

    First example: https://codepen.io/steinbring/pen/gbPJLLK/e3b93e220312e05d6c51444c22ed12ba

    Second example: https://codepen.io/steinbring/pen/xbZNReX/9b05838c6096c00e08690c24900cd9be

    Third example: https://codepen.io/steinbring/pen/GgqKjwM/22f21efec564bee348b1db9eb8dd90de

    Fourth example: https://codepen.io/steinbring/pen/bNebwyx/5dadf66f9b55153a63a02d713f12ccc8

    #CSSGrid #displayGrid #VueJs #WebAwesome
    #webawesome #vuejs #displaygrid #cssgrid
  8. Joe Steinbring @[email protected] ·

    How to use wa-grid with Vue

    Last month, we explored using wa-card with Vue.js. In the final example, we created a grid layout using CSS, but Web Awesome also enables this with a WA component. Today, we’ll extend that example by integrating the WA component. Previously, we learned how to center content using Bulma and Bootstrap. WA provides a similar approach to these frameworks.

    Web Awesome wants a basic grid to look like this:

    <div class="wa-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

    You can get fancier with spans or gap definitions, but this is all you really need. So, what does the result look like?

    CodePen Embed Fallback

    The result looks very similar to what we did in the fourth wa-card example. The big difference is that it is more fully Web-Awesome-ized. We could end here, but we could also examine what it looks like with more data in the photos array. You might have guessed that the hard-coded examples come from JWS Pictures. When I created it, I ensured that all.json and all.xml were included so you can retrieve all the photos in your Vue app. If we add an onMounted() lifecycle hook, we can load the photos defined in the JSON file once the component has been mounted. Let’s see what that would look like.

    CodePen Embed Fallback

    Adding all the photos doesn’t seem to affect the design. In fact, it looks pretty good. I don’t want to just dump photos onto the page, so let’s see what Array.prototype.sort() can do for us.

    CodePen Embed Fallback

    Now, the images are sorted from newest to oldest rather than in the order they appear in the JSON file. The next step would be to sort and group the photos simultaneously. This way, it becomes clearer which photos belong to which batches. A photosByYear computed ref would allow for that.

    CodePen Embed Fallback

    The computed ref has properties for a year value and the photos taken in that year. Next time, we will see how we can further evolve this project.

    First example: https://codepen.io/steinbring/pen/gbPJLLK/e3b93e220312e05d6c51444c22ed12ba

    Second example: https://codepen.io/steinbring/pen/xbZNReX/9b05838c6096c00e08690c24900cd9be

    Third example: https://codepen.io/steinbring/pen/GgqKjwM/22f21efec564bee348b1db9eb8dd90de

    Fourth example: https://codepen.io/steinbring/pen/bNebwyx/5dadf66f9b55153a63a02d713f12ccc8

    #CSSGrid #displayGrid #VueJs #WebAwesome
    #cssgrid #displaygrid #vuejs #webawesome