Live View Iframe Sizing

Lee Martin had a good idea here. On CodePen’s Live View, we use a parent<iframe> to listen for updates to the Pen and then inject them or refresh the preview automatically. But that parent <iframe> can be tricky to size.

For example, on iOS, the height of the iframe was as tall as the content inside it and you can no control at all over that. In recent versions of iOS, that seems fixed. But we ran into a new problem. We sized the iframe to be as tall as the browser window by setting height: 100vh. That mostly works, but unfortunately, browser UI could sometimes overlap the bottom. That seems incredibly silly, but that’s the way it is. Fortunately, there is a brand new CSS things called dynamic viewport units, and Bramus has a good rundown. Now we’re (progressively) setting height: 100svh or the “Small Viewport”:

The Small Viewport is the viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be *expanded*.

It looks like “dynamic” viewport units could have worked as well, but “small” seemed to work the same here and somehow feels safer. This is on production now, but see this video as I was kinda sorting this out:

Test Pen

Felt like an appropriate thing to work on for Global Accessibility Awareness Day (GAAD).

The post Live View Iframe Sizing appeared first on CodePen Blog.

368: Lea Rosema

I got to talk with Lea Rosema this week! She’s an incredibly talented digital artist and front-end developer. She does quite a bit of art with some of the trickiest web technology out there: shaders! But rather than just learn it and use it, she helps other people learn and get more out of it. Several times that has taken the shape of Web Components. For example, a <shader-art> Web Component that takes some of the boilerplate work out of designing with them. See this Collection of examples.

Time Jumps

00:44 Guest introduction

03:38 Shaders

07:39 How does the shader work?

13:30 Sponsor: JS Nation

14:15 Dealing with strange looking code languages

17:53 What drew you to working in this tech?

20:20 Slider plugin

23:53 Half tone circle Pen

26:12 Magic Pixels

27:17 State of my brain Pen

28:37 Wandering through a twilight landscape Pen

Sponsor: JS Nation

Evan You, Kyle Simpson, Addy Osmani, Sarah Drasner – these are just a few of the speakers coming to this year’s JSNation, a 2-day conference focusing exclusively on JavaScript development. Discover the future of the JavaScript ecosystem and get connected to its stellar crowd! The format of the event will be hybrid. The first day (June 16) will be streamed from the Amsterdam venue. The second day (June 20) & numerous free workshops will be streamed to the global audience online.

Would you like to participate? Get 10% off on remote & in-person tickets with our discount code CodePen.

The post 368: Lea Rosema appeared first on CodePen Blog.

One Weird Trick to Try @parcel/css on CodePen

Ideally, we’d just offer @parcel/css as a CSS processor choice right in our editors. We could absolutely do that, but we’re smack in the middle of a bunch of next-gen CodePen stuff, and we’re keeping our efforts focused there. Never fear, interesting new processors like this will be there along with it. But this CSS processor caught my eye especially because it’s a very fresh, modern, and interesting take on CSS processing. It handles vendor prefixing on its own (something you might otherwise use Autoprefixer for), it handles “syntax lowering” (love that term) for future-syntax CSS (like you’d use postcss-preset-env for), offers scoping, and even has its own built-in minifier, while being super fast. Nice!

So what if you do wanna try it on CodePen? Well, it’s actually possible because they have cleverly released the processor with a Wasm option, not just a backend-language-only thing. So here’s the plan:

Load the processor in the browser as a script (go Wasm go!)
Pull the CSS from the current Pen
Pass that CSS to the in-browser processor we just loaded
Get the transformed CSS
Replace the CSS in the preview with the transformed CSS

Check it:

CodePen Embed Fallback

The post One Weird Trick to Try @parcel/css on CodePen appeared first on CodePen Blog.

iframe Security is So Strange

As I write, this is the attribute soup on an <iframe> on CodePen in order to dial in the right combination of security and usability:

<iframe

sandbox=”allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation”

allow=”accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share”

allowpaymentrequest=”true”
allowfullscreen=”true”>

</iframe>

Wow! I think that’s an awful lot of detailed HTML to get right. If any little bit of that was wrong, we’d hear about it here at CodePen right away. It would break what users expect to work.

To compound this issue, the above code is just the output for Chrome-n-friends. Both Safari and Firefox need variations of this HTML to perfect. That puts us in UA-sniffing territory, which is never a particularly happy place.

Add extra attributes or values to this code, you might make annoying extra console noise — quite annoying in an app for developers. Skip them, and you cripple the app itself. We have no choice but to render user code in an <iframe>, for all the obvious cross-origin security it provides.

Compounding things again, all this code changes. New features arrive in browsers that require new iframe permissions. But there is no good place to follow all the changes, so the way we tend to find out is when a user graciously sends in a support request for something that doesn’t work that they think should.

The code itself is just… strange! Why is sandbox space-separated but allow is semicolon-separated? Why are sandbox and allow different attributes at all? Especially when they are both whitelists? Why are some features their own special attributes?

Just feels like an awful lot of weirdness for one isolated purpose.

I was just looking over our setup here at CodePen and refactoring it a bit, and decided to chuck the attributes in JSON to maintain from there, so here’s a copy of that in case it’s useful to anyone else.

The post iframe Security is So Strange appeared first on CodePen Blog.

367: With Micah Godbolt

I got to talk with Micah Godbolt this week! Micah is is a long-hauler at Microsoft working on Design Systems and such. His CodePen account looks a lot like mine: steady consistent usage of “just trying to figure something out” Pens sprinkled with some ideas that somehow seem to click with the wider front-end world. I found it fascinating that putting the word “Design Systems” into his book title “Front-end Architecture for Design Systems” was suggested by the publisher, and they were right! Turns out the term Design Systems clicked a lot harder since the 2016 publication and I’m sure hasn’t hurt sales!

Time Jumps

00:35 Guest introduction

02:46 Front end architecture for design systems

06:31 Building design systems

10:23 Sponsor: Linode

11:08 You don’t need a UI framework

17:49 Responsive multi-level nav pen

19:30 Multi height equal column pen

23:01 How do you ship components?

27:00 Testing for bugs

28:41 Consistently making pens

35:13 Creating a stripped down use case

40:06 Where can people find out more

Sponsor: Linode

Visit linode.com/codepen and see why over a million developers trust Linode for the infrastructure.  From their award-winning support (offered 24/7/365 to every level of user) to ease of use and set up; it’s clear why developers have been trusting Linode for projects both big and small since 2003.   Linode offers the industry’s best price-to-performance value for all compute instances, including shared, dedicated, high memory, and GPUs. Linode makes cloud computing simple, affordable, and accessible allowing you to focus on your customers, not your infrastructure.  Visit linode.com/codepen, create a free account and you’ll get $100 in credit.

The post 367: With Micah Godbolt appeared first on CodePen Blog.

How to Improve Developer Productivity? [Guide]

You work as a developer or software engineer and sometimes you feel tired, procrastinating and not satisfied with your effectiveness at work. It is a common thing for many developers because web-development is hard work that requires a lot of concentration and brain tension. 

In this article we are going to discuss 10 recommendations on how to make the development work more efficient and how to improve developer productivity!

But first, let’s clear up what productivity means?

What is Productivity? How Can it be Measured?

Productivity means that you get more work done with the same resources or during the same period of time. Different companies can use different tools and metrics to measure developer productivity. Usually it is based on how many lines of code, features, or tasks a developer could do. For example, you can use as metrics quantity of lines of code, code reviews, bugs fixed, number of commits, finished tasks, or number of deployments or releases. You should also keep in mind that measuring developer performance requires more transparency in products and processes. The way of measuring what your manager or company chooses can depend on objectives, business goals, size and structure of the company and so on. It can also be team or individual measuring. But anyway, the main idea is to improve these metrics by improving developer productivity.

How can we describe modern IT developers?

Also, before we start discussing recommendations on how to improve developer productivity, we would like to define the audience. 

Ten or fifteen years ago, when we discussed developers or software engineers, we would have imagined socially awkward, stereotypical geeks, similar to the main heroes from classic IT series and movies like Silicon Valley, The IT Crowd and so on.

But nowadays this stereotype is fading into reality. Now we can find absolutely different people working in web-development. We are going to propose common tools that can be useful for all types of personalities (and even not only for developers!).

The IT sphere is one of the fastest-growing industries in the world. The quantity of employees is significant. According to statista.com, the number of full-time employees increased from 52 million in 2019 to 65 million in 2022. And the demand for IT professionals is still growing! And the level of professionals and competition for a good offer are also high. So you should do your best to improve your skills and productivity at work. We are going to help you with this! So here goes!

https://www.statista.com/statistics/1126677/it-employment-worldwide/

Find below 10 tips on how to improve developer productivity:

1. Develop yourself first!

It may sound like a banal piece of advice, but it is absolutely effective and true. If you want to be a productive developer, you have to increase your base of professional knowledge, commercial experience and so-called hard skills. Deep knowledge of your stack, tools, libraries and so on will help you to find the right solutions faster and easier. 

But what is more important to all developers is their fundamental knowledge. You can go deeper into algorithms, systems architecture, or devopsing. And a good understanding of these things will definitely help you to feel more confident at any project you work on.

Stay a constant learner all your life to keep your brain working at the most productive level!

2. Create an optimal environment

The ideal developer workspace may look different for everyone, but the basic idea is to minimize distractions and make it comfortable for you.

Working on the beach with a laptop looks perfect only in pictures on social networks. In fact, an ergonomic workspace with a desk, a quality chair, and proper lightning is crucial for developers!

What is most important in your working environment is the right hardware! For all IT-specialists and especially for developers equipment plays a significant role in making their workspace convenient and their work productive.

Don’t forget about your online workspace. It is worth mentioning that there are also tools which are not software-related, but can help you much with planning, organizing and managing your performance, tasks and habits. Some of the most common project management and time tracking systems are Jira, Asana and Trello. There are also tools like F.lux to help reduce eye strain while looking at screens. There are plenty of other applications and tools to improve developer productivity and make your work more comfortable and efficient. Just if you feel like you need to improve something in your working environment at the office or your home office, be free to ask your manager and justify the importance or try to improve it yourself. Optimal workplace helps to improve developer productivity and performance as well!

3. Decrease the quantity of distractions 

If you ask developers what is the most annoying thing for them, most will answer that it is getting interrupted in the middle of a difficult working process. Because after being distracted, it is hard to catch that flow again. But distractions can be everywhere and affect everyone. So how can we avoid them?
One of the first and easiest ways is to turn off notifications in messengers and applications. You can read messages when you’re ready for a break. It will definitely save you hours of interruption for you. 

Use noise-canceling headphones and mute your phone.
Focus on one task at a time. Multitasking is not what developers should practice much, but sometimes it is an essential skill they need. But to switch effectively between tasks, you can plan ahead and split your work day into some sessions.
If your company uses apps like Slack, turn on the “Do not disturb” feature before starting your work session.

4. Communicate!

Regular communication among the team helps to share important information that’ll impact how effectively you get your work done. Some ways to provide more frequent communication include:

Slack channels
Daily standups
Team lunches
Project boards

It’s important to keep meetings and calls short and only include the people who need to be there. Speaking of Slack, it’s best practice to save group chat for communication that applies to all members, and use DMs for personal one-to-one discussions. 

Regular communication and feedback lead to more engaged customers and stronger customer relationships, but it can also help to improve developer productivity. Feedback gives a team proper information to help them decide what features and requests to work on and when. 

But don’t overdo it! 😉

Communication is useful, but like many other good things, you can overdo it. Too much communication can negatively impact productivity and reduce working time and energy available to get the main tasks done. 

5. Set reasonable deadlines

To set deadlines that are reasonable for you, you first need to determine the scope of the project. Deadlines are great if they motivate a team and help them plan and prioritize tasks and plan for dependencies. But too much or too early, and they can become overwhelming, negatively impact concentration, and cause stress. When setting deadlines, you should provide a reasonable estimate of how long the task will take, and take into account unforeseen bugs and roadblocks, as well as other priorities that may arise.

If you are using project management software, be sure to monitor it regularly when you work on your tasks.

6. Implement healthy habits

This tip is 100% suitable for all, not just developers. 

Drink more water, pay attention to mental health, get enough sleep, eat healthy food, and ventilate the room to breathe more fresh air. Make sure your other muscles get some work to do and not only your brain! 

Healthy habits lead to a better level of energy and as a result they will help to improve developer productivity. Take care of yourself first!

7. Design before you implement

You should understand the task clearly because uncertainty will lead to procrastination and wasting of time. Your first goal should be to understand a task clearly and define the tools and strategy you will use.

It is a common beginners’ mistake to jump right into writing the code, without first mapping the nature of the problem and the logical paths for creating the solution.

The best way to follow this tip is to keep a notebook and a pen nearby. Draw maps, outlines, flows and schemes. Write down all the comments and ideas that come to your mind during the process. It will definitely help you not to lose the thread of your logic when you get distracted by something, for example.

8. Find your flow state

Just as a muse comes to writers or artists, so do developers who can catch the “wave” and be fully involved in the process and even do not notice how the time goes. It’s a magical feeling when your knowledge, motivation and concentration align to produce maximum performance. Try to feel this condition and use it to be productive to the maximum. 

It is necessary to learn more about yourself and analyze when you are the most productive and what you need to create this “magical flow”.

Due to this reason, remote work and flexible working hours are so important for most developers as you are more flexible and have the opportunity to work when you feel most productive.

Being productive doesn’t mean sitting at your desk from 9am till 5pm. These days many developers think about their work issues and work even when they commute, do sports, relax at home, or have important conversations with peers at a local cafe or a bar. Flexibility is one of the main advantages of remote work. Being flexible with when and where developers work allows them to work smarter, innovate and be more productive. But there are some threats to working remotely, and to prevent them you can follow the tips in our previous article in the blog about remote work.

9. Keep your code blocks clean and short

Nothing is worse than trying to figure out what you did some months ago and how it needs to be changed. When you have massive methods and classes, it can be very difficult to figure out what the original logic was. To implement this rule you can follow some effective principles.

The first principle is DRY. It means “Don’t Repeat Yourself” and was first mentioned in the book The Pragmatic Programmer: From Journeyman to Master by Andy Hunt and Dave Thomas. The second principle that we recommend to improve developer productivity is the attractive KISS principle. This abbreviation means “Keep it simple, stupid!

It’s important that your code can be understood by you and other developers, even when it has been written a long time ago. Optimize your code for readability and understandability.

There is a popular and demonstrative quote by Albert Einstein: “If you can’t explain it to a six year old, you don’t understand it well enough yourself.” Don’t forget it while doing your work as a developer, please!

The KISS principle is also offered in two other forms (for those who don’t feel good about the inclusion of the word “stupid”):

Keep it short and simple
Keep it simple and straightforward

As you can see some words may be changed, but the sense of the principle stays the same.

10. Don’t ignore the code reviews

You might be the smartest guy in the room, with the best time-management and knowledge of all the key bindings in the world, and, still, there will always be room for involving others. Everybody makes mistakes and we want to have at least a second pair of eyes to look over a solution before it goes into production. Invest in yourself and introduce pairing programming, code reviews, or some other collective practice to your development process.

‍One of the best types of code reviews is when you have a good programmer who is only a little familiar with the project looking at the code. If you need to explain all the details, you’ll learn your code better, and sometimes an outsider will see problems that you, as the insider, missed. Code reviews cost you nothing but time, but often save you much more than it takes to do it. 

Code review is an essential part of workflow, also for sharing best practices with your team. This is connected with our first tip about improving professional knowledge to improve developer productivity. 

Bonus Tip

Outsource some of your projects or use Flatlogic Products to save time and improve developer productivity!

We offer a platform with starters/templates, CRUD app generator and hosting, all combined to make a perfect solution for web development. To learn more about it, you can follow Flatlogic.com website.

Productivity is about doing more. But it’s important to make sure you are working on products and features you or your customer need, because this won’t add any value to the business. That’s why productivity is always best combined with efficiency. It’s not just about getting the job done more quickly, but focusing on the right things and producing quality work.

It can take years of discipline and practice to be productive. So, don’t push yourself too hard and expect perfection in the beginning. But we hope that following the tips from this article will help you to improve your productivity.

If you work remotely and feel like your motivation and productivity decrease, you can read our previous article Why Does Remote Work Make Us Paranoid? And What To Do About It?

The post How to Improve Developer Productivity? [Guide] appeared first on Flatlogic Blog.

366: Paulina Hetman

I got to talk to Paulina Hetman this week! Paulina is a heck of a creative coder, using her skills as an illustrator and all-around web developer to make ideas come to life. And she doesn’t keep all those ideas to herself, she spends time educating other budding developers both professionally and by building courses and things like her incredibly clever quizzes (as Pens!).

Time Jumps

00:22 Guest introduction

01:12 Making quizzes in pens

05:17 Working with cascade layers

06:20 Using CodePen for teaching

08:38 Homepage design as a pen

09:54 Sponsor: Notion

10:47 Working with WordPress and Automattic

13:23 Working with particles and three.js

17:31 Working with illustrations

19:29 Working with the syntax of CSS

22:10 Horizontal parallax pen

24:15 CSS Shapes forest collection

26:22 Tagging Google fonts

27:36 Landscape in a triangle pen

27:51 When you can’t decide pen

29:39 Header transition pen

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.

The post 366: Paulina Hetman appeared first on CodePen Blog.

Penguins!

I was reading Alex Trost’s Frontend Horse newsletter and I saw the wonderful Pen point and click penguin by Masahito Leo Takeuchi shared. I was delighted as I hadn’t seen it yet. Here it is!

CodePen Embed Fallback

Then I remembered it a few days later and I was like, I should Instagram that! I could have found the Pen again any number of ways. I could have pinned it, but I hadn’t done that. I could have looked through my recently loved items. But instead, I just searched for “penguin” globally.

How many penguin pens can there be? I thought. hahahahhahaha. A lot, Chris. Couldn’t tell ya why. Maybe because they are cute. Maybe because they have fairly fun, interesting, and visually distinct shapes that make them up. Maybe it’s the Pen in Penguin. Anyway, you can find it in search, of course, you just might have to be a smidge more specific with the search terms or be willing to paginate quite a ways!

I mentioned the proliferation of penguins to Marie, and she’s like uh yeah duh that’s why I have this epic personal Collection of penguin Pens. That’s awesome, but also allow me to drop in some of my own favorites right here in this blog post.

CodePen Embed Fallback
CodePen Embed Fallback
CodePen Embed Fallback
CodePen Embed Fallback
CodePen Embed Fallback
CodePen Embed Fallback
CodePen Embed Fallback

The post Penguins! appeared first on CodePen Blog.