Winston WWW Vienna based developer/designer/security tester
Web Development
As a freelance web developer I focus on frontend development with React and NextJS. I also bring experience with a variety of other technologies such as NodeJS, Java Spring Boot, MongoDB, MySQL and more.
Web Design
When creating web designs I pay much attention to user experience as well as to SEO. In addition, I use my web development knowledge to ensure that the designs are easily implementable by programmers.
Web Security
I offer security testing and security code reviews for web applications. Using manual methods and automated tools I look for vulnerabilities and potential weak points.
you've found meWeb Development
Want me to work on your project?
I am a React + NextJS developer.
If you want to hire me for freelance work you can contact me at hello@winstonwww.com
Through multiple years of working as a full stack developer I also gathered experience with many other technologies.
To name a few:
Backend: Java Spring Boot, NodeJS, MongoDB, MySQL
Cloud: AWS, Azure, Firebase
CI/CD: Jenkins, Docker
CMS Storyblok, Strapi, Wordpress
Some things I currently find interesting:
Lottie animations are JSON based animations which are smaller and more customizable than GIFs. Programs such as After Effects can be used to create complex animations.
What I love about lottie animations is that they can be very interactive while maintaining great performance. In the example below you can control the flow of the animation with your cursor movement or by draging on touch devices.
There are multiple different libraries to play lottie animations. For this example I used lottie-player and lottie-interactivity.
To improve page speed React components can be loaded only when they are needed.
When lazy loading prerendered components on the client side with next/dynamic NextJS leverages React Version 18's <Suspense> feature in the background to display fallbacks while the component is loading. This is demonstrated in the example below.
Also worth checking out: NextJS Streaming with Suspense
The CSS filter property provides various visual effects. With the backdrop-filter property these effects can be applied to the area behind an element.
Examples of filters are blur() to blur an element, contrast() to increase or decrease the contrst or invert(), to invert colors.
Filters can be used to create quite interesting effects. For example blur() and contrast() can be combined to make elements look like they stick together. Combine this with an opacity animation and you can make it look like the elements are morphing into each other, provided that they have a relatively similar shape.
Using the stacking context you can place some elements above and some below a backdrop-filter. This way you can have elements with the same color as the background only be visible when a filter such as invert() is placed between the background and the element.
Morphing fonts
fonts
fonts
invert() color to show hidden elements
Click the button below and look for the hidden text above this box.
On mobile the you can tap around to move the inverted spot, after you clicked the button.
/* Morphing fonts */
/* CSS for the container around morphed elements.
You can then animate the opacity to switch between words. */
background: white;
filter: blur(0.05rem) contrast(30);
-----------------------------------
/* invert() color to show hidden elements*/
/* CSS for the mouse pointer */
filter: invert(1);
/* Element which should not be inverted */
<p style="position: relative; z-index: 100">
secret
</p>
import dynamic from "next/dynamic";
import { useState } from "react";
const Lazy = dynamic(
() => import("./LazyComponent"),
{ loading: () => <LoadingSkeleton /> }
);
export default function Demo() {
const [show, setShow] = useState(false);
return (
<>
<button onClick={() => setShow(true)}>
Lazy load component
</button>
{show && <Lazy />}
</>
);
}Hover or drag left and right to control the animation
/* Lottie Interactivity */
create({
mode: "cursor",
player: "#lottie",
actions: [
{
position: { x: [0, 1], y: [-1, 2] },
type: "seek",
frames: [0, 60],
},
],
});
/* Lottie Player */
<lottie-player
ref={player}
id="lottie"
mode="normal"
src="/spider.json"
/>
Web Design
Coming soon(ish) ... just look at this website for now
Web Security
I absolutely love solving things in unintended ways and cyber security definitely scratches that itch. My web development background lead me to focus on web security. In this field I do security code reviews and security tests for web applications.
If you want to hire me for freelance work you can contact me at hello@winstonwww.com
Let me try to spark some enthusiasm for security
Below I created a couple of challenges to tickle your puzzle brain and convince you of the coolness of (digitaly) breaking things. Doing things that shouldn't be possible is way too fun!
Level 1
Requirements: NoneThe word “dog” is filtered out and will be deleted as soon as you type it in. Can you find a way to output it anyway?
Expected output: dog
Input:Output:ÂLevel 2
Requirements: Understandig of JavaScriptImagine the input is placed in a template like the following:var someString = '[input]';Apostrophes are escaped. Can you find a way to break out of the string and open an alert() window?
When coding, there are many characters which have a specific meaning in a programming language. Sometimes you want to write these characters in plain text without them executing their functionality. To achieve that you can use the backslash character “ \ ”. It escapes the next character, which means displaying it normally and removing any functionality.
Hints:
- JS commands in the same line can be separated by a semicolon.
- It can be useful to comment code parts out which cause errors.
var someString = '';Level 3
Requirements: Understandig of SQLImagine the input field below is used to input a username to find their favorite food. On the backend the input will be put into a SQL query. Can this be exploited?
If you got access to a database with user data, you might be able to find passwords which are (probably) hashed.
Your goal is to find a user with a weak password. What is the users password? Put it into the password field below.
Hints:
- 'UNION' can be used in an SQL statement to add data from a different table.
- There are password cracking tools out there, even some online tools like crackstation.net
SELECT username, food FROM users_food WHERE username='';herbertspassword