DEV Community: Tom Byrer

Some platforms to post your animations on the web

Tom Byrer — Fri, 10 Jan 2025 14:35:42 +0000

This is a simple linkfarm I was going to email a new friend about some tools & platforms she can get animations posted on the web to showcase, & maybe sell, but I figured more than 1 person would be interested. Also posted in Github, so PR there or comment here if you wish!

In no particular order:

Rive

Interactive & timeline based animations that can be used anywhere: web, video game engines like Unity/Unreal, low-level players for C#, C++, React, Flutter.... Has become mature over the past few years. Might be able to handle a full page webapp UX, or longer animations.

Adobe AfterEffects -> LottieFiles

Exports the vector files & animations as JSON to be used with players like AirBnB's open source lotie player. Seems the target use case is shorter & smaller flourishes.
The previous exporter was Bodymovin, which currently (2025-01) seems to not work in the current AfterEffects.

Blend4Web

Free & commercial licenses to showcase Blender models. Seems to allow some interaction & timeline animations, but hard to find good examples.

Marmoset

Looks to be a good 3d asset viewer, but seems to have a pricetag, though that pricetag includes the powerful 3d editor. Web searches can bring up other similar online players & 3d Viewers; some are more niche than others.

HTML/CSS/JavaScript/SVG

You can use web technologies directly themselves to create very rich animations for the web. Sometimes only CSS alone is all you need.
Many examples online. Sometimes a library like Motion or GASP can help speed web animations.

Video

Do a screen capture using your favorite app & post online. You can have the browser auto-play the video only if the sound is off. If you need to compose & don't mind some programming, Remotion can turn web animations into MP4 videos, or use their player to play its ReactJS based files directly in the web browser.

GIF

If the animation clip is short and small enough, why not go old-school?

Installing Chrome extension from raw source code

Tom Byrer — Sat, 02 Sep 2023 15:39:19 +0000

Ever wanted to write your own web browser extension? Want to make the next "AI web tool", automation for co-workers, fork an existing project? Found an extension that is not available for your browser store you want to try out?

You can directly install extensions from a local folder. Helpful before publishing to the store is the best way to get a faster feedback loop. You might end up with higher ratings the more polished your extension is when released.

Note on browser compatibility

While these screenshots use Google Chrome, they will also work on all 'Chromium' based web browsers, like Brave, Vivaldi, ungoogled-chromium, etc. Window's Edge is also compatible, though some the button locations are changed.

Firefox & forks are out of scope of this article.

Step 1: Have the File Folder Ready

If you are developing on the same machine, note the folder of your local repo & move to Step 1.

If you want to test another repo on GitHub:
(We'll use my project as an example.)

Open the repo webpage, eg: https://github.com/smart-move-media/adjust-video-speed
Download the project folder
- git clone the repo
- or download the zip, then unpack the archive; see image below:

Step 2: "Load Unpacked" Extension Folder

Open the Extensions browser page
- find link in menu, or open the webpage chrome://extensions or brave://extensions
Turn on "Developer Mode" in upper-right
Click on [ Load Unpacked ] button (see screenshot)
Use the file picker to open the project folder

Now the new extension should be listed like so (using my example for Adjust Video Speed):

Step 3: Test Loaded Extension

Let's look for if what you just loaded is working. The README or other documentation should have screenshots on what the extension looks like.

In my README, I give a YouTube link and screenshot example of where the speed indicator should be (in upper-left corner):

Also I give links to other video hosting platforms like rumble, odysee for further testing.

Advanced: Open Extensions Options

Often extensions will have it's own UI to open their options page (usually via toolbar icon menu). But almost all can be opened via the browser's [ Details ] button:

Then you have to scroll down & click on the [ Extensions Options ] button to open the UI:

Conclusion:

So hopefully I have unlocked the mystery of installing a web browser extension from a local folder for you! Add a comment for your new extension for others to try if you're brave enough!

GitHub's Copilot; Can the original author please stand up?

Tom Byrer — Sun, 04 Jul 2021 16:21:14 +0000

If something is free, you’re the product

~ Richard Serra, 1973

This famous line was in regards to the 'free' broadcast TeleVision programs that most everyone spent hours in front of per week, if not hours per day. (People watched news & entertainment on free broadcast stations before the internet and cable.) In USA, almost all programming was supported by advertising. Early ads were simple, but as more psychological research was done those ads became more and more effective in influencing public perceptions. Entire genres of TV were catered to specific groups. Early 'soap operas' that were shown mid-day targeted stay-at-home mothers were & are full of ads for household cleaning products. Saturday morning cartoons were full of ads to get children to get their parents to buy sugary cereals and the latest toys. In fact, some cartoons were blatantly 30 minute ads about toys (GI Joe, Transformers, etc).

Today, TV has has become more targeted thanks to cable and satellite offering 100s of different channels for every market. Channels just for sports fans, others just for women, children, SiFi fans, etc. You can notice how each channel runs the same type of ads constantly, eg news channels have many ads related medicine, since those watchers tend to be older folks concerned about their health.

Niche Marketing Techniques

I like to check out newsletters for web developers (since I'm a webdev myself) to check out the latest articles, videos, and software related to the platforms and programming languages I'm interested in. Most of the newsletters I read have ads for products, services, and job offers I sometimes are interested in. So it is a win-win-win; advertisers are curated by the newsletter author to deliver to a niche market content many people want to read both the free and paid content.

Freemium: Niche Marketing for Web Services

There is another 'advertising' model for many of the commercial services that we developers use; the 'free-tier' or 'freemium'. This model opens a limited service available to any & all with an email address, in hopes that you will buy the paid tiers later. This helps the users to test out products by spending only time. It also helps the service provider test out their platform, gets contact info for latter follow-ups, raise awareness, and increase community size. More on this later.

Code Sharing History

There were free code sharing platforms long before GitHub arrived. In the pre-internet days, programmers would use dial-up modems to connect to a BBS where you could download both programs an source code. There was 'sneaker-net', where people would copy and swap disks and tapes full of code. Early internet opened the door for FTP sites (often hosted by universities) to host archives of source code. Forums, IRC, and Usenet provided more 'social' avenues for people to share code, tips, and suggested revisions.

Sourceforge one of the larger portals to allow programmers both share their source code, compiled programs, and gather feedback to add more features and fix bugs. Their user-base grew as more larger projects (like Linux distros, audio, video and code editors) made Sourceforge their home. They seem to be supported by ads, but I still wonder how deep in the red they run. I still visit there on occasion, mostly for FileOptimizer.

GitHub Hits the Jackpot

GitHub had great timing; they took a semi-new but powerful revision tracking system (git) add a feedback forum (issues), hosting, and mini social profile (to help personalize) wrapped together by a back-end language that was quick to develop on (Ruby).

IMHO, their clean interface and generous ad-free freemium level attracted many many programmers and entire organizations to host their code on GitHub. They made git fun to use and easy to hack in quick changes. Their search and categories allowed many people to quickly find code to solve problems they had, or even provide new ideas. GitHub became the primary portal for code hosting and sharing, enabling many programmers and companies to flourish.

Though not thought of as a 'social media site' in the likes of Facebook, Twitter, etc, it is a place for many cultures to intermingle. Very common to people from different countries, religions, beliefs, etc to gather and create solutions together.

GitHub does have a paid tier that many pay for, but I doubt that alone was worth the $7.5billon MicroSoft paid for GitHub. It would be the user-base and all the code there that made GH worth that much.

But Free Code Is Not (Usually) Free

Most (but not all) code on GitHub has some level of copy protection. MIT, creative commons, GPL all have 'strings attached' to their license. Usually the requirement is that the copyright notice (& authors' name) is kept with copies of the code, but may include greater restrictions for commercial use... And these restrictions will carry over to derived programs. So if you use code that includes another library that has a dependency of a 'no-commercial-use' license and you want to use said code in your job or side-hustle, you may find yourself in a legal situation.

Trust me, lawyers and company heads do not like legal ambiguity. I've lost several job opportunities as soon as I mention OSS.

GitHub Gives Away Your Code Without Permission

I started to see sites and tools that scraped GitHub repos and presented that copyrighted code as uncopyrighted code without attribution, hmmm about a year ago (?) as top search results. But I've seen scrapper sites directly quote eintire StackOverflow answers long before that, so this wrong is nothing new.

But what is new, is a major corporation (MicroSoft/GitHub) doing the same thing. They call it 'AI trained' but like those 'find the traffic light' Captcha tests, humans are training the AI. & the results are sometimes direct quotes of code, which is unauthorized. Is some the code shown from fully 'all rights reserved' private codebases hosted on GitHub? One PM I received from a major contributor to npm (JavaScript libraries) is that others are 'seeing your code signature everywhere'.

(Another example)

Kabir Nagrecha

@kabirnagrecha

Forgotten secrets of AGI revealed by CoPilot…it was the LSTM all along! twitter.com/awjuliani/stat…

16:23 PM - 02 Jul 2021

Arthur Juliani @awjuliani
Looks like according to co-pilot, LSTMs are all we need after all... (Must be those Schmidhuber papers in the GPT training dataset) https://t.co/HiFmdN8XHx

I'm not the only one concerned:

Stephen Diehl

@smdiehl

So let's say I train a code synthesis model on the corpus of a competitor's codebase, or one that happens to include it, is this just a new form of intellectual property theft? 🤔

08:30 AM - 30 Jun 2021

Tomislav Kraljic

@kraljic_t

The majority of tech twitter is not speaking out against the unethical and unauthorized use of licensed source code of GitHub's Copilot Program because most are working for Microsoft or other FAANG companies that steal and profit of our your data.

I said what I said.

01:55 AM - 04 Jul 2021

Kelly Sommers

@kellabyte

I heard GitHub is training their co-pilot with other peoples copyrighted source code thus allowing copyrighted source code to be injected into other peoples products.

There was a time I felt GitHub was on the ethical side of things but that’s starting to fade.

22:19 PM - 03 Jul 2021

Jon Schlinkert - Open Source developer

@jonschlinkert

I'm honestly surprised at the backlash I'm seeing to @github's copilot. People, including myself, are complaining that it infringes on their work.

What surprises me is that developers didn't seem to care about stealing everyone else's code without attribution until now.

03:05 AM - 04 Jul 2021

Hopefully Copilot is not giving away passwords... but maybe they are? Or atleast encryption methods?

Xavier Noria

@fxn

Regarding Copilot and suggested secrets.

04:50 AM - 01 Jul 2021

I'm Not a Lawyer

There is legal precedent for music that taking even a few bars of music is a copyright violation. We should keep this in mind...

Aside: Programmers are Almost Forced to 'Borrow'

Sad fact is; those using code-grabbing tools like this may end up being more productive, leaving those who don't use said tools behind....

Alternatives to GitHub

GitLab is seen an influx lately, since their git-platform is OSS that you can self-host. They do have a solid commercial product that Goldman Sachs, ticketmaster & others use.

There are other GitHub clones written in Go (Gitea) and V (Gitly)

Or Do Not Share at All

If your code is on the internet, someone can take it. People are willing to steal; I know someone who had his hardware reverse-engineered and 100s of clones made, putting him out of business.

Only real solution is not to share your code at all. Which makes me a bit sad, but in a world where doctors can't share medical advice on FaceBook anymore, and scientists get their conversations censored, this is the world we live in. :(

Testing JS End-to-End Testers: CodeceptJS + Playwright vs CypressIO

Tom Byrer — Fri, 13 Mar 2020 18:50:50 +0000

Why Test?

If you are just writing short, quick, throwaway code, you don't need a fancy testing system. Make a quick demo or 3, put the expected output in your README, & move on. You're just going to torture your future self & others in having to download a bunch of testing software, and contribute to global warming for no good reason.

But if you want to work on your own code later, have others to help out, or want to sell or support your hard work, you need more structured testing. The investment will pay off in the long run. There are reasons why it is called "Quality Assurance".

Testing Types Terminology

There are many many types of testing! The first stages of testing is grouped under a "functional" where you verify the code's output. (Though there might be UX testing on mockps before the programmer starts.)

Basic Functional Testing Levels

Unit (atomic low level)
Integration (mid level checking process flow, most important to some)
End-to-End (higher level, on deployed code or developer sandbox)

There might be slight overlaps between these levels. But there is greater cross-over with other types of testing.

Other QA Testing

Component (mid level, isolated using dummy data to check functionality)
Regression (see if new code degrades rest of app: mid to E2E levels)
Sanity (focused regression subset, integration-level crossover)
Smoke (quickly ensure basic functions are working before builds)
Load &/or Stress (can your service handle a title wave of customers?)
Security/Vulnerablity (sometimes overlooked until too late...)
Session+Based+Exploratory (~1 hour focused on a single goal)
Exploratory (1-2 hours of manual digging for non-obvious errors)
Usablity (UX works for everyone, including less-abled)
System validating everything above at a high level
Beta/User Acceptance (actual target users verify if it fits their needs in normal scenarios or automated to check off shareholder's requirements)

Wow, that is quite a bit to digest! Follow the links if you want to dig deeper; each type is worth a full article.

Obligatory semi-related Unsplash image, credit Science in HD

Why worry about End-to-End testing?

I want to focus on is automating some End-to-End (E2E) testing. This higher level may be ran as Sanity or Smoke or Regression testing before code is merged into the 'master' code base. It can be part of User Acceptance, maybe even usability or even Security testing.. Plus E2E can be difficult and expensive to run. Since there are so many parts of a code base running together, there is more opportunities something can go wrong, so testing costs can be higher.

But there are many rewards to automated End-to-End testing:

finding bugs that lower-level tests might not
help document what had been discovered by manual testing
save money and time

End-to-End Testing in JavaScript

Since I already know JavaScript, I looked around to see if there were any frameworks or toolkits to conduct in-browser automated testing. Handy that JS runs both inside the browser and as a server/desktop runtime.

Looking around, it seemed Cypress is one of the top contenders. But I also wanted to check out the new 'web automation' tool: Playwright. It allows the three major browsers on the three major operating systems run scripts via JavaScript. While the Playwright GitHub repo is only a few months old (started 2019-11-10) many of the founding devs worked on a similar automated browser, Puppeteer, so there is already years of experience behind that young project. Searching on YouTube for videos for Playwright, I found that CodeceptJS test runner works very nicely together.

Quick Cypress vs CodeceptJS+Playwright Comparison

I wanted to try them both out on a.... not simple website, so I chose Facebook. :) FB is familiar to many, and because of its many features FB does not run butter smooth all the time. You could consider it 'legacy', which is dev-talk for several dev teams evolved the code over a long time. So the code is not consistent in technique or optimizations. (eg inconstant selectors)

My example code is short, only 1 E2E test with the following steps:

Login via email, password, button click
Click first Create Event button
Click Create Private Event button
Fill in first field
pause, to halt the test and enter interactive mode

My code for both testing frameworks is here:
https://github.com/tomByrer/codecept-playwright-vs-cypressio-fb

CypressIO

Advantages

Parallelized runner to complete tests faster
Built-in GUI to see steps right next to the running browser
Commercial product with a generous free tier & free for OSS. Cash flow = good support
Mature codebase
Fancy dashbord brings me fond memories of BrowserStack
Bundled Tools: popular testing programs like Mocha, Chai, Chai-jQuery, Sinon.JS, minimatch, MomentJS, etc.

Disadvantages

Listed Trade-offs
- not a general purpose automation tool
- NOT a true 'headless browser', not good for: web-scraping, scripting 3rd party sites, performance testing, etc
- always runs inside of a browser (which can also be a pro)
- no multiple browser tabs.
- can't drive two browsers at the same time
- same-origin only
worse than CodeceptJS in a few areas
- runs in Electron, using a slightly older version of Chromium. Firefox support is in Beta, & I don't see any Safari or mobile support
- cold-starts seems slower on my machine (i5, NVMe SSD, 32Gb RAM, Win10)
- selecting elements without id or non-dynamic class name is more difficult, so building my short test took longer than CodeceptJS

CodeceptJS with Playwright

Advantages

totally free
consulting help is available
around for years, Codecept-PHP & Puppeter were prior versions
CodeceptJS can use many browser configs: Puppeteer, Playwright (nearly full Firefox & Safari compatibility on all desktops), WebDriver via webdriverio or Protractor, TestCafe, Nightmare, and Appium or Detox for mobile tests; very flexible
Playwright keeps "browsers are as pure as they can be", so tests are accurately reflecting real users' browsers
better for uses other than 'in-house e2e testing
- good choice for 3rd party site testing, web scraping
I prefer Codecept's more terse syntax of including selectors with actions,
Codecept's selecting via text (eg button labels) made building tests quick and fun
fast cold-starts

Disadvantages vs Cypress

CodeceptJS has a smaller dev team; basically only one guy with a second helping. Main dev is productive though; docs are frequently updated & he is constantly adding something somewhere
CodeceptJS' GUI is very young, though the text-only approach is more than fine, since you can .pause() and try new test commands via CLI
seems to run slower than Cypress (in the little usage I have), I had to add more longer waits to get the page to load enough for next stage
neither packages are as popular; fewer stars on Github, less training videos around, fewer blog posts, though they both are popular enough to get going and find support

Conclusion: Cypress or CodeceptJS?

My gut feeling (as of March 2020) is to go with CodeceptJS with Playwright; they both are flexible, and a strong team together. Using Playwright to cover Chrome & their siblings plus FIrefox plus Webkit is nice. Plus, if you need mobile testing, or get tired of Playwright for some reason, CodeceptJS makes it convenient to switch browser platforms. CodeceptJS feels feature rich, and is still growing. Also, reducing the need to bother the developers to add testing-only classes or data-attributes could reduce costs. I suspect (with my limited research) that Codecept can be used outside of End-to-End testing.

However, if you have a more junior test team, prefer to use a product backed by a wider commercial venture, &/or like a more mature GUI, then CypressIO is the way to go. Even though tests may take a bit longer to build, it feels Cypress is slightly but consistently faster and smoother to actually run the tests after the cold start. Their GUI+browser angle relieved some of the testing stress. Cypress is a solid choice as well.

Aside: if you get tired of Codecept, you could use Playwright directly, but you'll have to rewrite the tests. But I feel Codecept makes life more tester-friendly, so it is worth the extra overhead.

I hope you enjoyed this overview! Please add comments & suggestions below.