The concept of “You Gotta Love Frontend” (aka YGLF) was born in 2015. YGLF is a non-profit community event, built by developers for developers, aimed at delivering high-quality content on the hottest topics that every Frontend enthusiast needs to know.

YGLF brings in internationally recognized speakers, as well as attendees, and with the young and vibrant atmosphere of the Frontend community, YGLF creates an energetic hustle and bustle of software engineers from around the globe.

At our events, you can spark the most interesting conversations between colleagues and strangers alike, and explore together some of that Frontend enticement over good food and beer. Don’t miss out on the fun and join the community!

For the first time, YGLF is coming to the Baltics. With a growing industry, supported by a lively and passionate community of developers, it’s time YGLF brings some of its magic to Vilnius. Set to take place in the city center, in a freshly renovated, and somewhat hipsterish venue, we plan to bring you big names with irresistible talks and a whole lot of fun!

YGLF is a series of community events built by developers for developers, a non-profit conference aimed at delivering high-quality content on the hottest topics that cutting edge front-end developers need to know. Bringing in internationally recognized speakers and attendees, with the young and vibrant atmosphere of the front-end community, YGLF creates a buzzling bustle of software engineers from around the globe.

You Gotta Love Frontend

As more people move into the online world, it is more crucial than ever to ensure that the world's diverse written languages have their place on the web. 

Typesetting on the web doesn't involve metal sorts and composing sticks. Instead, we use web fonts and CSS. In this talk, we'll cover the various font properties which, over time, have been continually evolving, giving developers better control over the typography of their projects, as well as even better performance with variable fonts. 

We will also look at how modern CSS techniques can be used to design versatile layouts that can adapt well regardless of viewport. From the rendering of individual characters, the fonts which support them, and laying them out on web pages, let's see how we can build a web that is truly world wide.

Typesetting for a Global Web

Server-Side Rendering (SSR) has become a go-to method for improving the load time of dynamic websites. Rendering content on the server can significantly reduce time to page visibility, and is also beneficial for SEO. 

However, SSR is not without significant risks and potential downsides. It's all too easy for an SSR project to fail, to not provide the desired benefits, or to introduce unexpected problems. 

In this session I'll describe the issues and problems we encountered while transitioning the Wix platform from being fully Client-Side Rendered (CSR) to almost totally SSR, and the ways in which we overcame these problems.

The Challenges and Pitfalls of Server Side Rendering

Gone are the days of knobs and buttons, or tactile controls. But are you really limited to a keyboard and a trackpad or a mouse, or could physical controls enable better control of your software? 

This talk builds up on Web MIDI API, demonstrating how physical interaction with browser software enables greater control. An online image editor, a software instrument, and a Snake game are demonstrated on stage as examples of applications that can benefit from extended physical control. And the best part is, everything happens in JavaScript and in your browser.

MIDI A New Dimension in Controlling Your Browser

Algebraic Data Types (ADTs) are types composed of other types. There are two classes of them - product and sum types. Although there is a better support in JavaScript for product types, we can also use sum types as well. 

In this lightning talk, Marius, briefly explains what these different ADTs are and how can we use them to better model and think about our data.

Algebraic Data Types

More than three years later, the introduction of classes to the ECMAScript standard is still a controversial topic. Brought over from popular classical object-oriented languages, they're not only an arguably unnecessary feature for JavaScript, but their usage can become actually harmful very easily. 

In this talk we'll take a look at the potential issues and pitfalls of using classes, like the need for context binding of methods, and suggest alternative patterns that are conceptually simpler, easier to work with, safer to use, more idiomatic, require less code and are actually more powerful. 

Come realize that all you really need in JavaScript are functions!

You Might Not Need Classes

We can all pretend that we’re helping others by making web sites and software accessible, but we are really making them better for our future selves. 

Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. 

This isn’t intended to be a deep dive, but more of an overall primer for those who aren’t sure where to start nor how it helps them.

Selfish Accessibility

The average mobile website page weight is ~50% images. Toss in the complication of thousands of differently sized screens, and it might appear that efficient delivery of images to every device is an impossible task. But all is not lost! 

In this talk, we’ll examine strategies to send the perfect image to every device, ensuring a fast, beautiful rendering of your content. We’ll look at progressive images, placeholder images, lazy loading and other techniques and real world examples that will improve the usability of your site or app. 

Attendees will come away with an understanding of the current ‘state of the art’ for optimizing visual content on the web.

Fast and Beautiful  Modern Image Delivery Techniques

Debugging JavaScript can drive developers crazy. It’s not surprising when so many us stick to the trusty console.log - but there are better ways. From tracking down a critical issue in production, to simply struggling to add a new feature and not realising you’ve misread some documentation - debugging skills are used every day but it's difficult to take the time to improve those skills when the pressure is on. 

This talk will show you some really handy techniques that will level up your skills of deductive reasoning.

Essential JavaScript debugging tools for the modern detective

VR. AR. These acronyms represent an increasingly prominent movement towards immersive, spatial computing as a modality for interacting with the software that we use on a regular basis. 

Virtual and augmented reality frameworks are becoming more widely available and the benefits of these technologies are taking shape - which means that we as developers need to be prepared to consider how we integrate these tools into the experiences that we build and anticipate the impact they have on the way that people use software. 

This talk will discuss the intersection of immersive technologies with the web, explore real-world applications of virtual and augmented reality across industries, and offer insight into the ethical considerations with developing VR and AR applications.

Understanding the Opportunity and Impact of Immersive Technologies

Explore horrible, boring, and unique User Interfaces. Learn how design, usability, and UX intersect.

On the web today, everything looks like everything else, unless it's unreadable, inaccessible, confusing and disruptive. How do we strike a balance between leaving a memorable impression and helping users with a convenient and familiar interface? Or, put differently, how do we break out of predictable and boring designs without breaking the usability and functionality of our experiences?

In this talk, Vitaly will shed some light into a strategy of how to bring personality back to web design, and how we can make our experiences more humane, while also having a higher return on investment. We'll look into the good ol' UX nightmares and disruptive patterns, from annoying pop-ups to shady GDPR consent overlays; from unreadable CAPTCHAs to disturbing notifications. 

We'll explore how to design better carousels, complex tables, car configurators, seat selection, historical timelines and baseball tournament brackets. Beware: you might not be able to unlearn what you'll learn in this session. Bonus: you'll see some slightly dirty examples of things being done out there, so bring along some pragmatism to this talk.

The Shady Secrets From The Dark Corners of Web Interfaces

Machine learning can have some pretty complicated concepts to grasp if you’re not a data scientist. However, recent developments in tooling make it more and more accessible for developers and people with little or no experience. One of these advancements is the ability to now train and run machine learning algorithms and models in the browser, opening this world to front-end developers to learn and experiment. 

In this presentation, we will talk about the different applications, possibilities, tools and resources, as well as show a few examples and demos, so you can get started building your own experiments using machine learning in JavaScript.

Practical Machine Learning for Front End Developers

Traditionally, soundly typed-language are warm and cozy in their own world, but as soon as they have to deal with the outside world (say, talking to a REST API), the pain quickly sets in: trying to keep a type definition in sync with a moving external service, manual conversion back and forth, and lots of boilerplate.

Well no more!

Proper GraphQL support in ReasonML libraries means that we can have full-stack safety, knowing that if our programs compile, the server can satisfy our requirements! And on top of that, we get all the other GraphQL goodies, like tooling, in-editor auto-complete, and fantastic compile-time optimizations, for free!

But what about the server-side, you ask? There are so many places things can go wrong when trying to maintain the promises you give to your GraphQL clients, I hear you cry out!

Dry your eyes, friend, for `ocaml-graphql-server` is here to guide you to the happy full-stack GraphQL+Reason world you’ve been dreaming of, where whole classes of errors are eliminated.

As in any good talk, however, we’ll also take a look at some of the painful points of this approach, and how ReasonML might make some tasks more difficult so that you can leave with a confident understanding of whether this new frontier is one you want to brave any time soon.

Having Your Cake and Eating It Too GraphQL in Reason

Gone are the days when we used creative HTML table tricks to show a bar chart or resorted to saving static images from Excel. 

In this talk, we will cover the modern data visualization landscape and take a peek into the future.

The Future of Data Visualization on the Web

After we understand how important Web Performance is and we've applied basic techniques, what's next? In this session, we will cover extreme techniques that will blow your mind about Web Performance. New compression algorithms? new image formats? Client-Hints? HTTP/3? Let's hack Web Performance.

After quickly reviewing new metrics and goals, we will get deeply into advanced hacks to increase perception and performance on the web and PWAs, that leads to more conversion and better experience, specially important on emerging markets. We will cover the updated checklist of techniques to improve experience and perception and recent additions and hacks, such as: the usage of HTTP/2 and HTTP/3, how to replace PNGs and JPEGs, HTTP Client Hints, better compression encoding algorithms available, browser's prefetching and lazy loading new abilities and how advanced techniques on top of Service Workers can help improving conversion and reduce user's frustration.

We will finally talk about how we usually underestimate the Web on mobile devices, and ideas to offer reactive web optimizations that will keep a consistent experience on different network types and devices.

Hacking Web Performance

You know that fear. The fear of changing something in your CSS. Deleting a CSS rule is a lesson in getting yourself to calm down, telling yourself that it’s OK, you are absolutely _sure_ that deleting that rule won’t change anything. And only manual testing can assuage that fear. And yet, even then, you’re still frightened that you haven’t checked _everything_, and that you missed something. Not to mention that it’s amazingly boring. Never fear again! Testing your CSS code, testing the _visual_ aspects of your code, is now possible, and I will show how. A slew of new Saas tools have come to the forefront which enable us to write tests that check that everything is the same that it was (even if we moved from BEM to CSS-in-JS). So grab that keyboard, refactor your CSS, because writing tests for it is now possible!

Slides: https://bit.ly/2Z7y1l8

Don’t Believe the Rumors  Writing Tests for CSS is Possible

Building an IoT device feels out of reach to a lot of web developers. Most of us didn’t study electrical engineering, and never learned to solder. And programming a microcontroller is on a completely different level than building a website.

But that is just not true anymore. Nowadays microcontrollers have become powerful enough to run JavaScript. And that opens up IoT to all of us. With just 20 lines of code we can build a connected lightbulb, and within seconds we can wirelessly deploy it. Write a couple of lines more, and you can even remotely control a car. And that is precisely what we are going to do.

JavaScript On Microcontrollers

Web developers have long heralded Progressive Enhancement for delivering web experiences in "layers" (HTML, images, CSS, and then JS). It sounds so obvious and elegant, right? But FOUC (Flash of Unstyled Content), exposes the lies we've been telling ourselves and users! 

It's time to peel back the layers and re-envision how the web is assembled.

FOUC, and the Death of Progressive Enhancement

A short recap of YGLF 2019 Vilnius. With a growing industry, supported by a lively and passionate community of developers, YGLF brought some of its magic to Vilnius. The event took place in the city center, in a freshly renovated, but preserved venue, we were joined by big names with irresistible talks and a whole lot of fun!

YGLF is a series of community events built by developers for developers, a non-profit conference aimed at delivering high-quality content on the hottest topics that cutting edge front-end developers need to know. Bringing in internationally recognized speakers and attendees, with the young and vibrant atmosphere of the front-end community, YGLF creates a buzzling bustle of software engineers from around the globe.

YGLF 2019 Vilnius

2019

Built for developers, by developers, YGLF brings together internationally recognized frontend speakers. 

This year, due to Covid-19, the conference goes online, for free. We’re broadcasting five talks, over five days from 24th - 28th August 2020. All hosted by MC Bruce Lawson.

Colours in CSS have had a pretty interesting history and are continually being developed and evolving.

If you’re a web developer, odds are you would have typed something like, color: #BADA55 or background: #DE1E7E at some point in your projects. 

Colours in CSS have had a pretty interesting history and are continually being developed and evolving. We’re going to start off with some colour related trivia then go into how colours work in CSS.

The Prismatic World of CSS Colours

Get to know React Query and see how it fits beautifully into React to create a true paradigm shift that makes consumption of async APIs a breeze.

Consumption of asynchronous data sources has been an issue in frontend development for years. 

We've all been there - loading states, errors, tons of boilerplate code. Through the years, there have been many attempts to tackle the issues. Finally, with the arrival React Query, combined with new React features such as Hooks and Suspense, is it possible that we have finally reached the "asynchronicity nirvana"? 

In this talk, we will get to know React Query, explore the reason behind all the hype waves it created recently as well as see how it fits beautifully into React to create a true paradigm shift that makes consumption of async APIs a breeze.

Road to Async Nirvana

Learn about performance metrics and how to interpret the data to provide the best user experience possible.

Some who have been present on the web a little whilst might still remember one of the preeminent debugging tools: FireBug. 

For all its features and early praise, its author Joe Hewitt initially created it for 2 reasons: to observe what was happening on a page, pre and post resource load. Two simple metrics. 

A decade and change later, measuring resource loading and page performance is in equal parts proof and perception. The multitude of metrics available has allowed for granular measurements, but has also clearly created confusion. 

During 'The Metric System', we will learn about many of the performance metrics being bandied around like FCP, FMP, TTFB and Speed Index to name a few. But more importantly, we will see how to interpret this data, when to use it in order to extract the information our individual users need for the best user experience possible.

The Metric System: Making Correct Performance Measurements

Explore new and exciting creative opportunities for storytelling, design and expression in ways standard-fonts could never provide us. 

Variable Fonts allow typography on the web to adapt to the flexible nature of screens, environments and devices. 

We can use variable fonts with pre-existing technologies to improve the performance, design, accessibility and usability of our websites. We can start to design our typography to adjust to various inputs, situations or events using Media Queries, JS events and the Sensor or Audio Apis. This will allow us to modify our fonts to aid in storytelling, achieve improved readability and legibility in different situations, environments or on larger or smaller screens. 

Let’s explore new and exciting creative opportunities for storytelling, design and expression in ways standard fonts could never provide us. This is just the beginning of our journey to discover what we can do with variable fonts.

Variable Fonts and Responsive Typography

Code Tooling 101 with an introduction to Abstract Syntax Trees, and all the weird and wonderful things you can do with them.

Tooling for code generation, transformation and interrogation has improved in leaps and bounds over the last few years! We now have things like Webpack, Prettier and ESLint, that can manipulate code in powerful ways, speed up development, and provide insight into how our applications work. 

But how exactly do they work? Some of the ideas that make these kinds of tools tick are rather tricky, and not the kinds of thing you come across in day-to-day web development...

This talk will be Code Tooling 101, and act as an introduction to Abstract Syntax Trees, and all the weird and wonderful things you can do with them. We will start together at the TypeScript compiler APIs and learn all about code interrogation, code transformation and code modification. We will then see how we can apply those same ideas to build our own tools, or contribute to the amazing tools that the community has built!

By the end of the talk, attendants should have an idea of how ASTs work, how they are used in code tooling, and how they can be used to manipulate and interrogate code at a structural level! This will open up the doors to creating custom schematics, lint rules and codemods, and hopefully encourage everyone to have a go at contributing to open-source tooling projects!