落ち着いてスマッシングマガジンを読む
公開: 2022-03-10最も重要なことの概要を1か所にまとめておくと便利ですが、Twitter、Facebook、LinkedInでフォローし、RSSフィードと隔週のニュースレターを購読してください。 私たちは、あなたが物事を常に把握し、少なくとも少しだけ生活を楽にする手助けをするのが好きです！
私たちがスマッシングについて人々に尋ねたときはいつも、私たちが米国のどこかにあるある種の大規模な出版社であると信じているようですが、どちらも間違っています。 それはすべてドイツのフライブルクで始まり、チームは世界中に散らばっている人々で構成されています。私たちのほとんどはスマッシングのためにフルタイムで働いていません。
それは正しい。 リモートでの作業は私たちにとって非常に馴染み深いものであるため、COVID-19で起こっている現在の状況では、誰もが不安になっています。初めて。 私たちの編集長であるレイチェル・アンドリューは、私たちが一緒にこれを経験している間、あなたがつながりを保ち、学び続けるのを助けるために素晴らしい投稿を用意しました。
SmashingConf SFは、不幸な渡航禁止令やその他の多くの理由により、（悲しいことに）11月に延期されたと聞いたことがあるかもしれません。 チームにとって本当に難しい決断でしたが、それが最善の方法であると信じています。安全と健康が常に最優先されます。
余計な手間をかけずに、Smashingで行われていることの簡単な更新と、コミュニティとの間で共有されるいくつかの非常にクリエイティブな作業を紹介します。
幸せな読書—私のコンピューターからあなたのコンピューターまで！
倫理を念頭に置いたデザイン
何ヶ月にもわたる努力の末、ついに「倫理的デザインハンドブック」がここにあります—そしてそれは出荷されています！ すでに圧倒的な好評をいただいておりますので、よろしくお願いいたします。 ウェブ上でやるべきことはまだかなりありますが、この本で、会社をより持続可能で健康的なデジタルフットプリントに向けてゆっくりと動かすのに十分なツールが装備されることを願っています！
もちろん、すぐに目次にジャンプしたり、無料のPDFの抜粋をダウンロードして、本の第一印象を得ることができます。失望することはありません。 詳細をすべて記載した公式リリース投稿を読む→
常にお互いから新しいことを学ぶ
私たちは皆忙しいスケジュールを持っていますが、それらの耳栓をポップして、あなたを幸せにするいくつかの音楽やポッドキャストを聞く時間は常にあります！ Smashing Podcastの第12話に移ります。さまざまなバックグラウンドを持つ人々が参加し、共有することがたくさんあります。 いつでもご意見やご感想をお聞かせください。
- 以前のSmashingPodcastエピソード（トランスクリプトを含む）
- Twitterで@SmashingPodをフォローする
延期されたSmashingConfSFに関する悲痛なニュースは別として、SmashingConfsは、フロントエンドの開発者とデザイナーが集まってライブセッションやハンズオンワークショップに参加する、フレンドリーで包括的なイベントとして知られています。 ライブデザインからライブデバッグまで、すべてのスピーカーが詳細に説明し、自分のプロジェクトの有用な例を大画面で表示することを好みます。
ここにあなたが見て学びたいと思うかもしれないいくつかの話があります：
| トークタイトル | スピーカーの名前 |
|---|---|
| グリッドで考える | ジェン・シモンズ |
| アクセス可能なインターフェースの構築：パターンとテクニック | サラ・スエイダン |
| 動的CSS | ミリアム・スザンヌ |
| 動的Webタイポグラフィ | ジェイソン・パメンタル |
| ディファレンシャルサービングで違いを生む | ジェレミー・ワグナー |
| Javascriptの基礎をスラムダンク | ウェス・ボス |
| メールオタクのように考える | レミ・パルマンティエ |
| 簡単なパフォーマンスデバッグ | アンナミガス |
| 速く動き、物事を壊さないでください | スコット・ジェール |
| デザイナーvs開発者！ | ダンモール、ブラッドフロスト、イアンフロスト |
最初のSmashingConfは2012年にフライブルクで開催されたので、もっとたくさんの講演を見ることができます。 すべてのSmashingConfビデオを見る→
React、Redux、Electronにスポットライトを当てる
カレンダーに印を付けてください！ 来週の3月19日には、CassidyWilliamsと一緒にSmashingTVウェビナーを開催します。このウェビナーでは、最新のReactアプリケーションの編成方法とElectronアプリケーションの構築方法（Reactを使用）について説明します。 ロンドン時間の17:00にご参加ください—プロジェクトでReactを使用したときの考えや経験をぜひお聞かせください。
Smashing TVは、デザイナーや開発者向けの実用的なヒントが満載の一連のウェビナーとライブストリームです。 それらは単なる会話ではなく、会話や「ここでの仕事」セッションのようなものです。 スマッシングメンバーはレコーディングをダウンロードでき、メンバーシップを価値あるものにするために割引やたくさんのグッズを受け取ることもできます。 関連記事を読む→
SmashingMagのトレンドトピック
Web業界で現在行われているさまざまなトピックについて、毎日新しい記事を公開しています。 読者が最も楽しんでいるようで、さらに推奨しているものを次に示します。
- 「なぜCSS4について話しているのですか？」
レイチェル・アンドリュー
Web全体およびCSSワーキンググループ内で、CSSのバージョンを指定する必要があるかどうか（おそらくCSS4という名前を付ける）についていくつかの議論がありました。 この記事では、レイチェル・アンドリューがそうすることの賛否両論をまとめ、提案についてのフィードバックを求めています。 - 「画像に高さと幅を設定することも重要です」
バリー・ポラード
ブラウザの最近の変更のおかげで、レイアウトのずれを防ぎ、サイト訪問者のエクスペリエンスを向上させるために、画像にwidthとheightの属性を設定する価値があります。 - 「ReactプロジェクトでのTailwindCSSのセットアップ」
祝福クロフェガによって
この記事では、Tailwind CSSを紹介します。これは、独自のスタイルを使用せずにオーダーメイドのデザインを構築するために必要なすべてのビルディングブロックを提供するCSSライブラリです。 また、ReactプロジェクトでTailwindCSSをシームレスに設定する方法についても学びます。 - 「Alpine.jsの紹介：小さなJavaScriptフレームワーク」
フィル・スミス
Webサイトを構築し、jQuery、Bootstrap、Vue.js、またはReactにアクセスして、基本的なユーザーインタラクションを実現したことがありますか？ Alpine.jsは、ビルド手順を必要とせず、基本的なユーザーインターフェイスをビルドするために必要なすべてのツールを提供するため、これらのフレームワークのサイズのほんの一部です。 - 「片手で使用できるモバイルアプリを設計する方法」
MaitrikKataria著
現在販売されているスマートフォンの90％は、5インチを超えるディスプレイを備えています。 より大きな画面の領域は、アプリメーカーとデザイナーに新しい課題と機会をもたらします。 片手で使用できるアプリを設計することで、これらの課題をどのように解決できるかを見てみましょう。
ニュースレターからのベストピック
正直に言うと、2週間ごとに、Smashing Newsletterの問題を適度な長さに保つのに苦労しています。すばらしいプロジェクトに取り組んでいる才能のある人々は、非常にたくさんいます。 したがって、この月次更新も長くしすぎないように、次のプロジェクトにスポットライトを当てています。
PS ：これらの投稿を書いて準備してくれたCosima Mielkeに大いに感謝します！
デザインのエラーを見つけて修正する
プロジェクトに没頭して距離を失い、少しの矛盾を捕らえるために必要な瞬間を私たちは皆知っています。たとえば、画像の周囲の境界半径が正しくない、スタイルやテキストが欠落しているなどです。 Figmaで設計している場合、無料のオープンソースプラグインであるDesign Lintを使用すると、このようなエラーを簡単に見つけて修正できるため、バグが発生することはありません。
Design Lintは、欠落しているテキスト、塗りつぶし、線、効果のスタイルをチェックし、すべてのレイヤーで誤った境界線半径値をキャッチします。 ワークフローを中断しないように、エラーを修正するとプラグインが自動的に更新されます。 リポジトリはGitHubで利用できるため、プラグインをニーズに合わせて調整するための特定のルールを自由に作成してください。
猫とのCSSポジショニングを学びましょう！
たくさんのフレンドリーな猫のように、CSSのポジショニングを学ぶためのより良い方法はありますか？ それはおそらく、CSSポジショニングがどのように機能するかについてのインタラクティブガイドを作成したときに、AhmadShadeedが考えたことでもあります。
このガイドでは、CSSを使用して3匹の漫画の猫とその毛布をボックス内に配置する方法を説明しています。概念を理解したら、値を編集するときに結果がどのように変化するかを視覚化するインタラクティブなデモをいじり始めることができます。 さて、学習は楽しいものではないと誰が言いましたか？
親密さ、インタラクティブな短い詩
刺激的な実験は、フランスのグラフィックとインタラクションデザインの学生であるThibaud Giffon：「親密さ」から来ています。 インタラクティブな短い詩は、抽象的な画像、音、テキストを使用して、さまざまな角度から親密さを探求します。
思いやり、距離、混乱、感触—これらは詩を構成する8つの章のうちの4つです。 そして、それらのそれぞれは、独自のユニークな方法でトピックを反映しています。暖かく調和のとれた波や円が互いに溶け合うだけでなく、不協和音のストリングやカラフルな泡が破裂して自分たちのためのスペースを作ります。 綺麗な！
すべてのSVGアイコンを1か所に
すべての資産を整理するための1つの中心的な場所を持つことは、チームだけでなく、常に良いことです。所有しているものを追跡し、探しているものをすばやく見つけることができます。 無料のクロスプラットフォームアプリIconsetは、そのような場所です。すべてのSVGアイコンセットを収集、カスタマイズ、共有、および管理するのに役立ちます。
探しているアイコンを見つけやすくするために、アイコンをセットまたはタグで整理し、必要なアイコンを見つけたら、それをお気に入りのツールに直接ドラッグできます。 本当の時間の節約。 Iconsetは、DropboxやOneDriveなどのクラウドサービスをサポートしているため、すべてのアイコンがチームメンバー間で常に同期されます。 このアプリはMacとWindowsで利用できます。
古代の英雄のWebGLアドベンチャー
彼が決して求めたことのない探求に消極的なヒーロー—それはブラウザベースのアドベンチャービデオゲームHeraclosの背後にある物語です。 古代ギリシャを舞台にした若いヘラクロスは、神々の1つに属するアンフォラに出くわします。 彼は選ばれた人であると宣言され、秘密の山に登り、アンフォラを所有者に返すために送り出されます。
ゲームを非常に注目に値するのは、ヒーローと神の間の相互作用の楽しいひねり（一般的なヒーローの物語のパロディー）だけでなく、技術的な背景です：Heraclosは、ゴブランの学校の学生のグループによってわずか3か月で設計されましたパリの画像—WebGLとCannon.jsを使用。 ウェブ上で可能なことの素晴らしい例。
Webテクノロジーで構築されたオープンソースのスクリーンレコーダー
Kapのことはもう聞いたことがありますか？ オープンソースのスクリーンレコーダーは、スクリーンレコーディングを頻繁に行う場合は、必ずチェックする価値があります。
KapはWebテクノロジーで構築されており、GIF、MP4、WebM、またはAPNG形式で高品質の録画を生成します。 （マイクからでも）オーディオを含めたり、クリックを強調表示したり、録音をトリミングしたりできます。 ボーナスグッズとして、記録したGIFをGiphyで共有したり、今すぐZEITで展開したり、Streamableにアップロードしたりするオプションもあります。 技術的なデモに最適です。
オープンピープス、無料の手描きイラストライブラリ
584,688の可能な組み合わせ。 これは、PabloStanleyの手描きイラストライブラリOpenPeepsで作成できるさまざまなキャラクターの数です。
Open Peepsを使用すると、さまざまなベクトル要素を組み合わせてさまざまな個性を作成できます。衣服やヘアスタイルを組み合わせたり、顔の表情で感情を変えたり、さまざまなポーズでシーンを設定したりできます。可能性は無限大です。 また、お急ぎの場合は、すぐに使用できるダウンロード可能なPeepsも用意しました。 Open PeepsはCC0ライセンスの下でリリースされているため、個人プロジェクトと商用プロジェクトの両方でイラストを自由に使用できます。 デザインに手作りのタッチを加えるのに最適な方法です。
入力をよりアクセスしやすくする方法
2019年、WebAimは上位100万のWebサイトのアクセシビリティを分析し、衝撃的な結論を出しました。エラーのないページの割合は1％未満と推定されました。 私たちのサイトを包括的で支援技術に依存する人々が利用できるようにするには、セマンティックHTMLの基本を正しく理解する必要があります。 小規模から始め、共有し、協力するという信条を持つOscar Braunertの包括的入力に関する記事は、そうするための優れた出発点です。
この記事では、WAI、ARIA、およびWCAGの基本から始めて、入力をよりアクセシブルにする方法について説明します。 ヒントは、ユーザーインターフェイスを変更せずに実装でき、オスカーは次のように述べています。 誰も気付かないでしょう。 一部のユーザーを除きます。 そして、彼らはそれをあなたに感謝するでしょう。」
開発者向けのオープンソースフォント
高い読みやすさ、迅速なテキストスキャン、気を散らすことはありません—これらは、開発者が書体に求める要求のほんの一部です。 さて、無料のオープンソース書体JetBrains Monoは、それらすべてに美しく適合しています。
そのために、Jet Brains Monoは、小さいながらも強力な詳細を利用します。他の等幅フォントと比較して、JetBrains Monoの高さは高くなりますが、文字の幅は標準のままで、コード行を開発者が期待する長さに保ちます。 読みやすさをさらに向上させるために、138のコード固有の合字はノイズを減らし、目が処理する必要が少なくなり、空白がよりバランスの取れたものになります。 頭がいい！ JetBrains Monoには4つのウェイトがあり、145の言語をサポートしています。
iframeの究極のガイド
多くの記事がそれらに反対するようにアドバイスしているので、iframeは最高の評判を持っていません。 JavaScript開発者のNadaRifkiは、物事の見方が異なります。彼女は、彼らの評判がiframeに依存することを妨げないようにすることを提案しています。 結局のところ、彼らには多くの正当なユースケースがあります。
この物議を醸す要素についてあなた自身の意見を形成するのを助けるために、灘はiframeの機能とそれらの使用方法を探求するiframeへの究極のガイドを書きました。 iframeが役立つかもしれないトリッキーな状況。 最後になりましたが、潜在的な脆弱性からiframeを保護する方法。 別の視点から物事を見る絶好の機会。
コンソールコマンドのガイド
開発者のデバッグコンソールの機能は、エラーを報告する手段から、ネットワーク要求やセキュリティエラーや警告などの情報を自動的に記録する手段まで、過去数年間で大幅に進化しました。 WebサイトのJavaScriptが、デバッグ目的でコンソールに出力されるさまざまなコマンドをトリガーする方法もあります。 これらの機能はブラウザ間でほぼ一貫していますが、機能上の違いもいくつかあります。
コンソールコマンドの機能の概要をお探しの場合は、TravisAlmandが役立つガイドをまとめました。 FirefoxとChromeについて説明し、ブラウザのコンソール出力またはJavaScriptで使用できるさまざまなコマンドを調べます。 便利な要約。
便利なフロントエンドとUXビット。週に1回配信されます。
あなたがあなたの仕事をより良くするのを助けるためのツールで。 購読して、VitalyのスマートインターフェイスデザインチェックリストPDFを電子メールで入手してください。
フロントエンドとUX。 190.000人から信頼されています。