Файловый менеджер

Файловый менеджер - Редактировать - /home/gqdcvggs/mail/imators.com/izhak/cur/1757360013.M445739P2583848.web05.ouiheberg.com,S=55865,W=56796:2,S

Назад
Return-Path: <bounces+14879421-b679-izhak=imators.com@ckespa.joshwcomeau.com> Delivered-To: izhak@imators.com Received: from web05.ouiheberg.com by web05.ouiheberg.com with LMTP id iBweGo0vv2gobScAw70cEg (envelope-from <bounces+14879421-b679-izhak=imators.com@ckespa.joshwcomeau.com>) for <izhak@imators.com>; Mon, 08 Sep 2025 19:33:33 +0000 Return-path: <bounces+14879421-b679-izhak=imators.com@ckespa.joshwcomeau.com> Envelope-to: izhak@imators.com Delivery-date: Mon, 08 Sep 2025 21:33:33 +0200 Received: from o33.ck.d.convertkit.com ([149.72.235.3]:44290) by web05.ouiheberg.com with esmtps (TLS1.3) tls TLS_AES_128_GCM_SHA256 (Exim 4.98.2) (envelope-from <bounces+14879421-b679-izhak=imators.com@ckespa.joshwcomeau.com>) id 1uvhcH-0000000B0zw-2290 for izhak@imators.com; Mon, 08 Sep 2025 21:33:33 +0200 DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=joshwcomeau.com; h=content-type:date:from:mime-version:subject:list-unsubscribe: list-unsubscribe-post:to:cc:content-type:date:from:subject:to; s=cka; bh=N+rDxideLNdVOiCN6SKcTE/3xayVKdKHPDGA4sbrIvU=; b=8S8si+WcdvxiJPIR9j37Gjgp8m9S2R2331XCpB5EFbRgUYfpYDNRDvu72xUdlKLTZJIv oxEK4Ds/fbc7nvrNQkheC8FpBbLj8fi2aUpClsQG5Io/T1pmwZiV8lzaeQKl4t9X90uytN QgrrpMjPZ2+W0C/cM82G3XL1rmeO7qd70= Received: by recvd-555fbdc5b7-pmnzl with SMTP id recvd-555fbdc5b7-pmnzl-1-68BF3028-48 2025-09-08 19:36:08.496053853 +0000 UTC m=+8304689.598156476 Received: from MTQ4Nzk0MjE (unknown) by geopod-ismtpd-23 (SG) with HTTP id lHRtliqTQWmNgS6eu1HT2A Mon, 08 Sep 2025 19:36:08.468 +0000 (UTC) Content-Type: multipart/alternative; boundary=0449411b77a0a590597cbedcaa0e9bf2220283937457981b0a6027736a67 Date: Mon, 08 Sep 2025 19:36:08 +0000 (UTC) From: Josh Comeau <me@joshwcomeau.com> Mime-Version: 1.0 Message-ID: <o8uppk9lxdcqh6w33n2avhq4m9rrrioh07rq@convertkit-mail4.com> Subject: The =?UTF-8?B?Y3VycmljdWx1beKAmXM=?= been posted! Feedback-ID: 18911323:243102:broadcast:CK List-Unsubscribe: <mailto:unsub+o8uppk9lxdcqh6w33n2avhq4m9rrrioh07rq@convertkit-mail.com>, <https://unsubscribe.kit.com/o8uppk9lxdcqh6w33n2avhq4m9rrrioh07rq> List-Unsubscribe-Post: List-Unsubscribe=One-Click Precedence: bulk X-Report-Abuse: <abuse@kit.com> X-Report-Spam: <abuse@kit.com> X-SG-EID: =?us-ascii?Q?u001=2EZX=2FRbMtIlpuYCWT+2cJsHA5KXzNYoLBINz9jortfbgFHGlOAt+aBt4Nwx?= =?us-ascii?Q?AEzDNf9QNlNT4sWF1Xhf+eaFRfPER75BvAyc2ZA?= =?us-ascii?Q?wmlgd9Ipmbml1YIHfHXMVSlZ6C6JupB4XHFBcBc?= =?us-ascii?Q?D+JRLg=2FCXNTCJVnsIva=2FLjSYX+5MQLXKX5UiTLS?= =?us-ascii?Q?fsYe=2FeeXXjT61DrNZePQ+3MIQMjUxuLmXYQcFRZ?= =?us-ascii?Q?eJn1nOeBk=2F9=2F5KahMqB218=3D?= X-SG-ID: =?us-ascii?Q?u001=2ESdBcvi+Evd=2FbQef8eZF3BpTL9BgbK5wfSJMJGMsmprBTLquV1ImzFIrgT?= =?us-ascii?Q?SaJ3+RZF57uWkM6mqsz5nxUMgih85WOyN+F9b0h?= =?us-ascii?Q?lPAwrCGDJomBEx7AVFGFP3k1FBd7sEP=2FNUCRJP8?= =?us-ascii?Q?y49IhGg+Obs=2FnaEYD6zrkSoTW+EomZC9qmLJ4xI?= =?us-ascii?Q?ouxzycM5aPZQVWne2PoV0qOdc0ZxpdgIuHijNsX?= =?us-ascii?Q?cQHV+GxGmcu=2F75Dd51vitVEHuHHMDFzadtjsEdV?= =?us-ascii?Q?JtpEk+n06ZarnotTYW4zqJrCMyxJarxVcMNDnJa?= =?us-ascii?Q?2SHXNEryomcHOxRhbyv1fD=2FtxXHUIsQr2gnP5d6?= =?us-ascii?Q?SaBwBpo9VsBDfuQmwcIZxAwXKYH+vsupwxdkFcm?= =?us-ascii?Q?LhQfmzVaIkUpoQQ?= To: izhak@imators.com X-Entity-ID: u001.INl/IQv4Jhiy1wIMf5MgyA== X-Spam-Status: No, score=2.4 X-Spam-Score: 24 X-Spam-Bar: ++ X-Ham-Report: Spam detection software, running on the system "web05.ouiheberg.com", has NOT identified this incoming email as spam. The original message has been attached to this so you can view it or label similar future email. If you have any questions, see root\@localhost for details. Content preview: * * * * * Hi there! Over the past few months, I’ve gotten lots of questions from y’all about my upcoming course, Whimsical Animations. Content analysis details: (2.4 points, 5.0 required) pts rule name description ---- ---------------------- -------------------------------------------------- 0.0 RCVD_IN_ZEN_BLOCKED_OPENDNS RBL: ADMINISTRATOR NOTICE: The query to zen.spamhaus.org was blocked due to usage of an open resolver. See https://www.spamhaus.org/returnc/pub/ [149.72.235.3 listed in zen.spamhaus.org] 0.0 URIBL_DBL_BLOCKED_OPENDNS ADMINISTRATOR NOTICE: The query to dbl.spamhaus.org was blocked due to usage of an open resolver. See https://www.spamhaus.org/returnc/pub/ [URI: open.convertkit-mail4.com] [URI: click.convertkit-mail4.com] [URI: storage.googleapis.com] [URI: www.joshwcomeau.com] [URI: unsubscribe.convertkit-mail4.com] [URI: joshwcomeau.com] [URI: whimsy.joshwcomeau.com] [URI: preferences.convertkit-mail4.com] 0.0 URIBL_BLOCKED ADMINISTRATOR NOTICE: The query to URIBL was blocked. See http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more information. [URI: joshwcomeau.com] 0.0 RCVD_IN_VALIDITY_CERTIFIED_BLOCKED RBL: ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. [149.72.235.3 listed in sa-trusted.bondedsender.org] 0.0 RCVD_IN_VALIDITY_RPBL_BLOCKED RBL: ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. [149.72.235.3 listed in bl.score.senderscore.com] 0.0 RCVD_IN_VALIDITY_SAFE_BLOCKED RBL: ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. [149.72.235.3 listed in sa-accredit.habeas.com] -0.0 SPF_PASS SPF: sender matches SPF record -0.0 SPF_HELO_PASS SPF: HELO matches SPF record -0.1 DKIM_VALID_AU Message has a valid DKIM or DK signature from author's domain 0.1 DKIM_SIGNED Message has a DKIM or DK signature, not necessarily valid -0.1 DKIM_VALID Message has at least one valid DKIM or DK signature 0.0 HTML_MESSAGE BODY: HTML included in message 0.0 T_KAM_HTML_FONT_INVALID Test for Invalidly Named or Formatted Colors in HTML 2.5 GOOG_STO_IMG_NOHTML Apparently using google content hosting to avoid URIBL X-Spam-Flag: NO --0449411b77a0a590597cbedcaa0e9bf2220283937457981b0a6027736a67 Content-Transfer-Encoding: quoted-printable Content-Type: text/plain; charset=utf-8 Mime-Version: 1.0 * * * * * Hi there! Over the past few months, I=E2=80=99ve gotten lots of questions from y=E2=80=99all about my upcoming course, Whimsical Animations. I have some good news! I=E2=80=99ve just updated the course homepage, and it now includes a detailed curriculum, along with a =E2=80=9Cfrequently asked questions=E2=80=9D section. =F0=9F=98=84 * =E2=86=92 Check out the all-new Whimsical Animations homepage ( https://click.convertkit-mail4.com/o8uppk9lxdcqh6w33n2avhq4m9rrrioh07rq/kkh= mh6hnlgd39pil/aHR0cHM6Ly93aGltc3kuam9zaHdjb21lYXUuY29tLw=3D=3D ) The top bit is the same, but if you scroll down, you=E2=80=99ll see all the new content, along with more whimsical details. =E2=9C=A8 To quickly summarize, the course is split into four main parts: * 1. Particle Effects * 2. SVG Animation * 3. Advanced Interactions * 4. HTML Canvas Animation There are also two bonus features: * 1. Animation Design, all about how to conceptualize animations that improve the user experience and don=E2=80=99t annoy users. * 2. Animation Challenges, which will be a collection of advanced animation challenges, a chance to get more hands-on practice, beyond the exercises in the main content. In Part 1, we learn how to build cool particle effects using HTML/CSS/JS like this: When I first started working on this course, I thought that this would be a nice quick way to start the course. It turns out, however, that there=E2=80=99s a surprising amount of depth here. =F0=9F=98= =85 For example: how exactly do we distribute the particles evenly across a 360=C2=B0 field? If you pick totally random values for X and Y, you=E2=80=99ll wind up with a square shape like this: Instead of a big flat square, I want to distribute the particles in a donut shape, like this: We can accomplish this by switching to polar coordinates, an alternative coordinate system that assigns a vector for each particle, rather than an X/Y pair. This sort of polar coordinate conversion is just one of several dozen techniques I=E2=80=99ve internalized as part of my process. These techniques are useful for all sorts of stuff. So, even if you have no interest in this particular particle effect, you can rest assured that the skills you=E2=80=99ll build in this course are much more general. I think when most folks think about web animation, they picture the basics, things like changing an element=E2=80=99s background color on hover. That=E2=80=99s not what this course is about. This course assumes that you already know how to use CSS transitions and want to do more advanced things (but I am including an =E2=80=9CAnimation Primer=E2=80= =9D reference module that covers the fundamentals, since I recognize we all have gaps in our knowledge!). Compared to my previous courses, this course seems smaller; CSS for JavaScript Developers had 10 modules, and The Joy of React had 6 modules and 3 projects. But I actually think it=E2=80=99ll wind up being a pretty similar size, in the end. There are fewer modules, but there=E2=80=99s so much good stuff in each one. I=E2=80=99m also trying something new with this course: Quick Win lessons. Quick wins ---------- Over the years, I=E2=80=99ve picked up a lot of interesting little tricks and techniques. As you go through the course, you=E2=80=99ll discover lessons marked with a star (=E2=AD=90) that focus on one of these techniques. Each Quick Win lesson is intended to be small and self-contained. They should take 15-20 minutes or less to complete, and you should come away with a new technique you can start using immediately in your work. For example, a couple months back, I published a blog post on Partial Keyframes ( https://click.convertkit-mail4.com/o8uppk9lxdcqh6w33n2avhq4m9rrrioh07rq/58h= vh7hgmpvz9et6/aHR0cHM6Ly93d3cuam9zaHdjb21lYXUuY29tL2FuaW1hdGlvbi9wYXJ0aWFsL= WtleWZyYW1lcy8=3D ), a technique where we omit either the from or to block of our @keyframes definition. When we do this, the browser will inherit the missing CSS from the element itself. This means, for example, that we can use a single @keyframes definition for the =E2=80=9CLike=E2=80= =9D button particle effect, with each particle animating to a unique, randomly-generated position! This blog post is a reworked version of a =E2=80=9CQuick Win=E2=80=9D lesso= n in the course. It=E2=80=99s a good example of the sort of handy technique you can learn quickly and use in all sorts of different scenarios. Currently, the course has 13 Quick Win lessons, with roughly half of the content completed. The full course will likely have around 25 of these lil=E2=80=99 techniques. =F0=9F=94=A5 I like this approach because it makes the course more flexible. The full course will likely require 30+ hours to fully complete, which is a big time commitment. I think it=E2=80=99s worth it (it=E2=80=99s= a heck of a lot faster than the 15+ years it took me to learn all this stuff =F0=9F=98=82), but if you don=E2=80=99t have that kind of time t= o spare, you could work through all the =E2=80=9CQuick Win=E2=80=9D lessons in a few= hours and come away with a couple dozen killer new tools in your toolbelt that you can start using right away. The launch ---------- As I mentioned in my previous email ( https://click.convertkit-mail4.com/o8uppk9lxdcqh6w33n2avhq4m9rrrioh07rq/g3h= nh5hm37dkelir/aHR0cHM6Ly93d3cuam9zaHdjb21lYXUuY29tL2VtYWlsL3doYW0td2FpdGxpc= 3QtMDA0LXBhdGhzLw=3D=3D ), Whimsical Animations officially has a release date: September 24th. Only a couple weeks away! The updated landing page now includes answers to a bunch of questions, including: * =E2=86=92 More information about the course=E2=80=99s format * =E2=86=92 The course pre-requisites, what you need to know to get the most out of this course * =E2=86=92 Information about PPP / regional pricing * =E2=86=92 Student and team discount policies If you=E2=80=99ve been wondering about something, there=E2=80=99s a very go= od chance the answer is on this page! And if not, you can reply directly to this email and ask me directly. =F0=9F=98=84 Here=E2=80=99s that link again: * =E2=86=92 whimsy.joshwcomeau.com ( https://click.convertkit-mail4.com/o8uppk9lxdcqh6w33n2avhq4m9rrrioh07rq/kkh= mh6hnlgd39pil/aHR0cHM6Ly93aGltc3kuam9zaHdjb21lYXUuY29tLw=3D=3D ) Color Shifting Particles ------------------------ One of the surprisingly-tricky aspects to the particle effect I showed above is the color shifting. Each particle is given a random color and it shifts through the entire rainbow, doing a couple laps around the color wheel. I figured this would be a simple matter of adding a transition: background-color, but that doesn=E2=80=99t actually work in this case. There=E2=80=99s a serious limitation in how CSS handles color. In order to solve this problem, we=E2=80=99ll need to think outside the box. I thought it was interesting enough that it warranted being pulled into a blog post. And I=E2=80=99ve just published that new post today! You can read it here: * =E2=86=92 Color Shifting in CSS ( https://click.convertkit-mail4.com/o8uppk9lxdcqh6w33n2avhq4m9rrrioh07rq/3oh= phkh376onq9ur/aHR0cHM6Ly93d3cuam9zaHdjb21lYXUuY29tL2FuaW1hdGlvbi9jb2xvci1za= GlmdGluZz9mcm9tPW5ld3NsZXR0ZXI=3D ) I realize I=E2=80=99m throwing a lot of stuff at you in this update =F0=9F= =98=85. Hopefully it doesn=E2=80=99t feel overwhelming! This same content will be covered in the course, so if you already know you=E2=80=99ll be registering, feel free to ignore this blog post. If you=E2=80=99re on the fence, though, maybe this post will help you decide, one way or another! That=E2=80=99s all I=E2=80=99ve got for you today! Hope your week is off to= a good start. =E2=9D=A4=EF=B8=8F PS. I=E2=80=99ll be in touch again in a couple of weeks with a lil=E2=80=99 present for you, ahead of the launch! Stay tuned. =F0=9F=98=89 View email on web ( https://click.convertkit-mail4.com/o8uppk9lxdcqh6w33n2avhq4m9rrrioh07rq/n2h= ohvhv3w8knku6/aHR0cHM6Ly9qb3Nod2NvbWVhdS5jb20vZW1haWwvd2hhbS13YWl0bGlzdC0wM= DUtY3VycmljdWx1bQ=3D=3D ) =C2=B7 Unsubscribe ( https://unsubscribe.convertkit-mail4.com/o8uppk9lxdcqh6w33n2avhq4m9rrrioh07= rq ) =C2=B7 Update profile ( https://preferences.convertkit-mail4.com/o8uppk9lxdcqh6w33n2avhq4m9rrrioh07= rq ) 390 Saint-Catherine Ouest #39013, Montreal, QC H3B 0B2 --0449411b77a0a590597cbedcaa0e9bf2220283937457981b0a6027736a67 Content-Transfer-Encoding: quoted-printable Content-Type: text/html; charset=utf-8 Mime-Version: 1.0 <!DOCTYPE html> <html> <head> <style>.ck-link { text-decoration: underline; }</style> <style>@media only screen { .email * { word-break: break-word; } } @media screen and (max-width: 384px) { .mail-message-content { width: 414px= !important; } } @media (prefers-color-scheme: light) { a[data-element=3D"button"] { background-color: #262d40 !important; } } @media (prefers-color-scheme: dark) { a[data-element=3D"button"] { background-color: #2518ff !important; } }</style> <meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3DUTF-8"> </head> <body> <div id=3D"preview-text"> <span style=3D"display: none; max-height: 0; overflow: hidden;"> I just published a bunch of new info about my upcoming course, = Whimsical Animations. Oh, and a brand-new animation-related blog post too! = =E2=9C=A8 </span> <span style=3D"display: none; max-height: 0; overflow: hidden;"> =E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2= =80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=E2=80=87=CD=8F=C2= =AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD= =C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2= =AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD= =C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2= =AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD= =C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2= =AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD= =C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2= =AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD= =C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2= =AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD= =C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD=C2=AD </span> </div> <meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=3D1"= > <meta content=3D"text/html; charset=3DUTF-8" http-equiv=3D"Content-Type"> <meta name=3D"x-apple-disable-message-reformatting"> <meta name=3D"color-scheme" content=3D"light dark"> <meta name=3D"supported-color-schemes" content=3D"light dark"> <link href=3D"https://joshwcomeau.com/fonts/email-fonts.css" rel=3D"stylesh= eet" type=3D"text/css"> <table align=3D"center" width=3D"100%" border=3D"0" cellpadding=3D"0" cells= pacing=3D"0" role=3D"presentation" style=3D"max-width:574px"><tbody><tr sty= le=3D"width:100%"><td><table cellpadding=3D"0" cellspacing=3D"0" style=3D"w= idth:100%;margin:0 auto"><tbody><tr><td><div> <link rel=3D"preload" as=3D"image" href=3D"https://storage.googleapis.com/j= oshwcomeau/newsletter/gray-particle-fix.gif"> <link rel=3D"preload" as=3D"image" href=3D"https://storage.googleapis.com/j= oshwcomeau/newsletter/square-particles.gif"> <link rel=3D"preload" as=3D"image" href=3D"https://storage.googleapis.com/j= oshwcomeau/newsletter/donut-particles.gif"> <link rel=3D"preload" as=3D"image" href=3D"https://www.joshwcomeau.com/emai= l/signature.png"> <meta content=3D"text/html; charset=3DUTF-8" http-equiv=3D"Content-Type"> <meta name=3D"x-apple-disable-message-reformatting"> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">Hi there!<= /p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">Over the p= ast few months, I=E2=80=99ve gotten lots of questions from y=E2=80=99all ab= out my upcoming course, Whimsical Animations.</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px"><strong>I = have some good news!</strong> I=E2=80=99ve just updated the course homepage= , and it now includes a <em>detailed curriculum,</em> along with a =E2=80= =9Cfrequently asked questions=E2=80=9D section. =F0=9F=98=84</p> <ul style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;paddi= ng-left:0px;padding-right:0px;margin-bottom:32px;list-style-type:none"><li = style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-size= :1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line-he= ight:1.5;text-wrap:pretty;margin-bottom:16px"> <span style=3D"font-family:system-ui, sans-serif;color:#5A59FF;font-weight:= bold">=E2=86=92 </span><a href=3D"https://click.convertkit-mail4.com/o8uppk= 9lxdcqh6w33n2avhq4m9rrrioh07rq/kkhmh6hnlgd39pil/aHR0cHM6Ly93aGltc3kuam9zaHd= jb21lYXUuY29tLw=3D=3D" style=3D"box-sizing:border-box;-webkit-font-smoothin= g:antialiased;color:inherit;text-decoration:underline;text-decoration-color= :#5A59FF;text-underline-offset:2px;text-decoration-thickness:2px;font-weigh= t:600" url-id=3D"1783644646">Check out the all-new Whimsical Animations hom= epage</a> </li></ul> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">The top bi= t is the same, but if you scroll down, you=E2=80=99ll see all the new conte= nt, along with more whimsical details. =E2=9C=A8</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">To quickly= summarize, the course is split into four main parts:</p> <ul style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;paddi= ng-left:0px;padding-right:0px;margin-bottom:32px;list-style-type:none"> <li style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= size:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;lin= e-height:1.5;text-wrap:pretty;margin-bottom:16px"> <span style=3D"font-family:system-ui, sans-serif;color:#5A59FF;font-weight:= bold">1. </span>Particle Effects</li> <li style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= size:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;lin= e-height:1.5;text-wrap:pretty;margin-bottom:16px"> <span style=3D"font-family:system-ui, sans-serif;color:#5A59FF;font-weight:= bold">2. </span>SVG Animation</li> <li style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= size:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;lin= e-height:1.5;text-wrap:pretty;margin-bottom:16px"> <span style=3D"font-family:system-ui, sans-serif;color:#5A59FF;font-weight:= bold">3. </span>Advanced Interactions</li> <li style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= size:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;lin= e-height:1.5;text-wrap:pretty;margin-bottom:16px"> <span style=3D"font-family:system-ui, sans-serif;color:#5A59FF;font-weight:= bold">4. </span>HTML Canvas Animation</li> </ul> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">There are = also two bonus features:</p> <ul style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;paddi= ng-left:0px;padding-right:0px;margin-bottom:32px;list-style-type:none"> <li style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= size:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;lin= e-height:1.5;text-wrap:pretty;margin-bottom:16px"> <span style=3D"font-family:system-ui, sans-serif;color:#5A59FF;font-weight:= bold">1. </span>Animation Design, all about how to conceptualize animations= that improve the user experience and don=E2=80=99t annoy users.</li> <li style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= size:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;lin= e-height:1.5;text-wrap:pretty;margin-bottom:16px"> <span style=3D"font-family:system-ui, sans-serif;color:#5A59FF;font-weight:= bold">2. </span>Animation Challenges, which will be a collection of advance= d animation challenges, a chance to get more hands-on practice, beyond the = exercises in the main content.</li> </ul> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">In Part 1,= we learn how to build cool particle effects using HTML/CSS/JS like this:</= p> <table align=3D"center" border=3D"0" cellpadding=3D"0" cellspacing=3D"0" wi= dth=3D"100%" style=3D"width:100%;max-width:100%"><tbody><tr><td align=3D"ce= nter"><img alt=3D"A heart is clicked, which causes it to pop, spraying part= icles in all directions. The particles are all different colors and slowly = fade away." src=3D"https://storage.googleapis.com/joshwcomeau/newsletter/gr= ay-particle-fix.gif" style=3D"display:block;outline:none;border:none;text-d= ecoration:none;box-sizing:border-box;-webkit-font-smoothing:antialiased;mar= gin:32px auto;border-radius:4px;width:100%;max-width:500px;aspect-ratio:500= / 300;" width=3D"500"></td></tr></tbody></table> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">When I fir= st started working on this course, I thought that this would be a nice quic= k way to start the course. It turns out, however, that there=E2=80=99s a su= rprising amount of depth here. =F0=9F=98=85</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">For exampl= e: how exactly do we distribute the particles evenly across a 360=C2=B0 fie= ld? If you pick totally random values for X and Y, you=E2=80=99ll wind up w= ith a square shape like this:</p> <table align=3D"center" border=3D"0" cellpadding=3D"0" cellspacing=3D"0" wi= dth=3D"100%" style=3D"width:100%;max-width:100%"><tbody><tr><td align=3D"ce= nter"><img src=3D"https://storage.googleapis.com/joshwcomeau/newsletter/squ= are-particles.gif" style=3D"display:block;outline:none;border:none;text-dec= oration:none;box-sizing:border-box;-webkit-font-smoothing:antialiased;margi= n:32px auto;border-radius:4px;width:100%;max-width:300px;aspect-ratio:300 /= 200;" width=3D"300"></td></tr></tbody></table> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">Instead of= a big flat square, I want to distribute the particles in a donut shape, li= ke this:</p> <table align=3D"center" border=3D"0" cellpadding=3D"0" cellspacing=3D"0" wi= dth=3D"100%" style=3D"width:100%;max-width:100%"><tbody><tr><td align=3D"ce= nter"><img src=3D"https://storage.googleapis.com/joshwcomeau/newsletter/don= ut-particles.gif" style=3D"display:block;outline:none;border:none;text-deco= ration:none;box-sizing:border-box;-webkit-font-smoothing:antialiased;margin= :32px auto;border-radius:4px;width:100%;max-width:300px;aspect-ratio:300 / = 200;" width=3D"300"></td></tr></tbody></table> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">We can acc= omplish this by switching to <em>polar coordinates</em>, an alternative coo= rdinate system that assigns a vector for each particle, rather than an X/Y = pair.</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px"><strong>Th= is sort of polar coordinate conversion is just one of several dozen techniq= ues I=E2=80=99ve internalized as part of my process.</strong> These techniq= ues are useful for <em>all sorts of stuff.</em> So, even if you have no int= erest in this particular particle effect, you can rest assured that the ski= lls you=E2=80=99ll build in this course are much more general.</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">I think wh= en most folks think about web animation, they picture the basics, things li= ke changing an element=E2=80=99s background color on hover. <strong>That=E2= =80=99s not what this course is about.</strong> This course assumes that yo= u already know how to use CSS transitions and want to do more advanced thin= gs (but I am including an =E2=80=9CAnimation Primer=E2=80=9D reference modu= le that covers the fundamentals, since I recognize we all have gaps in our = knowledge!).</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">Compared t= o my previous courses, this course seems smaller; CSS for JavaScript Develo= pers had 10 modules, and The Joy of React had 6 modules and 3 projects. But= I actually think it=E2=80=99ll wind up being a pretty similar size, in the= end. There are fewer modules, but there=E2=80=99s <em>so much</em> good st= uff in each one.</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">I=E2=80=99= m also trying something new with this course: <strong>Quick Win lessons</st= rong>.</p> <h3 style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= size:20px;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;lin= e-height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px;margin-top= :32px;margin-bottom:16px;font-weight:600">Quick wins</h3> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">Over the y= ears, I=E2=80=99ve picked up <em>a lot</em> of interesting little tricks an= d techniques. As you go through the course, you=E2=80=99ll discover lessons= marked with a star (=E2=AD=90) that focus on one of these techniques.</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">Each Quick= Win lesson is intended to be small and self-contained. They should take 15= -20 minutes or less to complete, and you should come away with a new techni= que you can start using immediately in your work.</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">For exampl= e, a couple months back, I published a blog post on <a href=3D"https://clic= k.convertkit-mail4.com/o8uppk9lxdcqh6w33n2avhq4m9rrrioh07rq/58hvh7hgmpvz9et= 6/aHR0cHM6Ly93d3cuam9zaHdjb21lYXUuY29tL2FuaW1hdGlvbi9wYXJ0aWFsLWtleWZyYW1lc= y8=3D" style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;co= lor:inherit;text-decoration:underline;text-decoration-color:#5A59FF;text-un= derline-offset:2px;text-decoration-thickness:2px;font-weight:600" url-id=3D= "1783644647">Partial Keyframes</a>, a technique where we omit either the <s= pan style=3D'box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= family:"Cartograph CF", monospace;background-color:hsla(213deg, 100%, 65%, = 0.2);padding:0.2em 0.4em;border-radius:3px;-webkit-box-decoration-break:clo= ne;box-decoration-break:clone'>from</span> or <span style=3D'box-sizing:bor= der-box;-webkit-font-smoothing:antialiased;font-family:"Cartograph CF", mon= ospace;background-color:hsla(213deg, 100%, 65%, 0.2);padding:0.2em 0.4em;bo= rder-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clo= ne'>to</span> block of our <span style=3D'box-sizing:border-box;-webkit-fon= t-smoothing:antialiased;font-family:"Cartograph CF", monospace;background-c= olor:hsla(213deg, 100%, 65%, 0.2);padding:0.2em 0.4em;border-radius:3px;-we= bkit-box-decoration-break:clone;box-decoration-break:clone'>@keyframes</spa= n> definition. When we do this, the browser will inherit the missing CSS fr= om the element itself. This means, for example, that we can use a single <s= pan style=3D'box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= family:"Cartograph CF", monospace;background-color:hsla(213deg, 100%, 65%, = 0.2);padding:0.2em 0.4em;border-radius:3px;-webkit-box-decoration-break:clo= ne;box-decoration-break:clone'>@keyframes</span> definition for the =E2=80= =9CLike=E2=80=9D button particle effect, with each particle animating to a = unique, randomly-generated position!</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">This blog = post is a reworked version of a =E2=80=9CQuick Win=E2=80=9D lesson in the c= ourse. It=E2=80=99s a good example of the sort of handy technique you can l= earn quickly and use in all sorts of different scenarios.</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">Currently,= the course has 13 Quick Win lessons, with roughly half of the content comp= leted. The full course will likely have around 25 of these lil=E2=80=99 tec= hniques. =F0=9F=94=A5</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px"><strong>I = like this approach because it makes the course more flexible.</strong> The = full course will likely require 30+ hours to fully complete, which is a big= time commitment. I think it=E2=80=99s worth it (it=E2=80=99s a heck of a l= ot faster than the 15+ years it took me to learn all this stuff =F0=9F=98= =82), but if you don=E2=80=99t have that kind of time to spare, you could w= ork through all the =E2=80=9CQuick Win=E2=80=9D lessons in a few hours and = come away with a couple dozen killer new tools in your toolbelt that you ca= n start using right away.</p> <h3 style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= size:20px;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;lin= e-height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px;margin-top= :32px;margin-bottom:16px;font-weight:600">The launch</h3> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">As I menti= oned in <a href=3D"https://click.convertkit-mail4.com/o8uppk9lxdcqh6w33n2av= hq4m9rrrioh07rq/g3hnh5hm37dkelir/aHR0cHM6Ly93d3cuam9zaHdjb21lYXUuY29tL2VtYW= lsL3doYW0td2FpdGxpc3QtMDA0LXBhdGhzLw=3D=3D" style=3D"box-sizing:border-box;= -webkit-font-smoothing:antialiased;color:inherit;text-decoration:underline;= text-decoration-color:#5A59FF;text-underline-offset:2px;text-decoration-thi= ckness:2px;font-weight:600" url-id=3D"1783644650">my previous email</a>, Wh= imsical Animations officially has a release date: <strong>September 24th.</= strong> Only a couple weeks away!</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">The update= d landing page now includes answers to a bunch of questions, including:</p> <ul style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;paddi= ng-left:0px;padding-right:0px;margin-bottom:32px;list-style-type:none"> <li style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= size:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;lin= e-height:1.5;text-wrap:pretty;margin-bottom:16px"> <span style=3D"font-family:system-ui, sans-serif;color:#5A59FF;font-weight:= bold">=E2=86=92 </span>More information about the course=E2=80=99s format</= li> <li style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= size:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;lin= e-height:1.5;text-wrap:pretty;margin-bottom:16px"> <span style=3D"font-family:system-ui, sans-serif;color:#5A59FF;font-weight:= bold">=E2=86=92 </span>The course pre-requisites, what you need to know to = get the most out of this course</li> <li style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= size:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;lin= e-height:1.5;text-wrap:pretty;margin-bottom:16px"> <span style=3D"font-family:system-ui, sans-serif;color:#5A59FF;font-weight:= bold">=E2=86=92 </span>Information about PPP / regional pricing</li> <li style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= size:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;lin= e-height:1.5;text-wrap:pretty;margin-bottom:16px"> <span style=3D"font-family:system-ui, sans-serif;color:#5A59FF;font-weight:= bold">=E2=86=92 </span>Student and team discount policies</li> </ul> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">If you=E2= =80=99ve been wondering about something, there=E2=80=99s a very good chance= the answer is on this page! And if not, you can reply directly to this ema= il and ask me directly. =F0=9F=98=84</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">Here=E2=80= =99s that link again:</p> <ul style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;paddi= ng-left:0px;padding-right:0px;margin-bottom:32px;list-style-type:none"><li = style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-size= :1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line-he= ight:1.5;text-wrap:pretty;margin-bottom:16px"> <span style=3D"font-family:system-ui, sans-serif;color:#5A59FF;font-weight:= bold">=E2=86=92 </span><a href=3D"https://click.convertkit-mail4.com/o8uppk= 9lxdcqh6w33n2avhq4m9rrrioh07rq/kkhmh6hnlgd39pil/aHR0cHM6Ly93aGltc3kuam9zaHd= jb21lYXUuY29tLw=3D=3D" style=3D"box-sizing:border-box;-webkit-font-smoothin= g:antialiased;color:inherit;text-decoration:underline;text-decoration-color= :#5A59FF;text-underline-offset:2px;text-decoration-thickness:2px;font-weigh= t:600" url-id=3D"1783644646">whimsy.joshwcomeau.com</a> </li></ul> <h3 style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-= size:20px;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;lin= e-height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px;margin-top= :32px;margin-bottom:16px;font-weight:600">Color Shifting Particles</h3> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">One of the= surprisingly-tricky aspects to the particle effect I showed above is the c= olor shifting. Each particle is given a random color and it shifts through = the entire rainbow, doing a couple laps around the color wheel.</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">I figured = this would be a simple matter of adding a <span style=3D'box-sizing:border-= box;-webkit-font-smoothing:antialiased;font-family:"Cartograph CF", monospa= ce;background-color:hsla(213deg, 100%, 65%, 0.2);padding:0.2em 0.4em;border= -radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone'>= transition: background-color</span>, but that doesn=E2=80=99t actually work= in this case. There=E2=80=99s a serious limitation in how CSS handles colo= r. In order to solve this problem, we=E2=80=99ll need to think outside the = box.</p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">I thought = it was interesting enough that it warranted being pulled into a blog post. = <strong>And I=E2=80=99ve just published that new post today!</strong> You c= an read it here:</p> <ul style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;paddi= ng-left:0px;padding-right:0px;margin-bottom:32px;list-style-type:none"><li = style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-size= :1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line-he= ight:1.5;text-wrap:pretty;margin-bottom:16px"> <span style=3D"font-family:system-ui, sans-serif;color:#5A59FF;font-weight:= bold">=E2=86=92 </span><a href=3D"https://click.convertkit-mail4.com/o8uppk= 9lxdcqh6w33n2avhq4m9rrrioh07rq/3ohphkh376onq9ur/aHR0cHM6Ly93d3cuam9zaHdjb21= lYXUuY29tL2FuaW1hdGlvbi9jb2xvci1zaGlmdGluZz9mcm9tPW5ld3NsZXR0ZXI=3D" style= =3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;color:inherit;= text-decoration:underline;text-decoration-color:#5A59FF;text-underline-offs= et:2px;text-decoration-thickness:2px;font-weight:600" url-id=3D"1783644652"= >Color Shifting in CSS</a> </li></ul> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">I realize = I=E2=80=99m throwing <em>a lot</em> of stuff at you in this update =F0=9F= =98=85. Hopefully it doesn=E2=80=99t feel overwhelming! This same content w= ill be covered in the course, so if you already know you=E2=80=99ll be regi= stering, feel free to ignore this blog post. If you=E2=80=99re on the fence= , though, maybe this post will help you decide, one way or another!</p> <div style=3D"height:32px;line-height:32px"> </div> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px">That=E2=80= =99s all I=E2=80=99ve got for you today! Hope your week is off to a good st= art. =E2=9D=A4=EF=B8=8F</p> <div><img alt=3D"-Josh" src=3D"https://www.joshwcomeau.com/email/signature.= png" width=3D"300" style=3D"box-sizing:border-box;-webkit-font-smoothing:an= tialiased;margin-left:0px;margin-bottom:32px;margin-top:8px"></div> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:1rem;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px;font-style:= italic;margin-top:64px">PS. I=E2=80=99ll be in touch again in a couple of w= eeks with a lil=E2=80=99 present for you, ahead of the launch! Stay tuned. = =F0=9F=98=89</p> <div style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;back= ground:hsla(215deg, 100%, 70%, 0.2);padding:32px 16px;margin-top:64px"> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:14px;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px;text-align:= center;margin-bottom:0px"><a href=3D"https://click.convertkit-mail4.com/o8u= ppk9lxdcqh6w33n2avhq4m9rrrioh07rq/n2hohvhv3w8knku6/aHR0cHM6Ly9qb3Nod2NvbWVh= dS5jb20vZW1haWwvd2hhbS13YWl0bGlzdC0wMDUtY3VycmljdWx1bQ=3D=3D" style=3D"box-= sizing:border-box;-webkit-font-smoothing:antialiased;color:inherit;text-dec= oration:underline;text-decoration-color:#5A59FF;text-underline-offset:2px;t= ext-decoration-thickness:2px;font-weight:600" url-id=3D"1783644653">View em= ail on web</a> =C2=B7 <a href=3D"https://unsubscribe.convertkit-mail4.com= /o8uppk9lxdcqh6w33n2avhq4m9rrrioh07rq" style=3D"box-sizing:border-box;-webk= it-font-smoothing:antialiased;color:inherit;text-decoration:underline;text-= decoration-color:#5A59FF;text-underline-offset:2px;text-decoration-thicknes= s:2px;font-weight:600">Unsubscribe</a> =C2=B7 <a href=3D"https://preferen= ces.convertkit-mail4.com/o8uppk9lxdcqh6w33n2avhq4m9rrrioh07rq" style=3D"box= -sizing:border-box;-webkit-font-smoothing:antialiased;color:inherit;text-de= coration:underline;text-decoration-color:#5A59FF;text-underline-offset:2px;= text-decoration-thickness:2px;font-weight:600">Update profile</a></p> <p style=3D"box-sizing:border-box;-webkit-font-smoothing:antialiased;font-s= ize:14px;font-family:'Wotfard', 'Helvetica Neue', Helvetica,sans-serif;line= -height:1.5;text-wrap:pretty;padding-left:0px;padding-right:0px;text-align:= center;margin-bottom:0">390 Saint-Catherine Ouest #39013, Montreal, QC H3B = 0B2</p> </div> </div></td></tr></tbody></table></td></tr></tbody></table> <!-- --> <img src=3D"https://open.convertkit-mail4.com/o8uppk9lxdcqh6w33n2avhq4m9rrr= ioh07rq" alt=3D""> </body> </html> --0449411b77a0a590597cbedcaa0e9bf2220283937457981b0a6027736a67--

| ver. 1.6 | Github | . | PHP 8.1.33 | Генерация страницы: 0.01 | proxy | phpinfo | Настройка