Concepts
This commit is contained in:
Aleks Rūtiņš
parent
2a18050a14
commit
bdbe803b70
7 changed files with 114 additions and 25 deletions
|
|
@ -22,6 +22,7 @@ body {
|
|||
background-attachment: fixed;
|
||||
background-color: var(--color-bg-3);
|
||||
background-size: 100vw 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -133,21 +134,17 @@ main {
|
|||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
margin-top: 25px;
|
||||
border-top: 1px solid var(--color-text);
|
||||
}
|
||||
|
||||
footer a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
footer {
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
li:not(:first-child) {
|
||||
padding-top: 8px;
|
||||
}
|
||||
29
components/nav-links.html
Normal file
29
components/nav-links.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<nav>
|
||||
<a [href]="back">BACK</a>
|
||||
<a href="/">HOME</a>
|
||||
<a [href]="next">NEXT</a>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-theme-1);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition-property: border-color;
|
||||
transition-duration: .5s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-color: var(--color-theme-1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<a [href]="href">
|
||||
<span><slot></slot></span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path font-weight="bold" stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
|
||||
|
|
@ -8,7 +8,10 @@
|
|||
|
||||
<style>
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -20,10 +23,7 @@
|
|||
transition-duration: .5s;
|
||||
}
|
||||
a span, a svg {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
a svg {
|
||||
float: right;
|
||||
display: block;
|
||||
}
|
||||
a:hover {
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
<main>
|
||||
<slot></slot>
|
||||
<footer>
|
||||
© 2024 Aleks Rūtiņš
|
||||
<p>© 2024 <a href="https://farthergate.com">Aleks Rūtiņš</a></p>
|
||||
<p>Built with <a href="https://cheetah.farthergate.com">Cheetah</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,30 @@
|
|||
<extends template="layouts/base.html" title="Concepts of Biocircuits"></extends>
|
||||
|
||||
[HOME](/)
|
||||
<nav-links next="/simplest-circuit.html"></nav-links>
|
||||
|
||||
# Concepts of Biocircuits
|
||||
|
||||
Hello
|
||||
Before we start designing circuits, we need to talk about **natural** (evolved) circuits and **synthetic** circuits.
|
||||
|
||||
- We often don't understand natural circuits, and even synthetic biocircuits often use components (such as certain proteins) that we don't fully understand.
|
||||
- Synthetic and natural circuits often use different design principles. In electronic circuits, for instance, interference is generally avoided, and a circuit is often designed to follow a relatively simple and traceable path; in natural circuits, by contrast, "crosstalk" and complex networks between components are common, and are used to do things that electronic circuits can't.
|
||||
- There's a lot of noise and variation in biological processes. As mentioned above, some natural circuits take great advantage of this.
|
||||
- Electrical systems use positive and negative voltages and currents, which allow for positive and negative effects. Biocircuits are built out of molecules whose concentrations cannot be negative, so they have to use other ways of inverting effects.
|
||||
- From a practical standpoint, even with technologies like CRISPR, we have a very limited ability to construct, test, and compare designs of biological circuits. This is improving rapidly, though!
|
||||
|
||||
Because of these differences and challenges, biological circuit design is done using **phenomenological modeling**: modeling relationships at a high level, independent of underlying molecular details.
|
||||
|
||||
At a high level, biological circuit design can be approached the same way as electronic circuit design, but with a different set of components: instead of wires, resistors, transistors, and the like, biocircuits use DNA, RNA, and proteins.
|
||||
|
||||
Again, though, even though we know a lot about biocircuit design, there are still a lot of fundamental things that we don't know, such as:
|
||||
|
||||
- What does each circuit do for the cell? (functions, design principles)
|
||||
- What parts of the circuit do what? (mechanism)
|
||||
- How can we control cells in predictable ways using these circuits? (biomedical applications)
|
||||
- How can we design circuits for predictable behaviors in living cells? (synthetic biology & bioengineering)
|
||||
|
||||
In theory, natural and synthetic circuits _should_ share a common set of design principles. These principles are generally expressed as a statement: _Circuit feature X enables function Y_. We know a few already, but new ones are still being discovered.
|
||||
|
||||
That's the introduction. Onward - let's design a circuit!
|
||||
|
||||
<nav-links next="/simplest-circuit.html"></nav-links>
|
||||
|
|
@ -5,26 +5,64 @@
|
|||
<img src="/assets/biocircuitslogo.svg" alt="Biological Circuits" />
|
||||
</h1>
|
||||
<p class="tagline">for mere mortals</p>
|
||||
<p class="tagline">(albeit ones who know a bit of differential calculus)</p>
|
||||
|
||||
<p>
|
||||
<p class="fade">
|
||||
Biological circuit design is the science of abstracting <em>natural</em> biological processes by defining them
|
||||
as you would any synthetic circuit. It also allows us to create our own circuits out of natural components.
|
||||
As <a href="https://biocircuits.github.io">CalTech's open-source Biocircuits course</a> states:
|
||||
</p>
|
||||
|
||||
<blockquote>
|
||||
<blockquote class="fade fade2">
|
||||
Indeed, the marvelous progression of electronic circuit capabilities [...] could well describe biological circuits decades from now. Like electronics, we may will soon be able to program cellular “miracle devices” to create “little gadgets” that address serious environmental and medical applications.
|
||||
</blockquote>
|
||||
|
||||
<p>That CalTech course will be the main source for this presentation.</p>
|
||||
<p class="fade fade3">That CalTech course will be the main source for this presentation.</p>
|
||||
|
||||
<p>Let's dive in!</p>
|
||||
<p class="fade fade4">Let's dive in!</p>
|
||||
|
||||
<div class="fade fade5">
|
||||
<section-link href="/concepts.html">1. Concepts of Biocircuits</section-link>
|
||||
<section-link href="/simplest-circuit.html">2. The Simplest Circuit</section-link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
if(localStorage.getItem('faded'))
|
||||
document.querySelectorAll('.fade').forEach(it =>
|
||||
it.classList.add('no-delay'));
|
||||
localStorage.setItem('faded', true);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@keyframes fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.fade {
|
||||
opacity: 0;
|
||||
animation: fade .5s linear 0s 1 forwards normal;
|
||||
}
|
||||
.fade2 {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.fade3 {
|
||||
animation-delay: 4s;
|
||||
}
|
||||
.fade4 {
|
||||
animation-delay: 4.25s;
|
||||
}
|
||||
.fade5 {
|
||||
animation-delay: 4.5s;
|
||||
}
|
||||
.fade.no-delay {
|
||||
animation-delay: 0s !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -40,6 +78,7 @@
|
|||
|
||||
.welcome img {
|
||||
display: block;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<extends template="layouts/base.html" title="The Simplest Circuit"></extends>
|
||||
|
||||
[HOME](/)
|
||||
<nav-links back="/concepts.html"></nav-links>
|
||||
|
||||
# The Simplest Circuit
|
||||
Loading…
Add table
Add a link
Reference in a new issue