見出し画像

第１回 糞コード選手権 エントリー一覧

クリエイターズ・シナジーカフェ

どうも、シナカフェのせきゆおうです！
糞コード選手権のエントリーありがとうございます！なんと８件ものエントリーがあって先行して笑わせていただきました😂 

糞コード選手権とは？

シナカフェで1月にコーディングコンテストを開催したのですが「これの糞コード版があったら面白いんじゃない？」と思いつき、企画したのがコーディングコンテストの裏メニュー「糞コード選手権」です！せっかくなので業界全体で盛り上がりたい！と考え、誰でも参加できる企画にしました。

▼参考note

それでは、早速エントリーされた糞コードを見ましょう！
参加者の皆さんの糞コード愛が詰まった最高の作品になっています！CSS設計の大切さを再認識することができるとても良い企画になったと思います😂
※エントリー順に並んでいます

エントリーNo.1 いとさん

クリッカブルマップを使用しました。レスポンシブ対応もしています。一枚画像で作成しているので、デザインカンプ幅でのピクセルパーフェクトも完璧です！

糞コードポイント
当初HTMLだけでの作成を企みましたがわたしの技量が及ばず断念したため、代わりの手段としてクリッカブルマップの使用を思いつきました。
ツールを使って座標位置を取得しているため、（ほぼ）ノーコードです。


エントリーNo.2 icchiCWさん

FLOCSS仕様です。パーツを使い回しできるよう意識し、表示崩れを起こさないようコーディングしています。ピクセルパーフェクト。

糞コードポイント
今回アクセシビリティは考慮できてません！


エントリーNo.3 くろさきさん

CSS「は」最新の技術を使うようにしています。

糞コードポイント
大枠を囲む#wrapper以外のタグを、可能な限り<div>で作成、classなしで作成しました。セマンティックなどガン無視です。こんなHTMLは二度と書きたくありません。


エントリーNo.4 アイバンさん

先月のコーディングの反省を踏まえ、違う視点でコーディングにチャレンジしてみました。楽しかったですが、大変でした。

糞コードポイント
最初、フレキシブルボックスやグリッドレイアウトを使うか、calcやclampなどの関数を使おうかと迷いました。関数を使わず、フロートを使う縛りでやってみました。importantやstyleタグなどは入ってます。


エントリーNo.5 にしはらさん

クラス名が💩なこと以外は、標準的でモダンなCSSを心がけました。WordPressを想定して、1つ目の記事のレイアウトもHTMLはほかの記事と違いをもうけず、CSSのみでレイアウトしました。

糞コードポイント
コード中にふんだんに💩を盛り込みました。一応コンポーネント志向なCSS設計ですが、読みにくいです…。ちなみにJavaScriptの変数にも💩は使えます。


エントリーNo.6 みそしるさん

"・コンセプト：「予測しにくい！」「再利用しにくい！」「保守しにくい！」「拡張しにくい！」
・デザインカンプ「のみ」忠実に再現しました！"

糞コードポイント
・使用タグ：<span><a>のみ
・クラス名：日本語
・全要素：絶対座標で配置
・レスポンシブ対応のためインラインスタイルは断念(スタイルタグで記載)


エントリーNo.7 さとうあまみさん

私が今までに遭遇して「XX(自主規制)」と思ったコードを中心に構成しました。人のコード見て我がコード直せ、ですね。

糞コードポイント
・そもそも要件（XDの情報）を読んでいない。要件を読まずに書かれたコードは全てXX。
・全体的に、何もかも一つも合ってない

・headerとheadタグを間違えている
・ダミーテキストの内容が適当すぎでデザインと違う
・XDからコピペすればいいだけのはずの場所でもスペルミス
・色も大きさもフォントも全てデザインと違う
・全角スペースでととのえる ※整ってない
・インデントが破天荒
・スクロールしていくと無駄なコメントが入ってる
・文字を大きくするために見出しタグを使うので構造がめちゃめちゃ
・文字を小さくするためにsmallタグも使う
・右クリック禁止（頼まれもしない余計なことをする…ちなみに今でも実案件で頼まれることあります）
・画像が角丸含めて書き出されたGIF。※XDでは直接GIF書き出せないので変換しました
・ロゴと見出しが無駄に画像、しかもどこからかBase64で高速化と聞きかじって無駄に埋め込む
・レスポンシブではない
・テーブルレイアウト
・さらにCSSメディアクエリでの出しわけではなくjQueryでshow hideしている
・CSSのクラス名で全角英字や絵文字を無駄に使う
・文字の省略を実装しないで直書きしてる
・ボタンっぽい見た目だからリンクもボタン要素で実装
・命名規則が不明
・命名が意味なくローマ字
・命名に誤字しかない
・#と♯を取り違えてる
・WAI-ARIAの使い方を間違えている
・Br（謎大文字小文字）を何回も重ねてレイアウト調整
・横並びはfloatでキメる
・aでliをつつむ
・単位がcm
・入り混じるシングルとダブルクオート
・body内にstyleタグでCSSが書いてある
・存在しないタグ（date）が書かれてる
・無駄に実態参照（｜を&#65372;）
・画像にwidth height入れず、CSSでも比率を指定しない。
・画像にalt属性がない
・閉じなくて良いタグを閉じてる
・半角カナを謎に使う
・特に意味なくIDでスタイリングする
・1つのページに何個も同じIDがある
・sectionの中に見出しがない
・mainが複数ある
・fontタグやcenterタグを使っている
・コピペした結果を精査しないので余計なタグ(liの中にtd、その中にa)が紛れ込んでいる
・ランドマークに所属していない要素がある（どころじゃないけど…
・そこはリストだろう、なところにリストを使わない
・pを閉じない（状況によっては間違いではないが、私は手書きなら閉じる派

CodePenの仕様上、表現できませんでしたが、もし生HTMLでの提出だった場合は下記の要素を入れたと思います。
・ファイル名が全角だったり、スペースを含んでいる
・HTML5shivその他明らかに古いブラウザ対応のJS読み込み
・jQuery本体を複数個読み込む
・文字コードの記述と実際の保存形式が合っていない
・盗用を防ぐため、印刷用CSSでは全てを真っ白にする
・全然別のサイトのソースコードが混じってコメントされている（著作権的に表現できませんでした）
・リンク先がページと見せかけてPDF

--
このコードをレンダリングできるなんて、ブラウザは健気だなと思いました。


エントリーNo.8 ShuPeさん

class名に絵文字が使えることを知り、それを生かしたお話を作ってみました！css設計の大切さをこれほどかと学ぶことができました。
もう修正不可能です。。。。ピクパじゃないことはご容赦ください。。。。

糞コードポイント
class名と絵文字でストーリを作ったところです！
style.cssの行数の隣の部分を閉じるとお話しだけを読める仕様です！

とっても疲れました。。。。
設計ほんと大事。。。。。。。。。。


第１回 糞コード王を決定したい！！

本当に笑わせていただきました...😂
後出しではございますが、エントリー作品の中から最優秀賞を投票で決定したいと思います。糞コードの中の糞コード...第１回「キング・オブ・クソコード」を投票で決定したいと思います！

お気持ち程度ではございますが、優勝者にはシナカフェから「スターバックスのチケット3,000円分」をプレゼントさせていただきます！

さらに！優勝者に投票した人の中から抽選で２名様にも「スターバックスのチケット500円分」をプレゼントさせていただきます！

ぜひ、投票にご参加ください！

糞コード選手権優勝者の投票はこちら

※ 投票の締め切りは4月末です

みんなの声

糞コード選手権を見ていただいた方の声をいくつか紹介いたします！


いいなと思ったら応援しよう！