Angular Flex-Layout Tutorials and Examples

I have been recently doing so much front-end development with Angular. After people spending years struggling with tables, grid libraries, responsiveness and etc, the flex layout took the stage, changed all the way we create layouts. I find it very easy to use and powerful once you understand the basics. And if you are working with Angular, you can get an even more powerful tool: Angular Flex-Layout.

Officially described: “Angular Flex-Layout provides a sophisticated API using Flexbox, CSS Grid, and mediaQuery. ”

This is not a tutorial about it, just sharing the related links I find very helpful and visit frequently while I am working with front-end development:

  1. Angular Flex-Layout Home page
    https://github.com/angular/flex-layout
  2. Declarative API Overview
    https://github.com/angular/flex-layout/wiki/Declarative-API-Overview
  3. Flex API
    https://github.com/angular/flex-layout/wiki/fxFlex-API
  4. Responsive API
    https://github.com/angular/flex-layout/wiki/Responsive-API
  5. ngClass API: very useful
    https://github.com/angular/flex-layout/wiki/ngClass-API
  6. A basic tutorial:
    https://www.digitalocean.com/community/tutorials/angular-flex-layout
  7. Nice demos
    https://tburleson-layouts-demos.firebaseapp.com/#/responsive
  8. Another good article from InDepth, pretty well explained.
    https://indepth.dev/posts/1208/angular-flex-layout-flexbox-and-grid-layout-for-angular-component

#angular #flexbox #angular-flexlayout

Linq multiple order: firstly order by year and then month

Let’s say we have a list of objects, and the object has Year and Month values, not DateTime. How do we order the list so that it will be ordered by time?

myList= myList.OrderByDescending(p => p.Year).ThenByDescending(p => p.Month);

The equivalent of the piece above is NOT:

from i in myList
group i by new { i.MyDate.Month, i.MyDate.Year } into g
orderby  g.Key.Year, g.Key.Month descending

but it IS this one:

from i in myList
group i by new { i.MyDate.Month, i.MyDate.Year } into g
orderby  g.Key.Year descending, g.Key.Month descending

All the resources I checked were claiming that orderby g.Key.Year, g.Key.Month would work, but it does not!
FMI

#linq c# #efcore

Weekly Playlist [5]

Some ML, AI videos, some C# videos, talks from here and there.

  1. Machine Learning Community Standup – ML.NET in VS Code
  2. ASP.NET Community Standup – Updating Scott Hanselman’s blog to .NET Core
  3. Machine Learning simplified for Developers with ML.NET – Jernej Kavka (JK)
  4. Training Machine Learning models with ML.NET
  5. ML.NET in the Real World
  6. Artificial Intelligence and Machine Learning for the SWE – QCon London 2018
  7. Herding Nulls and Other C# Stories from the Future
  8. GOTO 2020 • Data Science for Everyone with ISLE • Rebecca Nugent
  9. Machine Learning for .NET developers – Olia Gavrysh
  10. Artificial Intelligence? – more like Artificial Stupidity! – Aiko Klosterman
  11. GOTO 2020 • Artificial General Intelligence in 6 Minutes • Danny Lange
  12. GOTO 2018 • On the Road to Artificial General Intelligence • Danny Lange
  13. https://www.youtube.com/watch?v=j6ow-UemzBc
  14. GOTO 2020 • John Deere Operations Center Development Journey & Ecosystems • Niket Patel
  15. The Background on Background Tasks in .NET Core – Scott Sauber
  16. Practical Domain-Driven Design with EF Core – Hossam Barakat
  17. What’s New In C# 8 Interfaces (and how to use them effectively) – Jeremy Clark – SEVDNUG and NWVDNUG

TinyML

Google and Arm: tinyML
tinyML Channel

Data Science Video Series:

  1. https://www.youtube.com/watch?v=cUHXjTdMdYc
  2. https://www.youtube.com/watch?v=LeEj3S4Okao

#ai #ml #c# #tinyml #efcore #net-core #artificial-inteligence

10 JavaScript Console Methods

Besides console.log, this useful object, an important help for programmers has several methods which offer more than simple logging.

  1. console.clear
  2. console.count
  3. console.table
  4. console.group and console.groupEnd
  5. console.assert
  6. console.time and console.timeEnd
  7. console.memory
  8. console.trace
  9. console.dir
  10. console.log , example with css:
    console.log("%c logging","color: #ff0000; background: #ffffff; font-size: 20px; padding: 25px")

Resource: https://www.c-sharpcorner.com/article/10-javascript-console-tricks-that-you-may-not-know/

Another super cool article: https://www.sitepoint.com/beyond-console-log-level-up-your-debugging-skills/
#javascript #console #console.log #console.dir

Compile GO code in Windows for a Debian server

Compile GO code in Windows for a Debian server

I have been learning Golang recently, and came to a point where I needed to deploy my app to a Debian server to test. I had created a simple API. In order to compile the app for Linux, I followed these steps:

  1. Set GOOS env. variable to Linux by $env:GOOS=’linux’ (you may also have to set GOARCH depending on your target operation system. Please check [5] in the resources below.
  2. Build the app by go build and copy the file to your server by sFTP
  3. Give user needed permission to run the file by sudo chmod ug+x yourFileName
  4. Run your file by sudo ./filename
  5. Allow the port in your firewall if set, by sudo ufw allow 8080(yourport)
  6. Test your URL, and if you want to use it in production, you can configure nginx as a proxy server.

Another option, I think better, is to compile your app in your server, and of course, the best would be integrating a CI/CD in the flow.

Example API

package main

import (
"fmt"
"log"
"net/http"
"github.com/gorilla/mux"
)

func get(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
w.WriteHeader(http.StatusOK)
w.Write([]byte(`{"message": "get called"}`))
}

func post(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
w.WriteHeader(http.StatusCreated)
w.Write([]byte(`{"message": "post called"}`))
}

func put(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
w.WriteHeader(http.StatusAccepted)
w.Write([]byte(`{"message": "put called"}`))
}

func delete(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
w.WriteHeader(http.StatusOK)
w.Write([]byte(`{"message": "delete called"}`))
}

func notFound(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
w.WriteHeader(http.StatusNotFound)
w.Write([]byte(`{"message": "not found"}`))
}

func main() {
r := mux.NewRouter()
r.HandleFunc("/", get).Methods(http.MethodGet)
r.HandleFunc("/", post).Methods(http.MethodPost)
r.HandleFunc("/", put).Methods(http.MethodPut)
r.HandleFunc("/", delete).Methods(http.MethodDelete)
r.HandleFunc("/", notFound)
log.Fatal(http.ListenAndServe(":8080", r))
}

Resources:
1. https://askubuntu.com/questions/29589/chmod-ux-versus-chmod-x
2. https://www.reddit.com/r/golang/comments/crdwcv/is_it_possible_to_run_a_go_binaryprogram_without/
3. Set environment variables in PowerShell: https://mcpmag.com/articles/2019/03/28/environment-variables-in-powershell.aspx
4. Configure firewall UFW: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-firewall-with-ufw-on-ubuntu-18-04
5. List of target operating systems you can compile for: https://golang.org/doc/install/source#environment
6. Cross Compilation: https://rakyll.org/cross-compilation/
#golang #debian #go

Weekly Playlist [4]

Most of the resources for this week is about CosmosDB.

Reading list
1. Order of Precedence when Configuring ASP.NET Core
It is always good to review the basics: Configuring ASP.NET Core
2. https://devblogs.microsoft.com/premier-developer/dissecting-the-local-functions-in-c-7/
Read about local functions

Azure Cosmos DB

  1. Azure Cosmos DB, Azure Functions, and Visual Studio Integration
  2. 2-minute data modeling with Azure Cosmos DB: improve your application’s speed and performance
  3. Data modeling for lower latency with Azure Cosmos DB
  4. 2-minute data partitioning with Azure Cosmos DB: optimize reads and writes for speed at any scale
  5. Build a zero-cost database: a step-by-step guide to moving to Azure Cosmos DB Free Tier
  6. Create Azure Cosmos DB Functions Trigger (.NET) in 2 minutes!
  7. Technical overview of Azure Cosmos DB Features and Capabilities
  8. IoT and Cosmos DB
  9. Intro: Azure Cosmos DB Data Indexing – Best Practices for optimal query performance
  10. Explaining Azure Cosmos DB Concepts – Partitioning/Throughput RUs/Reserved Capacity
  11. From SQL to Azure Cosmos DB – Jimmy Bogard very good and informative talk

#cosmosdb #azure #local-functions

Weekly Playlist [3]

  1. #FiveThings Why TypeScript is for You
    Anders Hejlsberg (Creator of C# and TypeScript) and John Papa as they discuss how these and how to get started.
  2. #FiveThings that TypeScript Can Do for You
  3. Stanford Seminar – Current Status of tinyML and the Enormous Opportunities Ahead (panel discussion)
    An informative panel discussion about TinyML and opportunities.
  4. tinyML Talks – Pete Warden: Getting started with TinyML
    Pete Warden explains all about TinyML, so cool.
  5. I am also following this short video series of into to data science. Introduction to the Developer’s Intro to Data Science Video Series (1 of 28)

#tinyml #datascience #typescript

Weekly Playlist [2]

  1. Future of C#
    A fantastic session with Mads Torgersen as we cover the new features of C#9.0, the future of the language and some of the amazing features built for you.
  2. Computer Vision for Spatial Analysis
    Computer Vision is an Azure Cognitive Service which runs vision AI on images, and is a new feature of the Computer Vision service. It runs Vision AI on live and recorded video streams to understand people’s movement in physical spaces.
  3. What is Azure SQL Edge | Data Exposed
    In part one of this three-part series, Vasiya Krishnan introduces Azure SQL Edge and its features that make it the optimized database engine for IoT Scenarios. In part two, Vasiya will review customer examples and use cases, and in part three, she’ll conclude with a demo that demonstrates how to use Azure SQL Edge to build smarter renewable resources.
  4. Azure SQL Edge: Industry Use Cases & Customer Success | Data Exposed
    In part two of this three-part series, Vasiya Krishnan shares an example of how customers are using Azure SQL Edge as well as use cases.
  5. Azure SQL Edge: Demo, Renewable Energy | Data Exposed
    In the final episode of this three-part series, Vasiya Krishnan walks us through a demo that shows us how to use Azure SQL Edge to build smarter renewable resources.
  6. What’s New in the Cognitive Services Face API
    The Azure Cognitive Services Face service provides algorithms that detect, recognize, and analyze human faces in images. The ability to process human face information is important in many different software scenarios. In this episode we walk you through the latest innovation in Face API.
  7. Visual Studio Code Crash Course freeCodeCamp

#playlist #ml #csharp #vscode #edge #azure #computervision

Weekly Playlist

  1. Run your Vue and Node app anywhere
  2. Gregg Pollack – Introduction into the Composition API
  3. What you always wanted to know about Deep Learning, but were afraid to ask – Wei Meng Lee
  4. Getting the best out of Entity Framework Core – Jon P Smith
  5. ML and the IoT: Living on the Edge – Brandon Satrom
  6. Single Page Architectures with VueJS and ASP.NET Core – Kevin Griffin
  7. Machine Learning for .NET developers – Olia Gavrysh
  8. Evan You // Keynote: Live Free Online Announcement // Vuejs Global Online 
  9. ASP.NET Core Beyond the Basics – Chris Klug
  10. Let’s talk patterns – Chris Klug

#watchlist #ndc-conferences #vue #ml #aspnetcore #edgecomputing #deeplearning

Simple Accordion with VueJS

 <button type="button" class="btn btn-info btn-block" @click="toggleAccordion(0)">Information</button>
        <section class="bilgi font-text" v-if="accordions[0]">
          <div class="card p-1 m-1">
            <div class="card-body">Information</div>
          </div>
        </section>

        <button type="button" class="btn btn-warning btn-block" @click="toggleAccordion(1)">Data</button>
        <section class="bilgi font-text" v-if="accordions[1]">
          <div class="card p-1 m-1">
            <div class="card-body">Data</div>
          </div>
        </section>
data() {
    return {
      accordions: []
    };
  }
  methods: {
    toggleAccordion(id) {
   if (this.accordions[id]) {
        this.accordions = this.accordions.map((p) => (p = false));
      } else {
        this.accordions = this.accordions.map((p) => (p = false));
        this.accordions[id] = true;
      }
    }
  },

#vuejs #accordion