We spend most days working to build good software, to please customers, and to build impressive projects for our resume. Tonight is different. Tonight we are going to the other extreme - writing a completely obnoxious, unintuitive, or otherwise unusable user interface. Inspired by programmers on Reddit, we're going to push the envelope of bad UX in React.
Write the worst form control you can think of! Here are some ideas of controls to mangle:
| ' Searches for and displays appointments that conflict with the current appointment | |
| ' If a recurring appointment, the recurrance must be saved before conflicts will be checked | |
| ' If a recurring appointment, only checks the next 50 future instances of the recurrance | |
| ' Only checks your calendar, not the calendars of other attendees | |
| ' Based on macro from https://www.datanumen.com/blogs/quickly-find-appointments-conflicting-specific-appointment-outlook/ | |
| Sub FindConflictingAppointments() | |
| Dim objAppointment As AppointmentItem | |
| Dim dStartTime, dEndTime As Date | |
| Dim strFilter As String | |
| Dim objAppointments As Items |
| Things that squirt | |
| Things you shouldn't throw off a building | |
| Things grownups wish they could still do | |
| Things you shouldn't do In public | |
| Things you shouldn't play catch with | |
| Things that go bad | |
| Things you shouldn't lick | |
| Things you would rather forget | |
| Things you Shouldn't swallow | |
| Things that jiggle |
| describe("testing error cases in Jest", () => { | |
| describe("errors (vanilla Jest)", () => { | |
| describe("when thrown synchronously", () => { | |
| function synchronousError() { | |
| throw new Error(""); | |
| } | |
| it("should require expect(action).toThrow()", () => { | |
| const action = () => synchronousError(); | |
| expect(action).toThrow(); |
| import { Observable, firstValueFrom, timer, isObservable, of } from "rxjs"; | |
| import { first, timeout, catchError } from "rxjs/operators"; | |
| import { TestScheduler } from "rxjs/testing"; | |
| describe("testing error cases in Jest", () => { | |
| describe("with RxJS", () => { | |
| /** | |
| * A test utility function for converting an Observable into a Promise for unit tests | |
| * Uses a TestScheduler to make things like the passage of time (timeouts, debounce, etc.) | |
| * happen instantaneously. |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>ASCII Webcam</title> | |
| <style type="text/css"> | |
| html, | |
| body { |
| var apples = new[] { new Apple("Red"), new Apple("Blue"), new Apple("Green") }; | |
| var oranges = new[] { new Orange(Size.Large), new Orange(Size.Small), new Orange(Size.Medium) }; | |
| // works | |
| Console.WriteLine(string.Join(',', apples.OrderBy(x => x))); | |
| // throws InvalidOperationException | |
| Console.WriteLine(string.Join(',', oranges.OrderBy(x => x))); | |
| class Apple : IComparable<Apple> |
| 🕊️ 🖼️ 🍇 | |
| 🖍️🆕isMatch👌 | |
| 🖍️🆕matchPosition🍬🔢 | |
| 🖍️🆕matchLength🍬🔢 | |
| 🆕 🍼isMatch👌 🍼matchPosition🍬🔢 🍼matchLength🍬🔢 🍇🍉 | |
| 🆕▶️📙 🍇 | |
| 👎 ➡️ 🖍️isMatch | |
| 🤷 ➡️ 🖍️matchPosition | |
| 🤷 ➡️ 🖍️matchLength |