TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に｜ハイクラス転職・求人情報サイト AMBI（アンビ）
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎（gfx）さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと（どちらかというと既存のプロジェクトに）導入するための
SCOUTER開発者ブログ
2024-04-29 CSSってどんな勉強をしたらいいの？おすすめの勉強法3選！ 文字やタブなどWebサイトのデザインを作成するマークアップ言語がCSSです。 CSSを勉強すると、おしゃれなWebサイトやかっこいいWebサイトが作れるようになります。 また、Webサイトを作るときに必要なHTMLを理解するのにも役立ちます。 CSSを勉強するならできるだけ効率よく勉強できるようになりたいですよね。 ではCSSの勉強法はどのようなものがあるのでしょうか。 CSSの勉強法は、スクール […] 2024-04-29 WEBエンジニアから見たXserverの使い勝手と評判 レンタルサーバーのおすすめサイトを見ると、大体どこでも上がってくる有料のレンタルサーバーの一つに「Xserver」があります。 このXserverとは、どのようなサーバーで、サービスにはどのようなものがあるのか。 ホームページ関連
スクラッチから始めるNuxt.jsでログイン！ - Keepdata Blog
開発Divのeciです。 今年はVue Fes Japanが秋にあることですし、周りがみんな「vue,vue」言い始めたので、Vue.jsを触ってみました。 調べていくとNuxt.jsというフレームワークがよさげですので、今回はこれのチュートリアルを元に拡張していこうと思います。 Nuxt.jsにはスターターテンプレートが用意されていますが、今回は「スクラッチから始める」の方を参考にしていきます。 インストール - Nuxt.js ただ、このままですと味気ないですので、ログイン認証まで作っていきます。 では、行きましょう！ まずは、Helloページ表示まで ディレクトリを作成 $ mkdir hello $ cd hello package.jsonの作成 helloディレクトリ直下にpackage.jsonを作ります。 { "name": "hello", "scripts": { "d
某アイシングクッキー屋のサイトを、アイシングクッキー界一ナウい技術スタックなサイトにリニューアルした話｜福井 烈 / note inc.｜note
先に軽くお店の紹介を...enはデザインへのこだわりはもちろん、安心安全に美味しく食べて頂けることを目指し、着色に天然色素を使用、原材料に国産バター・国産小麦を使用するなど味と品質にも重きを置いています。 デザインの一例としては、例えば会社や自社サービスのロゴをモチーフにしたクッキー。 暖かくなってきてイベントなども多くなるシーズンですので、ノベルティなどにオススメです！ 他にもnoteとInstagramで作品を公開しているので、良かったら覗いてみてください。 ■note: https://note.mu/en0315 ■Instagram: https://www.instagram.com/en_0315/ Why?リニューアル前はameba ownd上で運用していて、無料で利用できるし大きな不満はなかったのですが、 ・独自ドメインをSSLで運用したい ・ページ表示のパフォーマンスを
jQuery から Vue.js へのステップアップ - Qiita
はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
WebGLでなんか綺麗なキラキラなパーティクルの演出を作ってみた · けんごのお屋敷
元々 OpenGL を使っていたことがあって 3D の基礎についてはある程度わかっていたので WebGL には本当にすんなり入ることができた。WebGL は OpenGL ES の仕様を元にしているので当然といえば当然なのですが、他の OpenGL のプラットフォームと比べて WebGL はテキストエディタとブラウザさえあれば開発環境が整うという手軽さ、さらに WebGL 界隈ではとても有名な three.js というライブラリがあるおかげで、さらに敷居が下がってる。ということで、前々から WebGL で作ってみたかった綺麗でしなやかなパーティクルの演出を作ってみました。 The XSEEDS ※ちなみに XSEEDS というのは、有志で集まったエンジニアがお酒飲みながらワイワイ開発やってる集団です。 作ってみたので、せっかくなので WebGL ってこんなことができるよ、こうやって作れるん
BackstopJSではじめるビジュアルリグレッションテスト - astamuse Lab
こんにちは。デザイン部でフロントエンドエンジニアをしているkitoです。 今回は、BackstopJSを使ったビジュアルリグレッションテストについて書きたいと思います。 ビジュアルリグレッションテストとは視覚的な回帰テストのことで、具体的にはスクリーンショットを撮影して差分抽出して行うテストです。 近年のWebフロントエンド開発では、SassやWebpackのような開発環境が整うに従ってスタイルシートをモジュール化することが増えています。 それはスタイルの汎用性を高めることに大きく貢献していますが、一方で、あるパーツのスタイル修正が想定外の場所で悪影響を及ぼしてしまう可能性をもつようになりました。 この問題に対処するために、Enduring CSSのような新しいタイプの設計手法も考えられてはいますが、既存のサービスに導入するにはかなり敷居が高いでしょう。 そこで注目したいのが、ビジュアルリ
3D初心者の俺がThree.jsの基本をオススメ本とともにザーッとおさらいする記事 - Qiita
WebGL Advent Calendar 2014の13日目の記事です。 3Dのスキルなんてものは1mmもないわたくしが、お勉強したログをまとめてみます。 Three.jsのバージョンは68時点のものです。 参考にしたもの three.jsのドキュメント three.jsのサンプル three.jsによるHTML5 3Dグラフィックス〈上〉―ブラウザで実現するOpenGL(WebGL)の世界 ドキュメントとサンプルがしっかりしてるので、それだけでも事足りそうだけど、本を読んだほうが早い。記事中で上巻と書いているのはこの本のことです。ただし、2013年9月に出版されたものなので、ちょっと古いところもあります。 Three.jsの超基本 こんなノリだと動く！ renderer作成 scene作成 camera作成 lightをsceneに置く meshをsceneに置く meshは素材のma
HTML5 History モード | Vue Router
vue-router のデフォルトは hash モード です - 完全な URL を hash を使ってシミュレートし、 URL が変更された時にページのリロードが起きません。 その hash を取り除くために、ページのリロード無しに URL 遷移を実現する history.pushState API を利用したルーターの history モード を使うことができます。 const router = new VueRouter({ mode: 'history', routes: [...] }) history モードを使用する時は、URL は "普通" に見えます e.g. http://oursite.com/user/id。美しいですね! しかしながら一点問題があります。シングルページのクライアントサイドアプリケーションなので、適切なサーバーの設定をしないと、ユーザーがブラウザで直
Wavie.JS
We call it Wavie.js An awesome javascript library for creating background waves. Github Download
Vue2.x系のハマりどころ templateとコンパイラを完全解説するよ
Vue2.xでは仮想DOMが使われるようになりました。それに伴い、Vue用のテンプレートを仮想DOMをレンダリングするための関数に変換するという処理をコンパイル時に行ってくれる仕組みが組み込まれています。 そして、お手軽にVueを試したい人、プロダクトにVueを使いたい人、コンポーネント志向でアトミックに実装したい人など、様々な用途に応じたテンプレートの書き方(＆コンパイルの方法)を用意してくれています。 そのためテンプレートの書き方とコンパイルの種類については仕様がやや複雑で、公式ドキュメントだけでは理解が難しくけっこうハマりどころだと感じている(事実ずっぽりハマりました)ので、知見を残しておこうと思います。 ※この記事を書いている時点でのVueのバージョンは2.2.1です。 おさらい Vue.jsの利用方法3パターン 1. Vueを<script>タグで埋め込む方法 2. Vue CL
最速のアニメーションライブラリはこれだ! JSライブラリの性能をDOMとWebGLで比較検証 - ICS MEDIA
HTMLのアニメーション実装に役立つさまざまなJavaScriptライブラリがあります。前回の記事「現場で使えるアニメーション系JSライブラリまとめ」ではJSライブラリ7種類の特徴を紹介しましたが、本記事ではそれらのパフォーマンスを比較します。 JSライブラリのパフォーマンスが良いほど、たくさんのアニメーションがあっても滑らかに動きます。また、パフォーマンスがよければCPUへの負荷が低くなるため、サイト訪問者のスマートフォンの消費電力にも優しいとも言えます。ウェブ制作者はJSライブラリのパフォーマンスにも気を配りたいものです。 今回検証したJSライブラリ アニメーション（トゥイーン）用のJSライブラリやテクノロジーとして次の9種類で比較しました。バージョンは2022年5月現在の最新版を利用。ウェブページ用途の①DOM版と、ハイパフォーマンス用途の②WebGL版の2通りの方法で検証しています
Awesome JavaScript : 素晴らしい JavaScript ライブラリ・リソースの数々 - Qiita
元記事: Awesome JavaScript Awesome List in Qiita Awesome Ruby Awesome Java Awesome Node.js Awesome Python Awesome Go Awesome Selenium Awesome Appium パッケージマネージャ JavaScript ライブラリをホストし, それらを取得してパッケージ化するためのツールを提供します npm - npm は JavaScript のためのパッケージマネージャです. Bower - Web のためのパッケージマネージャ. component - より良い Web アプリケーションを構築するためのクライアントパッケージマネージャ. spm - 新しい静的パッケージマネージャ. jam - RequireJS のレポジトリと互換性があり, ブラウザーに焦点を当てたパ
Tilt.js - Parallax tilt effect for jQuery
The most basic usage: Add <script src="tilt.jquery.js"></script> right before the closing </body> tag Mark your elements with <span data-tilt></span> Creating a parallax effect Add transform-style: preserve-3d to your tilt element. Add a transform: translateZ(20px) to your inner elements that have to pop out. Glare effect: Setting this option will enable a glare effect. You can tweak the glare val
[jQuery] 画像の色を見て、ドミナントカラーを親要素の背景色に反映するプラグイン。色の抽出方法が気になったので調べてみた - YoheiM .NET
[jQuery] 画像の色を見て、ドミナントカラーを親要素の背景色に反映するプラグイン。色の抽出方法が気になったので調べてみた こんにちは、@yoheiMuneです。 最近、GitHubで人気のリポジトリ25というGithubのまとめサイトを見つけて、色々と見てました。 言語別（CSSとかJavaScriptとかJavaとか）に、最近Hotなレポジトリが見れるのですが、いくつか気になったものがあったので、コードリーディング的になことをしてみました。 今日はその中で、jquery.adaptive-backgrounds.js＠githubが面白そうだったので、今日はこれ取り上げたいと思います。 jquery.adaptive-backgrounds.jsとは jquery.adaptive-backgrounds.jsは、github上でStarが2,000個以上付いていて、ちょっと注目な
![[jQuery] 画像の色を見て、ドミナントカラーを親要素の背景色に反映するプラグイン。色の抽出方法が気になったので調べてみた - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/13fe8e430a4d46645f84bc0186bc3f3710137429/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F296.jpg)
はじめてのRiot.js | CYOKODOG
手抜きタイトルのはじめてシリーズ３つ目。近頃、耳にすることの多いRiot.jsをさわってみました。 Riot.jsとは Riot.js — A React-like user interface micro-library（日本語訳） Reactを意識して作られた超軽量のUIライブラリ、ビュー部分(コンポーネント)に特化 Web componentsのように利用できる HTMLの中に、JavaScriptやCSSを書く 軽量、5.7KB インブラウザ・コンパイルを利用することで、CDNを読み込むだけで手軽に利用できる 開発元：MUUT 簡単な利用例 今回試した内容のリポジトリ。 cyokodog/riot_study 以下手順で利用可能。 CDNの読み込み コンポーネントの定義と読み込み コンポーネントのマウント /01/index.html <html> <head> <meta htt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://chibinowa.net/note/vuejs/vue-4.html
Vue.js 2.3 CheatSheet
GitBook – Knowledge management for technical teams
Vue.js 2.0 Server Side Rendering
