2020年6月1日追記：私はいわゆる「純ジャパ」の「文系エンジニア」だが、どちらの言葉もあまり好きではない。タイトルはこれらの言葉の普及を皮肉ったものだ。 エンジニアを狙った悪質な情報商材が増えているようだ。皆様にも用心していただきたい。 はじめに日本人は英語ができないとよく言われるが、本当だろうか。ヨーロッパで数年勤めた今、残念ながらこれは事実として認めざるを得ない。度々挙がる「TOEIC900点論争」などを見ても明らかなように、海外で要求される語学力は国内での一般的な理解と乖離している。経済的競争力があった親世代の駐在員とは違い、我々の多くは現地の従業員と対等な立場で仕事をすることになる。 高い人事評価を得るには、仕事の対象を個人<チーム<チーム横断<組織全体<業界全体というように拡大していく必要があり、これには高度な言語能力が不可欠である。20代に技術一本で海外を渡り歩いたが、気づけ
これは5年かけて JavaScript の技術スタックの間をうろつき、無駄な時間を過ごし、迷い、そしてなんとかローンチにこぎつけた体験の記録です。 自己紹介 初めまして。私は小さなモバイルアプリ開発会社を運営しているエンジニアです。 プログラミングを始めたのと同じくらいのときから、趣味で作曲活動をしています。 今日の作曲は DAW と呼ばれる大型のソフトウェアを利用することがスタンダードになっています。しかしたくさんのプラグインをマシンにインストールしなければならないことや、すぐに立ち上がる作曲ソフトが無いことにフラストレーションを覚え、軽量な MIDI シーケンサーアプリを好んで使っていました。 しかしそれらの多くは Windows2000 の時代から存在し、アップデートされず、その上 Windows 10 以降 MIDI の再生はまともにサポートされなくなりました。 その問題を解決する
最近の開発者が最も好むドキュメント形式を挙げるとしたら断然マークダウンになるでしょう。マークダウンは、GitHub、GitLab、Bitbucketなど、タスクやイシュー管理に対応するほとんどのサービスにおいて、基本のドキュメント形式として使用されています。また、IntelliJ、VSCode、Vim、Emacsなど、ほぼすべてのテキスト編集ツールでも、プラグインを通じてマークダウン文書の強調構文やプレビュー機能を使用することができます。 TOAST UI Editorはここからさらに一歩進んで、マークダウンエディターとウィジウィグエディターを統合した形式のインターフェースを提供しています。ウィジウィグエディターを使用すると、テーブルなどの複雑な文法をより直感的に簡単に編集することができ、マークダウンに慣れていないユーザーでもマークダウン基盤の文書を簡単に編集できます。特に、開発者と非開発
依存モジュールが少ないソースコードを読む - スペシャリスト岡野真也に聞くPythonの読み方と使い方 - エンジニアHub｜Webエンジニアのキャリアを考える！
依存モジュールが少ないソースコードを読む - スペシャリスト岡野真也に聞くPythonの読み方と使い方 現在、多くの支持を集めるPython。10年以上にわたりPythonを使い続ける岡野真也さんに、同言語の学び方、使い方を聞きました。 機械学習やデータサイエンスの隆盛に伴い、Pythonは多くの人に使われる言語になりました。GitHubの「The State of the Octoverse 2019」のレポートによると、GitHubリポジトリのコントリビューターから人気のあったプログラミング言語として、PythonはJavaScriptに次いで2位となっています。 「さまざまな課題を、楽に解決できるのがPythonの魅力」と語るのは、10年以上も前からPython・Djangoフレームワークのヘビーユーザーであり続けてきた岡野真也（おかの・しんや／ @tokibito ）さん。彼はいか
米Googleは7月18日（現地時間）、2019年3月に生成を停止したURL短縮サービス「goo.gl」を、2025年8月25日に完全停止すると発表した。 goo.glは、2009年に立ち上げたURL短縮サービス。生成停止後も、既に生成された短縮URLは実際のURLにリダイレクトされていた。 8月23日から来年8月24日までは、短縮URLから実際のURLにリダイレクトされる前に終了を告知するページが表示されるようになる。 来年の8月25日以降は、すべてのgoo.glのURLには404エラーが返されるようになる。 短縮URLサービスは2009年前後に、Twitter（現X）の140文字制限にリンクを貼る場合などのニーズを受けてtr.imやbitlyなど、複数の企業が提供していた。 関連記事 Google、ドメイン登録サービスを手放す 約1000万ドメインが他社に 米Googleが、ドメイン登
『Google Docs』や『Figma』といったリアルタイムな共同編集ツールの恩恵を受けている人は数多くいるでしょう。『Visual Studio Live Share』のようなエンジニアに嬉しいツールも生まれ、今日ではオンライン上でも円滑なコミュニケーションが可能になっています。 これらのツールの基礎にあるのが「共同編集」のテクノロジーです。本記事ではこの技術に焦点を当て、その仕組みと主にフロントエンドでの実用例について紹介します。 記事の前半では、リアルタイムな共同編集に用いられる技術やアルゴリズムについて、発展の歴史とあわせて紹介します。解説用のコードにはJavaScriptおよびTypeScriptを使用しますが、フロントエンドエンジニアに限らず共同編集の仕組みについて気になる読者が知識を深めるきっかけとなるはずです。 さらに後半ではフロントエンドの開発者目線で、前半で紹介した技
この記事で使用している画像は、公式の github から引用したものです。今回、あまりにも数が多いため引用リンクは省略しています。一部、自身で撮影したものもあります。 ファイル Recent Files ★★★ 最近開いたファイルの一覧を表示してくれるプラグイン。何故これがデフォルトで無いのかがよくわからない。絶対に入れておきたい。 Auto Template Trigger ★★★ 新しいノートを作成する際にテンプレートを選択して挿入できるプラグイン。ノートを書く敷居を下げてくれるので重要。 Quick Explorer ★★★ エクスプローラー機能を強化するプラグイン。ノートが増えてくると非常に便利。 Tag Wrangler ★★★ Tag pane から rename や merge などができるようになるプラグイン。 Quick Switcher++ ★★ ファイル移動のプラグイ
👻 GhostText — Use your text editor in the browser
• Use your text editor in the browser Whenever you’re writing more than a little snippet of code anywhere on the web, activate GhostText to open your preferred text editor and enjoy your own development environment. Installation GhostText is a browser extension that connects to your editor via its own extension. Install both extensions and, if necessary, start the GhostText server in the editor’s
実践的Djangoプロジェクトの設計―開発・運用が楽になる設定ファイルを書こう！ アンチパターンとベストプラクティス｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧実践的Djangoプロジェクトの設計―開発・運用が楽になる設定ファイルを書こう！ アンチパターンとベストプラクティス 実践的Djangoプロジェクトの設計―開発・運用が楽になる設定ファイルを書こう！ アンチパターンとベストプラクティス Pythonで広く利用されているWebアプリケーションのフレームワークにDjangoがあります。Djangoで開発を始める際に、プロジェクトの設定ファイルをどのように記述すれば運用が楽になるのか。『Python実践レシピ』の著書もある筒井隆次（ryu22e）さんによる寄稿です。 Djangoは、Python製のWebアプリケーションフレームワークです。もともとニュースサイトを管理する目的で開発が始まり、2005年7月にOSSとしてリリースされました。 Python Software Foundation（PSF）による調査「P
Reactアプリを作成 Material-UIで管理画面を作るためのベースとなるReactアプリを作成します。 Create React App Create React Appで新しいReactアプリを作成します。 npx create-react-app react-material-ui-sample --typescript プロジェクトのディレクトリへ移動して実行します。 cd react-material-ui-sample npm start ブラウザにReactアプリが表示されます。 ディレクトリ構成 ディレクトリはあまりネストさせすぎずシンプルな構造にしました。コンポーネントの分け方はAtomic Designを参考にしています。 src/ ├ components/ │ └ atoms/ # 原子（個々のパーツ） │ └ molecules/ # 分子（原子の集合体）
Go 製 UI ツールキット Fyne で始めるクロスプラットフォーム GUI アプリケーション開発 · Yutaka 🍊 Kato
こうやって分類すると、fyne というのはいったい何者なのだと思いませんか？ そう思ったわたしは実際に試用してみて気に入り、社内で使う簡単な GUI アプリの開発に採用、ほんの一瞬で目的通りのアプリを実際に作れてしまいました。 作ったアプリはのちほど紹介しますが、まずは基本的な使い方と多くの人が遭遇するであろうハマりポイントをいくつか紹介したいと思います。 ただし、現状 Go の GUI 領域はまだまだ発展途上です。Fyne においてもデータバインディングやアニメーション機能が未提供だったりと GUI ツールキットとしては大穴があいているのも事実。限界を承知の上で、過度に期待せずに読んでいただけたらと思います。 はじめかた 既に Go 言語の開発環境は整っている前提で始めたいと思います。整っていない方は Getting Started してください。 では早速コードから。”Hello, w
【2024年夏】ブラウザ拡張機能開発を加速するフレームワーク・ツール3選をコードベース付きで紹介！
本記事では、ブラウザ拡張機能開発を加速させる、個人的に注目な3つの拡張機能開発フレームワーク・ツール（WXT、Plasmo、Extension.js）を紹介します。 サンプル拡張機能の実装を通して、それぞれの特徴、セットアップ方法、実際の開発フローを見ていきます。お好みの拡張機能開発ツールが見つかれば嬉しいです。 各フレームワーク・ツールの紹介 WXT WXTは、Viteベースのブラウザ拡張フレームワークです。次のような特徴を持っています（トップページから抜粋）。 クロスブラウザ対応 Chrome、Firefox、Edge、Safari、その他Chromiumベースのブラウザ Manifest V2、V3の両方に対応 開発モードでのHMRと、開発用ブラウザの自動起動 内部的にChrome Launcher等を使用 ファイルベースのエントリーポイントでマニフェストを自動生成 Nuxt風の自動
EngineeringHow we use Web Components at GitHubAt GitHub, we pride ourselves on delivering a first-class developer experience. A considerable part of our work is on our front end, which we strive to keep as lightweight, fast,… At GitHub, we pride ourselves on delivering a first-class developer experience. A considerable part of our work is on our front end, which we strive to keep as lightweight, f
(2021年5月13日追記) クリックタイミングによってdeeplウインドウが開くにくい問題を修正しました。(2020年12月26日追記) Kindle Cloud Readerの仕様変更により発生していたエラーに対処しました。旧版はgistに置いてあります。(2020年3月31日追記) DeepLの記事の方でニックさんにコメントいただいた内容で、コードがよりロバストになりました！ありがとうございました。 (2020年3月25日追記)より高品質な翻訳だと話題のDeepLを使ったブックマークレットを公開しました。ぜひお試しください:---kamiとかxodoを使えば英語pdfにgoog... これはKindle Cloud Readerがコピー対策のためにクリップボードへのコピーを無効にしているためにgoogle翻訳などのブラウザ拡張が使えなくてこまることへの対処でした。今回DeepL翻訳が
全デバイス・全ブラウザで PDF を読みたい - Kaizen Platform 開発者ブログ
TL;DR PDF を画面に埋め込む方法は、iframe, object, embed, Viewer（3rd party library の利用）がある。 ブラウザネイティブの PDF 表示機能はブラウザ差異が大きいため、PDF を canvas や svg に変換して表示するライブラリやビューアーを利用した方が安定する。 しかし 3rd party library / service の利用はバンドルサイズやランタイムでの変換にコストがかかるため、なるべくブラウザネイティブなやり方で PDF を開きつつ、一部ブラウザ向けに対してのみ 3rd party library/service 経由で表示するように分岐させたい。 どのブラウザならブラウザネイティブの機能が使えるかを調べるために、サポート範囲の全端末・全ブラウザで PDF の描画結果を比較・調査した。 はじめに 業務委託エンジニア
Figmaを使ってレビューすることが増えましたね。そんなレビューする人に向けて、とりあえずの使い方をまとめました。 レビュー等でデザインの確認を目的とした、主にViewer権限を持ったユーザー向けのFigmaの使い方についてまとめました。 Viewer権限でも細かく見ていくとざまざまな機能がありますが、ここでは必要な機能＋知っていると便利になる機能を紹介しています。 この記事では次の点にご注意ください。 ショートカットの表記でcmd/ctrlのようにスラッシュで区切られている場合、スラッシュの前がMac、後ろがWindowsの修飾キーを表します。 ショートカットはUSキーボードを基準としているため、JISキーボードだとキーコンビネーションが異なるかもしれません。（筆者はUSキーボードユーザーのため、JISでの確認はしていません）。 ブラウザ版の利用を想定しています。 Figmaアカウントは
These 12 tips show you how to take better notes in Microsoft OneNote. Today, digital note-taking is as much about skill, as it is about the tool. Everyone takes notes, but many people don’t know how to do it properly. While notes provide a written record of the information you want to remember, the value of note-taking depends on how you paraphrase, organize, and make sense of the material. Whatev
試した方がいいGoogle Chrome experiments はじめに Chromeデベロッパーツールは、ウェブ開発者間で最も使われているツールの1つです。しかし、ほとんどの開発者が知らない素晴らしい機能があります。 この記事では、すべての開発者が試すべきChromeデベロッパーツールの実験的機能トップ5について説明します。 1. CSS Overview - すべてのスタイルの詳細情報を表示する CSS Overviewは、ウェブページで使われているすべてのスタイルの概要を表示します。 この機能は、色、フォント、メディアクエリ、未使用の宣言に関する詳細情報を含んでいます。UIにCSSの修正を加える時に便利で、カラーピッカーなどのサードパーティツールを使う必要がなくなります。 ChromeデベロッパーツールのCSS Overviewタブ この機能を有効にするには Google Chro
この記事では、これまでのCSSコーディングの悩みを解決できるかもしれない最新テクニック24個をまとめてご紹介します。 コピペで利用できるテクニックを中心に、実際の問題点や新しい解決案を、実用的なサンプル参考例を確認、プレビューしながら新しいCSSテクニックに触れてみましょう。 ただし、実験段階のプロトタイプも含まれているので、一部ブラウザでは非表示のケースもあります。実装するときは、対応ブラウザの確認を行いましょう。 前回までのお役立ちCSSテクニック集がこちら、少しずつ増えてます。 よくあるWeb課題をCSSで乗り切る！知っておきたい最新テクニック20選 よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 コンテンツ目次 1. background-imageによる実用アニメーションサンプル集 2. 無限
管理画面を作るフレームワークrefineを使って、Next.jsで管理画面を作ってみた | DevelopersIO
管理画面って作るのめんどくさくないですか？そんなわけでrefineを使ってみました。 refineは、管理画面を作成するためのReactベースのフレームワークです。refineを使ってNext.jsな管理画面を作ってみました。 管理画面って作るのめんどくさくないですか？ 管理画面は一般的に、データのCRUD（Create, Read, Update, Delete）が行えるデータの管理画面として使われることが多いです。 そうすると、一覧画面があって、データの登録画面があって、データの編集画面があって、データの削除画面があって、データの詳細画面があって…、という感じで大体似たような画面を作ることになります。 そういった手間を軽減するために、refine を試してみました。 refine は、管理画面を作成するためのReactベースのフレームワークです。 refine | Open-sourc
WebKit Features in Safari 16.4
Mar 27, 2023 by Patrick Angle, Marcos Caceres, Razvan Caliman, Jon Davis, Brady Eidson, Timothy Hatcher, Ryosuke Niwa, and Jen Simmons ContentsWeb Push on iOS and iPadOSImprovements for Web AppsWeb ComponentsCSSHTMLJavaScript and WebAssemblyWeb APIImages, Video, and AudioWKWebViewDeveloper ToolingWeb InspectorSafari Web ExtensionsSafari Content BlockersNew Restrictions in Lockdown ModeMore Improve
iOSDC2021で14年前にObjective-Cで書かれた2tch（にたち）のコードがコンパイル，実行できるか？というチャレンジをアンカンファレンスとして発表しました．Zoomで開催し，最大100人が参加する事態となり，色々なことが話題になりました． １．Subversionって知ってますか． ２．_synthesizeってなんだよ． ３．あぁ・・・id型で全部よかったんだ・・・・・． ４．Trueじゃなくて，YESね ５．releaseとautorelease ６．ARC？なにそれ，型あんの？ ７．Perlって知ってる？ 全部，答えられたら，あなたも古参です．また，高校時代に2tchを使ってくれていた@freddiさん が登場し，感涙するなど・・・・．まさにAAなしでは語りきれない盛り上がりになりました（ってか高校時代・・・・・？14年前だと当時高校生でも今30歳だもんね・・・・・）
前回はFigmaを使うべき理由を説明しました。連載の2回目となる本記事では、Figmaの基本的な使い方を説明します。 今回の記事ではデザインツールを使ったことのない人向けに知ってほしいこと、Figmaの画面説明やレイヤーの設置・編集方法といったFigmaでUIモックを作るための機能について説明します。 SketchやAdobe XDのようなデザインツールの基本的な使い方に慣れている方は、この記事を飛ばして次回の記事を読み進めることをおすすめします。 UIモックを作るにあたって 本連載は主にソフトウェアエンジニアを対象にしています。そこで、UIデザインツールを使ったことのない人に知ってほしいことをお伝えしておきます。 基本的に（凝ったデザインでなければ）UIモックはシェープとテキストといったレイヤーで構成されています。シェープは四角形や円形などの形状をもつもの、テキストは文字通り文字を示して
What's New In DevTools (Chrome 94) | Blog | Chrome for Developers
Use DevTools in your preferred language Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language! Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools. Preferences" width="800" height="494"> Chromium issue: 1163928 New Nest Hub devices in the Device list You can now simulate the dimensions of Ne
Announcing Support for Native Editing of Jupyter Notebooks in VS Code - Python
Announcing Support for Native Editing of Jupyter Notebooks in VS Code With today’s October release of the Python extension, we’re excited to announce the support of native editing of Jupyter notebooks inside Visual Studio Code! You can now directly edit .ipynb files and get the interactivity of Jupyter notebooks with all of the power of VS Code. You can manage source control, open multiple files,
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
純ジャパ文系エンジニアが語る海外で1XXX万円稼ぐ英語術
5年かけて作ったウェブアプリを Hacker News に投稿し、最初の1ドルを得た話
新しいマークダウンパーサーが必要な理由 | NHN Cloud Meetup
Google、URL短縮サービス「goo.gl」を2025年8月に完全終了へ
共同編集を支える技術とライブラリの活用 - ICS MEDIA
【Obsidian】2023 年でオススメのプラグイン 66 選
React + Material-UIで管理画面を作成してみた | DevelopersIO
How we use Web Components at GitHub
Kindle Cloud Readerで洋書を読む時にDeepL翻訳を使う | せかいらぼ
デザインの確認などレビューする人向けにFigmaの使い方をまとめました。 | DevelopersIO
11 Tips to Take Better Notes With Microsoft OneNote
すべての開発者が知るべきGoogle Chromeの隠れた機能5選 - Qiita
【CSS】あっという間に悩み解決！新常識な最新テクニック24選
14年前の2tchのソースコードをコンパイルできるか？｜sonson
ウェブ・アプリエンジニアのためのFigma入門 (2) Figmaのキホン | さくらのナレッジ