Code Archives - Page 3 of 15

Visual Studio Code for web developers

Visual Studio Code is an open source, lightweight, and full-featured text editor that supports a multitude of extensions for all kinds of developers. If you are getting started in the larger world of web development, Visual Studio Code can be a valuable tool. Features such as build scripts, environments, debugging, and more, combined with its role of powerful text editor, are of particular value to new developers. Visual Studio Code handles all this in one environment without the traditionally heavy integrated development environment (IDE).

Visual Studio Code is built on a platform called Electron, and is available for Windows, macOS, and Linux. This learning will be as platform-independent as possible. Though some screenshots may be from specific platforms, the information should transfer to any platform with some minor adaptation (for example, shortcut key combinations).

Here’s a list of some of Visual Studio Code’s key features:

Lightweight
Multiplatform
Color coding
Built-in debugger
Integrated terminal
Integrated git support
IntelliSense with autocomplete
Open source
Extensible

In this post, you will learn how to install and use Visual Studio Code with some basic web development extensions, then use these features to make a very simple web application. Even if you’ve never written a web app, you’ll still be successful with this post. And if you are an experienced web developer, you can still learn many useful things here to get you started with Visual Studio Code.

This post has only given an introduction, but you can continue with more tutorials to pick up on more and more features. For a fully detailed treatment of Visual Studio Code features, see the links provided below.

Build a Basic Web App with Visual Studio Code

How to Create a GitHub Action to deploy to Azure AKS

In this unit, you’ll complete the following tasks: Create a GitHub Action to implement a deployment pipeline Increment the coupon service version in the Helm chart, Verify that the changes were deployed to the AKS cluster, Roll back a deployment

Create the deployment action

Create a GitHub Action for cloud deployment(vps promo) of the coupon service with the following steps:

Select the Actions tab again, select the New workflow button, and select the set up a workflow yourself link.

Replace the YAML in the editor with the following YAML:

name: eShop deploy

on:
  push:
    paths:
    - 'deploy/k8s/helm-simple/coupon/*'
    branches: [ main ]

jobs:
  deploy-to-aks:
    runs-on: ubuntu-latest
    steps:
    - name: Azure Kubernetes set context
      uses: Azure/aks-set-context@v1
      with:
        creds: ${{ secrets.AZURE_CREDENTIALS }}
        resource-group: 'eshop-learn-rg'
        cluster-name: 'eshop-learn-aks'

    - name: Get code from the repository
      uses: actions/checkout@v1
      with:
        ref: main

    - name: Helm tool installer
      uses: Azure/setup-helm@v1

    - name: Azure Login
      uses: Azure/[email protected]
      with:
        creds: ${{ secrets.AZURE_CREDENTIALS }}

    - name: Deploy
      run: >
        helm upgrade 
        --install eshoplearn-coupon
        --namespace=default 
        --set registry=${{ secrets.REGISTRY_LOGIN_SERVER }} 
        --set imagePullPolicy=Always 
        --set host=${{ secrets.IP_ADDRESS }} 
        --set protocol=http './deploy/k8s/helm-simple/coupon'

The preceding YAML defines a GitHub Action that:

Is triggered when a commit is pushed to the coupon service’s Helm chart in the main branch.
Has one job, named deploy-to-aks, that deploys new images. The job runs in an ubuntu-latest runner and has five steps:
1. Azure Kubernetes set context sets the AKS credentials in the runner’s .kube/config file.
2. Get code from the repository checks out the code from the repository.
3. Helm tool installer installs Helm, an open-source package manager for Kubernetes.
4. Azure Login logs in to Azure using the service principal credentials.
5. Deploy executes the helm upgrade command, passing the ACR instance name as the registry parameter. This parameter tells Helm to use your ACR instance rather than the public container registry.

Replace the default workflow file name of main.yml with deploy.yml.
Commit the deploy.yml workflow file directly to the main branch.

These two GitHub Action definitions are stored in the repository’s .github/workflows directory. To make changes, update the appropriate file locally and push to the main branch. Alternatively, create a pull request (PR). If you create a PR, the Action is triggered when merging to main.

Trigger a deployment

To trigger a deployment, you’ll increment the appVersion in the coupon service’s Helm chart. Helm charts are used to define the service specification in a YAML template format.

From the Code tab, edit the deploy/k8s/helm-simple/coupon/Chart.yaml file by clicking the edit icon. Update the appVersion property value to 1.1.0:
```
apiVersion: v2
name: coupon

# YAML omitted for brevity

# This is the version number of the application being deployed. This version number should be
# incremented each time you make changes to the application.
appVersion: 1.1.0
```
It’s important that you update the app version in the Helm chart. This change causes the pod to be replaced when the chart is deployed to AKS with helm upgrade.
Commit and push this change to the main branch.The deployment workflow is triggered automatically. The app is deployed after a few minutes.

Monitor the deployment

Select the Actions tab in your repository to monitor the deployment’s progress.
Select the most recent workflow run listed for the eShop deploy workflow. The commit message used in the previous step becomes the run’s name.
Select the deploy-to-aks task:In the preceding image, you can see details of the deploy-to-aks job for this particular workflow run. The Set up job and Complete job steps are listed. In between those two steps are the custom steps defined within the deploy-to-aks job.
Select the Actions tab again. You’ll see a variation of the following screen when the deployment completes:
Back in the command shell, run the following command to monitor the coupon service pods in your AKS cluster:
```
kubectl get pods --selector service=coupon --watch
```
In the preceding command:
- The --selector flag filters the list to only pods for the coupon service. For this reason, pods for other services in the cluster aren’t displayed.
- The --watch flag instructs kubectl to watch for changes. When a change is detected, an additional table row is appended to the command shell output. The status of the existing and newly deployed pods is displayed in real time.
A variation of the following output appears:
```
NAME                              READY   STATUS              RESTARTS   AGE
coupon-5b9597995-7s4hh            1/1     Running             1          31m
coupon-74fd48bbd-rqgfd            0/1     ContainerCreating   0          22s
```
In the preceding output, notice that a new coupon pod was created. While the old pod is still running and when the new pod is ready, the old one is terminated. This process makes the transition to the new version as smooth as possible.
Once the new pod’s Ready status displays 1/1, press Ctrl+C to stop kubectl‘s watch mode.

Run the following command to check the coupon service deployment history:

helm history eshoplearn-coupon

The history shows the new coupon service version has been deployed.

REVISION        UPDATED                         STATUS          CHART           APP VERSION     DESCRIPTION
1               Thu Sep 10 19:19:31 2020        superseded      coupon-0.1.0    1.0.0           Install complete
2               Thu Sep 10 19:51:10 2020        deployed        coupon-0.1.0    1.1.0           Upgrade complete

Best WordPress hosting reddit

Verify the deployment

Complete the following steps to verify your change is deployed:

Run the following command in the command shell:

cat ~/clouddrive/aspnet-learn-temp/deployment-urls.txt

Select the Web SPA application URL to launch the app.
Log in from the LOGIN page.
Add your favorite products to the shopping bag by selecting the images.
Select the shopping bag icon in the upper right, and select CHECKOUT.
Enter the code DISC-5 in the HAVE A DISCOUNT CODE? text box for a five USD discount, and select APPLY.
Select PLACE ORDER to complete the purchase.
Back in the command shell, select the Centralized logging URL.
In the Seq logs search text box, enter Applying coupon DISC-5 and press Enter.The logs are filtered to display the following entry:

Roll back the deployment

During production issues, one common mitigation is to revert a deployment to a known good deployment. Use the following command to roll back from version 1.1.0 to 1.0.0.

helm rollback eshoplearn-coupon

The deployment history confirms that everything is back to normal:

Rollback was a success! Happy Helming!

Note: In a real-life scenario, you’ll have multiple environments to which the build’s artifacts can be deployed. For example, you might have development, testing, and staging environments. The deployment workflows can be triggered by events like merging PRs. Quality or approval gates, such as a stakeholder’s PR approval, can be added to prevent unexpected deployments to production.

In this unit, you created a GitHub Action to deploy the coupon service to AKS. To test the deployment workflow, you incremented the coupon service version in its Helm chart. Upon completion of the deployment workflow run, you searched the Seq logs to confirm the discount code redemption message was present. Finally, you reverted the coupon service in AKS to version 1.0.0.

Happy deploying!

3 Sites to Learn to Code – for Free 2022 – Online

1. Codecademy

Learn the technical skills you need for the job you want. As leaders in online education and learning to code, we’ve taught over 45 million people using a tested curriculum and an interactive learning environment. Start with HTML, CSS, JavaScript, SQL, Python, Data Science, and more.

2. Pluralsight courses – FREE WEEKLY COURSES

Learn a new software development, IT, data or security skill every week—for free !! 

33% off Personal Annual and Premium subscriptions for a limited time. Gain access to THE technology skills platform with expert-led, online courses for web development, IT training and more! Start learning today and save!

3. freeCodeCamp.org: Learn to code

Learn to code with free online courses, programming projects, and interview preparation for developer jobs.Learn to code.
Build projects.
Earn certifications.
Since 2014, more than 40,000 freeCodeCamp.org graduates have gotten jobs at tech companies including:

Where can you learn how to code for Free

There is no shortage of Berlin learning groups and meetups if you want to learn how to code. If you are not in Berlin, similar resources can be found by heading to meetup.com, and choosing the “tech” meetups in your city. Many of the listed resources have chapters in different cities worldwide. I hope you find something that fits for you.

I will mostly stick to free options as bootcamps are not accessible to everyone.
Many meetups start at 18:30 or later, which is helpful if you are working. Unfortunately many of my favourite meetups often clash, so you will have to pick your focus.
90% of the events are in english, but you will usually find a tutor who speaks German if you prefer that

Women who Code Berlin
Women Who Code is the largest and most active community of engineers focused on inspiring women to excel in technology careers.
They often have full scale workshops that take place over a few weeks. I will be heading to their Intro to SQL workshop soon. They also have biweekly hack evenings, where you can work on your side project, online course, tutorials etc. It is not language specific and there are more experienced people who can help you if you get stuck.
Website: Women Who Code Berlin
Meetup: Women Who Code Berlin Meetup
Tip: Set up notifications for their meetup page and rsvp as soon as you can, as there is often a waiting list for their events.

Women Techmakers Berlin
I usually confuse it with Women Who Code, but I blame the similar colour schemes. WTM Berlin is an amazing group that also offers workshops, intense study sessions and events. One of the most notable is the Javascript Crash Course , they have an archive of the classes. They also live streamed it to people who could not make it to the classes.
Meetup: WTM Berlin Meetup
Website: WTM Berlin

PyLadies Berlin
They host monthly meetups which usually follow a short talk + workshop formula.
Website: Berlin Pyladies
Meetup: Berlin Pyladies Meetup

Heart of Code
A hackerspace for women and those who identify as a women.
They also have various open learning and working groups, for example, topics focused on Python, data visualization, 3D printing, IT security, cycle tracking app, Java, hardware & flashing and many more.
Website: Heart Of Code

Women who Go
A study group for women that want to learn the Go(also known as Golang) language. You do not need to have experience to participate.
Website: Women Who Go
Meetup: Women Who Go Meetup Study resources: Go Study Group

Codebar
Codebar is one of my favourite meetups. It is often hosted every second Monday in different offices. They also have a small library where you can borrow books, I am currently reading their Eloquent Javascript book.
Their workshops are available to women and people who are underrepresented in the tech industry.
Website: Codebar
They also share their tutorials online: Codebar Tutorials

Open Tech School
OpenTechSchool is a movement aiming to offer free tech education. Their events are open to technology enthusiasts of all genders, backgrounds, and experience levels, willing to coach or learn in a friendly environment. They have learning materials that are shared and collectively improved by the online community and anyone is welcome to use it to organize new OTS chapters anywhere in the world.
Website: Open Tech School
Meetup:Open Tech School Meetup
Learning materials:OTS Study

GDG Berlin Android
They are the Berlin Google Developer Group (GDG) focused on Android development. They host a weekly Android Co-Learning event which is a mix of experienced developers and beginners.
Meetup: GDG Meetup

Open source coding in Berlin
An open-source coding workshop aimed at those who are curious about programming.
Meetup: Open Source Workshop

Less frequent events

Rails Girls Berlin
They organize free workshops for women without prior experience in programming. The workshops are led by skilled Ruby on Rails programmers. They are focused on keeping the group sizes small to be able to focus on the student and stick to one dedicated coach per two or three learners. I was lucky to attend a workshop and in a few hours, I had created a basic website that had some crud functionality and I learnt how to deploy it to Heroku. That experience led me to play around with uploading projects, and eventually my blog.
Website: Rail Girls Berlin

Django Girls
They host free, one-day workshops for beginners that will teach you how to create a website using Python and Django. Unfortunately the workshops happen every few months, but you can subscribe to their mailing list to be notified of the next one.
Website: Django Girls Berlin

ClojureBridge Berlin
ClojureBridge is a free workshop introducing women and non-binary people to programming and the local technology community. Unfortunately they have not had a workshop in a long time, but I suggest signing up to their mailing list for updates.
Website: ClojureBridge Berlin

Notable mentions

Geekettes
A community for women in tech. They host talks and organize workshops to teach and refine skills. They also host a unique hackathon . They have a mentorship program that pairs ambitious tech professionals and entrepreneurs with experienced mentors.
Website: Geekettees

Paid bootcamp events
Bootcamps like Le Wagon, Ironhack and Wild Code School often have workshops as part of their marketing strategy to attract students, some of the classes are fun and can be a way to try out coding. Do attend the graduation events and talk to previous students before you decide to join one. Take your time researching them.

Co-up space
co.up is a community space that provides affordable event and workshop spaces in Kreuzberg. They also provide free space for public and free events in the local tech and creative scene. They host a lot of meetups, so follow them on their accounts.
Events: co-up events
Calendar: Events

Free coding “bootcamps”

These options below are similar to a bootcamp structure, where they take you from a to b. I am familiar with all of them and I think they are a good alternative to paying for a bootcamp.

CodeDoor
CodeDoor is a non-profit organisation that provides refugees and migrants with the opportunity to learn to code. You will have to go through an interview phase to be accepted. They meetup every Monday afternoon around 4pm in Charlottenburg, Berlin for learning support, additional training and exchange. I highly recommend them.
Note: In the past participants received scholarships for the Udacity Nanodegree in various fields (the last few courses were given out in December 2019), there have been changes to the courses offered, you will have to contact them for updates.
Website: CodeDoor
Meetup : CodeDoor Meetup

ReDI
ReDI School of Digital Integration is a non-profit digital school for tech-interested locals and newcomers in Germany. They have different programs available and the one that is similar to a bootcamp structure is their 4 month career program that consists of two weekly evening classes (two hours each) taught by volunteers. They are selective and you will need to go to their career information day first before being sent the link to apply for the program. Sometimes their response is really slow, but I think they are a solid option.
Website: ReDI School

Frauenloop
FrauenLoop is an evening program that trains women with resident, immigrant, refugee, non-science, or family-status backgrounds who might otherwise face obstacles to starting or re-entering professional tech roles. They teach 9-month tracks of progressive full-stack web development, data science, and software manual testing and automation, but the registrations are split into 3 months. It is not entirely free, I had to pay 200 euros for the 3 month program I attended. It was hosted by Microsoft Berlin, and was a great experience.You will need to supplement it with another course (for example, an online course) if you want to learn more as it is only once a week. It was not the perfect fit for me because I was a bit advanced for the track I joined and I found it too slow, I should have spoken up to join the intermediate group.
Website: FrauenLoop

Alternative options : Paid bootcamp funding

If you are unemployed or at risk of unemployment the job center can pay for your coding bootcamp. You need to be registered in Germany to be eligible.

What is a bildungutschein?
A Bildungsgutschein is an Education Voucher issued by the Agentur für Arbeit (job center). The aim of the Bildungsgutschein is to train people with new skills in order to find a new career path or job. Once you’re issued with the voucher, you’ll need to take the course within the timeframe specified. The voucher is valid for 3 months.

How to get a Bildungsgutschein

Contact your Agentur für Arbeit and set up an appointment.
Contact the bootcamp and ask for their information packet. It will include their syllabus in German, a report of the job market, and their “registration number”
Prepare a motivation letter for your job agent explaining why you want to learn to code. You can use the following questions to build your motivation letter:
- Where did you work before?
- Why do you want to change your career path or why do you need the coding skills for the future?
- Where do you see yourself after the bootcamp with your new coding skills?

Reality Be prepared, and you will be fine. I had a stack of documents, and my advisor was impressed by the fact that I knew details about the course I wanted to take, and issued me the voucher. They want to see that you have done your research.

What happens after your appointment at the Agentur für Arbeit/Job Center?

If you received a positive outcome, you need to go to the bootcamp for them to sign a contract with you and mail the documents back to the job center.
If you are rejected, try again. Ask the bootcamp for advice.

You can also attend other IT focused programs that are listed on the Bildungsgutschein website. I do not speak German yet, so that did not work for me.
These are the popular bootcamps that have a Bildungsgutschein option available.

9 week/24 weeks part-time Le Wagon
Spiced Academy
The online bootcamp, CareerFoundry

Tip If you go this route, time your appointment with the job center well. It can take up to a month to see an advisor who will issue you the voucher. You also need to contact the bootcamp and go through their application/interview process.

Conclusion
The organizers take their job seriously and offer safe spaces to learn, do not be intimidated to attend the events. The events follow the “Berlin code of conduct”. Make sure to read it before attending them.There are many different routes you can take on your journey to learn programming. I hope this guide helps you as a starting point.

FrontEndNorth Tech Conf

I had the pleasure of volunteering alongside a couple of other folk in the FrontEndNorth conference that happened in Sheffield. It was the first time that I got to go to England and see such wonderful talks and support the organizers!

My first objective was to be able to talk with people in a meet-up/conference environment without feeling awkward. As a volunteer, you have to interact with other people, right? At the very least, you must interact with the organizers or the other volunteers.

Whenever I go to meet ups I often feel like I’m intruding if I try to talk with others there. ‘So? Just drag a friend with you, it’s fine!’ I hear you say, and you are not wrong! But I do genuinely want to know more people that are also interested in the same topics and not feel like I’m ‘butting’ in conversations. Whenever I go with someone else I usually end up not talking with no one else but them and this is because I know I won’t feel like an awkward duck starting a conversation.

My second objective was to see as many talks as I could (I ended up not being able to watch two, but I’ll mention them here anyway!). Some of them don’t have the slides linked because I wasn’t able to find them, if this changes at any point I’ll link them. Let’s just jump in:

The evolution of Responsive Design by Rachel Andrew

_{^{text reads: The first rule of Media Queries is … Do I need a media query?}}
There are many things in this talk that, technically wise, I find extremely useful and important. I was surprised to find out so many things about media queries that I wasn’t aware of and about the new things that CSS is slowly coming out with to make the detection of devices easier and less clunky. However, the thing that stuck with me the most was a quote from when the subject turned towards the user and how they engage with the content that we develop (such as, for example, using outdated browsers):

“Stop expecting people to fix something to use your website. Respond by meeting them where they are.” — Rachel Andrew

Are we even Designing? Like, at all? by Florence Okoye

Unfortunately this was one of the talks that I wasn’t able to attend. I did, however, follow the tweets that were happening during the talk as a way to sort of accompany it.

“Most people here will have heard, in real life or a movie, a black person described as an ape or a monkey. (…) And yet a piece of software created in the 21st century did just that.” — Florence Okoye

It’s honestly… bewildering that this still happens, though not surprising. You need only look at what happened with Microsoft’s AI bot to have a glimpse of what ‘having good intentions and a good heart’ can lead to.

I really hope that I get to at least see the slides or at least maybe see the talk at some other point in time.

Design Tokens and CSS by Stuart Robson

This is the second talk that I didn’t attend… but this is one of the topics that I’m always very excited to talk about.

Since I’ve worked very closely with UI Frameworks, these sort of topics are always very near and dear to my heart. I had never heard them being called “Design Tokens” (I’m a bigger fan of “Spicy variables” myself). I can’t really say much besides just:

Also, small note:

_{^{I’m in this picture, and I don’t like it >:(}}

Have you written tests for that? by Mike Smith

I cannot even begin to explain the allergy most developers seem to have when it comes to tests. I feel it’s gotten a lot better over the years (especially as things do become more accessible and easier to understand) but I am always so glad to hear about how other people do their tests and how we can improve ours in my team. This was especially close to home because on the day before, as I was travelling to the conference and then when I finally settled, guess what I was doing?… Writing tests. I feel that this talk is great to get a reminder what your priorities while writing tests should be and what types of test should be used when and what for.

This was a lot of fun! It never really occurred to me how the voice menus were built (spoilers: using Voice Extensible Markup Language) and I was even more surprised to discover that the origins of using voice as an interface actually happened a lot longer ago than I would have first guessed. Léone mentions that all news, regardless of intense, sound the same because the voice inflation doesn’t change. She also explains how it is possible to not only change the voice, but also the inflation and cadence, and what a difference it makes! In the example used, she starts off with the typical, epic quote from the Princess Bride but spoken in a flat, typically english tone with the same cadence in delivery throughout. However, when she applies pauses (and different lengths at that) and a different voice that fits the character better, it transforms the text completely.

I don’t think I’ve ever heard a more relatable quote than this one:

“If you have a website you have a design system (it’s just terrible and poorly documented).” — Laura Gonzalez

The sharp sense of humour and the design of the slides were really great. Like a jolt of energy. We’re currently working on getting our own Design System in order, so this talk is one that I’ve been sharing with the designers in me team.

Developing Software for Prisons by Nevelina Aleksandrova

I’m always excited whenever talks that focus on empathy end popping up in a (mostly) tech environment. As a front end developer, the conversations around ‘security breach’ happen, but they are never to the level of what that same term might mean when you are developing for a prison.

Nevelina walked us through how the process is slow because of the number of variables that exist and the impact that might cause. How it’s important that information regarding prisoners is clear and obvious. Prisoners have their daily activities (akin to jobs) but their paths through the prison must be carefully calculated in case if another prisoner (for example, from a rival gang) is out of his cell at the same time. There’s still a long way to go, but it’s amazing how these smaller, slow changes have already been a great improvement for the quality of life of those that work in prisons.

Burnout and Balance by Jessica Rose

The sense of humour in this talk was right up my alley. I tried to keep track of the amount of good quotes that made me snort throughout but I was sadly unable. Doing the last talk of a day can always be a challenge, but Jessica held the attention of the crowd from beginning to end. “You’re more than your work. Your quality of life matters.” is a quote that is very often forgotten about especially in the field of tech and coding where the lines between work and “free-time-fun” can oftentimes become blurry.

Speaking from experience, it’s hard to separate your self worth from the things that you create, from your work. That is a dangerous tight rope to walk.

Golden words to finish on:

“If, like most people, you can’t quite your job and spend more time with your horse: do less, in ways that won’t damage your life. Outsource. Start saying no. Selectively emotionally invest. Ask for help. Recharge. Practice forgiveness and don’t be a jerk.” — Jessica Rose

Closing thoughts!

So, now you know that at least the second objective I was pretty successful with. But what about the first one?

Well… It sort of worked. I definitely got to meet a lot of the volunteers though not really talk a lot with them for an extended period of time (which makes sense). One of the highlights was that I got to meet Katie Fenn and Ian Parr in person. I saw Katie’s talk when I attended JSConf EU 2018 in Berlin and her sense of humour (and cat gifs) made me realise that conferences and meet ups were something that I would love to be more involved on. As for Ian, I really want to give him a special thanks because throughout the day he always made sure that I was ok and not feeling alone. It meant a lot, thank you.

I spoke to a couple of attendees, got new book references to read (thanks Kyle!) and got a lot of new things to think about as I returned home. I still felt like an awkward duck, but it’ll get better.