teleren/devto huggingface dataset:
Build a Portfolio Website with React, Webiny, and Apollo
Tags: graphql, react, javascript, beginners
Published: 2020-11-10 14:54:52

In this tutorial, you will set up a simple portfolio website to showcase your projects and your blogs using pure React, Webiny Headless CMS, and Apollo GraphQL. After setting up your portfolio website, you will be able to focus all of your creativity on the content for blogs and projects.

These are the features of the Portfolio Website:

- 2 Content types: Blogs, Projects
- 6 Created blogs
- 6 Created projects
- Apollo Client to fetch the content models data
- Responsive design using Material UI React Components
- Front-end deployment with Vercel

# Demo
Here is what we'll build: 

![blogs (1)](https://dev-to-uploads.s3.amazonaws.com/i/6karok46ia8sdgz94jlk.png)

Or, you can [Watch the live demo](http://docs.webiny.com/docs/tutorials/build-a-portfolio-website-with-react-webiny-apollo/#11-webiny-headless-cms-project?utm_source=Dev-to&utm_medium=webiny-docs&utm_campaign=webiny-cross-promotion-nov-09&utm_content=webiny-doc-headless-cms-react-portfolio&utm_term=W00363).

# Prerequisites

[A Webiny Project](https://docs.webiny.com/docs/get-started/quick-start/?utm_source=Dev-to&utm_medium=webiny-docs&utm_campaign=webiny-cross-promotion-nov-09&utm_content=webiny-doc-quick-start-page&utm_term=W00364)

First of all, make sure you follow the [prerequisites]() to create a [Webiny project](https://docs.webiny.com/docs/get-started/quick-start/#prerequisites?utm_source=Dev-to&utm_medium=webiny-docs&utm_campaign=webiny-cross-promotion-nov-09&utm_content=webiny-doc-quick-start-page&utm_term=W00364).


# Follow the tutorial [here](http://docs.webiny.com/docs/guides/serverless-applications/headless-cms/build-a-portfolio-website-with-react-webiny-apollo?utm_source=Dev-to&utm_medium=webiny-docs&utm_campaign=webiny-cross-promotion-nov-09&utm_content=webiny-doc-portfolio-website-react-headless-cms&utm_term=W00365) 🚀

---

Thanks for reading! My name is Albiona and I work as a developer relations engineer at Webiny. I enjoy learning new tech and building communities around them = ) If you have any questions, comments, or just wanna say hi, feel free to reach out to me via [Twitter](https://twitter.com/albionaitoh).
First look at the AWS Activate Console
Tags: aws, startup, beginners
Published: 2020-11-10 14:52:12

{% youtube DWKLCzeKrb0 %}

Startups building on AWS can apply for AWS Activate, offering credits, training, support and more. With the recently launch Activate Console, you can see the status of your Activate membership.

From the console you can see your credit status, tailored tech and business content, find exclusive offers, and wide range of guidance and support.

Signup to Activate and get access to the Activate Console, upto $100,00 in credits, training, support and more https://go.aws/3ctbXHY.

[Subscribe](https://www.youtube.com/c/RobDeFeo?sub_confirmation=1) to the channel for the latest videos.
Hack.lu 2020 CTF write up: Callboy

Tags: security, ctf
Published: 2020-11-10 14:50:34

# Description

Have you ever called a Callboy? No!? Then you should definitely try it. To make it a pleasant experience for you, we have recorded a call with our Callboy to help you get started, so that there is no embarrassing silence between you.

PS: do not forget the to wrap flag{} around the secret

# Write up

This was quite a fun challenge, I learned a new way to use [Wireshark](https://www.wireshark.org/) and I can't stop to be amazed by this tool!

We get a pcap file and after looking a bit through it we can identify quite quickly the communicating IP addresses. Coupling that with the description of the challenge, we know that we have to capture some kind of communication between two clients.

There is a lot of intended noise in the traffic: DNS requests to a lot of the top alexas websites, but we don't care so much about it and it's an obvious rabbit hole.

We know this is a recorded communication, so probably telephony or video. After some quick research, we realise it's possible to extract audio from pcap files!

We tried to fix a bash script for like an hour before realising that Wireshark does it for you [thanks to this link](https://phonesystemhelp.info/how-to-listen-and-extract-audio-from-a-wireshark-trace/).

After that, the challenge is a piece of cake, we need to follow the steps explained in the web page on how to extract the audio, play it and we get the flag!

![Final result of the analysis](https://dev-to-uploads.s3.amazonaws.com/i/xjqt5dlclujpq5acrlr0.png)

In itself it's quite an easy challenge when you know where to look. Some interesting conclusions on that would be:

* situational awareness: how to get information from the noise of the traffic
* identify quickly protocols between relevant IPs
* get to know Wireshark much better!
Data Augmentation :

Tags: machinelearning, keras
Published: 2020-11-10 14:36:47


🎯 Data augmentation is a technique through which one can increase the size of the data for the training of the model without adding the new data. Techniques like padding, cropping, rotating, and flipping are the most common methods that are used over the images to increase the data size.

Note: Both Keras Preprocessing Layers and tf.image can be used for data augmentation. For finer control , tf.image is preferred.
Join 100DaysOfNoCode with UI Bakery on Wed (Nov 11)
Tags: webdev, discuss, showdev, techtalks
Published: 2020-11-10 14:24:47

Meet our team at the 100DaysOfNoCode workshop with Max Haining on Wed (Nov 11)!
Discover how to create a #dashboard, an #MVP, or a #webapp using UI Bakery – just in several hours. 
Any questions for the team are welcome during the show!

Sign up for the workshop -> https://docs.google.com/forms/d/e/1FAIpQLSfsnQgB5tX62GESqRzz60FuLAS9XNQEJIn6QaOwPFdnGF267Q/viewform

﻿
🤦‍♂️ How to fail to record a conference presentation
Tags: fail, lessonslearned, conference, presentation
Published: 2020-11-10 14:18:53

Last week I was recording a presentation for the conference [Kontent Horizons](https://horizons.kontent.ai/). I did not want to just use a webcam and laptop mic, so I had borrowed a Sony Alpha II camera.

I cleaned up the stage, which means mess everywhere but where the camera looks, and used my wife as a model to set up the camera aperture and focal point. I even did a test video and everything looked good.

I changed the battery pack to get a nice hour of recording window and talked through the whole presentation. You know the feeling when you have all the footage you need? I had that, for about a minute.

![Out of focus and dark image from the camera](https://dev-to-uploads.s3.amazonaws.com/i/vykc1ttotx6x0743wwd7.png)

I plugged the SD card into the computer only to find out that I am completely out of focus and the frame is missing a lot of light 😫. I ended up re-recording the next morning.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/axpamlr8ruxrs2p15jwe.png)

*Lesson learned:* **The focal point of a camera may be reset if you exchange a battery pack. Always do a test video BEFORE recording a presentation.**

*Bonus:* As I'm using my iPhone to record the sound from a clip-on mic, I also found out that if someone calls you in the middle of the recording, the phone stops recording. And you have no idea as it's on MUTE! There went another 45mins of my life 🥱. I hope the presentation will be worth it, it's about choosing the right Jamstack tool, and you can see it on [Kontent Horizons](https://horizons.kontent.ai/) for free 😊.
TIL: How to pass data to parent component on a hybrid Angular project
Tags: angular, todayilearned
Published: 2020-11-10 14:07:58

Unlike my previous [post](https://dev.to/prayatna/til-how-to-pass-data-to-child-component-on-a-hybrid-angular-project-4o7p) where we passed data to a child component, we will pass data from a child component to an AngularJS (parent) component.

As with an Angular component, I use an event emitter to emit as `@Output` like
```typescript
@Output() 
totalCountEvent = new EventEmitter<number>();
```

So, I'm trying to get the total count to the parent component (AngularJS component) `subject` and we place the listing component to the `subject.component.html` as
```html
<div>
 ...
  <subject-listing 
   (total-count-event)= 
        "updateTotalEarnablePoints($event)">
  </subject-listing>
</div>
```
This is the same way we do it on any of the Angular components, but the only difference is `(total-count-event)`. We have to use kebab-casing.

And on our angularjs module, we downgrade the `subject-listing.component.ts` as 
```typescript
.directive("subjectListing", downgradeComponent({ component: SubjectListingComponent, outputs: ['totalCountEvent'] } as any));
```
With that, you can easily use the totalCountEvent on the AngularJS `subject.component.html` component.
Random thoughts of a dev noob #2
Tags: beginners, javascript
Published: 2020-11-10 14:07:19

Finished Basic Javascript, ES6 & Regular Expressions of the Basic Javascript today. What can I say? Responsive Web Design challenges were waaaay easier. More hitting the wall, less rolling over the challenges, more "hey I am really fit for this!?" thoughts (is that what they call the Impostor Syndrom?).
The hardest challenges were recursive functions (still not sure I got them right, probably not, probably need much more practice) and (surprisingly for me) regular expressions (I've spent more time on these 33 challenges than on both Basic JS & ES6 (111 + 31).

Interestingly enough I've found that the best way for me to solve the hardest challenges was to get away from my PC and walk the dogs or go to sleep (I've literally found the solution for two challenges while falling asleep and they worked the next day).

Also YouTube suggested a video from this channel https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw about making a calculator using HTML + CSS + JS. I've spent some time on it and found that I know HTML & CSS, but not enough JS for this yet. Nevertheless it was very satsifying to see a (even not working) calculator with a nice design and clickable buttons made by myself :) Probably sounds funny, but it really helped me to keep going.

I've started 30 Days of Code challenge on https://www.hackerrank.com/, but again this was a bit more than I could chew for now. Maybe later.

That's all for this post. Let's get to debugging challenges.
Hoppscotch Celebrating 25,000 GitHub Stars ✨
Tags: webdev, opensource, javascript, showdev
Published: 2020-11-10 14:00:11

Hoppscotch just received it's [25,000th star on GitHub](https://github.com/hoppscotch/hoppscotch). We'll use this milestone to recap Hoppscotch’s growth and other important milestones since its beginning as an experimental project in 2019. We've accomplished lot of great things together.

{% cta https://github.com/hoppscotch/hoppscotch %} GitHub → {% endcta %} {% cta https://hoppscotch.io/ %} Web app → {% endcta %}

> <sub>**To those who don't know what Hoppscotch is:**
> Hoppscotch is an open sourced API request builder used by 100k+ developers. Helps you to create / test / save requests faster, saving precious time on development. An online free, fast and beautiful alternative to Postman / Insomnia etc.
> Web app: [hoppscotch.io](https://hoppscotch.io)
> GitHub: [github/hoppscotch/hoppscotch](https://github.com/hoppscotch/hoppscotch)</sub>
> {% github hoppscotch/hoppscotch no-readme %}

&nbsp;

While tracking the success of an open source project is known to be a hard problem, we've a few metrics available to us. Currently 114 developers have contributed to some of the 2570 commits of the [Hoppscotch repository](https://github.com/hoppscotch/hoppscotch) made available in 7 releases. And this is only data from the main Hoppscotch repo. The ecosystem has [many other repos](https://github.com/hoppscotch) ranging from [Hoppscotch Browser Extension](https://github.com/hoppscotch/hoppscotch-extension) (which fixes `CORS` issues) to [Proxyscotch](https://github.com/hoppscotch/proxyscotch) - A simple proxy middleware server.

The number of stars of a GitHub project is yet another indicator, because it means people are adding the project to their list of favorites. However, people that starred Hoppscotch are not necessarily users and many users don’t star Hoppscotch (if that applies to you, consider giving us a star!), therefore its not a precise metric. Till date Hoppscotch has 100k+ all-time users during the span of an year. Which includes ~20k+ monthly users.

Milestones like this are proud moments for the developers & community, help motivate more work & new developments. If you'd like to support Hoppscotch open source project, consider [sponsoring us on GitHub](https://github.com/sponsors/hoppscotch).

---

[![img](https://dev-to-uploads.s3.amazonaws.com/i/vxceg58s4tnedd6nidmb.png)](https://star-history.t9t.io/#hoppscotch/hoppscotch)

---

**This will be added to the greatest moments timeline.**

&nbsp;

Immense thanks to @ben and entire Dev Team for their support from day one. To @andrewbastin for his selfless services, engineering expertise and contributions. To each and every contributors for being a part of the project.

---

<sub>If you want a heads up on my next projects, or just want to chat about the web, life and happiness make sure to follow me [@liyasthomas on Twitter 💙](https://twitter.com/liyasthomas)
If any of my projects helped you, please consider [making a donation](https://paypal.me/liyascthomas).</sub>

&nbsp;

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0stt7hkaaco28q7dy8xn.png)
Death to @polymer, long live LitElement and HTMLElement
Tags: webcomponents, webdev, haxtheweb, litelement
Published: 2020-11-10 13:48:11

A year ago, I was on a quest to eliminate our usage of PolymerElement and replace it with LitElement or Vanilla via HTMLElement (oddly the year before that it was moving from Polymer 1.x to 3.x). This year, at about the same time, we're now gutting all references to the `@polymer` series of elements that helped us get to where we are today.

What started with a simple thread pull of "I'll just remove all our usage of paper-button" kicked my OCD into overdrive and now has us on the edge of replacing every reference. I'm currently in the process of eliminating iron-ajax and paper-dialog (dialog will take the longest). We've got a long road ahead and this is just in our core element group for now (legacy apps will be a mix of upgrade or just leave it be, HAXcms will move a bit slower in theme layer).

I wanted to kick off a series about the quest to remove these pieces because it illustrates one of the more powerful aspects of web components - Progressive decoupling. But not the kind you might be thinking of. In this instance, I'm referencing the decoupling, one piece at a time, from an old library, element or way of thinking.

Web components offers us an abstraction or pointer to the guts of a file to replace the contents of something on the page. When viewed this way, the browser and endpoint application no longer cares what's in the element, just that it has a definition.

This sees us through the following pattern in our life-cycle
- 2017: Debate really hard about the name of something. Land on the need for a tag called video-player to handle all our video needs
- 2018: launch the tag using Polymer 1.0 and the HTML Import spec (which is now defunct). Roll this out into all our applications, in twig and other template engines, CMSs, etc.
- 2019: Replace all Polymer 1.0 with Polymer 3.0 + the actual JS modules spec for building a web components application. Our end points didn't change, just how they got fed the definition.
- 2020: Replace all paper-checkbox, paper-slider, paper-progress, iron-icon, etc tags with our own versions or vanillaJS `input` elements. No end point changes, no application changes, just the interns of the `video-player` tag.

In all 3 years of this life cycle example, we've shipped an identical designed player yet the guts and how it got there changed. This seems subtle, but we have the [video-player on a CDN](https://webcomponents.psu.edu/) now with a single line integration to implement ([read more about it here](https://dev.to/btopro/part-1-how-penn-state-unbundles-web-components-for-cdn-deployments-20di)). That means we can sustainably update definitions across all of our properties without a good understanding of the places they are deploys.

In the series to follow I'll talk about different elements along the way and how we got rid of iron / paper tags while simultaneously improving our usage conventions. This will be a mix of video and writing and code examples. Enjoy!
Using NodeJS App with Apache
Tags: node, apache, server
Published: 2020-11-10 13:13:15

How setting Apache2 using proxy for expose a NodeJS app.

First install apache2:

`apt update `

`apt install apache2`

install nodejs e npm

`apt install nodejs`

`apt install npm`

copy your app in /var/www/demo

here a repo to my demo app if you want use it:

[https://github.com/pierangelo1982/nodejs-experiment/tree/master/06%20-%20show_hostname](https://github.com/pierangelo1982/nodejs-experiment/tree/master/06%20-%20show_hostname)

install pm2

`npm install -g pm2`

we use pm2 for start a daemon of our app, and for enable an autostart in case of reboot of our machine.

from your terminal go into the root folder of the app

`cd /var/www/demo`

and launch the command:

`pm2 start app.js`

after that we must config an automatic start in case of reboot:

so launch this command:

`pm2 startup systemd`

and copy the env that will be print and paste it in the terminal, in my case is this:

`sudo env PATH=$PATH:/usr/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u pierangelo — hp /home/pierangelo`

now we go to settings apache2
as first things we must enable two modules:

proxy

proxy_http

so from terminal launch this:

`a2enmod proxy`

`a2enmod proxy_http`

after that go in /etc/sites/available and create a file named myapp.conf

myapp.conf

```
<VirtualHost *:80>
 ServerName node.mysite.it 
 ProxyPreserveHost on
 ProxyPass / http://localhost:3000/
 ProxyPassReverse / http://localhost:3000/
</VirtualHost>
```

check carefully, in ProxyPass and ProxyPassReverse you mast show the localhost with the port that you use in your nodejs app.

after that enable your virtualhost:

`a2ensite myapp.conf`

and restart apache2

`service apache2 restart`

now you should see your app running on your domain address.

[Vedi Tutorial Here](https://youtu.be/mbR-4ILCeig)
Vue: Why is Vue JS used by developers?
Tags: vue, javascript, uiweekly, java
Published: 2020-11-10 13:13:08

What exactly is Vue JS?

Vue JS framework has been created for UI development and design. The main functionality has been focused on interface-related tasks. It will be possible to integrate it for the development of interface into any JS project while making use of one more JS framework to develop complicated operations. The primary objective of Vue will be to manage the software’s view.

As compared to React, Vue permits working with animation, and its core functionality happens to be much more versatile. It is significant to set up many more additional libraries for getting the level of functionality depth of Vue to React.

Why is Vue JS used by developers?

Software developers like to make use of Vue mainly because of its efficiency as well as simplicity. As compared to most of the JS frameworks at present, it is more elegant and simpler. The flow appears to be natural while coding on Vue JS. All the operations are quite sensible out there.

    A comfy design: It is evident that the design of Vue JS has been cut out properly given that it is straightforward and logical.

    Only one syntax: The identical logic is used by Vue JS for writing the old User Interface functionality. There is no requirement of adapting to lots of syntaxes and going through more than one tutorial for writing an innovative feature. In case a Vue JS file is sent to you by a developer, you will be able to comprehend it without any explanation, unlike React.

    Effective official plug-ins: An assortment of official libraries is provided by Vue JS for procedures such as routing.

    It is not supported by corporations: According to some developers, it will be an advantage in case a framework is backed up by Facebook or Google. However, for others, the support provided by companies exploiting user data is not recommended.

Small teams often make use of Vue JS for developing medium-size projects. Vue stands out with its simplicity, and this makes it the preferred choice for products that are minimum viable. Nevertheless, despite all these advantages, Vue is not the best amongst the alternatives of React out there.

Learn more here:https://www.rlogical.com/blog/vue-native-vs-react-native/
Daily Developer Jokes - Tuesday, Nov 10, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-11-10 13:00:27

---
title: "Daily Developer Jokes - Tuesday, Nov 10, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Tuesday%2C%20Nov%2010%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125969479bf.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What did XHR say to AJAX when it thought it was being a Mean Girl?

___A:___ Stop trying to make fetch happen!
 -->
Who Am I?
Tags: devjournal
Published: 2020-11-10 12:50:38

<p align="center">
<img src="https://i.ibb.co/Zd5R33H/53fe04f9-8115-446a-8173-0831c55330ee-removebg-preview.png" width=100 height=100/>
</p>

### Hi, I'm Hassan ✨👋                                                                                           


I'm a **Software Engineer**, graduated from Alexandria University, **Computer and Communication Engineering** department.
I do coding for life as I enjoy it, not only during work, Adaptive with different technologies and Interested in exploring new tools.

🌱 I’m currently working with [Sia](https://github.com/sia-world) as a (Full-time) **Back-End Engineer**, I'm involved to create services as Gamification, Posts and Education Materials using **Micro-services** architecture.

I can `code` 💻 in:

`Over 10000 lines`: Java, C/C++ and Python

`Over 1000 lines`: C#, SQL, MATLAB, HTML, CSS, Javascript, Dart, Kotlin

`Familiar`: Assembly, Arduino

I also can work with many `tools` and `frameworks` as: 
- Spring boot (Back End `Java`)
- Node.JS (Back End `JavaScript`)
- Angular , React.JS (Front End `JavaScript`) 
- AWS (`Cloud Services`) 
- Swagger (`Api` Documentation)
- Mockito, Karma (`Testing`)
- MongoDB & MySQL (`Databases`)
- Hadoop (`Big Data`)
- Git (`Version Control`)
- Jira (`Agile Methodology`)
- Flutter (`Cross Platform`)